Trying to get a better understanding of array loops

p5.js Beginners
1

Hi, I’m trying to get a better understanding of arrays at a basic level before I advance to using them with functions & classes, but I am struggling a little.

I wrote this:

let r;
let g;
let b;

let x;
let y;
let w;
let h;

let max = 60;
let colourB;
let colourC;
let rgb;
let s;

function setup() {
  frameRate(60);
  createCanvas(windowWidth, windowHeight);
  r = floor(random(40, 100));
  g = floor(random(40, 255));
  b = floor(random(40, 255));

  x = mouseX;
  y = mouseY;
  s = random(15, 25);
}

let history = [];
let points = [];

function draw() {
  r = floor(random(40, 100));
  g = floor(random(40, 255));
  b = floor(random(40, 255));
  background(150, 150, 150);

  fill(r, g, b);
  stroke(0);
  max = 10;
  x = mouseX;
  y = mouseY;
  s = random(15, 25);
  for (let i = 0; i < max; i++) {
    points.push(i);
    if (mouseIsPressed) {

      [i] = circle(x, y, s);
    }

  }
}

This only creates one circle, before giving the error Uncaught TypeError: undefined is not a function in Line 50 / Column 11

Why does this loop break?
Can you give me any tips for writing loops with arrays, or maybe some rules of thumb when writing loops with arrays? I’m trying to get my loops to work before incorporating them into functions and classes.

Thank you.

1 Like
2

hi! I think this line is a very specific syntax in recent Javascript (ES6)

      [i] = circle(x, y, s);

this means you unpack the array returned from circle and assign to i. For example, if circle were to return an array like [1, 2, 3], then i becomes 1

let [i] = [1, 2, 3]
console.log(i) // outputs 1

But I guess that’s not what you need here… (circle does return an object but not an array, and you rarely need this object) If you can share with us what you want to achieve with the code, perhaps we can give a better suggestion.

By the way,

  points.push(i);

will keep adding elements to the array every frame. So after some time, it will blow up :exploding_head: You need to empty the array once in a while (e.g., points = []) but again this is up to what you want to do.

What you can do with iteration is, for example

  • draw several shapes next to each other
  • draw a star
  • draw the trace of the mouse

and more.

3 Likes
3

Hi @micuat,

I’m just trying to build my intuition with array loops at a very basic level without additional functions, & classes.

For me, once I have a good understanding of array loops at a basic level, incorporating loops in functions, and classes of various complexity should be easier.

This is probably not the best way but what I’m trying to do is make a different coloured circle at each mouse click up to a maximum number. max = 10;

Another constraint is that background() is called in function draw() and not in function setup()

in terms of the shape, using ellipse(x,y,s,s) would give me the same result.

I assumed that I need an array to hold the number of ellipse objects, that will go up by one on each mouse click to a max of 10.

but because I’m not that good with arrays yet, I’m writing it out incorrectly, and I’m trying to find out why.

1 Like
4

You have a good intuition of what loops are, but I feel you are trying to do something rather complex. I recommend you to start with Dan’s tutorial, in which he explains how to draw shapes in a loop. It’s always good to start with something simple as it’s more rewarding and fun :slight_smile:

1 Like
5

I recommend you to start with Dan’s tutorial, in which he explains how to draw shapes in a loop.

I have watched those videos and I’m past those. I understand working with functions, and objects, but when I introduce arrays things get messy and I think it’s because I don’t understand arrays top to bottom.

I feel you are trying to do something rather complex.

So to be clear, I’m not trying to make this code work.

I’m just trying to understand why it breaks down. I’m going to assume it would work smoothly if additional functions were created

Either way, I appreciate the response. I guess this is one of those things you improve your understanding of as you code.

6

In Processing arrays are generally used to store objects we instantiate from a class.

In setup() we can use a for ( ; ; ) loop to fill an array w/ instances of a class if we know how many we’re gonna need.

And in draw() we use a for ( of ) loop to access those stored objects’ properties & methods.

The sketch below use a for ( of ) loop to invoke the method display() for each Ball object in the array balls[]:

It also calls back function createBall() every time we click the mouse inside the canvas and push() a new Ball instance into array balls[] until its length is 8.

Once the array is full each click now recycles a Ball instance from the head of the array back to its tail.

2 more sketch examples to check out:

4 Likes
7

@GoToLoop I have a few questions regarding the example if you don’t mind. I noticed you created the function for the array outside of draw, and you created a class.

My questions are:

  1. When making multiple instances of a shape, do you have to make a class/object? I assume it is easier to work with, but is it not possible with functions alone?

In terms of my beginner workflow, I start with generic shapes, and I try to build on them and expand them into functions. I feel like this is causing me difficulties, because I don’t have the complex structure of functions and classes in place. should I just start with a class from the beginning?

  1. In createBall() you create a constant b make it equal to MAX_BALLS & you shift the array or create a new ball. Could you expand on the logic as it looks a little advanced.
8

That’s the easiest approach. Having a class to represent both the properties (data) and all the actions (methods) we can do w/ those props. encapsulated inside the same structure makes things much easier & organized.

Well, you surely can! However, you’re gonna need multiple containers, like 1 array for each shape property; and have to track down the current index for those containers.

If you know you’re gonna need multiple copies of a shape, starting creating a class for it from the beginning makes sense.

Indeed it’s written in advanced style. But let’s try to simplify it.

The statement below:
const b = balls.length == MAX_BALLS && balls.shift() || new Ball;

is closely equivalent to:
const b = balls.length == MAX_BALLS? balls.shift() : new Ball;

which is called the conditional operator btW:

That statement can be further transformed into an if () / else structure like this:

var b;
if (balls.length == MAX_BALLS)  b = balls.shift();
else                            b = new Ball;

As you can notice by now, MAX_BALLS isn’t the actual value being assigned to variable b.

Instead it’s either an already existing Ball object returned by the Array::shift() method:

Or a completely new Ball object:

Depending on whether the Array::length reached value MAX_BALLS:

Either way, variable b stores a Ball object, which is then initialized/reset via method Ball::setXY() and then Array::push() back to the balls[] array:

In short, balls[] never gets bigger than MAX_BALLS.

An oldest Ball object is continuously being removed from the beginning (head) of balls[] and re-inserted back to its end (tail).

1 Like
9

I don’t like the phrase.

I mean there are arrays and there are loops (for example while loop or for-loop).

There are also loops you can use to work with arrays. But array loops…? No…

Links

Tutorial see Arrays / Processing.org for Arrays

Tutorial see Two-Dimensional Arrays / Processing.org for Two-Dimensional Arrays (grid / chess board)

Reference: see for / Reference / Processing.org for FOR (there are other loops)

reference page also has an array section for commands like append: Reference / Processing.org

1 Like
10

Sorry. I’m figuring it out as I go. I meant loops which contain arrays.

11

Hello @ADG,

Nothing to be sorry for! Nothing at all…

Google search for “Array Loops”

:)

12

No apologies needed……