Topics Covered:

• Quick Review of Setup and Draw
• Data
• Variables
• Animating a shape using variables
• Comments
• Built in Variables (mouseX & Y)
• mousePressed() function

Video from Dave’s review on Sep 19

CodeFall2024-week2.mp4

Basics Setup and Draw P5 Functions

function setup() {
	createCanvas(400,400);
}

function draw() {
	background(220);
}

setup() happens once

draw() happens continuously, “in a loop”. So far we have not done anything that takes advantage of this getting called multiple times. We are doing the same thing every time so it is not noticeable we are looping. We need something that is varying over time in order to see changes.

When the background() command is run within the draw, not only does it display a background color, it also overwrites everything that was draw previously within your sketch. If you move the background() from the draw() to the setup() and you have things that change with each frame, you will notice that the past shapes that were drawn do not get erased by the sketch.

2D Shape P5 Functions