Workshop Overview
https://editor.p5js.org/

Things to try!

In the Hello World:

• Change the text to have your name
• Use a different background color (See https://www.w3schools.com/colors/colors_names.asp for the possible color names.)
• Add new text somewhere else on the canvas

In the Smiley demo:

• Change some colors
• Make the face, eyes, and/or nose bigger
• Add some freckles
• Change the ORDER of some statements (What happens if the call to draw the face is last?!)
• Change the sizes/placement of the sample shapes at the bottom

In the Flower demo:

• Change only the canvasSize variables.
• Change the flower height or width
• Try adding a bee 1 flowerWidth to the right of the top of the flower stem
  • This is abstract art, the “bee” can be a simple circle or oval. ;)
  • The top of the flower stem has variables for its X & Y coordinates: stemTopX and stemTopY

Implement the heart example

• Start with the diagram from the Getting Started page
• Draw out the layout in your notebook
• What shapes do you need?
• What are their coordinates/sizes?
• See a solution here

Design your own project!

Feel free to ask us for help at any point along the way!

Planning

1. Sketch out your vision on graph paper
2. Identify the major sub-shapes & colors
3. Label with coordinates (or with the math you want the computer to do to figure out the coordinates)

Implementation

1. Create a new p5.js sketch project
2. Set the canvas size in setup()
3. Set the background color in draw()
4. Start writing the code to draw the shapes you need.