# Rotate() weird behaviour

**URL:** <https://discourse.processing.org/t/rotate-weird-behaviour/15937>\
**Category:** Libraries\
**Created:** [November 29, 2019, 6:40am UTC](https://discourse.processing.org/t/rotate-weird-behaviour/15937 "2019-11-29T06:40:15Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![kalab](https://avatars.discourse-cdn.com/v4/letter/k/c2a13f/32.png) [@kalab](https://discourse.processing.org/u/kalab)\
**Post date:** [November 29, 2019, 6:40am UTC](https://discourse.processing.org/t/rotate-weird-behaviour/15937/1 "2019-11-29T06:40:15Z")

</div>

Hey folks,

So i have a simple block of code here where i am placing a bunch of triangles on the screen and rotating them randomly in multiples of 90 degrees at every draw. It starts off all right but tends to get a gradual rotation on its own which is not in multiples of 90.

```auto
PShape triangle;

void setup(){
  size(500,500);
  
  triangle = createShape(TRIANGLE, 0, 0, 50, 50, 50, 0);
    
}

void draw(){

  background(0);
  for (int i = 0; i < 500; i+=50){
    for (int j = 0; j < 500; j+=50){
      fill(#567354);
      triangle.rotate(radians((int)random(3)*90));
      shape(triangle, i, j);
      
    }
  }
}

```

starts off all right

but then after 5 odd minutes of running it goes crazy wrong

 ![im3](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f643ea3b27da29737ed7ac9fd6d6f78ef81769af.png)

Any ideas on why this is happening would be greatly appreciated.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 29, 2019, 8:03am UTC](https://discourse.processing.org/t/rotate-weird-behaviour/15937/2 "2019-11-29T08:03:03Z")

</div>

i not watch that 5 minutes, get headache after 5 sec.

but actually what you are doing might be that you rotate  
the triangle shape ( not the view or drawing )  
15.000.000 times per second, // ( sorry, not see the j+=50 )  
so 5min would mean 4.500.000.000 rotations.

can’t you make ONE,  
copy rotate to 4 different triangles  
and randomly choose one of these for draw?

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [November 29, 2019, 9:07am UTC](https://discourse.processing.org/t/rotate-weird-behaviour/15937/3 "2019-11-29T09:07:52Z")

</div>

I suspect some value is overflowing. Maybe it’s a float that increased too far.

You can solve it by not accumulating the rotations.

```auto
  for (int i = 0; i < 500; i+=50){
    for (int j = 0; j < 500; j+=50){
      fill(#567354);
      pushMatrix();
      translate(i, j);
      rotate(radians((int)random(3)*90));
      shape(triangle);
      popMatrix();
    }
  }

```

ps. what @kll suggests is more efficient, because you avoid rotations completely in the for loops, you just draw one shape out of four.

ps2. finding unexpected limits is cool 🙂

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [November 29, 2019, 11:39am UTC](https://discourse.processing.org/t/rotate-weird-behaviour/15937/4 "2019-11-29T11:39:19Z")

</div>

> [@kll](#):
>
> actually what you are doing might be that you rotate  
> the triangle shape ( not the view or drawing )  
> 15.000.000 times per second,

Actually not so many. The step is 50 in the for loops, so it’s just `100` rotations per frame, `100*60` rotations per second, `100*60*60*5 = 1_800_000` rotations in 5 minutes. Not much.

```
System.out.printf("Float.MAX_VALUE: %,f", Float.MAX_VALUE);

```

shows that a float can hold up to this value:

```
Float.MAX_VALUE: 340,282,346,638,528,860,000,000,000,000,000,000,000.000000

```

So not sure where’s the issue. I wonder if it is because the precision of floats is not the same for small and large values.

As a geeky curiosity, it wonder if there is a frame in which some shapes are correctly rotated and some are not 🙂 It would be a fun screenshot to have.

---

<div class="post-metadata">

**Author:** ![kalab](https://avatars.discourse-cdn.com/v4/letter/k/c2a13f/32.png) [@kalab](https://discourse.processing.org/u/kalab)\
**Post date:** [November 30, 2019, 11:46am UTC](https://discourse.processing.org/t/rotate-weird-behaviour/15937/5 "2019-11-30T11:46:20Z")

</div>

Hey you guys, Thanks a lot for those insightful replies. As for the design… just add frameRate(1); to the code there and it becomes a nice infinite ‘seconds’ clock… 🙂

But here is the code I am goingn for… I am using Joshua Davis’s hype to import an svg and place it in grid etc…

```auto
import hype.*;
import hype.extended.colorist.HColorPool;
import hype.extended.layout.HGridLayout;
import hype.extended.behavior.HRotate;

HDrawablePool pool;
HColorPool colors;
HCanvas canvas;

void setup(){
  size(640,384);
  H.init(this).background(#000000).autoClear(false).use3D(true);
  smooth();
  frameRate(1);
  
  canvas = new HCanvas().autoClear(true).fade(5);
  H.add(canvas);

  colors = new HColorPool(#ffffff, #000000);

  pool = new HDrawablePool(400);
  pool.autoParent(canvas)  
     .add(new HShape("svg3.svg"))
 
 
    .layout(
    new HGridLayout()
    .startX(40 )
    .startY(70)
    .spacing(80, 80)
    .cols(25)
    )
    
    .onCreate(
      new HCallback() {
        public void run(Object obj) {
          
          int i = pool.currentIndex();
          HShape d = (HShape) obj;
          d.enableStyle(false)
           .stroke(#000000)
           .strokeWeight(0.5)
           .anchorAt(H.TOP | H.LEFT)
           .size( 80)
           .rotate( (int)random(4) * 90 )
           
          ;
          d.randomColors(colors.fillOnly());
          
        }
      }
    )
    .requestAll()
  ;  
}

void draw() {
 
  H.drawStage();
  
  for (HDrawable d : pool) { 
    d.rotate( (int)random(4) * 90 );
  }
}

```

translate and rotate solves the problem yes! But I am using H.drawStage… so… it’s .drawing them all at once

I still want to use rotate on the shape… is there a way around to refresh the overflowing float value or something… also which float value are you exactly reffering to…? Sorry I am bit of an amateur coder…

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [November 30, 2019, 2:26pm UTC](https://discourse.processing.org/t/rotate-weird-behaviour/15937/6 "2019-11-30T14:26:06Z")

</div>

> [@kalab](#):
>
> I still want to use rotate on the shape… is there a way around to refresh the overflowing float value or something

Try this:

```auto
PShape triangle;

void setup()
  {
  size(500,500);
  //triangle = createShape(TRIANGLE, 0, 0, 50, 50, 50, 0);
  }

void draw()
  {
  background(0);
  surface.setTitle("Framerate: " + frameRate + "FPS");
  
  triangle = createShape(TRIANGLE, 0, 0, 50, 50, 50, 0);
  for (int i = 0; i < 500; i+=50)
    {
    for (int j = 0; j < 500; j+=50)
      {
      fill(#567354);
      triangle.rotate(radians((int)random(3)*90));
      shape(triangle, i, j);
      }
    }
  }

```

I will “refresh” shape each frame and fill() now works.

🙂

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [November 30, 2019, 2:46pm UTC](https://discourse.processing.org/t/rotate-weird-behaviour/15937/7 "2019-11-30T14:46:07Z")

</div>

> [@hamoid](#):
>
> finding unexpected limits is cool

So cool! And we learn something along the way.

My initial exploration of this:

```auto
PShape lines;

void setup()
  {
  size(600, 600);
  lines = createShape(LINE, 0, 0, 250, 250);
  }

void draw()
  {
  background(255);
  
  //println(frameCount);
  surface.setTitle("Frame rate: " + frameRate + " FPS");
  
  stroke(color(255, 0, 0));
  line(0, 0, 600, 600);
  line(600, 0, 0, 600);
  
  //lines = createShape(LINE, 0, 0, 250, 250); //Uncomment this to "refresh" each frame
  for (int i = 0; i < 100; i++)
    {
    lines.rotate(HALF_PI);
    lines.setStroke(0);
    shape(lines, width/2, height/2);   
    }

  //String s = nf(TAU, 1, 20);
  //println(s);
  }

```

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b62f227a819beb0c850be3077e0114a92e7ac96a.png)

🙂