SangMo 互動技術 week07

 Week07 萬聖節主題畫線遊戲

Step 1

利用背景清畫面mouseReleased

程式碼:

void setup(){
  size(400,400);
}
void draw(){
  if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);
}
void mouseReleased(){
  background(255);
}

執行效果為 畫直線後就覆蓋一個背景上去

Step 2 

製造一個鬼 並讓他往中間靠近

程式碼:

void setup(){
  size(400,400);
}
float ghostX=400,ghostY=20;
void draw(){
  ellipse(200,200,15,15);
  ellipse(ghostX,ghostY,15,15);
  if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);
  float dx = 200-ghostX,dy=200-ghostY,len=sqrt(dx*dx+dy*dy);
  ghostX+=dx/len/3;
  ghostY+=dy/len/3;
}
void mouseReleased(){
  background(255);
}
Step 3

去掉鬼的殘影，但把畫線變成畫很多點

程式碼:

ArrayList<PVector>pt = new ArrayList<PVector>();
void setup(){
  size(400,400);
}
float ghostX=400,ghostY=20;
void mouseDragged(){
  pt.add(new PVector(mouseX,mouseY));
}
void draw(){
  background(255);
  ellipse(200,200,15,15);
  ellipse(ghostX,ghostY,15,15);
  //if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);
  for(int i=0;i<pt.size();i++){
    PVector p =pt.get(i);
    ellipse(p.x,p.y,3,3);
  }
  float dx = 200-ghostX,dy=200-ghostY,len=sqrt(dx*dx+dy*dy);
  ghostX+=dx/len/3;
  ghostY+=dy/len/3;
}
void mouseReleased(){
  background(255);
}
執行圖:

Step 4

解決畫點的問題，讓他變畫線

程式碼:

ArrayList<PVector>pt = new ArrayList<PVector>();
void setup(){
  size(400,400);
}
float ghostX=400,ghostY=20;
void mouseDragged(){
  pt.add(new PVector(mouseX,mouseY));
}
void draw(){
  background(255);
  ellipse(200,200,15,15);
  ellipse(ghostX,ghostY,15,15);
  //if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);
  for(int i=0;i<pt.size()-1;i++){
    PVector p =pt.get(i),p2 = pt.get(i+1);
    line(p.x,p.y,p2.x,p2.y);//ellipse(p.x,p.y,3,3);
  }
  float dx = 200-ghostX,dy=200-ghostY,len=sqrt(dx*dx+dy*dy);
  ghostX+=dx/len/3;
  ghostY+=dy/len/3;
}
void mouseReleased(){
  for(int i=pt.size()-1;i>=0;i--){
    pt.remove(i);
    
  }
}
執行就能畫線了
Step 5

把黑線變成在特定條件下讓他畫紅線

程式碼:

ArrayList<PVector>pt = new ArrayList<PVector>();
void setup(){
  size(400,400);
}
float ghostX=400,ghostY=20;
void mouseDragged(){
  pt.add(new PVector(mouseX,mouseY));
}
void draw(){
  background(255);
  ellipse(200,200,15,15);
  ellipse(ghostX,ghostY,15,15);
  //if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);
  strokeWeight(4);
  float dpx=0,dpy=0;
  for(int i=0;i<pt.size()-1;i++){
    PVector p=pt.get(i),p2=pt.get(i+1);
    dpx += abs(p2.x-p.x);
    dpy += abs(p2.y-p.y);
  }
  if(dpx>100 && dpy<40)stroke(255,0,0);
  else stroke(0);
  for(int i=0;i<pt.size()-1;i++){
    PVector p =pt.get(i),p2 = pt.get(i+1);
    line(p.x,p.y,p2.x,p2.y);//ellipse(p.x,p.y,3,3);
  }
  float dx = 200-ghostX,dy=200-ghostY,len=sqrt(dx*dx+dy*dy);
  ghostX+=dx/len/3;
  ghostY+=dy/len/3;
}
void mouseReleased(){
  for(int i=pt.size()-1;i>=0;i--){
    pt.remove(i);
    
  }
}
執行圖:

