Processing 1.0 - Processing Discourse - simple ellipse rotate z axis

4o2o

simple ellipse rotate z axis
Jun 27^th, 2009, 8:53am

Hi URGENT

I have to rotate a circular object (all intents and purposes an ellipse) around the central point continuously (rotate z axis). Although the code should be easy with all other simple shapes that has worked but processing refused my simple continuous (or on mouse press) ellipse rotate.
versions I have reworked

import processing.opengl.*;
ellipse (56, 46,55,55);
void setup() {
size(200, 200, OPENGL);
//shapeMode(CENTER);
s = loadShape(ellipse);}
void draw() {
background(0);
shape(s, mouseX, mouseY);
s.rotate(0.1);
}

reworked Ira greenberg's square rotation but should rotate around the centre but circles pendular 90 degrees rather than continuously rotating on the central axis - revolving.

void setup()
{
size(200,200);
noStroke();
fill(255);
frameRate(30);
}

float angle;
float cosine;
float jitter;

void draw()
{
background(102);

if(second()%2 == 0){
jitter = (random(-0.1, 0.1));
}
angle = angle + jitter;
cosine = cos(angle);

translate(width/2, height/2);
rotate(cosine);
ellipseMode(CENTER);
ellipse(56, 46, 55, 55);
}

simplest form

size(100, 100);
translate(width/2, height/2);
rotateZ(radians(60));
ellipse (56, 46, 55, 55);

works as a shape only :

float f = 0.0;
frameRate (30);
ellipseMode (CENTER_RADIUS);
smooth();

beginShape(POLYGON);
while(f < TWO_PI) {
vertex(width/2 + cos(f)*40, height/2 + sin(f)*40);
f += PI/12.0;
rotate (PI/2);
}
endShape();

simple - pls help urgent! tx

NoahBuddy

Re: simple ellipse rotate z axis
Reply #1 - Jun 28^th, 2009, 1:18am

If I understand from some of the code, you want to rotate around the mouse?
Code:

float angleInDegrees = 42;

void setup() {
  size(256,256);
  
  ellipseMode(CENTER);
}

void draw() {
  background(128);
  
  //start drawing from mouse position
  translate(mouseX, mouseY);
  
  //I convert degrees to radians, just because
  // my mind can keep track of degrees easier
  rotate( radians(angleInDegrees) ); 
  
  //wide so we can see it rotate
  ellipse(0, 0, 50, 25); //0,0 because the origin was moved to the mouse
  
  angleInDegrees += 2;
}

4o2o

Re: simple ellipse rotate z axis
Reply #2 - Jun 28^th, 2009, 3:56pm

thx "ORSUM"!

Would you explain which part of the syntax of the equation, "equates" to the continuous revolving of the object 360. UR code is syntaxically neat and clear but for process reasoning if you would explain your process method that would be particularly helpful. presumably "angleInDegrees +=2" but how would you get to the point of choosing that to create a 360 rotation on the central axis. PLS

Thx again for your help! ;P

blindfish

Re: simple ellipse rotate z axis
Reply #3 - Jun 28^th, 2009, 4:24pm

Here's my interpretation:

- Translate to mouseX,mouseY to ensure rotation occurs around the mouse position.
- Rotate to the value of 'angleInDegrees'. In the first loop this is 42 degrees (Why 42? The Meaning of life the universe and everything?)
- Draw the ellipse
- Add 2 to 'angleInDegrees'.

Note that

angleInDegrees +=2;

is just a shortcut to writing:

angleInDegrees = angleInDegrees + 2;

Also remember that void draw() is a repeating loop; so it will loop through again rotating around the mouse position to the value of angleInDegrees, which on the second loop will be 44 degrees (we added 2 to the value at the end of the previous cycle). Each cycle it will increase by 2 degrees producing the rotating animation.

What happens when it gets bigger than 360? 362 degrees is equivalent to 2 degrees... and so on.

Watch out for translate though. If you're drawing other stuff to the screen you may want to wrap things with pushMatrix and popMatrix:

Code:

float angleInDegrees = 42;

void setup() {
    size(256,256);

    ellipseMode(CENTER);
}

void draw() {
    background(128);

    pushMatrix();
    translate(100,100);
    // A triangle with 0 degrees of rotation
    triangle(0,10,30,0,0,-10);
    // translate is cumulative - i.e. this moves 20 pixels down from the last translate
    translate(0,20);
    // 360+90=450    
    rotate(radians(450));
    // a triangle with 90 degrees of rotation
    triangle(0,10,30,0,0,-10);
    popMatrix();


    pushMatrix();
    //start drawing from mouse position
    translate(mouseX, mouseY);
    //I convert degrees to radians, just because
    // my mind can keep track of degrees easier
    rotate( radians(angleInDegrees) ); 
    //wide so we can see it rotate
    ellipse(0, 0, 50, 25); //0,0 because the origin was moved to the mouse
    popMatrix();

    angleInDegrees += 2;
}

