# Access single object in an array

**URL:** <https://discourse.processing.org/t/access-single-object-in-an-array/41514>\
**Category:** Coding Questions\
**Created:** [March 29, 2023, 3:16pm UTC](https://discourse.processing.org/t/access-single-object-in-an-array/41514 "2023-03-29T15:16:27Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alesk1969](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alesk1969/32/8098_2.png) [@Alesk1969](https://discourse.processing.org/u/Alesk1969)\
**Post date:** [March 29, 2023, 3:16pm UTC](https://discourse.processing.org/t/access-single-object-in-an-array/41514/1 "2023-03-29T15:16:27Z")

</div>

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:

```auto
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);
    } 
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 29, 2023, 3:43pm UTC](https://discourse.processing.org/t/access-single-object-in-an-array/41514/2 "2023-03-29T15:43:36Z")

</div>

> [@Alesk1969](#):
>
> 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?

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;`

> [@Alesk1969](#):
>
> 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.

` cubes[randomNumber].turn(theta);`

**Full Code**

```auto
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);
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![Alesk1969](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alesk1969/32/8098_2.png) [@Alesk1969](https://discourse.processing.org/u/Alesk1969)\
**Post date:** [March 29, 2023, 3:55pm UTC](https://discourse.processing.org/t/access-single-object-in-an-array/41514/3 "2023-03-29T15:55:19Z")

</div>

> [@Chrisir](#):
>
> ```auto
> 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);
> }
> }
> }
> 
> ```

Thanks! Actually the line`let 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!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 29, 2023, 5:32pm UTC](https://discourse.processing.org/t/access-single-object-in-an-array/41514/4 "2023-03-29T17:32:02Z")

</div>

> [@Alesk1969](#):
>
> Actually the line`let 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).

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

---

<div class="post-metadata">

**Author:** ![Alesk1969](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alesk1969/32/8098_2.png) [@Alesk1969](https://discourse.processing.org/u/Alesk1969)\
**Post date:** [March 29, 2023, 6:25pm UTC](https://discourse.processing.org/t/access-single-object-in-an-array/41514/5 "2023-03-29T18:25:27Z")

</div>

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:

```auto
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);
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 30, 2023, 9:14pm UTC](https://discourse.processing.org/t/access-single-object-in-an-array/41514/6 "2023-03-30T21:14:18Z")

</div>

> [@Alesk1969](#):
>
> ```auto
> //let r = random (cubes);
> //cubes[r].turn(theta);
> 
> ```

```
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

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [March 30, 2023, 9:30pm UTC](https://discourse.processing.org/t/access-single-object-in-an-array/41514/7 "2023-03-30T21:30:18Z")

</div>

> [@Chrisir](#):
>
> `let r = int( random(cubes.length) );`

We can also pass the array itself when calling [**random()**](https://p5js.org/reference/#/p5/random):  
`random(cubes).turn(frameCount * .01);`

---

<div class="post-metadata">

**Author:** ![Alesk1969](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alesk1969/32/8098_2.png) [@Alesk1969](https://discourse.processing.org/u/Alesk1969)\
**Post date:** [April 5, 2023, 9:37pm UTC](https://discourse.processing.org/t/access-single-object-in-an-array/41514/8 "2023-04-05T21:37:50Z")

</div>

> [@Chrisir](#):
>
> `let r =int( random (cubes.length));`

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

```auto
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) {
      
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 5, 2023, 9:58pm UTC](https://discourse.processing.org/t/access-single-object-in-an-array/41514/9 "2023-04-05T21:58:00Z")

</div>

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**

```auto
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) {
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![Alesk1969](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alesk1969/32/8098_2.png) [@Alesk1969](https://discourse.processing.org/u/Alesk1969)\
**Post date:** [April 5, 2023, 10:11pm UTC](https://discourse.processing.org/t/access-single-object-in-an-array/41514/10 "2023-04-05T22:11:27Z")

</div>

Ok, I get it! Thank you so much!