使用Processing做出小畫家的效果
重要關鍵字
(mouseX,mouseY)///滑鼠"目前"位置
(pmouseX,pmouseY)///滑鼠"之前"位置
p=previous(先前)
第一步，先熟悉使用程式碼讓滑鼠控制畫面
1.
 |
| 現在是百變怪的顏色 |
2.
程式碼:
 |
| 按下後變成深紅色 |
void setup(){
size(500,500);
}
void draw(){
if(mousePressed) background(155,50,50);
else background(150,100,150);
}
第二步，固定一點使用滑鼠點出其他點畫線
1.
 |
| 兩點一線，劃出一隻條碼貓 |
程式碼:
void setup(){
size(500,500);///螢幕大小
}
void draw(){
if(mousePressed)line(mouseX,mouseY,0,0);
///當滑鼠按下時會記錄滑鼠所在位置的座標，與(0,0)連線
}
不過我們小畫家不能一直都連到原點，所以下一步。第三步，把(0,0)改掉!!完成線部分
1.
draw()函式中這裡只做了一個簡單的改動，將(0,0)改成pmouseX,pmouseY，按下滑鼠即可畫圖!
 |
| 燈愣!~~極細線條貓就誕生了 |
void draw(){
if(mousePressed)line(mouseX,mouseY,pmouseX,pmouseY);
///當滑鼠按下時會記錄滑鼠所在位置的座標，與pmouseX,pmouseY連線
}
第四步，將上禮拜的內容合併，即可做出改顏色及筆觸粗細的功能
1.改筆觸顏色
 |
| 醜到爆掉小花花 |
程式碼:
void setup(){///畫出3個方塊，可以選出想要的顏色
size(500,500);
fill(155,50,50); rect(0,0,100,100);//深红色
fill(100,255,100); rect(0,100,100,100);//綠色
fill(106,90,205); rect(0,200,100,100);//淺紫色
}
void draw(){///改變筆刷顏色，偵測滑鼠點案的區塊，使其變色
if(mousePressed){
if(mouseX<100){///X不超過100
if(mouseY<100) stroke(155,50,50);//红色((Y小於100
else if(mouseY<200) stroke(100,255,100);//綠色((Y小於200
else if(mouseY<300) stroke(106,90,205);//淺紫色 ((Y小於300
}
else line(mouseX,mouseY,pmouseX,pmouseY);
}
}
2.改筆觸粗細
1.
 |
| 夏日酷涼貓 |
程式碼:
void setup(){
size(500,500);
rect(0,0,100,100); ellipse(50,50,10,10);//10號筆
rect(0,100,100,100); ellipse(50,150,5,5);//5號筆
}
void draw(){
if(mousePressed){
if(mouseX<100){
if(mouseY<100) strokeWeight(10);//將筆觸改為10
else if(mouseY<200) strokeWeight(5);//將筆觸改為5
}else line(mouseX,mouseY,pmouseX,pmouseY);
}
}
第五步，使用for做出可改筆觸粗細及顏色的小畫家
1.試做版1.0V
 |
| 醜醜顏色 |
void setup(){
size(500,500);
for(int i=1;i<10;i+=2){
rect(0,i*50,50,50);
ellipse(25,25+i*50,i,i);//自動產生5個不同大小的筆觸
}
fill(155,50,50); rect(400,0,100,100);//深红色
fill(100,255,100); rect(400,100,100,100);//綠色
fill(106,90,205); rect(400,200,100,100);//淺紫色
}
void draw(){
if(mousePressed){
if(mousePressed){
if(mouseX>400){
if(mouseY<100) stroke(155,50,50);//红色
else if(mouseY<200) stroke(100,255,100);//綠色
else if(mouseY<300) stroke(106,90,205);//淺紫色
}
else line(mouseX,mouseY,pmouseX,pmouseY);
}
if(mouseX<50){
for(int i=1;i<10;i+=2){
if(mouseY>i*50 && mouseY<i*50+50){
strokeWeight(i);
}
}
}else line(mouseX,mouseY,pmouseX,pmouseY);
}
}
第六步，最終更改版
1.最終更改版
 |
| 較完整的版本C: |
程式碼:
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);
}
}
以上就是這周的簡易小畫家~祝大家雙十快樂~~
沒有留言:
張貼留言