Not sure why rotation isn't giving certain values

Processing Beginners
1

Okay so I’ve followed a tutorial on youtube for creating kaleidoscope type images which is from the following link https://www.youtube.com/watch?v=R3C2giDfmO8

the video is done in p5.js so im not surprised it hasn’t worked exactly as i thought it would.

can anyone help me understand why im not getting a regular pattern of rotation with this code?

float angle = 0;

void setup()
{
size(900, 900);
background(0);
}

void draw()
{

 translate(width/2, height/2);
  pushMatrix();
    
 
  scale(0.5);
  angle = 360 /12;
  for(float i = 0; i<12; i++){
  rotate(angle);
  
  if(mousePressed){
    noStroke();
    fill(255);
  ellipse(mouseX, mouseY, 5, 5);
  }
  
  }
  popMatrix();
}

There are minor differences between this sketch and the one in the video, namely that the drawing function is different and also the line ‘rotate(angle);’ has been changed from ‘rotate(angle*i);’ the latter produced even less regular patterns which did not seem desirable

I got a little bit closer to my desired result using the following

float angle = 0;
float angle2;
void setup()
{
size(900, 900);
background(0);
}

void draw()
{

 translate(width/2, height/2);
  pushMatrix();
    
 
  scale(0.5);
  angle = 360 /12;
  angle2 = 16*sin(radians(angle));
  for(float i = 0; i<12; i++){
  rotate(angle2);
  
  if(mousePressed){
    noStroke();
    fill(255);
  ellipse(mouseX, mouseY, 5, 5);
  }
  
  }
  popMatrix();
}

any help would be greatly appreciated and i hope this is an acceptable posting format, please inform me if theres anything i can do to improve that.

2

use radians () here

Chrisir

1 Like
3

you’re a genuis good sir, many, many thanks!

2 Likes
4

Hello,

Please format your code:
https://discourse.processing.org/faq#format-your-code

Your second example already uses radians() and you are well on the way:

image
image902×927 88.7 KB

If you work directly in radians you do not have to convert with the radians() function:

//angle = 360 /12;
angle = TWO_PI/12;

//angle2 = 16*sin(radians(angle));
angle2 = 16*sin(angle);

The above could be simplified.

There are resources(tutorials, references, examples, etc.) here:
processing.org

And ready to run examples with the Processing IDE:

image

For starters:
rotate() / Reference / Processing.org

:)