Converting from Processing to OF - rotateY

beginners
#1

Hello!

I’m quite new and am wanting to convert an old sketch I did from processing to OF but it isn’t quite working and ofRotate X,Y,Z are deprecated. Any advice on how I can get around this?

PROCESSING SKETCH

float a = 0; //counter
int sz = 10; //size of rects

void setup() {
  size(600, 600, P3D); 
  background(0);
  rectMode(CENTER);
}

void draw() {
  background(0);
  for (int i = sz; i < width; i += sz*2) { //for loop for x axis
    for  (int j = sz; j < height; j += sz*2) { //for loop for y axis
      pushMatrix();
      translate(i, j); //translate so each rect is draw at its own 0,0 
      float transform = PI+sin(a)*3;
      rotateZ(transform); //rotate on XYZ angles
      rotateX(transform);
      rotateY(transform);
      float move = PI/2+sin(a); //float to keep track 
      float opac = map(move, 0.5, 2.6, 50, 255);//mapping opacity to movement - so that rects opacity changes dependent on cycle of rotation
      drawRect(sz+move*sz/2, opac); //the d (size of rect) is effected by rotation
      popMatrix();
    }
  }
  a+= 0.02; // a increments to change the effect on sin
}


void drawRect(float d, float o) { //two variables d = size of rect and o is opacity
  fill(255, o);
  rect(0, 0, d, d);
}

OPEN FRAMEWORKS

//--------------------------------------------------------------
void ofApp::setup(){
    ofSetWindowShape(600, 600);
    ofBackground(0);
    ofRectMode(CENTER);
    
}

//--------------------------------------------------------------
void ofApp::update(){
  

}

//--------------------------------------------------------------
void ofApp::draw(){
    ofBackground(0);
//    float a = 0; // counter
 //   int sz = 10; // size of rects

    for (int i = sz; i < ofGetWidth()-sz; i += sz*2) {//for loop for x axis
        for (int j = sz; j < ofGetHeight()-sz; j += sz*2) { //for loop for y axis
            ofPushMatrix();
            ofTranslate(i,j);
            float angle = PI+sin(a)*3;
            ofRotateZ(angle); //rotate on XYZ angles
            ofRotateX(angle);
            ofRotateY(angle);
            float move = PI/2+sin(a); //float to keep track
            float opac = ofMap(move, 0.5, 2.6, 50, 255);//mapping opacity to movement - so that
            //the rects opacity changes dependent on cycle of rotation
            drawRect(sz+move*sz/2, opac); //the d(size of rect) is effected by rotation
            ofPopMatrix();
        
    
        }
        
    }
    a+= 0.02; // a increments to change the effect on sin
   }
//--------------------------------------------------------------
void ofApp::drawRect(float d, float o){
    ofSetColor(255, o);
    ofDrawRectangle(0, 0, d, d);

    --------------------------------------------------------------

Thanks!

#2

Hi, what is the difference between the OF and processing results?
Can you post some screenshots?

ofRotate X,Y,Z are deprecated but still work. The new versions of it are


ofRotateXDeg(float angleInDegrees);
ofRotateYDeg(float angleInDegrees);
ofRotateZDeg(float angleInDegrees);

ofRotateXRad(float angleInRadians);
ofRotateYRad(float angleInRadians);
ofRotateZRad(float angleInRadians);

Last but not least. please edit your post’s code. Just select it and press the preformated text button (</>) that is in the toolbar of the text editing panel. It will look a lot nicer and it will become more readable and it will be easier for the rest to provide help.
cheers

#3

Ah Yes! I couldn’t figure out how others had formatted their code. Thank you.

In the processing sketch, the rectangles rotate and grow/shrink in sequence and create the sense that a black bar is moving through the canvas (fig 1). (see video herehttps://www.instagram.com/p/Brxtia7BvLo/)

In the OF sketch, the rects seem to just phase slightly (As a new user I can only post one image per post so see below) but don’t rotate significantly.

Fig%202
Fig 2.png588×582 247 KB

Thanks for your help!

#4

Image from OF Sketch

Fig3
Fig3.jpg573×566 135 KB

#5

2nd image from OF sketch (these are the only movements)

Fig%204
Fig 4.png558×557 234 KB

#6

here’s a quick edit to your code to make it closer to p5 – let me know if this helps!

in ofApp.h

	
    void drawRect(float d, float o);
    float a = 0; // counter

in .cpp


//--------------------------------------------------------------
void ofApp::setup(){
    ofSetWindowShape(600, 600);
    ofBackground(0);
    ofSetRectMode(OF_RECTMODE_CENTER);
    
}

//--------------------------------------------------------------
void ofApp::update(){
    
    
}

//--------------------------------------------------------------
void ofApp::draw(){
    ofBackground(0);
    
    
    int sz = 10; // size of rects
    
    for (int i = sz; i < ofGetWidth()-sz; i += sz*2) {//for loop for x axis
        for (int j = sz; j < ofGetHeight()-sz; j += sz*2) { //for loop for y axis
            ofPushMatrix();
            ofTranslate(i,j);
            float angle = PI+sin(a)*3;
            ofRotateZ(angle * RAD_TO_DEG); //rotate on XYZ angles
            ofRotateX(angle* RAD_TO_DEG);
            ofRotateY(angle* RAD_TO_DEG);
            float move = PI/2+sin(a); //float to keep track
            float opac = ofMap(move, 0.5, 2.6, 50, 255);//mapping opacity to movement - so that
            //the rects opacity changes dependent on cycle of rotation
            drawRect(sz+move*sz/2, opac); //the d(size of rect) is effected by rotation
            ofPopMatrix();
            
            
        }
        
    }
    a+= 0.02; // a increments to change the effect on sin
}
//--------------------------------------------------------------
void ofApp::drawRect(float d, float o){
    ofSetColor(255, o);
    ofDrawRectangle(0, 0, d, d);
    
    
}

ofRotate takes degrees vs p5 which takes radians (ie, 0-360 vs 0-2 PI). you can use RAD_TO_DEG to scale the number to be in the right range (it’s a constant which is 360/2PI)

hope this helps!

#7

Thanks so much for clearing that up Zach, I really appreciate it! It worked.

Cheers :slight_smile: