我要寫幾次部落格qq_Week17

要做重複幾何圖形的網頁

首先用Processing畫出兩個點、一個填滿色的背景

ellipse兩個是兩個點

加上

  stroke(#b7efff);

  line(100,150,x,y);

則是讓兩點間連線

再來，要讓點能隨著滑鼠拖曳移動

要先將line(線)座標改為XY值

ellipse(點)座標也改為XY值

再加上mouseDragged函式

加上float預設值

  float x=200,y=150;  ///預設的XY值

  line(100,150,x,y);

  ellipse(x,y,13,13);

void mouseDragged()

{

  x=mouseX;  ///x=滑鼠的x值

  y=mouseY;  ///y=滑鼠的y值

}

就能讓點隨著滑鼠移動

再來是讓點無論拉到多長，都能隨著原本方向彈回原本的長度

  if(!mousePressed)   ///if滑鼠沒有點擊=滑鼠放開

  {

    float dx=x-100,dy=y-150;  ///彈回去的值=滑鼠無論拉多長的值-100預設值

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

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

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

  }

之後在len後*0.1，就是讓點每次慢慢彈回1/10，看起來比較順

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

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