2021年3月24日 星期三

week05 上課好難


自己畫出萬花尺(我們不需要自己買，我們自己做!!!)

先畫出簡單的大圓, 風格使用黑底、白線條, 希望像影片中的風格。

 void setup(){

  size(500,500);
  stroke(255);
  noFill();
}
void draw(){
  background(0);
  ellipse(250,250, 450,450);
}
Step02 mouse畫出小園
接著用 mouse 來移動小圓。利用手來輔肋, 放好小圓後, 比較容易做出輔助線, 了解小圓是怎麼移動的。
void setup(){
  size(500,500);
  stroke(255);
  noFill();
}
void draw(){
  background(0);
  ellipse(250,250, 450,450);
  ellipse(mouseX, mouseY, 100,100);
}
Step03 atan2() 算小圓圓心
利用 mouse 及 atan2() 算出角度, 推算出小圓圓心後
void setup(){
  size(500,500);
  stroke(255);
  noFill();
}
void draw(){
  background(0);
  ellipse(250,250, 450,450);
  float angle=atan2(mouseY-250,mouseX-250);
  float x=250+175*cos(angle), y=250+175*sin(angle);
  line(250,250, x, y);
  ellipse(x,y, 100, 100);
}
Step04 用變數取代數值
用變數取代數值。之後只要改變大圓半徑、小圓半徑, 就有機會畫出不同的線條。
void setup(){
  size(500,500);
  stroke(255);
  noFill();
}
float r0=225, r1=50;
float cx=250, cy=250;
void draw(){
  background(0);
  ellipse(cx,cy, r0*2, r0*2);
  float angle=atan2(mouseY-cy,mouseX-cx);
  float x=cx+(r0-r1)*cos(angle), y=cy+(r0-r1)*sin(angle);
  line(cx,cy, x, y);
  ellipse(x,y, r1*2, r1*2);
}
Step05 小圓會旋轉
為了讓小圓有旋轉的效果, 所以新增 circle2()函式, 裡面有angle參數, 可以調整旋轉角度。現階段先隨便用個值來旋轉。之後應該算出合理的值來旋轉。 註: 為了看到旋轉的效果, 小圓有附幾條輪輻, 小圓輪輻數少,轉動較清楚。
void setup(){
  size(500,500);
  stroke(255);
  noFill();
}
float r0=225, r1=50;
float cx=250, cy=250;
void draw(){
  background(0);
  ellipse(cx,cy, r0*2, r0*2);
  float angle=atan2(mouseY-cy,mouseX-cx);
  float x=cx+(r0-r1)*cos(angle), y=cy+(r0-r1)*sin(angle);
  line(cx,cy, x, y);
  circle2(x,y, r1, mouseX);//ellipse(x,y, r1*2, r1*2);
}
void circle2(float cx, float cy, float r, float angle){
  ellipse(cx,cy, r*2, r*2);
  for(float a=angle; a<angle+PI*2;a+=PI/4){
    line(cx,cy, cx+r*cos(a), cy+r*sin(a));
  }
}
Step06 計算正確角度
要利用大小齒輪的比例關係, 從大圓的 angle 算出小園的旋轉角度。因為圓周與半徑成正比, 所以直接照比例給角度即可。
void setup(){
  size(500,500);
  stroke(255);
  noFill();
}
float r0=225, r1=50;
float cx=250, cy=250;
void draw(){
  background(0);
  ellipse(cx,cy, r0*2, r0*2);
  float angle=atan2(mouseY-cy,mouseX-cx);
  float angle2= -angle * r0 / r1;
  float x=cx+(r0-r1)*cos(angle), y=cy+(r0-r1)*sin(angle);
  line(cx,cy, x, y);
  circle2(x,y, r1, angle2);
}
void circle2(float cx, float cy, float r, float angle){
  ellipse(cx,cy, r*2, r*2);
  for(float a=angle; a<angle+PI*2;a+=PI/4){
    line(cx,cy, cx+r*cos(a), cy+r*sin(a));
  }
}
Step07 畫出小圓孔動的軌跡
其實可以利用相似的「大圓、小圓」關係, 讓小圓裡的孔洞視為更小的半徑的小小圓, 來畫出來畫出線條。這裡先利用ArrayList, 來存點的座標, 並畫出對應的曲線。
Bug: 不過因為 atan2() 有範圍, 超過的角度, 就沒辦法畫出來。
ArrayList<PVector> points;
void setup(){
  size(500,500);
  stroke(255);
  noFill();
  points = new ArrayList<PVector>();
}
float r0=225, r1=50, r2=37;
float cx=250, cy=250;
void draw(){
  background(0);
  ellipse(cx,cy, r0*2, r0*2);
  beginShape();
  for( PVector pt : points ){
    vertex(pt.x, pt.y);//之後可變彩色漸層色彩
  }
  endShape();
  float angle=atan2(mouseY-cy,mouseX-cx);
  float angle2= -angle * r0 / r1;
  float x=cx+(r0-r1)*cos(angle), y=cy+(r0-r1)*sin(angle);
  line(cx,cy, x, y);
  circle2(x,y, r1, angle2);
}
void circle2(float cx, float cy, float r, float angle){
  ellipse(cx,cy, r*2, r*2);
  for(float a=angle; a<angle+PI*2;a+=PI/4){
    line(cx,cy, cx+r*cos(a), cy+r*sin(a));
  }
}
void mouseDragged(){//按下mouse才開始記錄點
  float angle=atan2(mouseY-cy,mouseX-cx);
  float angle2= -angle * r0 / r1;
  float x=cx+(r0-r1)*cos(angle), y=cy+(r0-r1)*sin(angle);  
  float x2=x+r2*cos(angle2), y2=y+r2*sin(angle2); 
  points.add( new PVector(x2,y2) );
}
Step08 讓角度沒範圍限制
因前一版的程式使用 atan2() 讓角度有問題。所以其實可以利用 “角度遞增” 的方式, 來修改 angle 角度。 (mouseX,mouseY) vs. (pmouseX,pmouseY) 會有夾角, 拿這個夾角來計算。 注意: 不能 angleNow - angle, 要 angleNow-angleOld才行。因為這樣才是2個 -PI~+PI 的數字相比較, 才會正確。
不過這個版本會有1個Bug: mouse動太快時, points 加得不夠密, 會有漏點的直線出現。 可能需要以夠細的角度為準, 內插出更多的角度,來推算出點。 (這個也算是 feature, 因為一定會有人想要畫得很快, 就讓他們看到畫面失敗的線條吧) TODO: 真的點太多時, memeory也會用盡, 需要提供警告, 並將 memory 清空 TODO: 每次 mousePressed時, 應該是新的線段。每次 mouseReleased時, 就結束線段。 TODO: 畫圖前/畫圖中, 可提供「換齒輪」的功能。
ArrayList<PVector> points;
void setup(){
  size(500,500);
  stroke(255);
  noFill();
  points = new ArrayList<PVector>();
  angle = atan2(-cy, -cx);//一開始mouseX,mouseY為0,所以角度向左上角
}//之後可引導 mousePressed 在小齒輪後, 才能開始控制轉動
float r0=225, r1=50, r2=37;
float cx=250, cy=250;
float angle;
void draw(){
  background(0);
  ellipse(cx,cy, r0*2, r0*2);
  beginShape();
  for( PVector pt : points ){
    vertex(pt.x, pt.y);//之後可變彩色漸層色彩
  }
  endShape();
  float delta = deltaAngle();
  angle += delta;
  println(angle, delta);
  //float angle=atan2(mouseY-cy,mouseX-cx);
  float angle2= -angle * r0 / r1;
  float x=cx+(r0-r1)*cos(angle), y=cy+(r0-r1)*sin(angle);
  line(cx,cy, x, y);
  circle2(x,y, r1, angle2);
}
void circle2(float cx, float cy, float r, float angle){
  ellipse(cx,cy, r*2, r*2);
  for(float a=angle; a<angle+PI*2;a+=PI/4){
    line(cx,cy, cx+r*cos(a), cy+r*sin(a));
  }
}
float deltaAngle(){
  float angleNow=atan2(mouseY-cy,mouseX-cx);
  float angleOld=atan2(pmouseY-cy,pmouseX-cx);
  //不能 angleNow - angle, 要 angleNow-angleOld才行
  float delta = angleNow - angleOld;
  if( abs(delta)> PI ){
    if(delta>0) delta-=PI*2;
    else delta += PI*2;
  }
  return delta;
}
void mouseDragged(){//按下mouse才開始記錄點
  //float angle=atan2(mouseY-cy,mouseX-cx);
  float angle2= -angle * r0 / r1;
  float x=cx+(r0-r1)*cos(angle), y=cy+(r0-r1)*sin(angle);  
  float x2=x+r2*cos(angle2), y2=y+r2*sin(angle2); 
  points.add( new PVector(x2,y2) );
}

