小畫家概念
void setup()
{
size(600,500);
fill(#ff0000);rect(0,0,100,100);//第一個紅色
fill(#ffff00);rect(0,100,100,100);//第二個黃色
fill(#00ff00);rect(0,200,100,100);//第三個綠色
strokeWeight(5);
}
void keyPressed()
{觸發事件按下去
save("yes.png");//存檔
}
void draw()
{
line(100,0,100,500);
if(mousePressed&&mouseX<100)
{
if(mouseY<100)stroke(#ff0000);
else if(mouseY<200)stroke(#ffff00);
else if(mouseY<300)stroke(#00ff00);
}
if(mousePressed && mouseX>100)
{
line(mouseX,mouseY,pmouseX,pmouseY);
}
}
wee02😀😁
♥把PDE_zh.properties丟進->processing-3.5.3->lib->languages
就能將processing的介面換成中文版了!
---
♥滑鼠點擊畫面就能切換綠色->紫色
♥程式碼-
void setup()
{
size(300,300);
}
void draw()
{
if(mousePressed) background(255,0,255);
else background(0,255,0);
}
---
♥程式碼-
void setup()
{
size(300,300);
}
void draw()
{
if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);
}
---
♥試圖做做看小畫家
第一週及第二週進度
程式和成果:
size(x,y); // 尺寸(x,y);
🔰做法:
打出線條的函式、起點座標和終點座標即可產生線條
成果請看上圖
ellipse(cx,cy, w, h); // 圓形(圓x,圓y, 寬,高);(如上圖)
🔰做法:
打出圓形的函式、圓心位置和圓的高寬即可產生圓形
成果請看上圖
rect(sx,sy, w,h); //方形(方x,方y, 寬,高);(如上圖)
🔰做法:
打出圓形的函式、方形中心位置和方的高寬即可產生方形
成果請看上圖
//設定畫面大小和滑鼠點擊後變色(如上圖)
🔰做法:
先設定畫面大小,接著設定初始背景顏色,再寫下如果當滑鼠點擊時所產生的顏色
原始設定顏色是藍色,點擊背景會變綠色
void setup()
{
size(500,500);
}
void draw()
{
if(mousePressed) background(0,255,0);
else background(#00B9FF);
}
//設定畫面大小及隨著鼠標畫出線條(如上圖)
🔰做法:
先設定畫面大小,再加一個函式是當滑鼠點擊時會畫出線條
void setup()
{
size(500,500);
}
void draw()
{
if(mousePressed)
{
line(mouseX,mouseY, pmouseX,pmouseY);
}
}
🔰做法:
先設定畫面大小,在畫面左側新增各種顏色的色塊,當滑鼠點擊和移動至該色塊時,畫筆改成該色塊的顏色,當滑鼠點擊並移開至非色塊之區域時,可以畫出上個所選色塊的顏色線條
void setup()
{
size(600,600);
}
void draw()
{
fill(#FF0303); rect(0,0, 100,100);
fill(#FF8103); rect(0,100, 100,100);
fill(#FAFF03); rect(0,200, 100,100);
fill(#03FF11); rect(0,300, 100,100);
fill(#0A03FF); rect(0,400,100,100);
fill(#0A0A0A); rect(0,500,100,100);
if(mousePressed && mouseX<100)
{
if(mouseY<100) stroke(#FF0303);
else if(mouseY<200) stroke(#FF8103);
else if(mouseY<300) stroke(#FAFF03);
else if(mouseY<400) stroke(#03FF11);
else if(mouseY<500) stroke(#0A03FF);
else if(mouseY<600) stroke(#0A0A0A);
}
else if(mousePressed && mouseX>100)
{
line(mouseX,mouseY, pmouseX, pmouseY);
}
}
//進階練習:附橡皮擦的調色盤及繪圖區(如上兩圖)
🔰做法:
設定畫面大小,並新增白色及其他顏色色塊,並跟上面一樣設定色塊區域供人點擊選擇,以及非色塊區域供人選擇後可以上次選擇色塊之色條
void setup()
{
size(600,700);
}
void draw()
{
fill(#FF0303); rect(0,0, 100,100);
fill(#FF8103); rect(0,100, 100,100);
fill(#FAFF03); rect(0,200, 100,100);
fill(#03FF11); rect(0,300, 100,100);
fill(#0A03FF); rect(0,400,100,100);
fill(#0A0A0A); rect(0,500,100,100);
fill(#E3FFFD); rect(0,600,100,100);
if(mousePressed && mouseX<100)
{
if(mouseY<100) stroke(#FF0303);
else if(mouseY<200) stroke(#FF8103);
else if(mouseY<300) stroke(#FAFF03);
else if(mouseY<400) stroke(#03FF11);
else if(mouseY<500) stroke(#0A03FF);
else if(mouseY<600) stroke(#0A0A0A);
else if(mouseY<700) stroke(#E3FFFD);
}
else if(mousePressed && mouseX>100)
{
line(mouseX,mouseY, pmouseX, pmouseY);
}
}
//簡易調色盤有調粗度且可以自動存檔的小畫家
//調色盤和粗度放在設定中
🔰做法:
先在設定中設定畫面大小及供人選擇的色塊還有線條粗度,並新增一個函式按下任意鍵在英文模式中可以儲存圖片,並跟前面一樣提供繪圖區可以自由繪圖
⚠️注意事項:
注意函式單字有無變色
注意輸入法
void setup()
{
size(600,700);
fill(#FF0303); rect(0,0, 100,100);
fill(#FF8103); rect(0,100, 100,100);
fill(#FAFF03); rect(0,200, 100,100);
fill(#03FF11); rect(0,300, 100,100);
fill(#0A03FF); rect(0,400,100,100);
fill(#0A0A0A); rect(0,500,100,100);
fill(#E3FFFD); rect(0,600,100,100);
strokeWeight(10);
}
void keyPressed()
{
save("auto.png");
}
void draw()
{
if(mousePressed && mouseX<100)
{
if(mouseY<100) stroke(#FF0303);
else if(mouseY<200) stroke(#FF8103);
else if(mouseY<300) stroke(#FAFF03);
else if(mouseY<400) stroke(#03FF11);
else if(mouseY<500) stroke(#0A03FF);
else if(mouseY<600) stroke(#0A0A0A);
else if(mouseY<700) stroke(#E3FFFD);
}
else if(mousePressed && mouseX>100)
{
line(mouseX,mouseY, pmouseX, pmouseY);
}
}
今天一開始，複習了上週上過了東西。
line(x1,x2,y1,y2);畫一條線
size(長,高)設定視窗大小
ellipse(x1,y1,半徑x,半徑y)畫一個圓
background(顏色)改變背景色
然後今天交新的東西，我們用滑鼠來改變畫面。
點一下能讓畫面變色
void setup(){
size(500,500);
}
void draw(){//畫圖
if(mousePressed)background(255,0,255);
else background(0,255,0);
}
