=========================================================================
SEVENTH
今天的主題是Google的Halloween貓咪畫線遊戲
1.按下滑鼠才會畫線，放開線就會消失
void setup(){ size(400,400); background(255); } void draw(){ if(mousePressed) line(mouseX, mouseY, pmouseX, pmouseY); } void mouseReleased(){ background(255); } 註:mouseReleased裡的background是拿來清空背景的
2.讓鬼往我們的主角這邊走
void setup(){ size(400,400); background(255); } float ghostX = 400, ghostY = 20; void draw(){ ellipse(200,200,15,15); if(mousePressed) line(mouseX, mouseY, pmouseX, pmouseY); ellipse(ghostX, ghostY, 15, 15); 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); } 註:目前鬼的軌跡還有殘影
3.將線改成畫出圓點，並且解決鬼的殘影
ArrayList<PVector> pt = new ArrayList<PVector>();//很多個點
void setup(){
size(400,400);
background(255);
}
float ghostX = 400, ghostY = 20;
void mouseDragged(){//按下mouse鍵,再拖它
pt.add(new PVector(mouseX,mouseY));
}
void draw(){
background(255);
ellipse(200,200,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);
}
ellipse(ghostX, ghostY, 15, 15);
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);
}註:這裡要用ArrayList這個資料結構4.能夠正常畫出線，並且會消失
ArrayList<PVector> pt = new ArrayList<PVector>();//很多個點 void setup(){ size(400,400); background(255); } float ghostX = 400, ghostY = 20; void mouseDragged(){//按下mouse鍵,再拖它 pt.add(new PVector(mouseX,mouseY)); } void draw(){ background(255); ellipse(200,200,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); } ellipse(ghostX, ghostY, 15, 15); 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); } } 註:mouseReleased=>remove line
5.畫出橫線時會是紅線，顏色是要用來辨識的
ArrayList<PVector> pt = new ArrayList<PVector>();//很多個點
void setup(){
size(400,400);
background(255);
}
float ghostX = 400, ghostY = 20;
void mouseDragged(){//按下mouse鍵,再拖它
pt.add(new PVector(mouseX,mouseY));
}
void draw(){
background(255);
ellipse(200,200,15,15);
ellipse(ghostX, ghostY, 15, 15);
stroke(4);
float dpx=0, dpy=0;//要看p.x p2.x的差距, p.y p2.y的差距
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(dpx>100 && dpy<40) stroke(255,0,0);//type1 紅色的橫線
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);
}
}註:這邊利用X,Y移動量來判斷
6.增加直線會是藍色的
ArrayList<PVector> pt = new ArrayList<PVector>();//很多個點
void setup(){
size(400,400);
background(255);
}
float ghostX = 400, ghostY = 20;
void mouseDragged(){//按下mouse鍵,再拖它
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);
strokeWeight(4);
float dpx=0, dpy=0;//要看p.x p2.x的差距, p.y p2.y的差距
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(dpx>100 && dpy<40) stroke(255,0,0);//type1 紅色的橫線
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);
}
}
7.畫出右下角綠色斜線
ArrayList<PVector> pt = new ArrayList<PVector>();//很多個點
void setup(){
size(400,400);
background(255);
}
float ghostX = 400, ghostY = 20;
void mouseDragged(){//按下mouse鍵,再拖它
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);
strokeWeight(4);
float dpx=0, dpy=0;//要看p.x p2.x的差距, p.y p2.y的差距
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);//累積x的移動量
dpy += abs(p2.y - p.y);//累積y的移動量
if(p2.x - p.x > 0 && p2.y - p.y > 0) rightdown++;
}
if(dpx>100 && dpy<40) stroke(255,0,0);//type1 紅色的橫線
else if(dpx<40 && dpy>100) stroke(0,0,255);
else if(rightdown>30) 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);
}
}
8.解決了畫出斜線因為點不夠所以無法顯示綠色的問題
ArrayList<PVector> pt = new ArrayList<PVector>();//很多個點 void setup(){ size(400,400); background(255); } float ghostX = 400, ghostY = 20; void mouseDragged(){//按下mouse鍵,再拖它 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); strokeWeight(4); float dpx=0, dpy=0;//要看p.x p2.x的差距, p.y p2.y的差距 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);//累積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); ellipse(p.x, p.y, 10, 10); } if(dpx>100 && dpy<40) stroke(255,0,0);//type1 紅色的橫線 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); } } 註:用算三角形斜邊的方法求出X,Y移動量
9.先能夠辨識出勾勾或是倒勾才顯示綠色
ArrayList<PVector> pt = new ArrayList<PVector>();//很多個點
void setup(){
size(400,400);
background(255);
}
float ghostX = 400, ghostY = 20;
void mouseDragged(){//按下mouse鍵,再拖它
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);
strokeWeight(4);
float dpx=0, dpy=0;//要看p.x p2.x的差距, p.y p2.y的差距
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);//累積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(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);//type1 紅色的橫線
else if(dpx<40 && dpy>100) stroke(0,0,255);
else if(green_ok) 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);
}
}
10.能夠辨識出只有勾勾才會顯示出綠色
ArrayList<PVector> pt = new ArrayList<PVector>();//很多個點
void setup(){
size(400,400);
background(255);
}
float ghostX = 400, ghostY = 20;
void mouseDragged(){//按下mouse鍵,再拖它
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);
strokeWeight(4);
float dpx=0, dpy=0;//要看p.x p2.x的差距, p.y p2.y的差距
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);//累積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) 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);//type1 紅色的橫線
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);
}
}
11.最後將倒勾的黃色以上面綠色正勾類似的方式給加上去
ArrayList<PVector> pt = new ArrayList<PVector>();//很多個點
void setup(){
size(400,400);
background(255);
}
float ghostX = 400, ghostY = 20;
void mouseDragged(){//按下mouse鍵,再拖它
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);
strokeWeight(4);
float dpx=0, dpy=0;//要看p.x p2.x的差距, p.y p2.y的差距
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);//累積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) 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 && rightup>150) yellow_part1 = true;
else if(yellow_part1 == true && yellow_rightdown>150) yellow_ok = true;
}
if(dpx>100 && dpy<40) stroke(255,0,0);//type1 紅色的橫線
else if(dpx<40 && dpy>100) stroke(0,0,255);
else if(green_ok) stroke(0,255,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);
}
}
最後確認每個形狀跟顏色是否都能夠完整顯示
沒有留言:
張貼留言