week03_11131301賴珮語

課堂練習1 玩玩看3D

與前幾個禮拜一樣 打開processing.exe

//week03_01_P3D_translate_rotateY_radians_box
void setup(){
  size(400,400,P3D); //開啟3D模式
}
void draw(){ 
  background(128);//灰色背景
  translate(mouseX,mouseY);
  rotateY(radians(frameCount)); //對Y旋轉
  box(200); //大小200的 3D Box盒子

}

課堂練習2 練習畫一些2D的圖形

//week03_02_2D_point_line_rect_ellipse

size(400,400); //2D座標系統

stroke(255,0,0); //筆觸是紅色

strokeWeight(8); //筆觸權重大小

point(200,200); //預設的點 只有1pixel

line(200,0,400,100); //畫線

rect(50,50,100,100); //四邊形x,y,w,h

fill(255,255,0);

ellipse(300,200,50,80); //橢圓x,y,w,h

課堂練習3 再來練習畫一些四邊形

//week03_3_rect_corners

size(400,400);

rect(50,50,100,100);

rect(50,200,100,100,20);

rect(200,50,100,100,10,20,30,40);

課堂練習4 調色盤功能

//week03_04_stroke_strokeWeight_fill_

void setup(){

  size(500,500);

}

void draw(){

  // background(255);

  fill(255,0,0); //紅色

  rect(0,0,50,50);

  fill(255,255,0); //黃色

  rect(0,50,50,50);

  fill(0,255,0); //綠色

  rect(0,100,50,50);

  fill(0,0,255); //藍色

  rect(0,150,50,50);

  if(mousePressed)line(mouseX,mouseY,pmouseX,pmouseY);

}

void mousePressed(){

  if(mouseX<50){

    if(mouseY<50){

      stroke(255,0,0);}

    else if(mouseY<100){

      stroke(255,255,0);}

    else if(mouseY<150){

      stroke(0,255,0);}

    else if(mouseY<200){

      stroke(0,0,255);}

  }

}

左上角的四個方格是用來選顏色的

按下其中一個顏色後筆觸就會變色

**記得白色的背景要先刪掉才有辦法畫 不然畫出來的線會被背景蓋掉

剛剛的程式會發現調色盤的框線會跟著筆觸顏色有所變化

我們試著修改掉 讓調色盤的框線不要一直變色

左邊螢光筆為修改/新增的

課堂作業5  用剛剛畫的橢圓形來做一個貓抓老鼠的練習

//week03_05_mouse_cat_x_y

void setup(){

  size(400,400);

}

float x,y; //貓的座標

void draw(){

  background(255);

  ellipse(x,y,40,40);

  ellipse(mouseX,mouseY,40,20);

  x=(x*14+mouseX)/15;;

  y=(y*14+mouseY)/15;;

} //新的座標 , 舊的座標*14,目標*1

鼠標可以控制扁橢圓(老鼠) 而大橢圓(貓咪)會追扁橢圓(老鼠)

課堂練習6 練習lerp()做內插

//week03_06_lerp_frameCount

void setup(){

  size(400,400);

}

float startX=0 ,startY=0;

float stopX=390 ,stopY=290;

void draw(){

  //background(255);  想有殘影就去掉背景 不想有殘影就加上背景

  ellipse(startX,startY,10,10);

  ellipse(stopX,stopY,10,10);

  //lerp()可以做內插 要給他0.0~1.0之間的數

  float midX = lerp(startX,stopX,frameCount/200.0);

  float midY = lerp(startY,stopY,frameCount/200.0);

  //frameCount 是｢第幾個frame｣ 一小時=60分,1分=60秒,1秒=60 frame

  ellipse(midX,midY,10,10);

}

課堂練習7 貝式曲線

//week03_07_bezier_curve

size(400,400);

int x1=340, x2=40, x3=360, x4=60;

int y1=80, y2=40, y3=360, y4=320;

line(x1,y1,x2,y2);

line(x3,y3,x4,y4);

bezier(x1,y1,x2,y2,x3,y3,x4,y4); //貝式曲線

課堂練習8 畫出一個會做滑行的點點

//week03_08_bezier_equation