Where is the what if the what is in why?

NoahBuddy Ex Member	Re: simple ellipse rotate z axis Reply #4 - Jun 28^th, 2009, 5:42pm Blindfish explained it better than I could. And you got it. The reason I used 42, I mean. :]

4o2o

Re: simple ellipse rotate z axis
Reply #5 - Jun 29^th, 2009, 5:41am

The same thing has happened again. when I modify the code I get the same result the ellipse rotates around the space (randomly) rather than on press mouse. NB's mouse rotation is great but as soon as I modify the code the whole syntax collapses. And BF's analysis is relevant as the simple ellipse rotate is the basis for a flower node for a conclusive artwork where the flower node is to infinity (power n). Both your advise is poignant in that process as I have to clear up the code. I have modified a piechart within the code but perhaps what I require first is to spin the ellipse and then rotate freely. I hope you are having fun! ;*]

float angleInDegrees = 42;

void setup() {
size(256,256);
ellipseMode(CENTER);
}
void draw() {
background(128);
pushMatrix();

//start drawing from mouse position
translate(mouseX, mouseY);
//I convert degrees to radians, just because
// my mind can keep track of degrees easier
rotate( radians(angleInDegrees) );

//wide so we can see it rotate
int diameter = 150;
int[] angs = {30, 10, 45, 35, 60, 38, 75, 67};
float lastAng = 0;

for (int i=0; i<angs.length; i++){
fill(angs[i] * 3.0);
arc(width/2, height/2, diameter, diameter, lastAng, lastAng+radians(angs[i]));
lastAng += radians(angs[i]);
}
//0,0 because the origin was moved to the mouse
popMatrix ();
angleInDegrees += 2;
}

« Last Edit: Jul 2^nd, 2009, 12:54pm by 4o2o »

blindfish

Re: simple ellipse rotate z axis
Reply #6 - Jun 29^th, 2009, 6:05am

It's good practice troubleshooting other people's code - I recommend it

Assuming you want the pie chart to rotate around the mouse position the solution to this one is easy:

arc(0, 0, diameter, diameter, lastAng, lastAng+radians(angs[i]));

Remember that "translate(mouseX, mouseY);" effectively moves the centre of any drawing or transformation operations to the current mouseX and mouseY coordinates. So when drawing something (0,0) is the current mouse position. Any other value will be an offset from the current mouse position...

To put it another way take any circular object like a CD. If you place another object in the very centre (0,0) and rotate the CD the object will rotate on the spot. If you move the object away from the centre and rotate the CD what happens By passing (x,y) coordinates other than (0,0) you're moving your object away from the centre of rotation...

In the case of an 'arc' the default ellipseMode is CENTRE - so the x and y coordinates you pass to the arc command represent the centre of a circle and it then draws a portion (or slice) of the circle.

Hope that all makes sense!

Where is the what if the what is in why?

NoChinDeluxe

Re: simple ellipse rotate z axis
Reply #7 - Jun 29^th, 2009, 6:17am

blindfish wrote on Jun 29^th, 2009, 6:05am:

It's good practice troubleshooting other people's code - I recommend it

It's actually kind of addicting if you are a problem solving junkie. Cheesy

It's like a little game I have to sign on every day and see how quickly I can code something or solve a problem. And you end up learning from everyone else in the process!

4o2o YaBB Newbies Offline Posts: 8	Re: simple ellipse rotate z axis Reply #8 - Jun 29^th, 2009, 7:19am tx the conclusive artwork is a revolving evolving polyhedron structure which is all based on rotation. That works for the basis of the node rotation. pop along to fBK for a round of golf. :')

4o2o

Re: simple ellipse rotate z axis
Reply #9 - Jun 30^th, 2009, 12:19am

I modified the code with a few more variables colorwheel (just a few colors) and the code syntax collapses.

int segs = 6;
int steps = 1;
float rotAdjust = radians (360.0/segs/2.0);
float radius = 95.0;
float segWidth = radius/steps;
float interval = TWO_PI/segs;
int SHADE = 0;
int TINT =1;
float angleInDegrees = 42;

void setup() {
size(256,256);
ellipseMode(CENTER);
}
void draw() {
background(128);

pushMatrix();

//start drawing from mouse position
translate(mouseX, mouseY);

createWheel(width/2, height/2, SHADE);
}

