Processing-coding練習
 |
| 美好的遠距日.襪子不用濕濕:) |
- 陣列與for()迴圈
- 畫棋盤
- 放棋子
- 用滑鼠放棋子
- Generative Art
- black Circle
- Random circle
本日程式碼重點
for(int i=x;i<y;i++)//可輕鬆地做重複的動作
int [][]x = {};//可開一堆位置紀錄需要記錄的資料
random(x);//可自動隨機生產數值
1.使用for()迴圈來畫棋盤~
第一步，先找出畫棋盤的規律(1-2)，找到規律之後就可以使用for迴圈做出快速版的畫線了!(1-3)最後就可以畫出(1-4)整齊的棋盤了。
 |
| (1-1)老實版 |
 |
| (1-2)找到了規律~ |
(1-1)程式碼:
void setup(){size(500,500);}
void draw(){
background(253,236,180);
line(50,50,50,450);
line(100,50,100,450);
line(150,50,150,450);
line(200,50,200,450);}
 |
| for迴圈版 |
(1-3)程式碼:
void setup(){size(500,500);}
void draw(){
background(253,236,180);
for(int i=0;i<9;i++){
line(50+50*i,50,50+50*i,450);//使用for迴圈不用一條一條畫 }}
 |
| (1.4) |
(1-4)程式碼:
void setup(){ size(500,500);}
void draw(){
background(253,236,180);
for(int i=0;i<9;i++){
line(50+50*i,50,50+50*i,450);
line(50,50+50*i,450,50+50*i);}}
2.畫棋子
首先先複習一下陣列的概念
 |
| (2-1)陣列概念複習 |
程式碼與註解:
int [][]c = //左手i右手j
{ j=0,j=1,j=2
i=0 {1,0,0},
i=1 {0,1,0},
i=2 {0,0,1}
};//對照上圖(2-1)
void setup(){ size(300,300);}
void draw()
{
for(int i=0; i<3; i++)//左手
{
for(int j=0; j<3; j++)//右手
{
if(c[i][j]==0) fill(128);//確認每個位置是否為0
else fill(60,160,60);//不是0就要放上白棋
rect(j*100, i*100, 100, 100);}
}
}
 |
| (2-2)用陣列畫出棋子 |
試試看使用陣列放棋子(2-2)
複習陣列宣告方式
- C語言:int go[9][9];
- Java/processing:int [][]go = new int[9][9];
程式碼:
int [][]go =
{//先宣告陣列用來紀錄旗子的位置
{0,0,0,0,0,0,0,0,1},
{0,0,0,0,0,0,0,1,0},
{0,0,0,0,0,0,1,0,0},
{0,0,0,0,0,1,0,0,0},
{0,0,0,0,1,0,0,0,0},
{0,0,0,1,0,0,0,0,0},
{0,0,1,0,0,0,0,0,0},
{0,1,0,0,0,0,0,0,0},
{1,1,0,0,0,0,0,0,0}
};
void setup()
{
size(500,500);
}
void draw()
{
background(253,236,180);
for(int i=0; i<9; i++)
{
line(50+50*i, 50, 50+50*i, 450);
line(50, 50+50*i, 450, 50+50*i);
}
for(int i=0; i<9; i++)
{
for(int j=0; j<9; j++)
{
if(go[i][j]==1)
{
int x=50+50*j, y=50+50*i;
fill(255); ellipse(x,y,40,40);//畫白棋子
}
}
}
}
3.用滑鼠畫棋子
 |
| (3-1)可以開玩摟<3 |
(3-1)程式碼:
int [][]go={//陣列用來紀錄旗子的位置
{0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0}};
void setup(){size(500,500);}
void draw()
{
background(253,236,180);
for(int i=0;i<=9;i++){
line(50+50*i,50,50+50*i,450);
line(50,50+50*i,450,50+50*i);
}
for(int i=0;i<9;i++){
for(int j=0;j<9;j++){
if(go[i][j]==1){
int x=50+50*j,y=50+50*i;
fill(255);ellipse(x,y,40,40);
}
else if(go[i][j]==2){
int x=50+50*j,y=50+50*i;
fill(0);ellipse(x,y,40,40);
}
}
}
}
void mousePressed(){
int j=(mouseX-25)/50;//用滑鼠指定放棋子的位置XY
int i=(mouseY-25)/50;
if(mouseButton==LEFT)go[i][j]=1;//按下滑鼠左鍵會畫白色
if(mouseButton==RIGHT)go[i][j]=2;//按下滑鼠右鍵會畫黑色
if(mouseButton==CENTER)go[i][j]=0;//按下滑鼠中鍵會刪除棋子
}
2.Generative Art
1.black Circle
 |
| (1-1)利用程式碼產生出圖形，可利用滑鼠改變角度與大小 |
(1-1)code:
void setup(){size(500,500);}
void draw(){
background(255);
noFill();
for(float a=0;a<360;a++){
float x=250+mouseX*cos(radians((a));
float y=250+mouseY*sin(radians((a));
ellipse(x,y,mouseX,mouseY);
}
}
2.Random circle
 |
| (2-1)Random color! |
void setup(){ size(500,500);}
float w=30;
float r=0,g=255,b=0;
void draw(){
stroke(r,g,b);noFill();///空圓圈筆刷
r+=random(3);if(r>255)r=0;//R
g+=random(3);if(g>255)g=0;//G
b+=random(3);if(g>255)b=0;//B
ellipse(mouseX,mouseY,w,w);//the circle
w+=0.5;//遞增的圓圈
if(w>100)w=30;//over 100 reset to 30.
}
沒有留言:
張貼留言