Step09 彩色的線條
目前做出彩色的線條, 為了錄影 saveFrame() 所以改成 640x480 的解析度。不過有些可改進的地方:
  • 可以用其他解析度 (ex. IG 的正方型, FB的長方形) 方便分享影片
  • 畫出來的線有點粗, 可能是解析度 640x480 不夠高
  • Processing 用 2010 QuickTime Movie Maker 做出來的 mov 檔, 無法在 Windows 電影與電視播放(無法播放: 此項目的編碼格式是不支援的格式。0xc00d5212)。 使用 Messenger 也無法傳送。我目前是先在 FB貼文後, 再下載 mp4 檔。
  • Can’t play: This item was encoded in a format that’s not supported. 0xc00d5212
ArrayList<PVector> points;
void setup(){
  size(640,480,P2D);
  stroke(255);
  noFill();
  points = new ArrayList<PVector>();
  angle = atan2(-cy, -cx);//一開始mouseX,mouseY為0,所以角度向左上角
}//之後可引導 mousePressed 在小齒輪後, 才能開始控制轉動
float r0=225, r1=57, r2=37.3;
float cx=320, cy=240;
float angle;
void draw(){
  background(0);
  ellipse(cx,cy, r0*2, r0*2);
  colorMode(HSB);
  float H=0;
  beginShape();
  for( PVector pt : points ){
    stroke( H, 255,255);
    vertex(pt.x, pt.y);//之後可變彩色漸層色彩
    H+=1;
    if(H>255) H-=255;
  }
  endShape();
  colorMode(RGB);
  stroke(255);
  angle += deltaAngle();
  float angle2= -angle * r0 / r1;
  float x=cx+(r0-r1)*cos(angle), y=cy+(r0-r1)*sin(angle);
  line(cx,cy, x, y);
  circle2(x,y, r1, angle2);
  //if(mousePressed) saveFrame();
}
void circle2(float cx, float cy, float r, float angle){
  ellipse(cx,cy, r*2, r*2);
  for(float a=angle; a<angle+PI*2;a+=PI/4){
    line(cx,cy, cx+r*cos(a), cy+r*sin(a));
  }
}
float deltaAngle(){
  float angleNow=atan2(mouseY-cy,mouseX-cx);
  float angleOld=atan2(pmouseY-cy,pmouseX-cx);
  float delta = angleNow - angleOld;
  if( abs(delta)> PI ){
    if(delta>0) delta-=PI*2;
    else delta += PI*2;
  }
  return delta;
}
void mouseDragged(){//按下mouse才開始記錄點
  float angle2= -angle * r0 / r1;
  float x=cx+(r0-r1)*cos(angle), y=cy+(r0-r1)*sin(angle);  
  float x2=x+r2*cos(angle2), y2=y+r2*sin(angle2); 
  points.add( new PVector(x2,y2) );
}
電腦圖學:期中考題  網址:120.125.80.50/GL/
  glPushMatrix();//備份矩陣
  glTranslatef(x,y,z);//移動
  glRotatef(angle,x,y,z);//轉動
  glScalef(x,y,z);//縮放
  glBegin(GL_POLYGON);//開始畫
  glColor3f(r,g,b);//色彩
  glTexCoord2f(tx,ty);//貼圖座標
  glNormal3f(nx,ny,nz);//打光的法向量
  glVertex2f(x,y);//頂點
  glEnd();//結束畫
  glPopMatrix();//還原矩陣
理解T R S B:
理解方式:把脖子往左邊的肩膀歪，使耳朵和肩膀貼齊，就能明白，由外圈讀到內圈，依序為搬到右邊的，旋轉的，胖胖的，藍色的車子。


解釋；物體做移動和轉動，大圓盤轉動搬到右邊的，胖胖的藍色車子 

OpenGL T-R-T函式: 對特定軸轉動練習
畫出會旋轉的圖
#include <GL/glut.h>

int N=0, vx[3000], vy[3000];
float angle=0;
void display()

{

    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glPushMatrix();
    glRotatef(angle,0,0,1);
    glBegin(GL_LINE_LOOP);

    for(int i=0;i<N;i++){

        glVertex2f((vx[i]-150)/150.0, -(vy[i]-150)/150.0);

    }

    glEnd();
    glPopMatrix();
    glutSwapBuffers();

}
void keyboard(unsigned char key,int x,int y)
{
    angle++;
    display();
}
void motion(int x, int y)

{

    vx[N]=x; vy[N]=y;

    N++;

    display();

}

int main(int argc, char**argv)

{

    glutInit(&argc, argv);

    glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH);

    glutCreateWindow("08160191");
    glutKeyboardFunc( keyboard );

    glutDisplayFunc(display);

    glutMotionFunc(motion);

    glutMainLoop();

}


於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)

距地表面160 Week11

 #include "glm.h" GLMmodel* pmodel = NULL; void drawmodel(void) {     if (!pmodel) { pmodel = glmReadOBJ("data/porsche.obj...

  • 距地表面160 Week11
     #include "glm.h" GLMmodel* pmodel = NULL; void drawmodel(void) {     if (!pmodel) { pmodel = glmReadOBJ("data/porsche.obj...
  • 距地表面160 Week08
      加背 景 上程式碼 #include <opencv/highgui.h> ///使用 OpenCV 2.1 比較簡單, 只要用 High GUI 即可 #include <opencv/cv.h> #include <GL/glut.h>...
  • 電腦圖學 week 12
     1. 3D Explorer安裝,     解壓、開Gundam 的 OBJ檔    SaveAs .cpp檔(SampleAPP) 2. CodeBlocks開OpenGL專案 2.1. main.c換 gundam_3dexp.cpp     (放同目錄裡) 切換 Remo...