week 17

今天老師教的是畫很酷會回彈的圖形(我不知道要怎麼形容)

第一階段-畫兩個圓

程式碼 : 

void setup()

{

  size(300,300);

}

void draw()

{

  background(#002966); 背景顏色

  fill(#b7efff); 填色(白)

  noStroke();  不要畫線

  ellipse(100,150,13,13); 畫圓

  ellipse(200,150,13,13);

}

第二階段-連線

程式碼 : 

void setup()

{

  size(300,300);

}

void draw()

{

  background(#002966);

  stroke(#b7efff); 畫線(白色)

  line(100,150,200,150);

  

  fill(#b7efff);

  noStroke();

  ellipse(100,150,13,13);

  ellipse(200,150,13,13);

}

第三階段- 滑鼠點擊白點可以移動點點 線會跟著動

程式碼 :

void setup()

{

  size(300,300);

}

float x=200,y=150;　變數宣告浮點數Ｘ　Ｙ（要動就要用變數）

void draw()

{

  background(#002966);

  stroke(#b7efff);

  line(100,150,x,y);

  

  fill(#b7efff);

  noStroke();

  ellipse(100,150,13,13);

  ellipse(x,y,13,13);

}

void mouseDragged()　滑鼠長按

{

  x= mouseX;y=mouseY;

}

第四階段-滑鼠拉住可以拖曳 放開後會瞬間彈回去

程式碼 : 

void setup()

{

  size(300,300);

}

float x=200,y=150;

void draw()

{

  background(#002966);

  stroke(#b7efff);

  line(100,150,x,y);

  

  fill(#b7efff);

  noStroke();

  ellipse(100,150,13,13);

  ellipse(x,y,13,13);

  if(! mousePressed)  滑鼠沒有按下去

  {

    float dx=x-100,dy=y-150;

    float len=sqrt(dx*dx+dy*dy);   計算長度sqrt(dx*dx + dy*dy)

    x-=dx*(len-100)/len;

    y-=dy*(len-100)/len;

  }

}

void mouseDragged()

{

  x= mouseX;y=mouseY;

}

  

更改點:

 x-=dx*(len-100)/len*0.1;
 y-=dy*(len-100)/len*0.1;

回彈的速度會變慢-看起來比較有彈性

更改點 : 

 vx -=dx*(len-100)/len*0.001;
  vy -=dy*(len-100)/len*0.001;
  x+=vx;      //x-=dx*(len-100)/len*0.1;
  y+=vy;      //y-=dy*(len-100)/len*0.1;

這個寫法的回彈會比較有趣，回彈會更有彈性

(只改了標記的兩點)

void setup()

{

  size(300,300);

}

float x=200,y=150;

float vx=0,vy=0;

void draw()

{

  background(#002966);

  stroke(#b7efff);

  line(100,150,x,y);

  

  fill(#b7efff);

  noStroke();

  ellipse(100,150,13,13);

  ellipse(x,y,13,13);

  if(! mousePressed)

  {

    float dx=x-100,dy=y-150;

    float len=sqrt(dx*dx+dy*dy);

    vx -=dx*(len-100)/len*0.1;

    vy -=dy*(len-100)/len*0.1;

    x+=vx; //x-=dx*(len-100)/len*0.1;  0.1為彈性係數 越小越強

    y+=vy; //y-=dy*(len-100)/len*0.1;

  }

}

void mouseDragged()

{

  x= mouseX;y=mouseY;

  vx=0;vy=0;   在拉動時不能有速度

}

跟這個概念相似 --方格會追著滑鼠

程式碼 :

void setup()

{

  size(400,300);

}

float x=200,y=150;

void draw()

{

  background(#002966);

  fill(255);

  rect(x,y,80,20);　　每次往你的滑鼠移動１／１０

  float dx=x-mouseX, dy=y-mouseY;

  float len=sqrt(dx*dx+dy*dy);

  x-= dx*0.1;

  y-= dy*0.1;

}

今天是最後一堂程設課　教了滿滿的遊戲　部落格要做好多張．．．．．．．．．．