Step 06

特定條件畫出藍色線
程式碼:

ArrayList<PVector>pt = new ArrayList<PVector>();
void setup(){
  size(400,400);
}
float ghostX=400,ghostY=20;
void mouseDragged(){
  pt.add(new PVector(mouseX,mouseY));
}
void draw(){
  background(255);
  strokeWeight(1);
  stroke(0);ellipse(200,200,15,15);
  stroke(0);ellipse(ghostX,ghostY,15,15);
  //if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);
  strokeWeight(4);
  float dpx=0,dpy=0;
  for(int i=0;i<pt.size()-1;i++){
    PVector p=pt.get(i),p2=pt.get(i+1);
    dpx += abs(p2.x-p.x);
    dpy += abs(p2.y-p.y);
  }
  if(dpx>100 && dpy<40)stroke(255,0,0);
  else if(dpx<40 && dpy>100)stroke(0,0,255);
  else stroke(0);
  for(int i=0;i<pt.size()-1;i++){
    PVector p =pt.get(i),p2 = pt.get(i+1);
    line(p.x,p.y,p2.x,p2.y);//ellipse(p.x,p.y,3,3);
  }
  float dx = 200-ghostX,dy=200-ghostY,len=sqrt(dx*dx+dy*dy);
  ghostX+=dx/len/3;
  ghostY+=dy/len/3;
}
void mouseReleased(){
  for(int i=pt.size()-1;i>=0;i--){
    pt.remove(i);
    
  }
}
執行圖:
Step 7

特定條件畫出綠色

程式碼:

ArrayList<PVector>pt = new ArrayList<PVector>();
void setup(){
  size(400,400);
}
float ghostX=400,ghostY=20;
void mouseDragged(){
  pt.add(new PVector(mouseX,mouseY));
}
void draw(){
  background(255);
  strokeWeight(1);
  stroke(0);ellipse(200,200,15,15);
  stroke(0);ellipse(ghostX,ghostY,15,15);
  //if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);
  strokeWeight(4);
  float dpx=0,dpy=0;
  int rightdown = 0;
  for(int i=0;i<pt.size()-1;i++){
    PVector p=pt.get(i),p2=pt.get(i+1);
    dpx += abs(p2.x-p.x);
    dpy += abs(p2.y-p.y);
    if(p2.x-p.x >0 && p2.y-p.y>0)rightdown++;
  }
  if(dpx>100 && dpy<40)stroke(255,0,0);
  else if(dpx<40 && dpy>100)stroke(0,0,255);
  else if(rightdown>25)stroke(0,255,0);
  else stroke(0);
  for(int i=0;i<pt.size()-1;i++){
    PVector p =pt.get(i),p2 = pt.get(i+1);
    line(p.x,p.y,p2.x,p2.y);//ellipse(p.x,p.y,3,3);
  }
  float dx = 200-ghostX,dy=200-ghostY,len=sqrt(dx*dx+dy*dy);
  ghostX+=dx/len/3;
  ghostY+=dy/len/3;
}
void mouseReleased(){
  for(int i=pt.size()-1;i>=0;i--){
    pt.remove(i);
    
  }
}
執行圖:

Step 8

即使畫很快仍能畫出綠色

程式碼:

