Week 1 warmups

Code as instructions for drawing

An exercise inspired by the Conditional Design group. Read their manifesto and check out the archive of instructions and drawings. Check out knots, hatching, and convex city plan.

1. Break into partners. As a team, devise a set of instructions to create a drawing. Write out the instructions on paper provided.
2. Switch instructions with another pair. You create a drawing based on their instructions, and they create a drawing based on yours.

Hack the browser

1. Visit http://lauren-mccarthy.com/test/p5, you should see a p5 program running.
2. Right click on the drawing and choose "Inspect Element".
3. In the window that pops up, click on "Sources" in the gray bar at the top.
4. Click on sketch.js in the menu on the left, you should see some code show up on the right.
5. Try changing some of the numbers inside the parts where it says ellipse(), rect(), background(), and fill(). Press command+s or ctrl+s to save. Notice what happens in the browser window.
6. Try reloading the page. What happens? Why?

Play around

In the last part we realized we could mess with the code in the browser, let's look at how we can create this code ourselves from scratch.

1. Download the p5.js editor.
2. Try adding some of the lines of code from the list below into the places where it says setup() and draw(). Press the play button to run your code.
3. Can you figure out what each of the lines does? What is the difference between setup() and draw()?

createCanvas(w, h);

ellipse(x, y, w, h);

rect(x, y, w, h);

line(x1, y2, x2, y2);

triangle(x1, y1, x2, y2, x3, y3);

fill(g);

fill(r, g, b, a);

stroke(r, g, b, a);

strokeWeight(weight);

background(r, g, b, a);

random(max);

second();