今天一開始我們先用processing
使用if 和mousePressed 讓畫布可以按一下滑鼠後變色
之後改寫一下程式
void setup(){
size(500,500);
}
void draw(){
if (mousePressed) line(mouseX,mouseY,0,0);
}
使用mousePressed加上line(mouseX,mouseY,0,0)可以使用滑鼠點擊就會從左上角為原點畫出線條到你的滑鼠位置
之後把line(mouseX,mouseY,0,0);裡面的0,0改成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 if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);
}
使用四個if 加上stroke,小畫家能夠讓你的滑鼠點左上角的紅色方塊後,畫出的線條變成紅色的,點綠色方塊後,畫出的線條就會是綠色的
之後我們要寫更改筆畫粗細的程式
先用ellipse在左上角畫出相對應筆畫粗細的圓形
然後把stroke改成strokeWeight(粗細)讓程式變成只要點左上角的圓形
就可以畫出相對應粗細的線
void setup(){
size(500,500);
rect(0,0,100,100);ellipse(50,50,8,8);//8的圓
rect(0,100,100,100);ellipse(50,150,4,4);//4的圓
}
void draw(){
if(mousePressed){
if(mouseX<100){
if(mouseY<100)strokeWeight(8);//粗
else if (mouseY<200)strokeWeight(4);//中
}else if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);
}
}
之後可以用迴圈的方式做出8種不同粗細的筆觸
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<50){
for(int i=1;i<8;i++){
if(mouseY>i*50 && mouseY<i*50+50){
strokeWeight(i);
}
}
}else if(mousePressed) 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 if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);
}
}
再來可以把fill加上去,把ellipse刪掉,左邊的格子就會變成有顏色的
然後把strokeWeight改成stroke就可以變成更改筆畫顏色
void setup(){
size(500,500);
fill(#FF0000);rect(0,50,50,50);
fill(#FF5E00);rect(0,100,50,50);
fill(#FFF700);rect(0,150,50,50);
fill(#00FF39);rect(0,200,50,50);
fill(#00F4FF);rect(0,250,50,50);
fill(#001BFF);rect(0,300,50,50);
fill(#CF00FF);rect(0,350,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(#FF5E00);
if(mouseY>3*50 && mouseY<3*50+50)stroke(#FFF700);
if(mouseY>4*50 && mouseY<4*50+50)stroke(#00FF39);
if(mouseY>5*50 && mouseY<5*50+50)stroke(#00F4FF);
if(mouseY>6*50 && mouseY<6*50+50)stroke(#001BFF);
if(mouseY>7*50 && mouseY<7*50+50)stroke(#CF00FF);
}else if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);
}
}
最後把筆觸和顏色的程式結合
就可以做到在一個畫布裡能夠更改筆觸顏色和粗細
只需要改變方形和圓形的位置就可以了
void setup(){
size(500,500);
fill(#FF0000);rect(0,50,50,50);
fill(#FF5E00);rect(0,100,50,50);
fill(#FFF700);rect(0,150,50,50);
fill(#00FF39);rect(0,200,50,50);
fill(#00F4FF);rect(0,250,50,50);
fill(#001BFF);rect(0,300,50,50);
fill(#CF00FF);rect(0,350,50,50);
fill(#FFFFFF);
rect(450,50,50,50);ellipse(475,25+50,1,1);
rect(450,100,50,50);ellipse(475,25+100,2,2);
rect(450,150,50,50);ellipse(475,25+150,3,3);
rect(450,200,50,50);ellipse(475,25+200,4,4);
rect(450,250,50,50);ellipse(475,25+250,5,5);
rect(450,300,50,50);ellipse(475,25+300,6,6);
rect(450,350,50,50);ellipse(475,25+350,7,7);
rect(450,400,50,50);ellipse(475,25+400,8,8);
}
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(#FF5E00);
if(mouseY>3*50 && mouseY<3*50+50)stroke(#FFF700);
if(mouseY>4*50 && mouseY<4*50+50)stroke(#00FF39);
if(mouseY>5*50 && mouseY<5*50+50)stroke(#00F4FF);
if(mouseY>6*50 && mouseY<6*50+50)stroke(#001BFF);
if(mouseY>7*50 && mouseY<7*50+50)stroke(#CF00FF);
}
if(mouseX>450){
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 if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);
}
}
沒有留言:
張貼留言