# How can I rotate the Sketch in 3D while its drawing

**URL:** <https://discourse.processing.org/t/how-can-i-rotate-the-sketch-in-3d-while-its-drawing/25389>\
**Category:** Coding Questions\
**Created:** [November 13, 2020, 8:28am UTC](https://discourse.processing.org/t/how-can-i-rotate-the-sketch-in-3d-while-its-drawing/25389 "2020-11-13T08:28:29Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![ssdesign](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ssdesign/32/7221_2.png) [@ssdesign](https://discourse.processing.org/u/ssdesign)\
**Post date:** [November 13, 2020, 8:28am UTC](https://discourse.processing.org/t/how-can-i-rotate-the-sketch-in-3d-while-its-drawing/25389/1 "2020-11-13T08:28:29Z")

</div>

Hi,  
I am trying to draw points in 3D space and while the sketch draws it, I want to continuously rotate the sketch so that I can view the dots in 3D space.

Somehow I am not able to figure out how to do this.

Here is my code:

```auto
float dx, dy, dz,t; 
float ry; 
float r_step;
float sc;
void setup() {
  size(1000, 1000, P3D);
  dx = 0;
  dy = 0;
  dz = 0;
  t=0;
  ry = 0;
  r_step = 0.02;
  sc = 1.5;
  background(100);
  color(255);
  //noStroke();
}
void draw() {
  
  translate(width/2, height/2);
  pushMatrix();
  rotateY(ry);
  ry += r_step;
  popMatrix();
  dx = sin(t/5)*100+cos(t/8)*100+sin(t/15)*100;
  dy = cos(t/3)*100+sin(t/15)*100+cos(t/8)*100;
  dz = cos(t/15)*100+cos(t/4)*100+sin(t/3)*100;
  //ellipse(dx*sc, dy*sc, 5, 5);
  //translate(dx, dy, dz);
  strokeWeight(4);
  point(dx, dy, dz);
  t +=0.04; 
}

```

---

<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:** [November 13, 2020, 9:38am UTC](https://discourse.processing.org/t/how-can-i-rotate-the-sketch-in-3d-while-its-drawing/25389/2 "2020-11-13T09:38:04Z")

</div>

You had your popMatrix before drawing the point, that’s why it didn’t rotate.

- In fact, you don’t need pushMatrix and popMatrix here (Matrix is reseted at start of `draw()` anyway and no other things are drawn after `point()`), so I deleted them.
- But again, this results in rotate() still being in place when we draw the point; before, rotate weren’t working when we “stopped it” with popMatrix before drawing the point.

Actually, this project is not as easy as you think.

**Let me explain in steps:**

_Without_ background() at the start of draw(), everything is drawn on top of each other (which looks great by the way), so you can’t really see the graph because each point gets rotated differently.

So each point is effected by the formula and by the rotation for it.

```auto
float dx, dy, dz, t; 
float ry; 
float r_step;
float sc;

void setup() {
  size(1000, 1000, P3D);
  dx = 0;
  dy = 0;
  dz = 0;
  t=0;
  ry = 0;
  r_step = 0.02;
  sc = 1.5;
  background(100);
  color(255);
  //noStroke();
}
void draw() {
  // background(100);

  // rotate scene 
  translate(width/2, height/2);
  rotateY(ry);
  ry += r_step;

  // calc a graph 
  dx = sin(t/5)*100+cos(t/8)*100+sin(t/15)*100;
  dy = cos(t/3)*100+sin(t/15)*100+cos(t/8)*100;
  dz = cos(t/15)*100+cos(t/4)*100+sin(t/3)*100;
  t +=0.04;

  //display graph
  strokeWeight(4);
  point(dx, dy, dz);
}

```

OR **you use** background then you’ll see only **one** point all the time. Bad.

```auto
float dx, dy, dz, t; 
float ry; 
float r_step;
float sc;

void setup() {
  size(1000, 1000, P3D);
  dx = 0;
  dy = 0;
  dz = 0;
  t=0;
  ry = 0;
  r_step = 0.02;
  sc = 1.5;
  background(100);
  color(255);
  //noStroke();
}
void draw() {
  background(100);

  // rotate scene 
  translate(width/2, height/2);
  rotateY(ry);
  ry += r_step;

  // calc a graph 
  dx = sin(t/5)*100+cos(t/8)*100+sin(t/15)*100;
  dy = cos(t/3)*100+sin(t/15)*100+cos(t/8)*100;
  dz = cos(t/15)*100+cos(t/4)*100+sin(t/3)*100;
  t +=0.04;

  //display graph
  strokeWeight(4);
  point(dx, dy, dz);
}

```

Because of this **you need a while loop** that draws your ENTIRE graph every time from the beginning to see it developing.

You can stop the rotation when you hold a key

```auto
float dx, dy, dz, t;
int max_i=0; 

float ry; 
float r_step;
float sc;

void setup() {
  size(1000, 1000, P3D);
  dx = 0;
  dy = 0;
  dz = 0;
  t=0;
  ry = 0;
  r_step = 0.02;
  sc = 1.5;
  background(100);
  color(255);
  //noStroke();
}
void draw() {
  background(100);
  //lights();

  // rotate scene 
  translate(width/2, height/2);
  rotateY(ry);
  if (!keyPressed) 
    ry += r_step;

  // calc a graph 
  t=0;
  int i=0; 
  while (i<max_i) {
    dx = sin(t/5)*100+cos(t/8)*100+sin(t/15)*100;
    dy = cos(t/3)*100+sin(t/15)*100+cos(t/8)*100;
    dz = cos(t/15)*100+cos(t/4)*100+sin(t/3)*100;

    //display graph
    strokeWeight(4);
    point(dx, dy, dz);

    t +=0.04;
    i++;
  }
  max_i++;
}

```

This is getting slowly because he’s calculating everything again and again every time.  
And `sin` and `cos` are relatively slow.

**Remark**

To avoid this you could make an ArrayList of PVector, move the dx,dy,dz into it and display the ArrayList (using background of course):

- `ArrayList<PVector> listPV = new ArrayList(); `
- `list.add(new PVector(dx,dy,dz)); `
- `for (PVector pv : list) point(pv.x, pv.y, pv.z); `

You can pre-calculate for example 1000 values in setup() or add slowly in draw().

It’s a fantastic formula, what’s it called?

Warm regards,

Chrisir

---

<div class="post-metadata">

**Author:** ![ssdesign](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ssdesign/32/7221_2.png) [@ssdesign](https://discourse.processing.org/u/ssdesign)\
**Post date:** [November 13, 2020, 7:06pm UTC](https://discourse.processing.org/t/how-can-i-rotate-the-sketch-in-3d-while-its-drawing/25389/3 "2020-11-13T19:06:32Z")

</div>

> [@Chrisir](#):
>
> Chrisir

Hi Chrisir  
You are amazing. This is exactly what I wanted 🙂  
There is no name for this equation, I just made it up lol  
Lets call it “Squiddy\_3D”

I am going to work on it a little more and refine it further with ArrayList\<\> and add some color to it.  
Will post the update soon.

---

<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:** [November 13, 2020, 8:14pm UTC](https://discourse.processing.org/t/how-can-i-rotate-the-sketch-in-3d-while-its-drawing/25389/4 "2020-11-13T20:14:12Z")

</div>

- Library peasyCam would allow you to rotate freely with the mouse

- when you use sphere (decrease sphereDetail please, see reference) instead of point() you could use lights() and additionally make your points red (or even gradient based on your variable `t`, with something like `lerpColor()`, see reference).

- Because: Everything looks better with a small lights().

```auto
pushMatrix
translate(....
sphere(....
popMatrix();

```

---

<div class="post-metadata">

**Author:** ![ssdesign](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ssdesign/32/7221_2.png) [@ssdesign](https://discourse.processing.org/u/ssdesign)\
**Post date:** [November 14, 2020, 12:13am UTC](https://discourse.processing.org/t/how-can-i-rotate-the-sketch-in-3d-while-its-drawing/25389/5 "2020-11-14T00:13:05Z")

</div>

Thanks Chris, That’s exactly what I ended up doing 🙂  
I just posted the code here:  
https://www.openprocessing.org/sketch/1014485/embed/?

Thanks a lot for your help. Have attributed this thread and your profile 😃

---

<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:** [November 14, 2020, 9:08am UTC](https://discourse.processing.org/t/how-can-i-rotate-the-sketch-in-3d-while-its-drawing/25389/6 "2020-11-14T09:08:01Z")

</div>

Did you use lights ()?

---

<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:** [November 14, 2020, 10:30am UTC](https://discourse.processing.org/t/how-can-i-rotate-the-sketch-in-3d-while-its-drawing/25389/7 "2020-11-14T10:30:50Z")

</div>

Did you consider:

have a camera going through the figure?

Like going vertical up rotating around itself looking outward?

Or Following the line itself?

---

<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:** [November 14, 2020, 1:30pm UTC](https://discourse.processing.org/t/how-can-i-rotate-the-sketch-in-3d-while-its-drawing/25389/8 "2020-11-14T13:30:35Z")

</div>

**I made some changes**

Important: The way you do it you still use the sin / cos formula EVERY time for ALL particles. Bad. Instead calc those only once in the constructor and then just use the RESULT in display. Much faster.

You need to say lights or directionallight AFTER background at start of draw to have effect

- AND I improved the color bit

This is enough one in setup imho, not throughout: (saves a bit time)

```auto
  sphereDetail(8);
  noStroke();

```

**It’s getting slow because lights and sphere are heavy**

To reduce the numbers of spheres in the ArrayList you could increase the value you add to t or only add values to the ArrayList that have a certain distance to the previous entry

here

```auto

/*
Author: 
 With help from: Chris (https://discourse.processing.org/u/chrisir/summary)
 Processing forum discussion: https://discourse.processing.org/t/how-can-i-rotate-the-sketch-in-3d-while-its-drawing/25389
 */

ArrayList<Particle> particles = new ArrayList<Particle>();

float dx, dy, dz, t;
int max_i=0; 
float ry; 
float r_step;
float sc;
color c;
int variableName;

float a1 = random(3, 4);
float a2 = random(5, 7);
float a3 = random(4, 8);
float a4 = random(10, 12);
float a5 = random(12, 15);

void setup() {
  size(1000, 1000, P3D);
  t=0;
  ry = 0;
  r_step = 0.02;
  sc = 1.5;
  // colorMode(HSB);
  sphereDetail(8);
  noStroke();
}

void draw() {
  background(0, 0, 0);
  lights();
  // directionalLight(51, 102, 126, -1, 0, 0);

  // rotate scene 
  translate(width/2, height/2);
  rotateY(ry);
  if (!keyPressed) 
    ry += r_step;

  // Add 1 particle to array list
  particles.add(new Particle(t, c, a1, a2, a3, a4, a5));
  t += 0.04;

  // Display ALL particles
  for ( Particle part : particles ) {
    part.display();
  }
}

void mouseReleased() {
  // Reset and draw a new graph on mouse click
  reDraw();
}

void reDraw() {
  // Reset background
  // background(100);

  // Clear the ArrayList
  particles.clear();
  a1 = random(3, 4);
  a2 = random(5, 7);
  a3 = random(4, 8);
  a4 = random(10, 12);
  a5 = random(12, 15);
  variableName = 0;
  t=0;
}

// ================================================================================

class Particle {
  float dx, dy, dz, t;
  float x1, y1, z1; 
  int grains = 64;
  color c;    
  float a1;
  float a2;
  float a3;
  float a4;
  float a5;

  Particle(float tt, color cc, float aa1, float aa2, float aa3, float aa4, float aa5) {
    t = tt;
    c = cc;
    c=lerpColor( color(255, 0, 0), color(0, 255, 0), map(t, 0, 200, 0, 1)); 
    a1 = aa1;
    a2 = aa2;
    a3 = aa3;
    a4 = aa4;
    a5 = aa5;

    // Set x,y,z coordinates
    dx = sin(t/a2)*100+cos(t/a3)*100+sin(t/a5)*100;
    dy = cos(t/a1)*100+sin(t/a5)*100+cos(t/a3)*100;
    dz = cos(t/a5)*100+cos(t/a2)*100+sin(t/a1)*100;

    x1=dx;
    y1=dy;
    z1=dz;
  }

  public void display() {
    // Draw sphere
    pushMatrix();
    fill(c);
    translate(x1, y1, z1);
    sphere(7);
    popMatrix();
  }//method
  //
}//class
//

```

---

<div class="post-metadata">

**Author:** ![ssdesign](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ssdesign/32/7221_2.png) [@ssdesign](https://discourse.processing.org/u/ssdesign)\
**Post date:** [November 15, 2020, 12:32am UTC](https://discourse.processing.org/t/how-can-i-rotate-the-sketch-in-3d-while-its-drawing/25389/10 "2020-11-15T00:32:00Z")

</div>

> [@Chrisir](#):
>
> ```auto
> ArrayList<Particle> particles = new ArrayList<Particle>();
> 
> float dx, dy, dz, t;
> int max_i=0; 
> float ry; 
> float r_step;
> float sc;
> color c;
> int variableName;
> 
> float a1 = random(3, 4);
> float a2 = random(5, 7);
> float a3 = random(4, 8);
> float a4 = random(10, 12);
> float a5 = random(12, 15);
> 
> void setup() {
> size(1000, 1000, P3D);
> t=0;
> ry = 0;
> r_step = 0.02;
> sc = 1.5;
> // colorMode(HSB);
> sphereDetail(8);
> noStroke();
> }
> 
> void draw() {
> background(0, 0, 0);
> lights();
> // directionalLight(51, 102, 126, -1, 0, 0);
> 
> // rotate scene 
> translate(width/2, height/2);
> rotateY(ry);
> if (!keyPressed) 
> ry += r_step;
> 
> // Add 1 particle to array list
> particles.add(new Particle(t, c, a1, a2, a3, a4, a5));
> t += 0.04;
> 
> // Display ALL particles
> for ( Particle part : particles ) {
> part.display();
> }
> }
> 
> void mouseReleased() {
> // Reset and draw a new graph on mouse click
> reDraw();
> }
> 
> void reDraw() {
> // Reset background
> // background(100);
> 
> // Clear the ArrayList
> particles.clear();
> a1 = random(3, 4);
> a2 = random(5, 7);
> a3 = random(4, 8);
> a4 = random(10, 12);
> a5 = random(12, 15);
> variableName = 0;
> t=0;
> }
> 
> ```

Thanks,  
That looks really nice 🙂