sketch.js

var red;
var green;
var blue;
var previousRed;
var previousGreen;
var previousBlue;

var song;
var keywidth = 50;
var keyheight = 300;
var x=50;

function setup() {
    song = loadSound('assets/cheer.wav');
    createCanvas(400, 400);
    noLoop();
}



    

function draw() {

    background(127);
    strokeWeight(2);
    stroke(previousRed, previousGreen, previousBlue);
    fill(previousRed, previousGreen, previousBlue, 127);
    rect(50, 50, keywidth, keyheight);
    rect(110,50, keywidth, keyheight);
    rect(170,50, keywidth, keyheight);
    rect(230,50, keywidth, keyheight);
    rect(290,50, keywidth, keyheight);
    
    stroke(red, green, blue);
    fill(red, green, blue, 127);
    rect( x, 50,keywidth, keyheight);


}

// When the user clicks the mouses
/*function mousePressed() {
    // Pick new random color values
    red = random(255);
    green = random(255);
    blue = random(255);
    song.play();

}*/

//when the user presses the keyboard
function keyPressed() {
    //random colors
    previousRed=red;
    previousGreen=green;
    preveiousBlue=blue;
    
    red = random(255);
    green = random(255);
    blue = random(255);
    if (keyCode==LEFT_ARROW){
        //redraw first rect
        x=50;
    }
    if (keyCode==RIGHT_ARROW){
        x=110;
    }
    if (keyCode==UP_ARROW){
        x=170;
    }
    if (keyCode==DOWN_ARROW){
        x=230;
    }
    //if (keyCode==SPACE){
      //  x=290;
    //}
    redraw();
    

}