All about Data
What kind of structure does a CSV file have?
A simple table made of rows and columns. It works like a spreadsheet.
What is setup() used for?
It runs once at the beginning and sets up things like the canvas and starting values.
fill("red", 10);
rect(0,0,50,50);
fill() doesn’t take two separate argument types for a color name and transparency (text and number)
You need RGBA values or a single color with alpha, like fill(255,0,0,10).
What does an event like mousePressed() do?
It runs code only when the user clicks. Events let your sketch react to actions.
What does image(img, x, y) do?
Draws the image at a position on the canvas using its natural size.
How does a CSV indicate when one column ends and the next begins?
It uses a delimiter (usually a comma) to separate each column in a row.
r = random(255), b = random(255), g = random(255), a = random(255)
What does the background(r, g, b, a) command do?
background(r, g, b, a) fills the whole screen with a color made from those random red, green, blue, and alpha (opacity) values.
circle(xPos, yPos);
circle() needs three arguments (xPos, yPos, diameter). Here it only has two
What’s the purpose of an if statement?
It checks a condition (like mouse position or a variable value) and only runs code when that condition is true.
What is the purpose of loadImage()
It loads an image file from your project so you can draw it in your sketch.
What characters surround an array (in JSON or otherwise)?
Square brackets [ ]. They tell the computer “this is a list of values.
Why does the draw() function repeat?
It refreshes the screen 60x a second, allowing animation and live updates.
let nums = (1, 2, 3, 4);
Arrays use square brackets [], not parentheses.
Why do we use comments?
To explain our thinking so future-us (or teammates) can understand the code faster.
What does text("hello", width/2, mouseY) do?
Displays the word “hello” at the middle of the screen (x-axis) and wherever the mouseY position is.
Why is JSON better than CSV for complex or nested data?
JSON lets you store objects inside objects, arrays inside objects, and detailed structures, while CSV can only store flat tables.
JSON is advanced.
CSV is basic.
Why do we use variables in p5?
To store values (like positions, sizes, or colors) that can change as the sketch runs.
img = loadImage("cat.png"); inside setup()
Why does this fail?
Images may not finish loading in time. They should be loaded in preload() so they’re ready.
What happens when you forget a closing bracket }?
The code block never ends, so the computer gets confused and throws errors in places that don’t seem connected.
what does this code do?
if (mouseX > width/2) {
beats.play();} else {
beats.stop();}
It checks the mouse position.
If the mouse is past the halfway poin on the x-axis, the sound plays.
If the mouse is before that line, the sound stops.
A basic conditional controls the audio based on where the user moves the mouse.
How do you pull a single value from a CSV file in p5 after loading it?
You use table.getString(row, column) or table.getNum(row, column) or even table.get(row, col). This grabs one cell from the table like you’re reading a spreadsheet.
What’s one thing that must happen before you can draw anything?
You need a canvas (createCanvas()), or p5 has nowhere to display shapes or images.
for (let i = 0; i < 5; i++) {
ellipse(20, 20, 50);}
Why is this not doing what a loop usually should?
The loop repeats, but it's drawing the same ellipse in the same spot every time. A loop needs something (like xPos or yPos) that changes each cycle to make multiple shapes.
Why do programmers test often instead of waiting until the end.
Small errors are easier to spot early. Waiting makes debugging messy because problems stack on top of each other.
What does imageMode(CENTER) change?
It makes the image draw from its center instead of its top-left corner, which helps when positioning or rotating images.