week02

🔹今天老師上課要教的是小畫家

void setup() { size(500,500); } void draw() { if(mousePressed)background(255,0,0); else background(0,255,0); }

沒有壓下去的時候是綠色，有壓下去的時候是紅色

🔸接著我們讓跟著滑鼠移動繪畫

void setup() { size(500,500); } void draw() { if(mousePressed)line(mouseX,mouseY,0,0); }

🔹更改兩個單字，做出小畫家，可以自己畫出小人，呵呵

void setup() { size(500,500); } void draw() { if(mousePressed)line(mouseX,mouseY,pmouseX,pmouseY); }

🔸接著配上顏色

void setup() { size(500,500); fill(255,0,0);rect(0,0,100,100); fill(0,255,0);rect(0,100,100,100); } void draw() { if(mousePressed) { if(mouseX<100) { if(mouseY<100)stroke(255,0,0); else if(mouseY<200)stroke(0,255,0); }else line(mouseX,mouseY,pmouseX,pmouseY); } }

🔹接著我們改變一下筆刷粗度

void setup() { size(500,500); rect(0,0,100,100);ellipse(50,50,8,8); rect(0,100,100,100);ellipse(50,150,4,4); } void draw() { if(mousePressed) { if(mouseX<100) { if(mouseY<100)strokeWeight(8); else if(mouseY<200)strokeWeight(4); }else line(mouseX,mouseY,pmouseX,pmouseY); } }

🔸我們用for迴圈試試看

void setup(){ size(500,500); for(int i=1;i<8;i++){ rect(0,i*50,50,50); ellipse(25,25+i*50,i,i); } } void draw(){ if(mousePressed){ if(mouseX<100){ for(int i=1;i<8;i++){ if(mouseY>i*50 && mouseY<i*50+50){ strokeWeight(i); } } }else line(mouseX,mouseY,pmouseX,pmouseY); } }

🔹這是剛剛的簡易版，徒手煉鋼做出這樣的效果

void setup(){ size(500,500); rect(0,50,50,50);ellipse(25,25+50,1,1); rect(0,100,50,50);ellipse(25,25+100,2,2); rect(0,150,50,50);ellipse(25,25+150,3,3); rect(0,200,50,50);ellipse(25,25+200,4,4); rect(0,250,50,50);ellipse(25,25+250,5,5); rect(0,300,50,50);ellipse(25,25+300,6,6); rect(0,350,50,50);ellipse(25,25+350,7,7); rect(0,400,50,50);ellipse(25,25+400,8,8); } void draw(){ if(mousePressed){ if(mouseX<50){ if(mouseY>1*50 && mouseY<1*50+50)strokeWeight(1); if(mouseY>2*50 && mouseY<2*50+50)strokeWeight(2); if(mouseY>3*50 && mouseY<3*50+50)strokeWeight(3); if(mouseY>4*50 && mouseY<4*50+50)strokeWeight(4); if(mouseY>5*50 && mouseY<5*50+50)strokeWeight(5); if(mouseY>6*50 && mouseY<6*50+50)strokeWeight(6); if(mouseY>7*50 && mouseY<7*50+50)strokeWeight(7); if(mouseY>8*50 && mouseY<8*50+50)strokeWeight(8); }else line(mouseX,mouseY,pmouseX,pmouseY); } }

🔸也換成筆刷顏色看看

void setup(){ size(500,500); fill(#FF0000);rect(0,50,50,50); fill(#FF8000);rect(0,100,50,50); fill(#EDFF00);rect(0,150,50,50); fill(#10FF00);rect(0,200,50,50); fill(#0057FF);rect(0,250,50,50); fill(#0092FF);rect(0,300,50,50); fill(#8B00FF);rect(0,350,50,50); fill(#FF00D5);rect(0,400,50,50); } void draw(){ if(mousePressed){ if(mouseX<50){ if(mouseY>1*50 && mouseY<1*50+50)stroke(#FF0000); if(mouseY>2*50 && mouseY<2*50+50)stroke(#FF8000); if(mouseY>3*50 && mouseY<3*50+50)stroke(#EDFF00); if(mouseY>4*50 && mouseY<4*50+50)stroke(#10FF00); if(mouseY>5*50 && mouseY<5*50+50)stroke(#0057FF); if(mouseY>6*50 && mouseY<6*50+50)stroke(#0092FF); if(mouseY>7*50 && mouseY<7*50+50)stroke(#8B00FF); if(mouseY>8*50 && mouseY<8*50+50)stroke(#FF00D5); }else line(mouseX,mouseY,pmouseX,pmouseY); } }

🔹我們讓兩個合併起來，完成小畫家!!

void setup(){ size(500,500); for(int i=1;i<10;i++){ rect(0,i*50,50,50); ellipse(25,25+i*50,i,i);//自動產生10個不同大小的筆觸 } fill(#FF0505);rect(450,50,50,50); fill(#FFB005);rect(450,100,50,50); fill(#D0FF05);rect(450,150,50,50); fill(#05FF24);rect(450,200,50,50); fill(#05DCFF);rect(450,250,50,50); fill(#051BFF);rect(450,300,50,50); fill(#7905FF);rect(450,350,50,50); fill(#FF05EF);rect(450,400,50,50); } void draw(){ if(mousePressed){ if(mouseX<50){ for(int i=1;i<10;i++){ if(mouseY>i*50 && mouseY<i*50+50){ strokeWeight(i); } } } if(mouseX>450){ if(mouseY>1*50 && mouseY<1*50+50) stroke(#FF0505); if(mouseY>2*50 && mouseY<2*50+50) stroke(#FFB005); if(mouseY>3*50 && mouseY<3*50+50) stroke(#D0FF05); if(mouseY>4*50 && mouseY<4*50+50) stroke(#05FF24); if(mouseY>5*50 && mouseY<5*50+50) stroke(#05DCFF); if(mouseY>6*50 && mouseY<6*50+50) stroke(#051BFF); if(mouseY>7*50 && mouseY<7*50+50) stroke(#7905FF); if(mouseY>8*50 && mouseY<8*50+50) stroke(#FF05EF); }else line(mouseX,mouseY,pmouseX,pmouseY); } }