ArrayList<PVector>pt = new ArrayList<PVector>();
void setup(){
  size(400,400);
}
float ghostX=400,ghostY=20;
void mouseDragged(){
  pt.add(new PVector(mouseX,mouseY));
}
void draw(){
  background(255);
  strokeWeight(1);
  stroke(0);ellipse(200,200,15,15);
  stroke(0);ellipse(ghostX,ghostY,15,15);
  //if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);
  strokeWeight(4);
  float dpx=0,dpy=0;
  float rightdown = 0;
  for(int i=0;i<pt.size()-1;i++){
    PVector p=pt.get(i),p2=pt.get(i+1);
    dpx += abs(p2.x-p.x);
    dpy += abs(p2.y-p.y);
    if(p2.x-p.x >0 && p2.y-p.y>0)rightdown += sqrt(dpx*dpx+dpy*dpy);
    ellipse(p.x,p.y,10,10);
  }
  if(dpx>100 && dpy<40)stroke(255,0,0);
  else if(dpx<40 && dpy>100)stroke(0,0,255);
  else if(rightdown>150)stroke(0,255,0);
  else stroke(0);
  for(int i=0;i<pt.size()-1;i++){
    PVector p =pt.get(i),p2 = pt.get(i+1);
    line(p.x,p.y,p2.x,p2.y);//ellipse(p.x,p.y,3,3);
  }
  float dx = 200-ghostX,dy=200-ghostY,len=sqrt(dx*dx+dy*dy);
  ghostX+=dx/len/3;
  ghostY+=dy/len/3;
}
void mouseReleased(){
  for(int i=pt.size()-1;i>=0;i--){
    pt.remove(i);
    
  }
}
執行後畫很快都能畫出綠色
Step 9
多一個判定畫出綠色線的方式
程式碼:
ArrayList<PVector>pt = new ArrayList<PVector>();
void setup(){
  size(400,400);
}
float ghostX=400,ghostY=20;
void mouseDragged(){
  pt.add(new PVector(mouseX,mouseY));
}
void draw(){
  background(255);
  strokeWeight(1);
  stroke(0);ellipse(200,200,15,15);
  stroke(0);ellipse(ghostX,ghostY,15,15);
  //if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);
  strokeWeight(4);
  float dpx=0,dpy=0;
  float rightdown = 0,rightup =0;
  boolean green_part1 = false,green_ok = false;
  for(int i=0;i<pt.size()-1;i++){
    PVector p=pt.get(i),p2=pt.get(i+1);
    dpx += abs(p2.x-p.x);
    dpy += abs(p2.y-p.y);
    if(p2.x-p.x >0 && p2.y-p.y>0)rightdown += sqrt(dpx*dpx+dpy*dpy);
    if(p2.x-p.x <0 && p2.y-p.y<0)rightup += sqrt(dpx*dpx+dpy*dpy);
    ellipse(p.x,p.y,10,10);
    if(green_part1 == false && rightdown>150)green_part1 =true;
    else if(green_part1 == true && rightup>150)green_ok = true;
  }
  if(dpx>100 && dpy<40)stroke(255,0,0);
  else if(dpx<40 && dpy>100)stroke(0,0,255);
  else if(green_ok)stroke(0,255,0);
  else if(rightdown>150)stroke(0,255,0);
  else stroke(0);
  for(int i=0;i<pt.size()-1;i++){
    PVector p =pt.get(i),p2 = pt.get(i+1);
    line(p.x,p.y,p2.x,p2.y);//ellipse(p.x,p.y,3,3);
  }
  float dx = 200-ghostX,dy=200-ghostY,len=sqrt(dx*dx+dy*dy);
  ghostX+=dx/len/3;
  ghostY+=dy/len/3;
}
void mouseReleased(){
  for(int i=pt.size()-1;i>=0;i--){
    pt.remove(i);
    
  }
}
Step 10
未符合條件的變暗綠色
程式碼:
ArrayList<PVector>pt = new ArrayList<PVector>();
void setup(){
  size(400,400);
}
float ghostX=400,ghostY=20;
void mouseDragged(){
  pt.add(new PVector(mouseX,mouseY));
}
void draw(){
  background(255);
  strokeWeight(1);
  stroke(0);ellipse(200,200,15,15);
  stroke(0);ellipse(ghostX,ghostY,15,15);
  //if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);
  strokeWeight(4);
  float dpx=0,dpy=0;
  float rightdown = 0,green_rightup =0;
  boolean green_part1 = false,green_ok = false;
  for(int i=0;i<pt.size()-1;i++){
    PVector p=pt.get(i),p2=pt.get(i+1);
    dpx += abs(p2.x-p.x);
    dpy += abs(p2.y-p.y);
    if(p2.x-p.x >0 && p2.y-p.y>0)rightdown += sqrt(dpx*dpx+dpy*dpy);
    if(green_part1 && p2.x-p.x >0 && p2.y-p.y<0)green_rightup += sqrt(dpx*dpx+dpy*dpy);
    ellipse(p.x,p.y,10,10);
    if(green_part1 == false && rightdown>150)green_part1 =true;
    else if(green_part1 == true && green_rightup>150)green_ok = true;
  }
  if(dpx>100 && dpy<40)stroke(255,0,0);
  else if(dpx<40 && dpy>100)stroke(0,0,255);
  else if(green_ok)stroke(0,255,0);
  else if(green_part1)stroke(0,128,0);
  else stroke(0);
  for(int i=0;i<pt.size()-1;i++){
    PVector p =pt.get(i),p2 = pt.get(i+1);
    line(p.x,p.y,p2.x,p2.y);//ellipse(p.x,p.y,3,3);
  }
  float dx = 200-ghostX,dy=200-ghostY,len=sqrt(dx*dx+dy*dy);
  ghostX+=dx/len/3;
  ghostY+=dy/len/3;
}
void mouseReleased(){
  for(int i=pt.size()-1;i>=0;i--){
    pt.remove(i);
    
  }
}
執行圖:

