Access single object in an array

p5.js Coding Questions
1

Hi!

I’m struggling with something I guess is pretty simple. I’m building a sketch with an array of objects made of boxes. I’m looping through the array to display the boxes on the screen & to make the boxes spin.
But I’d like to do the 2 following things:

  1. make only 2 or 3 boxes to spin. I tried to remove the function turn from the for loop and write something like cubes[2, 6].turn (theta);but that did not work and I don’t understand why?
  2. And ultimately, I’d like to be able to select a random box and make it spin for a second or two, while the others stay still, then another random box would start spinning etc etc.

Could anyone point me into a direction for any of those 2 points?
Thank you!

Here is my full code:

let cubes = [];
let theta = 0;

function setup() {
  createCanvas(600, 600,WEBGL);
    for (let i=0; i < 10; i++){
    let x = 50;
    let y = 50;
    let z = 50;
  cubes[i] = new Cube(x, y, z);
  }
}

function draw() {
  background(220);
  for (let i=0; i < cubes.length; i++){
    let x = ( i * 70) - 250;
    push();
    translate (x, 0);
    cubes[i].show();
    pop();
    cubes[i].turn(theta);  
}
 
theta += 0.01;
  
 }

class Cube {
  constructor(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
  }

  show() {
    noStroke();
    ambientMaterial(0, 0, 255);
    pointLight(0, 0, 255, 0, 255, 0);
    box(this.x);
  }

  turn(angle) {
    this.angle = angle;
    if (second() % 2 == 0) {
        rotateX(angle);
    } 
  }
}
2

you don’t have rotate(theta) in draw()

also, you don’t use the class’s x and y. So we want this line in setup:
let x = i * 70 - 250;

cubes[randomNumber].turn(theta);

Full Code

let cubes = [];
let theta = 0;

function setup() {
  createCanvas(600, 600, WEBGL);
  for (let i = 0; i < 10; i++) {
    let x = i * 70 - 250;
    let y = 50;
    let z = 50;
    cubes[i] = new Cube(x, y, z);
  }
}

function draw() {
  background(220);
  for (let i = 0; i < cubes.length; i++) {
    cubes[i].show();
    if (i == 2 || i == 6) cubes[i].turn(theta);
  }

  theta += 0.01;
}

class Cube {
  //let x;

  constructor(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;

    this.angle = 0;
  }

  show() {
    push();
    translate(this.x, this.y, this.z);
    rotateX(this.angle);
    noStroke();
    ambientMaterial(0, 0, 255);
    pointLight(0, 0, 255, 0, 255, 0);
    box(this.x);
    pop();
  }

  turn(angle) {
    this.angle = angle;
    if (second() % 2 == 0) {
      //rotateX(angle);
    }
  }
}
3

Thanks! Actually the linelet x = i * 70 - 250;was used only for the translate() fonction. I defined the y and z in the class, but haven’t had the need to use them yet (I want the boxes to be in a row). Should I still use let x = i * 70 - 250; in setup() ?
That doesn’t seem to display properly the objects.
The spinning function now works the way I wanted! Thank you!

4

To use the full potential of a class it’s best to move
as much of what belongs to it into the class

2 Likes
5

Ok, thank you very much for the info!
The thing is, I still don’t manage to get the boxes in a single row with using the line let x = i * 70 - 250; being defined in setup();…!
Sorry for the trouble!

[EDIT] : It’s fine now. I declared a new variable in the class for the size of the box (instead of using “x” which is meant for the translate () fonction, and used it in the show() function).

Still struggling with the `random() function though!

My actual code looks now like this`now:

let cubes = [];
let theta = 0;


function setup() {
  createCanvas(600, 600, WEBGL);
  for (let i = 0; i < 10; i++) {
    let x = i * 70 - 250;
    let y = 0;
    cubes[i] = new Cube(x, y);
    
  }
}

