Homework Help for p5

p5.js Coding Questions
1

I need to answer these questions about the code below, and am having trouble understanding them…

  1. How many times does the loop body run each frame, once the x and y arrays are full?
  2. What are two ways of increasing the spacing between rings?
  3. How can you make the ellipse trail longer?

I also need to make the circles into squares with the same width and height, but I’m not sure where I can control the w and h.

Here’s what I’m working with:

function setup () {
createCanvas (400, 400);
}
var x = []; // new empty array
var y = []; // new empty array

function draw() {
  background(255);
  noFill();

  x.push(mouseX); // equivalent to append(x, mouseX)
  y.push(mouseY); // equivalent to append(y, mouseY)

  for (var i = 0; i < x.length; i = i + 10) {
    ellipse(x[i], y[i], 1 + (x.length - i));
  }

  x = x.slice(-50); // keep the last 50 x values
  y = y.slice(-50); // keep the last 50 y values
}
2

I’ll do my best to point you in the right direction. Let’s start with the first question.

This question is referring to the for loop in draw. The draw function runs continuously and each time it runs it creates a new frame.

So this question is asking how many times ellipse will be called. If you’re unfamiliar with how for loops work I suggest you check out Dan Shiffman’s video on the subject.

There a couple ways you could go about answering this question. One way is to do the math with pen and paper, but because we’re using a computer we can just have the computer do the math for us. console.log() will write a line of text to the console. Here’s an example of how you could use a counter and console.log()

var counter = 0;
for (var i = startValue; i < endValue; i = i + increaseValue) {
  // do stuff
  console.log("counter: " + counter);
  counter++; // short hand for counter = counter + 1;
}

Note: To see the console you’ll have to bring up the development tools in the browser (Ctrl + Shift + J / Cmd + Opt + J for Chrome). The p5.js web editor has a console built in.

The next two questions are a lot more open ended and there’s lots of solutions. I suggest you just make a just try changing things in the program. This will help you understand how it works and in the process you’re likely to figure out a couple of solutions. Don’t be afraid to break things you can always undo. Feel free to ask questions if something is confusing or you don’t understand an error.

Also check out the new square() function and rectMode() to work on the last step. The nice thing about learning to code is that feedback is very quick, so you can just add and remove code and run it to see if it works.

Best of luck!

3 Likes