Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
void setup (){ //void setup allows to set basic parameters such as size and colour of the background
size (600,600); //size is how large the canvas is for the sketch, the numbers inside the parentheses are the width and length dimensions
background (0); //the background function sets the colour of the canvas, the number 0 inside the parentheses makes the canvas black
}
void draw () { //void draw is for beginning the procesisng sketch
rectMode(CENTER); //the rect function will draw a rectangle, enabling rectMode(CENTER) will ensure that the centre of the rectangle is drawn in the centre of the sketch
fill (255, 100, 0); //fill will change the colour of the rectangle, the three numbers correlate to RGB, where the first number controls red, the second number controls green, and the third controls blue. Since the sketch uses an orange rectangle, I mix green and red
noStroke(); //noStroke will ensure that no outline is present on the rectangle, as stroke is used later in the sketch to create lines and if noStroke isnt used, the sketch will apply an outline to the rectangle
rect(300, 475, 100, 250); //the 4 numbers inside the parentheses create the rectangle shape, the first two numbers create the point where the top left of the rectangle will be, while the last two numbers relate to width and length dimensions
rect(50, 600, 100, 200); //this creates the rectangle in the bottom right hand corner of the sketch
rect(550, 600, 100, 200); //this creates the rectangle in the bottom right hand corner of the sketch
stroke(138, 43, 226); //stroke controls the colour of lines drawn, the fill function doesn't affect lines. A specific mix of all three colours creates purple
strokeWeight(10); //the strokeWeight function controls the thickness of lines
line(150, 200, 450, 200); //the 4 numbers inside the parentheses create a line, the first 2 numbers are the first numbers of the x and y coordinates respectivley, and the last 2 numbers are the second numbers of the x and y coordinates.
stroke(138, 43, 226);
strokeWeight(10);
line(150, 250, 450, 250);
stroke(138, 43, 226);
strokeWeight(10);
line (150, 300, 450, 300); //the first three lines drawn create the three horizontal lines
stroke(138, 43, 226);
strokeWeight(10);
line(300, 150, 300, 350);
stroke(138, 43, 226);
strokeWeight(10);
line(225, 150, 225, 350);
stroke(138, 43, 226);
strokeWeight(10);
line(375, 150, 375, 350); //the next three lines that are drawn create the three vertical lines
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment