For my drawing machine, I started off with making a staircase of squares using a for loop, each square being exactly 25 pixels down and 25 to the right of the previous one. I then proceeded to add triangles on either side of the line of squares and made cornered borders made of two lines to enclose the squares completely. Within the for loop, I made the color of each square increase in RGB values so as to make a grayscale gradient.

When the mouse is pressed, a broken glass image pops up and the squares start to move around within the enclosed space.

The colors of the squares also change when certain keys are pressed: ‘a’ for an aqua gradient, ‘b’ for blue, ‘g’ for green, ‘o’ for orange, ‘p’ for pink, ‘r’ for red, ‘v’ for violet, ‘w’ for brown,  and ‘y’ for yellow.

Finally, when the ‘ENTER’ key is pressed, 50 tiny circles of random colors are placed randomly on the canvas.

 

Here is the code for my drawing machine:

 

PImage img;

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

void draw() {
background(142, 142, 142);

pushMatrix();
for (int i=100; i<375; i=i+25) {
int k = i-125;
stroke(0);
strokeWeight(2);
if (keyPressed) { //When specific keys are pressed, the cubes turn different colors
if (key==’a’ || key==’A’)
fill((k+8), (k+95), (k+85)); //aqua
else if (key==’b’ || key==’B’)
fill((k+3), (k+12), (k+65)); //blue
else if (key==’g’ || key==’G’)
fill(k, (k+56), (k)); //green
else if (key==’o’ || key==’O’)
fill((k+125), (k+50), (k)); //orange
else if (key==’p’ || key==’P’)
fill((k+100), (k+50), (k+75)); //pink
else if (key==’r’ || key==’R’)
fill((k+86), (k+4), (k+5)); //red
else if (key==’v’ || key==’V’)
fill((k+60), (k+18), (k+85)); //violet
else if (key==’w’ || key==’W’)
fill((k+45), (k+20), (k+5)); //brown
else if (key==’y’ || key==’Y’)
fill((k+110), (k+95), (k+8)); //yellow
else
fill (k, k, k); //grayscale
}
if (!keyPressed)
fill(k, k, k); //When no key is being pressed, the cubes remain in grayscale
if(mousePressed)
translate(random(-15,10), random(-15,10)); //While the mouse is pressed, the cubes move to random positions on the canvas
rect(i, i, 50, 50);
}
popMatrix();

fill(0, 0, 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);

img = loadImage(“broken glass.png”);
if(mousePressed) //When the mouse is pressed, the broken glass image will pop up
image(img , 0, 0, width, height);

if(keyPressed && (key == ENTER)){ //Press the ‘ENTER’ key to make tiny colored circles
for(int count=0; count<50; count++){
noStroke();
fill(random(150, 255), random(150, 255), random(150, 255));
ellipse(random(0, width), random(0, height), 15, 15); //11 circles will be drawn at random locations around the canvas
}
}
}

 

– Azka Mazher