Before you can start coding, you need to download processing. Once you’ve done that, open the Processing application and paste the code below into the Processing window.
This is the code that we started with. It can be found at DEV.
void setup() {
size(1000, 250);
}
void draw() {
scalingSquares(200); // we'll define this function next
// it'll be called once per frame
}
void scalingSquares(float n) {
if (n < 30) return; // don't draw squares that are less than 30x30
rect(0, 0, n, n); //
translate(n + 5, n / 8); // offset each square by itself + 5px
// and move each square down 1/8 to vertically align
//
scalingSquares(n * 0.75); // each square is 75% the size of the one before it
}
Hit the play button in the top left corner to see your code. It should look like this:
Pretty uninteresting, right? However, this is a great starting point for anyone to learn the basics of coding. If this is your first time using Processing, you likely have questions about what the code actually means.
Setting up your code
Every program in Processing starts with the setup. This defines the window size, background color, rules of the code, etc. The word void is a standard for coding in Processing and needs to go before each command section. The lighter phrases preceded by // are comments (simply there to help people understand the code) and do not affect the program. Following the name of each command section (void setup(), for example) is a set of curly brackets {} surrounding the entire section. Each line of code must end with a semicolon.
size determines the area of the window in pixels (the individual lights on the computer). It is in coordinates–the width is determined first, then the height. Try changing the numbers in your own code now.
background is a command used to change the color of the background (it should be the default gray now). It belongs in setup, but we will discuss this more in depth in the color section.
Ready to make it more interesting? Proceed to the next step!