Step 11
特定條件畫出黃色線
程式碼:
ArrayList<PVector>pt = new ArrayList<PVector>();
void setup(){
  size(400,400);
}
float ghostX=400,ghostY=20;
void mouseDragged(){
  pt.add(new PVector(mouseX,mouseY));
}
void draw(){
  background(255);
  strokeWeight(1);
  stroke(0);ellipse(200,200,15,15);
  stroke(0);ellipse(ghostX,ghostY,15,15);
  //if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);
  strokeWeight(4);
  float dpx=0,dpy=0;
  float rightdown = 0,green_rightup =0;
  float rightup=0,yellow_rightdown=0;
  boolean green_part1 = false,green_ok = false;
  boolean yellow_part1 = false,yellow_ok = false;
  for(int i=0;i<pt.size()-1;i++){
    PVector p=pt.get(i),p2=pt.get(i+1);
    dpx += abs(p2.x-p.x);
    dpy += abs(p2.y-p.y);
    if(p2.x-p.x >0 && p2.y-p.y>0)rightdown += sqrt(dpx*dpx+dpy*dpy);
    if(green_part1 && p2.x-p.x >0 && p2.y-p.y<0)green_rightup += sqrt(dpx*dpx+dpy*dpy);
    if(p2.x-p.x >0 && p2.y-p.y<0)rightup += sqrt(dpx*dpx+dpy*dpy);
    if(yellow_part1 && p2.x-p.x >0 && p2.y-p.y>0)yellow_rightdown += sqrt(dpx*dpx+dpy*dpy);
    
    //ellipse(p.x,p.y,10,10);
    if(green_part1 == false && rightdown>150)green_part1 =true;
    else if(green_part1 == true && green_rightup>150)green_ok = true;
    if(yellow_part1 == false && rightdown>150)yellow_part1 =true;
    else if(yellow_part1 == true && yellow_rightdown>150)yellow_ok = true;
  }
  if(dpx>100 && dpy<40)stroke(255,0,0);
  else if(dpx<40 && dpy>100)stroke(0,0,255);
  else if(green_ok)stroke(0,255,0);
  ///else if(green_part1)stroke(0,128,0);
  else if(yellow_ok)stroke(255,255,0);
  else stroke(0);
  for(int i=0;i<pt.size()-1;i++){
    PVector p =pt.get(i),p2 = pt.get(i+1);
    line(p.x,p.y,p2.x,p2.y);//ellipse(p.x,p.y,3,3);
  }
  float dx = 200-ghostX,dy=200-ghostY,len=sqrt(dx*dx+dy*dy);
  ghostX+=dx/len/3;
  ghostY+=dy/len/3;
}
void mouseReleased(){
  for(int i=pt.size()-1;i>=0;i--){
    pt.remove(i);
    
  }
}
執行圖: