第一週及第二週進度
程式和成果:
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);
}
}
沒有留言:
張貼留言