Resources:

Shiffman - 1.3 Basics of Drawing - p5.js
Shiffman - 1.4 Color - p5.js
Shape Primitives
Bezier Shapes

The Coordinate System

Drawing is just one part of coding. There are lots of other things we'll need to learn, but drawing is a great place to start!

• As opposed to other environments or standard mathematical notation, p5 and most graphic environments display a particular coordinate system.
• The position of the (0, 0) coordinates point is on the top-left corner of the screen, the positive X axis goes right, and the positive Y axis goes down.
• Accordingly, angles are measured clockwise.

Shape Primitives

The basic shape primitive functions are triangle(), rect(), quad(), ellipse(), and arc(). Squares are made with rect() and circles are made with ellipse(). Each of these functions requires a number of parameters to determine the shape's position and size.

Bezier Shapes

The first two parameters for the bezier() function specify the first point in the curve and the last two parameters specify the last point. The middle parameters set the control points that define the shape of the curve.

Basic Styling

p5 has a nice, simple way of assigning styles. It's pretty different from other programming languages. The most important functions to know are stroke() and fill(). If you're familiar with Photoshop or Illustrator, these terms means exactly what you think. You can think of stroke() and fill() as functions for setting the current pen color. Set the stroke() to red (stroke(255, 0, 0);) and every subsequent shape you draw will have a red outline...until you change the stroke() to something else.

• background() sets the color of the window
• fill() sets the shape's fill color
• stroke() sets the shape's stroke color
• noFill() draws shapes with no fill color
• noStroke() draws shapes with no stroke


• strokeWeight() sets the shape's stroke thickness
• strokeCap() sets the shape of the endpoints
• strokeJoin() sets the shape of stroke joints


• ellipseMode() changes the way parameters are used to draw ellipses
• rectMode() changes the way parameters are used to draw rectangles

Color

There are a number of different ways to specify color in p5. By default, colors are determined in either greyscale or RGB. The parameter range is between 0-255, allowing 256 total possibilities per parameter. Why 256? It has to do with base-2 counting and efficient storage of bits. However, RGB is not the only way to control colors. You can change the input parameters to HSB mode using colorMode().

Exercise 1.0: Draw Some Shapes

Create a new directory (folder) in your local repository called "exercise_1". Inside that folder, create an index.html and a script.js file (remember the Getting Started page shows you how to create a minimal template to begin. In your script.js file, create a composition consisting of at least 4 different shapes, each with styling that is somehow unique. Use GitHub Desktop to commit and push your changes, and verify that they published to the web.