week17

今天我們要做的是一個利用虎克定律所做出來的東西，他會在螢幕前面不規則的運動，我覺得這東西還蠻適合當桌布的。
首先我們先畫出最基本的兩個圓，並且用線連起來。背景的話用深藍，線跟圓的話用淺藍色的

程式碼:
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);
}

如果兩個點都是固定在那邊的話那就不能讓他們跟彈簧一樣伸縮了，所以我們要把x跟y的值弄成一個變數，讓他們可以在螢幕上拉來拉去

程式碼:
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);
}
void mouseDragged(){
  x=mouseX; y=mouseY;
}

能夠把點拉來拉去之後我們想要讓他在放開滑鼠之後自動縮回去，縮回去的方法就是讓他在滑鼠放開的時候把現有的長度減去拉長之後的長度

程式碼:
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);
    if(!mousePressed){
       float dx=x-200;
       float dy=y-150;
       float len=sqrt(dx*dx+dy*dy);
       x-=dx*(len-100)/len;
       y-=dy*(len-100)/len;
    }
}
void mouseDragged(){
  x=mouseX; y=mouseY;
}
不過這段城市寫出來之後會發現他會直接瞬移到原本的位子，這樣實在是不好看，如果可以讓它像彈簧一樣彈回去的話比較好
程式碼:
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);
    if(!mousePressed){
       float dx=x-200;
       float dy=y-150;
       float len=sqrt(dx*dx+dy*dy);
       x-=dx*(len-100)/len*0.1;
       y-=dy*(len-100)/len*0.1;
    }
}
void mouseDragged(){
  x=mouseX; y=mouseY;
}

現在我們模仿剛剛的寫法，做出了能夠讓裡面的圓型追著滑鼠跑

程式碼:
void setup(){
  size(400,300); 
}
float x=100,y=150;
void draw(){
    background(#002966);
    ellipse(x,y,50,50);
   
    float dx=x-mouseX;
    float dy=y-mouseY;
    float len=sqrt(dx*dx+dy*dy);
    x-=dx*0.1;
    y-=dy*0.1;
}
防疫期間請保持社交距離

程式碼:
void setup(){
  size(400,300); 
}
float x=100,y=150;
void draw(){
    background(#002966);
    ellipse(x,y,50,50);
   
    float dx=x-mouseX;
    float dy=y-mouseY;
    float len=sqrt(dx*dx+dy*dy);
    x-=dx*(len-100)/len*0.1;
    y-=dy*(len-100)/len*0.1;
}
讓它像彈簧一樣能夠彈來彈去，而且根據力道的不同彈的力度也不同

程式碼:
void setup(){
  size(300,300);
}
float x=100,y=150,vx,vy;
void draw(){
    background(#002966);
    stroke(#b7efff);
    line(x,y,200,150);
   
    fill(#b7efff);
    ellipse(x,y,13,13);
    ellipse(200,150,13,13);
    if(!mousePressed){
       float dx=x-200;
       float dy=y-150;
       float len=sqrt(dx*dx+dy*dy);
       float f=(len-100);
       dx/=len;
       dy/=len;
       vx-=f*dx*0.01;
       vy-=f*dy*0.01;
       x+=vx;
       y+=vy;
    }
}
void mouseDragged(){
  x=mouseX; y=mouseY;
}