I have three shapes: the consecutive squares, the two triangles, and the lines forming a broken up border. The stroke weight of the squares is 2, of the triangles is 3, and the lines are set to 6. When the user clicks the mouse around the frame, tiny colorful cirlces appear where he/she pressed. The color of the circle is chosen randomly using the random function to fill using RGB. I have a conditional for when certain keys are pressed or not. When the user presses certain keys on the keyboard, the squares form different colored dark-to-light gradients. For example, if the user presses the ‘g’ key, the squares will form a green dark-to-light gradient. When no key is being pressed, the squares stay in a grayscale gradient. I have a variable assigned to make the colors of the squares in a gradient.

My code:

void setup(){
size(500,500);
background(142, 142, 142);
}

void draw(){
for(int i=100; i<375;i=i+25){
int k = i-125;
stroke(0);
strokeWeight(2);
if(keyPressed){
if(key==’g’ || key==’G’)
fill(k, (k+56), (k)); //green
else if(key==’p’ || key==’P’)
fill((k+60), (k+18), (k+85)); //purple
else if(key==’b’ || key==’B’)
fill((k+45), (k+20), (k+5)); //brown
else if(key==’y’ || key==’Y’)
fill((k+110), (k+95), (k+8)); //yellow
else if(key==’r’ || key==’R’)
fill((k+86), (k+4), (k+5)); //red
else if(key==’l’ || key==’L’)
fill((k+3), (k+12), (k+65)); //blue
else if(key==’o’ || key==’O’)
fill((k+125), (k+50), (k)); //orange
else
println(“Not a coded key”);
}
if(!keyPressed)
fill(k, k, k); //grayscale
rect(i, i, 50, 50);
}

fill(0);
stroke(255);
strokeWeight(3);
triangle(100, 165, 100, 400, 335, 400); //bottom triangle
triangle(165, 100, 400, 100, 400, 335); //top triangle

strokeWeight(6);
line(75, 75, 75, 250);
line(75, 75, 250, 75);
line(425, 425, 250, 425);
line(425, 425, 425, 250);

if(mousePressed){ //Click around to make tiny colored circles
noStroke();
fill(random(150, 255), random(150, 255), random(150, 255)); //lightcolors
// fill(random(0, 150), random(0, 150), random(0, 150)); //darkcolors
ellipse(mouseX, mouseY, 15, 15);
}
}