9-10XIST
Colour Rectangles
size(640, 360);
noStroke();
background(204,204,255);//(215,222,226)
color inside = color(153, 0, 51);
color middle = color(255, 51, 51);
color outside = color(255, 178, 102);
// These statements are equivalent to the statements above.
// Programmers may use the format they prefer. Either using Hexadecimal or RGB.
//color inside = #660033;
//color middle = #FF3333;
//color outside = #FF99CC;
pushMatrix();
translate(40, 40); // translate(40,40) instead of (80,80)
fill(outside);
rect(0, 1, 280, 280);
fill(middle);
rect(60, 60, 180, 180); //40 to 60
fill(inside);
rect(110, 100, 80, 80); //60,90 to 110,100
popMatrix();
pushMatrix();
translate(360, 80);
fill(inside);
rect(0, 0, 250, 250);//instead of the size being 200,200
fill(outside);
rect(50, 60, 150, 150); //instead of (40,60,120,120)
fill(middle);
rect(80, 90, 80, 80);
popMatrix();
Code
Image
This code creates variables for the colours that are referred to in the program by name rather than by a number. The variables include “colour inside”, “colour middle” and “colour outside”. After declaring the RGB colours that the variables are referring to at the start of the code when creating the rectangles instead of fill(R, G, B), the code simply states fill(outside) or fill(inside) or fill(middle). This makes it easier to program the code where the same colours are needed throughout the program multiple times. On the code, I have made comments to show where I have made any modifications. I changed the colours of the squares, the sizing, the placement as well as the translation. I have also made a comment underneath the section where the colours are declared. I have also commented the Hexadecimals colours below the RGB codes to show that both forms work in Processing. The code uses the functions pushMatrix() and popMatrix() and rect().
​
(click the functions underlined to learn more about them)