# How do you create an instance of an object and reference it eg. to rotate an object at a later time?

**URL:** <https://discourse.processing.org/t/how-do-you-create-an-instance-of-an-object-and-reference-it-eg-to-rotate-an-object-at-a-later-time/34067>\
**Category:** Beginners\
**Created:** [December 11, 2021, 11:33pm UTC](https://discourse.processing.org/t/how-do-you-create-an-instance-of-an-object-and-reference-it-eg-to-rotate-an-object-at-a-later-time/34067 "2021-12-11T23:33:12Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jmg007](https://avatars.discourse-cdn.com/v4/letter/j/dbc845/32.png) [@jmg007](https://discourse.processing.org/u/jmg007)\
**Post date:** [December 11, 2021, 11:33pm UTC](https://discourse.processing.org/t/how-do-you-create-an-instance-of-an-object-and-reference-it-eg-to-rotate-an-object-at-a-later-time/34067/1 "2021-12-11T23:33:12Z")

</div>

Hi,  
I’ve loaded in a 3d model and I looked at the p5 docs for rotating the model and one of the functions is:

```auto
function draw() {
  background(200);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  model(octahedron);
}

```

That works - but how do you keep a reference to that model so you can change the position, rotation, etc at a later time eg. with a button press.

Thanks.

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [December 12, 2021, 3:09pm UTC](https://discourse.processing.org/t/how-do-you-create-an-instance-of-an-object-and-reference-it-eg-to-rotate-an-object-at-a-later-time/34067/2 "2021-12-12T15:09:36Z")

</div>

Hi @jmg007,

Welcome to the forum! 😉

> [@jmg007](#):
>
> but how do you keep a reference to that model so you can change the position, rotation, etc at a later time eg. with a button press.

Do you mean rotating the `octahedron` alone and not the whole scene?

For that you might want to use [`translate()`](https://p5js.org/reference/#/p5/translate) and the rotate functions in conjunction with [`push()`](https://p5js.org/reference/#/p5/push) and [`pop()`](https://p5js.org/reference/#/p5/pop) to only affect your model.

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [December 13, 2021, 2:52am UTC](https://discourse.processing.org/t/how-do-you-create-an-instance-of-an-object-and-reference-it-eg-to-rotate-an-object-at-a-later-time/34067/3 "2021-12-13T02:52:20Z")

</div>

Everything drawn in p5.js is drawn in [“immediate mode”](https://en.wikipedia.org/wiki/Immediate_mode_(computer_graphics)), which means that shapes drawn to the canvas don’t have any persistent representation that can be moved around. Instead you have to manage clearing the canvas and redrawing your various shapes when parameters change such as there position or rotation.

Technically in your example the `octahedron` variable is a reference to the “model” but that only includes the raw geometry data, not the rotation, materials, or an other parameters used to draw it.

---

<div class="post-metadata">

**Author:** ![rapatski](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rapatski/32/5164_2.png) [@rapatski](https://discourse.processing.org/u/rapatski)\
**Post date:** [December 17, 2021, 6:20am UTC](https://discourse.processing.org/t/how-do-you-create-an-instance-of-an-object-and-reference-it-eg-to-rotate-an-object-at-a-later-time/34067/4 "2021-12-17T06:20:33Z")

</div>

Hi @jmg007, welcome!

The answer you’re probably looking for is classes. What you can do is create an “Octahedron” class, which has its own properties that it stores. You create instances of this class that each have their own set of parameters (like position, rotation, colour, and can store its own set of data, like a 3d model)

Below an example of a cube class, that just stores data. You can also add actual functions to the class, like a “rotate()” method that adds a few degrees to its rotation variable, or a “display()” method that actually draws the cube (or in your case, octahedron).

```auto
class Cube
{
  float posX, posY;
  float size;
  float rot;
  
  color col;
  
  Cube(float _posX, float _posY, float _size, float _rot)
  {
    posX = _posX;
    posY = _posY;
    size = _size;
    rot = _rot;
    
    col = color(255);
  }
}

Cube cubeA, cubeB, cubeC;

void setup()
{
  size(1200, 800, P3D);
  
  cubeA = new Cube(300, 400, 100, 0);
  cubeB = new Cube(600, 400, 200, 0);
  cubeC = new Cube(900, 400, 100, 0);
  
  frameRate(60);
  
}

void draw()
{
  // update
  
  cubeA.rot += 0.01;
  cubeB.rot += 0.02;
  cubeC.rot += 0.03;
  
  // draw
  
  background(0);
  noFill();
  
  // cube A
  pushMatrix();
  translate(cubeA.posX, cubeA.posY, 0);
  rotateZ(cubeA.rot);
  stroke(cubeA.col);
  box(cubeA.size);
  popMatrix();
  
  // cube B
  pushMatrix();
  translate(cubeB.posX, cubeB.posY, 0);
  rotateZ(cubeB.rot);
  stroke(cubeB.col);
  box(cubeB.size);
  popMatrix();
  
  // cube C
  pushMatrix();
  translate(cubeC.posX, cubeC.posY, 0);
  rotateZ(cubeC.rot);
  stroke(cubeC.col);
  box(cubeC.size);
  popMatrix();
  
  
}

```

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [December 17, 2021, 6:54am UTC](https://discourse.processing.org/t/how-do-you-create-an-instance-of-an-object-and-reference-it-eg-to-rotate-an-object-at-a-later-time/34067/5 "2021-12-17T06:54:08Z")

</div>

> [@rapatski](#):
>
> The answer you’re probably looking for is classes

While this is one solution, writing reusable code does not require the use of Object Oriented Programming. That said, it is a valid approach, but perhaps an example that is in the dialect that the original poster is using (p5.js) would be more helpful:

```javascript
class Cube {
  constructor(pos, size, delta, col) {
    this.pos = pos;
    this.size = size;
    this.rot = 0;
    this.delta = delta;
    
    this.col = color(col || 255);
  }
  
  update() {
    this.rot += this.delta;
  }
  
  display() {
    push();
    translate(this.pos.x, this.pos.y, 0);
    rotateZ(this.rot);
    stroke(this.col);
    box(this.size);
    pop();
  }
}

let cubeA, cubeB, cubeC;

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  
  cubeA = new Cube(createVector(-200, 50), 100, -0.02, 'red');
  cubeB = new Cube(createVector(50, -100), 150, 0.01, 'lime');
  cubeC = new Cube(createVector(200, 150), 75, -0.03, 'blue');
}

function draw() {
  // draw
  background(0);
  noFill();
  
  // update cubes
  cubeA.update();
  cubeB.update();
  cubeC.update();
  
  // display cubes
  cubeA.display();
  cubeB.display();
  cubeC.display();
}

```

---

<div class="post-metadata">

**Author:** ![rapatski](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rapatski/32/5164_2.png) [@rapatski](https://discourse.processing.org/u/rapatski)\
**Post date:** [December 17, 2021, 12:27pm UTC](https://discourse.processing.org/t/how-do-you-create-an-instance-of-an-object-and-reference-it-eg-to-rotate-an-object-at-a-later-time/34067/6 "2021-12-17T12:27:11Z")

</div>

Haha thanks Paul. Appreciated!