Example 0: Make a circle

Example 1: Basic set up

As written in the p5 documentation for the “draw” function: "Called directly after  setup(), the draw() function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called.” Because the “fill” function in this code has three values created with the random() function, the fill is continuously randomized and there is no code here to stop the execution of the draw function.

The setup() function is called only once and defines initial properties such as the canvas size and color. The draw() function is used to add elements (such as shapes) to the canvas. As mentioned above, draw() executes continuously unless specified otherwise.

Example 2: Frame by frame movement

This “trail” is the result of the circle being drawn repeatedly with an x coordinate that increases by 1 each time. What looks like a “trail” is really the edge of the previously drawn circle seen repeatedly.

We can slow down the speed of the circle drawing using the frameRate() function. The default in p5 is 60; lowering this to 10 decreases the speed significantly.

Example 4: Making a row

Open sketching: Skyline

https://editor.p5js.org/nrattner/sketches/qEGTb2ua