1026

 STEP 01

1.想做類似google的萬聖節遊戲

2.打開processing，開視窗400*400，加背景

3.滑鼠按下去，以滑鼠座標畫線，會留殘影

4.滑鼠鬆開，重填背景，消除筆跡

STEP 02

1.加一個圓作為鬼

2.宣告鬼X，鬼Y，dx，dy，控制它移動

3.鬼的移動產生黑線殘影，很糟糕

STEP 03

1.解決殘影問題，改用資料結構畫點，點連在一起像線

STEP 04

1.將滑鼠拖曳的部分配合另一個資料結構點連成畫線

2.放開滑鼠清除筆跡改用倒著的for迴圈去清除

STEP 05

1.接下來要做畫線種類的判定，橫線直線之類的

2.根據參考的部分，橫線為紅色，未判定的部分用else設為黑色

3.宣告dpx，dpy作為x，y累積的位移，無方向性所以abs取絕對值，大於小於設定的判定數值，畫出的線即變顏色

4.仍有一點問題，畫橫線改變顏色時，會讓設為主角跟鬼的圓圈也變色

STEP  06

1.畫藍線，藍線代表直線，同樣利用dpx，dpy，把橫線的大小於翻轉，判定數值反過來，即刻用於判定直線，再利用stroke變色

2.在主角和鬼的程式碼之前加上stroke(0);定為黑色，使其不會受到畫線變色的影響，並用strokeWeight使框線細一點，跟畫出來的做個區分

STEP 07

1.之後要做綠色的線，綠色的是打勾

2.這裡預設打勾是從左邊往右下再往右上

3.先宣告rightdown，然後利用移動使其++，再設值讓他變色

4.用++有缺點，如果滑鼠拖曳移動太快，+不到設定的值就無法變色

STEP 08

1.將rightdown宣告改用float，並利用dpx和dpy，解決移動過快無法變色的問題

STEP 09

1.加上第二段往右上的部分，宣告rightup

2.將rightup照rightdown的方式做，並且因為將打勾分成右下右上兩階段，宣告兩個布林變數，一個用於判定第一部分，一個判定是否能變綠色，預設為否

                                                               只過part1不變色

3.用if設定條件，使他符合時更改為True

4.當green_ok是true的時候，就變綠色，亦可讓第一階段通過時，給暗一點的綠色(非必要)

STEP 10

1.黃色的是倒著的勾，改一些綠線的程式碼便可做出

須注意他的右上右下等要另外宣告

今週結果:

ArrayList<PVector> pt = new ArrayList<PVector>();

void setup(){

  size(400,400);

  background(255);

}

float ghostX=40,ghostY=20;

void mouseDragged(){

  pt.add( new PVector(mouseX,mouseY));

}

void draw(){

  //if(mousePressed) line(mouseX, mouseY, pmouseX, pmouseY);

  background(255);

  strokeWeight(1);

  stroke(0);ellipse(200,200,15,15);

  stroke(0);ellipse(ghostX,ghostY,15,15);

  strokeWeight(4);

  

  float dpx=0,dpy=0;

  float rightdown = 0,rightup = 0;//往右下，往右上

  float rightup4 = 0,rightdown4 = 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);//X位移

    dpy += abs(p2.y - p.y);//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) rightup+=sqrt(dpx*dpx + dpy*dpy);

    if(p2.x-p.x > 0 && p2.y-p.y < 0) rightup4+=sqrt(dpx*dpx + dpy*dpy);

    if(yellow_part1 && p2.x-p.x > 0 && p2.y-p.y > 0) rightdown4+=sqrt(dpx*dpx + dpy*dpy);

    if(green_part1==false && rightdown>150) green_part1 = true;

    else if(green_part1==true && rightup>150) green_ok= true;

    if(yellow_part1==false && rightup4>150) yellow_part1 = true;

    else if(yellow_part1==true && rightdown4>150) yellow_ok= true;

  }

  if(dpx>100 && dpy<40) stroke(255,0,0);//type1 red line

  else if(dpx<40 && dpy>100) stroke(0,0,255);//type 2 blue line

  else if(green_ok) stroke(0,255,0);//type3 green line完成

  //else if(green_part1) stroke(0,100,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);

  }

  

  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--){//倒過來的for迴圈

    pt.remove(i);

  }

}