 # Rotate() weird behaviour

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.

``````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);
shape(triangle, i, j);

}
}
}
``````

starts off all right

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

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

1 Like

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?

2 Likes

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

You can solve it by not accumulating the rotations.

``````  for (int i = 0; i < 500; i+=50){
for (int j = 0; j < 500; j+=50){
fill(#567354);
pushMatrix();
translate(i, j);
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 3 Likes

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.

3 Likes

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…

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

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

pool = new HDrawablePool(400);
pool.autoParent(canvas)

.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…

1 Like

Try this:

``````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);
shape(triangle, i, j);
}
}
}

``````

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

So cool! And we learn something along the way.

My initial exploration of this:

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