Arrays

Tutorials
1

Now you know how to create variables and functions, and you know how to use for loops to repeat a block of code.

This is a companion discussion topic for the original entry at https://happycoding.io/tutorials/p5js/arrays
2

I think there is a typo extra } in the Creating an Array example:

let circleY = [10, 20}];
1 Like
3

Thanks, fixed!

4

Hey, for homework no.2, i tried this but there’s no trails…

let circleX = [],circleY = [];
function setup() {
createCanvas(600, 600);
}

function draw() {
background(220);
circleX[0] = mouseX;
circleY[0] = mouseY;

for (let i = 1; i < 25; i++) {

circleX[i] = circleX[i-1];
circleY[i] = circleY[i-1];
//print(circleX[i],circleY[i]);
}

for (let i = 0; i < circleX.length; i++) {
circle(circleX[i], circleY[i], 25);
}
}

5

The background() function should be inside the setup function and not inside the draw function.
This is causing it to reset the background every time the draw function is called. Hence your circles get hid by the background layer above them.

Try this:
let circleX = [],circleY = [];
function setup() {
createCanvas(600, 600);
background(220);
}

function draw() {
circleX[0] = mouseX;
circleY[0] = mouseY;

for (let i = 1; i < 25; i++) {

circleX[i] = circleX[i-1];
circleY[i] = circleY[i-1];
//print(circleX[i],circleY[i]);
}

for (let i = 0; i < circleX.length; i++) {
circle(circleX[i], circleY[i], 25);
}
}

6

not this reason i think? the purpose is to draw 25 circles every time. if move the background up and keep all the circles drawn, then there’s no need to use arrays…

Update: I think I found the solution… It seems we have to use frameCount and modulo operator… This is harder than i thought, wondering if we have a simpler solution?

let circleX = [],circleY = [];

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

function draw() {
background(220);
var pos = (frameCount-1) % 25;
circleX[pos] = mouseX;
circleY[pos] = mouseY;

for (let i = 0; i < circleX.length; i++) {
circle(circleX[i], circleY[i], 25);
}
}

Ref: javascript - Cursor trail algorithm for p5.js - Stack Overflow

7

Oh, my bad. I missed on that part for some reason.

Check this code out
simple implementation
let circleX = [],circleY = [];

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

function draw() {
background(220);
circleX.push(mouseX);
circleY.push(mouseY);
for(let i=circleX.length-1; i>=max(0,circleX.length-25);){
i-=1;
circle(circleX[i],circleY[i],25);
}
}

This code should work fine unless the sizes of the arrays get very large.

Update :-
You can check this code out. It uses splice to reduce the sizes of the arrays to length around 25. Hence, this code won’t have any slowdown or lag issues.

let circleX = [],circleY = [];

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

function draw() {
background(220);
circleX.push(mouseX);
circleY.push(mouseY);
if(circleX.length>=4000){
circleX.splice(0,circleX.length-26);
circleY.splice(0,circleY.length-26);
}
for(let i=circleX.length-1;i>=max(0,circleX.length-25);){
circle(circleX[i],circleY[i],25);
i-=1;
}
}
splice implementation

8

Thank you! One quick question, if use .push, how frequent it pushes values to the array? Is it one value per frame?

2 Likes
9

Yeah, it is one value per frame since we are using the push method inside the draw function.
Even when we don’t move our mouse, the current mouseX will get pushed to circleX every frame.

2 Likes
10

got it, thanks!

1 Like