Week17

2. Part 2: Processing 玩電玩、學程式
2.1. 主題: OpenProcessing.org 的 Tutorial ( https://bit.ly/p5-color )
2.2. 主題: Sprite 圖片

step01 - 先background()背景,ellipse()楕圓,fill()填充色彩,stroke()筆觸外框,line()畫線.
step01 - 2_用變數x,y來取代數字,變數可以變, 利用void mouseDragged()來讓它改變
step02 - 算出dx,dy的長度,再用直角三角形的座標,算出len長度。我們要變回100長度,所以比例是 (len-100)除以len的比例,再扣回去
step02 - 2_每次只走0.1倍,慢慢接近
step03 - 我們模仿剛剛的寫法,做出餵魚(魚會追食物、貓會追老鼠)
step03 - 2 - 我們可模仿step02的作法,保持100的距離,不能太近,也不能太遠
step04 - 虎克定律 長度改變量(len-100)與力量成正比,加負號, 牛頓發現微積分(加法、減法),位置、速度、加速度
void setup (){
  size(300,300);
}
void draw(){
  background(#002966);
  stroke(#b7efff);
  line(100,150,200,150);
  
  fill(#b7efff);
  ellipse(100,150,13,13);
  ellipse(200,150,13,13);
}
會畫出兩個點+一條線。

void setup (){
  size(300,300);
}
float x=100, y=150;
void draw(){
  background(#002966);
  stroke(#b7efff);
  line(x,y,200,150);
  
  fill(#b7efff);
  ellipse(x,y,13,13);
  ellipse(200,150,13,13);///如果mouse放開,就讓x,y接近200,150.
}
void mouseDragged(){
   x=mouseX; y=mouseY;
}






貓追老鼠。


學習如何讀檔。