Review

Open up a new sketch in the p5.js web editor. If you remember from last class, you’ll always need to set up your canvas and draw functions. I’ll set mine up to be the size of the browser window.

Generated Patterns

We previously looked at how to create simple shapes and arrange them throughout the page. Let’s look at how we can use programming to expedite the process and create mathematical compositions.

function setup() {

createCanvas(windowWidth, windowHeight);

noLoop();

}

function draw() {

background("white");

fill("blue");

noStroke();

ellipse(100, 100, 150, 150);

ellipse(300, 100, 150, 150);

ellipse(100, 300, 150, 150);

ellipse(300, 300, 150, 150);

}

This set up draws 4 blue circles on the page manually, by selecting their x and y coordinates. This can be expedited by creating an expression. If you remember from our earlier classes, you can use operators to add/subtract value.

function setup() {

createCanvas(windowWidth, windowHeight);

noLoop();

}

function draw() {

background("white");

fill("blue");

noStroke();

ellipse(100, 100+50, 150, 150);

ellipse(300, 100+50, 150, 150);

ellipse(100, 300+50, 150, 150);

ellipse(300, 300+50, 150, 150);

}

in the above, I use the + or addition operator to specify where the y coordinate is placed. Try playing around with some operators in other values and see what you get.

name	operator
addition	+
subtraction	-
multiplication	*
division	/

User-uploaded image: Screen+Shot+2019-03-27+at+9.51.53+PM.png

Division is especially useful when you want to center something to the page. You can divide things by 2 to place it in half of the document.

​​Review

​​Generated Patterns

Review

Generated Patterns