Interactions with the keyboard

The interactions with the keyboard is probably the easy interaction after the mouse interaction

When we start the program, in the function setup() we decide that the face will be in the middle of the screen. Then in the function KeyPressed() (this function is called when a key is pressed) we have the orders to change the face position. From here, we only have to replace the old position for the newest. The new positions will depend of the key that you press. In this example, if this key is the “up arrow” the face will move upwards, and if you press any of the other arrows the face will be moving to where this arrow indicates, but you could also do that the face move upwards if you press the "W" key

var d = 200;
var X;
var Y;
//ball diameter
function setup(){
	createCanvas(windowWidth-10, 500);
	X = (windowWidth-10)/2;
	Y = 500/2;

}
function keyPressed(){

		if (keyCode==UP_ARROW){
			Y-=4;
		}
		if (keyCode==DOWN_ARROW){
			Y+=4;
		}
		if (keyCode==LEFT_ARROW){
			X-=4;
		}
		if (keyCode==RIGHT_ARROW){
			X+=4;
		}
	
}

function draw(){
//clear background
	background(100);
//draw face
	fill('#FCD0B4');
	ellipse(X,Y,d,d);
//draw eyes
	fill(0,0,255);
	ellipse(X-d/6,Y-d/7,d/5,d/5);
	ellipse(X+d/6,Y-d/7,d/5,d/5);
	fill(255,0,0,100)
	triangle(X, Y-d/20, X+d/12, Y+d/7, X-d/12, Y+d/7);

//draw mouth
	fill(255,0,0);
	arc(X,Y+d/4,d/2.5,d/4.5,0,PI,CHORD);
}