function draw() {
  background(220);
  for (let i = 0; i < cubes.length; i++) {
    cubes[i].show();
    //let r = random (cubes);
    //cubes[r].turn(theta);
       
    if (i == 2 || i == 6) cubes[i].turn(theta);
  }

  theta += 0.01;
}

class Cube {
  

  constructor(x, y, b) {
    this.x = x;
    this.y = y;
    //this.z = z;
    this.b = b;

    this.angle = 0;
  }

  show() {
    push();
    translate(this.x, this.y);
    rotateX(this.angle);
    noStroke();
    ambientMaterial(0, 0, 255);
    pointLight(0, 0, 255, 0, 255, 0);
    box(this.b);
    pop();
  }

  turn(angle) {
    this.angle = angle;
    if (second() % 2 == 0) {
      //rotateX(angle);
    }
  }
}
1 Like
6 
let r =int( random (cubes.length));

You can transfer this line to mousePressed or keyPressed and then change r only when a key is pressed

2 Likes
7

We can also pass the array itself when calling random():
random(cubes).turn(frameCount * .01);

2 Likes
8

Sorry for the trouble, when I pass the array to random (), the random() function doesn’t seem to work?

let cubes = [];
let theta = 0;


function setup() {
  createCanvas(600, 600, WEBGL);
  for (let i = 0; i < 10; i++) {
    let x = i * 70 - 250;
    let y = 0;
    cubes[i] = new Cube(x, y);
       
  }
}

function draw() {
  background(255);
  for (let i = 0; i < cubes.length; i++) {
    cubes[i].show();
    random(cubes).turn(frameCount * .01);
     
    //if (i == 2 || i == 6) cubes[i].turn(theta);
        
  }
   theta += 0.01; 
}

class Cube {
  
  constructor(x, y, b) {
    this.x = x;
    this.y = y;
    //this.z = z;
    this.b = 50;

    this.angle = 0;
  }

  show() {
    push();
    translate(this.x, this.y);
    rotateX(this.angle);
    noStroke();
    ambientMaterial(0, 0, 255);
    pointLight(0, 0, 255, 0, 255, 0);
    box(this.b);
    pop();
  }

  turn(angle) {
    this.angle = angle;
    if (second() % 2 == 0) {
      
    }
  }
}
9

here is my version using my way r = int(random(cubes.length));

(and not gotoloops: random(cubes).turn(frameCount * .01);)

  • r is set once in setup().
  • Click mouse to change r.

Remark

You had this:
with random(cubes).turn(frameCount * .01); in a for loop, which is in draw() (executed 60 times per second), every cube rotates.
The random is called so often that for the human eyes all seem to rotate at once.
Bad.

Full Sketch

let cubes = [];
let theta = 0;

let r;

function setup() {
  createCanvas(600, 600, WEBGL);
  for (let i = 0; i < 10; i++) {
    let x = i * 70 - 250;
    let y = 0;
    cubes[i] = new Cube(x, y);
  }
  r = int(random(cubes.length));
}

function draw() {
  background(255);
  for (let i = 0; i < cubes.length; i++) {
    cubes[i].show();
    // random(cubes).turn(frameCount * .01);

    //if (i == 2 || i == 6) cubes[i].turn(theta);
  }
  theta += 0.01;

  // r =int( random (cubes.length));
  cubes[r].turn(frameCount * 0.01);
}

function mousePressed() {
  // console.log("here");
  r = int(random(cubes.length));
}

class Cube {
  constructor(x, y, b) {
    this.x = x;
    this.y = y;
    //this.z = z;
    this.b = 50;

    this.angle = 0;
  }

  show() {
    push();
    translate(this.x, this.y);
    rotateX(this.angle);
    noStroke();
    ambientMaterial(0, 0, 255);
    pointLight(0, 0, 255, 0, 255, 0);
    box(this.b);
    pop();
  }

  turn(angle) {
    this.angle = angle;
    if (second() % 2 == 0) {
    }
  }
}
2 Likes
10

Ok, I get it! Thank you so much!

1 Like