Keyboard interaction

Example for Processing language, draw a circle and move with the keyboard arrows and change colour with R,G,B, C, M, Y or delete stroke with S
[p5js code canvas]
/*Example for Processing language, draw a circle and move with the keyboard arrows and change colour with R,G,B, C, M, Y or delete stroke with S*/

int x;
int y;
int r;
color c;
boolean drawStroke;

void setup()
{
size( 480, 320 );
smooth();
strokeWeight( 2 );

x = width/2;
y = height/2;
r = 80;
c = color( 255, 0, 0 );
drawStroke = true;
}

void draw()
{
background( 255 );

if ( drawStroke == true ) {
stroke( 0 );
} else {
noStroke();
}

fill( c );
ellipse( x, y, r*2, r*2 );
}

void keyPressed()
{
if ( key == CODED ) {
if ( keyCode == RIGHT ) {
x += 10;
} else if ( keyCode == LEFT ) {
x -= 10;
} else if ( keyCode == UP ) {
y -= 10;
} else if ( keyCode == DOWN ) {
y += 10;
}
}

x = constrain( x, r, width-r );
y = constrain( y, r, height-r );

}

void keyReleased()
{
switch ( key ) {
case ‘r’:
c = color( 255, 0, 0 );
break;
case ‘g’:
c = color( 0, 255, 0 );
break;
case ‘b’:
c = color( 0, 0, 255 );
break;
case ‘c’:
c = color( 0, 255, 255 );
break;
case ‘m’:
c = color( 255, 0, 255 );
break;
case ‘y’:
c = color( 255, 255, 0 );
break;
default:
break;
}
}

void keyTyped()
{
if ( key == ‘s’ ) {
drawStroke = !drawStroke;
}
}
[/p5js]

/* Example of a dragon image moving with arrows and changing colours with keys R, G, B*/

PShape s;
int x,y;

void setup() {
size(1200, 800);
// The file “dragon.svg” must be in the data folder
// of the current sketch to load successfully
s = loadShape(“dragon.svg”);
}

void draw() {
background(255);
shape(s, x, y, 200, 200);

}
void keyPressed()
{
if ( key == CODED ) {
if ( keyCode == RIGHT ) {
x += 10;
} else if ( keyCode == LEFT ) {
x -= 10;
} else if ( keyCode == UP ) {
y -= 10;
} else if ( keyCode == DOWN ) {
y += 10;
}
}

}

void keyReleased()
{
switch (key) {
case ‘r’:
s.enableStyle();
fill(255, 0, 0);
stroke(255,0,0);
s.disableStyle();
break;
case ‘g’:
s.enableStyle();
fill (0, 255, 0);
stroke(0,255,0);
s.disableStyle();
break;
case ‘b’:
s.enableStyle();
fill(0, 0, 255);
stroke(0,0,255);
s.disableStyle();
break;
default:
s.disableStyle();
break;
}
}
[/p5js][/p5js]