void createWheel (int x, int y, int valueshift) {
if (valueshift ==SHADE){
for (int j=0; j<steps; j++){
color []cols = {

color(255-(255/steps)*j, 255-(255/steps)*j, 0),
color(255-(255/steps)*j, (255/1.5)-((255/1.5)/steps)*j, 0),
color(255-(255/steps)*j, (255/2)-((255/2)/steps)*j, 0),
color(255-(255/steps)*j, (255/2.5)-((255/2.5)/steps)*j, 0),
color(255-(255/steps)*j, 0, 0),
color(255-(255/steps)*j, 0, (255/2)-((255/2)/steps)*j),
color(255-(255/steps)*j, 0, 255-(255/steps)*j),
color((255/2)-((255/2)/steps)*j, 0, 255-(255/steps)*j),
color(0, 0, 255-(255/steps)*j),
color(0, 255-(255/steps)*j, (255/2.5)-((255/2.5)/steps)*j),
color(0, 255-(255/steps)*j, 0),
color((255/2)-((255/2)/steps)*j, 255-(255/steps)*j, 0) };
for (int i=0; i< segs; i++){
fill(cols[i]);
arc(x, y, 0, 0, interval*i+rotAdjust, interval*(i+1)+rotAdjust);
}
radius -= segWidth;
}
}
//0,0 because the origin was moved to the mouse
popMatrix ();
}
angleInDegrees += 2;
}

as soon as I modify the code the syntax collapses rather than complexity of code bugs

some of the code was missing and the line that has an error is

createWheel (width/2, height/2, SHADE);

« Last Edit: Jun 30^th, 2009, 3:31pm by 4o2o »

blindfish

Re: simple ellipse rotate z axis
Reply #10 - Jun 30^th, 2009, 1:30am

Edited:

Sorry - now realise that when I copied your code I somehow managed to miss all the variable declarations...

Finally, for what it's worth - you should populate your cols array in setup() since you only need to do this once. in draw() it gets done every frame and that's very inefficient...

Good luck!

« Last Edit: Jul 1^st, 2009, 2:52am by blindfish »

Where is the what if the what is in why?

4o2o YaBB Newbies Offline Posts: 8	Re: simple ellipse rotate z axis Reply #11 - Jun 30^th, 2009, 3:42pm tx for ur advise - all helpful. All the factors of the code work separately : rotation, color piechart but when I combine the variables - code is refused, the code actually works with a black and white piechart! tx again

NoahBuddy Ex Member	Re: simple ellipse rotate z axis Reply #12 - Jul 1^st, 2009, 1:01am This is interesting (again troubleshooting being addicting )... Comment out background(), and a colorful circle shows up.

blindfish

Re: simple ellipse rotate z axis
Reply #13 - Jul 1^st, 2009, 3:15am

Are you sure? That doesn't work for me...

I still see a couple of problems (and no need to comment out background):

1. Count your closing {braces}. You appear to have an extra one after your popMatrix call in createWheel

2. See my post:

"Assuming you want the pie chart to rotate around the mouse position the solution to this one is easy:

arc(0, 0, diameter, diameter, lastAng, lastAng+radians(angs[i]));"

So in your call to arc try:

arc(0, 0, x, y, interval*i+rotAdjust, interval*(i+1)+rotAdjust);

though if that's what you're after you may want to change the x,y variables.

Not sure why it's not rotating but I'll leave that to you to figure out Wink

A couple more points: You call pushMatrix() in draw, but popMatrix() in the createWheel function - this works fine but doesn't make for easily readable code. I'd take the popMatrix out of createWheel and put it after the createWheel function call in draw(). Not essential but good practice...

Finally since your cols array uses variables that don't seem to change during the draw loop my comment about using setup to generate this still stands. In draw() it is rather inefficient... It's also a slightly odd construction: unless I'm very much mistaken your for loop has little use since each iteration replaces the previously built cols array, so your cols array will simply be populated using j=steps-1. Try "println(cols.length);" and you may see what I mean...

Hopefully this makes up for my previous blunder Wink

Where is the what if the what is in why?

4o2o YaBB Newbies Offline Posts: 8	Re: simple ellipse rotate z axis Reply #14 - Jul 1^st, 2009, 5:18am thx error if I move the popMatrix - draw () was where I put that first + same error on lines createWheel (width/2, height/2, SHADE); and CreateWheel (int x, int y, int valueshift) and error if I change the arc code! All the code works for the bnw piechart, rotates, moves oscilates ! and w reworking the code.