普通にやるとこうなる
/* testApp.m */ static float angle; static ofVec4f frame; //-------------------------------------------------------------- void testApp::setup(){ ofxAccelerometer.setup(); angle = 30; frame = ofVec4f(300, 200, 200, 200); ofBackground(127,127,127); } void testApp::draw0(){ // 元の位置 int x = frame.x; int y = frame.y; int width = frame.z; int height = frame.w; // 普通に描く ofSetColor(0, 0, 255); ofRect(x, y, width, height); ofSetColor(255); image.draw(x, y, width, height); // 座標軸を回転させて描く ofPushMatrix(); ofRotate(angle); ofSetColor(0, 255, 0); ofRect(x, y, width, height); ofPopMatrix(); ofSetColor(255, 255, 255); ofCircle(x, y, 10); }
回転させて描画するときは ofRotate で角度を指定してから描画すれば良いのですが、
これだと、座標軸自体が回転してしまうため位置まで変わってしまいます。
回転させた座標軸で元の位置を計算する
その場で回転させるには計算する必要があります。
(x, y)を基準に回転
/* testApp.m */ static float angle; static ofVec4f frame; //-------------------------------------------------------------- void testApp::setup(){ ofxAccelerometer.setup(); angle = 30; frame = ofVec4f(300, 200, 200, 200); ofBackground(127,127,127); } // (x, y)を基準に void testApp::draw1(){ // 元の位置 int x = frame.x; int y = frame.y; int width = frame.z; int height = frame.w; // 回転させた座標での元の位置 double radian = (angle) * PI / 180.0; double baseRadian = atan2(y, x); double dRadian = baseRadian - radian; double r = sqrt((x*x) + (y*y)); // powがambiguous int newX = cos(dRadian) * r; int newY = sin(dRadian) * r; // 普通に描く ofSetColor(0, 0, 255); ofRect(x, y, width, height); ofSetColor(255); image.draw(x, y, width, height); // 座標軸を回転させて描く ofPushMatrix(); ofRotate(angle); ofSetColor(0, 255, 0); ofRect(newX, newY, width, height); ofPopMatrix(); ofSetColor(255, 255, 255); ofCircle(x, y, 10); }
中心点を基準に回転
次は中心点を基準に回転させます
// 中心点(width/2, height/2)を基準に void testApp::draw2(){ int x = frame2.x; int y = frame2.y; int width = frame2.z; int height = frame2.w; // 中心点 int posX = frame2.x + width/2.0; int posY = frame2.y + height/2.0; // 回転させた座標での元の位置 double radian = (angle) * PI / 180.0; double baseRadian = atan2(posY, posX); double dRadian = baseRadian - radian; double r = sqrt((posX*posX) + (posY*posY)); // powがambiguous int newPosX = cos(dRadian) * r; int newPosY = sin(dRadian) * r; int newX = newPosX - width/2.0f; int newY = newPosY - height/2.0f; // 普通に描く ofSetColor(0, 0, 255); ofRect(x, y, width, height); ofSetColor(255); image.draw(x, y, width, height); // 座標軸を回転させて描く ofPushMatrix(); ofRotate(angle); ofSetColor(0, 255, 0); ofRect(newX, newY, width, height); ofSetColor(255, 255, 255); ofCircle(newPosX, newPosY, 10); ofPopMatrix(); }
0 件のコメント:
コメントを投稿