void setup(){

  size(400,400);

}

void draw(){

  background(255);

  int x1=340, x2=40, x3=360, x4=60;

  int y1=80, y2=40, y3=360, y4=320;

  line(x1,y1,x2,y2);

  line(x3,y3,x4,y4);

  bezier(x1,y1,x2,y2,x3,y3,x4,y4); //貝式曲線

  float t=frameCount/200.0%1; //加上%1的話點點就不會飛出去 會在曲線中循環

  float t2=1-t;

  float x=x1*t2*t2*t2 + 3*x2*t*t2*t2 + 3*x3*t*t*t2 + x4*t*t*t;

  float y=y1*t2*t2*t2 + 3*y2*t*t2*t2 + 3*y3*t*t*t2 + y4*t*t*t;

  ellipse(x,y,10,10);

}

另一種貝式曲線

//week03_08b_bezier_equation

void setup(){

  size(400,400);

}

int x1=120, x2=320, x3=320, x4=120; //只改控制點的座標

int y1=80, y2=20, y3=300, y4=300;

void draw(){

  background(255);

  line(x1,y1,x2,y2);

  line(x3,y3,x4,y4);

  bezier(x1,y1,x2,y2,x3,y3,x4,y4); //貝式曲線

  float t=frameCount/200.0%1; //加上%1的話點點就不會飛出去 會在曲線中循環

  float t2=1-t;

  float x=x1*t2*t2*t2 + 3*x2*t*t2*t2 + 3*x3*t*t*t2 + x4*t*t*t;

  float y=y1*t2*t2*t2 + 3*y2*t*t2*t2 + 3*y3*t*t*t2 + y4*t*t*t;

  ellipse(x,y,10,10);

}

課堂練習9 2D星空

//week03_09_3D_random_random_point

float [] x=new float[1000];

float [] y=new float[1000];

void setup(){

  size(400,400,P3D);

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

    x[i]=random(400);

    y[i]=random(400);

  }

}

void draw(){

  background(0); //黑色的背景

  stroke(255); //白色的線條

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

    point(x[i],y[i]); //現在只有2D的點 沒有z座標

  }

}                                         

課堂練習10 3D星空

//week03_10_3D_random_random_point_

float [] x=new float[5000];

float [] y=new float[5000];

float [] z=new float[5000];

void setup(){

  size(400,400,P3D);

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

    x[i]=random(400);

    y[i]=random(400);

    z[i]=random(-400,400);

  }

}

void draw(){

  background(0); //黑色的背景

  stroke(255); //白色的線條

  translate(0,0,mouseY);

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

    point(x[i],y[i],z[i]); //現在只有2D的點 沒有z座標

  }

}

                                       

課堂練習11.12  3D球球

//week03_12_3D_sphere_translate_rotateY_lights

void setup(){

  size(400,400,P3D);

}

void draw(){

  background(128);

  lights(); //加上打光

  translate(mouseX,mouseY);

  rotateY(radians(frameCount));

  sphere(200);}

課堂練習13  多個3D球球

//week03_13_3D_pushMatrix_translate_sphere_popMatrix

void setup(){

  size(600,400,P3D);

}

void draw(){

  background(128); 

  lights();

  pushMatrix(); //備份矩陣

    translate(300,100); //習慣上要往右縮一單位(圖學課專屬

    sphere(100);

  popMatrix(); //還原矩陣

  //要備份矩陣跟還原矩陣 就不會出錯 

  pushMatrix();

    translate(100,100);

    sphere(100);

  popMatrix(); 

}

Q:如何讓球原地轉起來?

A:

//week03_13_3D_pushMatrix_translate_sphere_popMatrix

void setup(){

  size(600,400,P3D);

}

void draw(){

  background(128); 

  lights();

  pushMatrix(); //備份矩陣

    translate(300,100); //習慣上要往右縮一單位(圖學課專屬

    rotateY(radians(frameCount));

    sphere(100);

  popMatrix(); //還原矩陣

  //要備份矩陣跟還原矩陣 就不會出錯 

  pushMatrix();

    translate(100,100);

    rotateY(radians(frameCount));

    sphere(100);

  popMatrix(); 

}