week02-1_fill_noStroke_rect
程式碼
size(400,400); // 視窗大小 400x400
background(255); // 白色的背景
fill(238); // 填充的色彩
noStroke(); // 不要畫框線
rect(0,0,20,20); // 四邊形 rectangle x,y,w,h
rect(0,40,20,20);
rect(0,80,20,20);
week02-2_for_for_if_rect
程式碼
size(400,400);
background(255);
fill(238);
noStroke();
float s = 400/14; // 計算 每個格子的大小
for(int i=0;i<14;i++){ // 左手 i 對應 y 座標
for(int j=0;j<14;j++){ // 右手 j 對應 x 座標
//rect(0,i*s*2,s,s); // 先試一下位置
if( (i+j)%2==0) rect(j*s,i*s,s,s);
}// 下面才是真的程式碼，完成畫格子的任務
}
week02-3_void_setup_void_draw_stroke_if_mousePressed_line
程式碼
void setup(){ // 一開始，設定1次(貼上剛剛 week02-2 的程式碼)
size(400,400);
background(255);
fill(238);
noStroke();
float s = 400/14; // 計算 每個格子的大小
for(int i=0;i<14;i++){ // 左手 i 對應 y 座標
for(int j=0;j<14;j++){ // 右手 j 對應 x 座標
//rect(0,i*s*2,s,s); // 先試一下位置
if( (i+j)%2==0) rect(j*s,i*s,s,s);
}// 下面才是真的程式碼，完成畫格子的任務
}
}
void draw(){ // 每秒畫60次
stroke(255,0,0); // 紅色的線
if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);
} // 如果 mouse 按下去，就畫線，給兩個座標: 現在的mouse 和 之前的 mouse
week02-4_PImage_loadImage_background_fill_println
新的開始，要描圖
程式碼
PImage img;
void setup(){
size(400,400);
img = loadImage("dog.png");
} // 記得把圖檔，像上周一樣拉到程式碼裡
void draw(){
background(img);
fill(255,mouseX); // 半透明色彩 白色， alpha值是128
println(mouseX); // 把 mouseX 的值，在下面"小黑"印出來
rect(0,0,400,400); // 畫超大的四邊形，全部蓋住
}
week02-5a_combine_02_4_and_02_3_bad
要描圖，卻出錯
程式碼
PImage img;
void setup(){
size(400,400);
img = loadImage("dog.png");
} // 記得把圖檔，像上周一樣拉到程式碼裡
void draw(){
background(img);
fill(255,200); // 半透明色彩 白色， alpha值是128
rect(0,0,400,400); // 畫超大的四邊形，全部蓋住
stroke(255,0,0); // 紅色的線
if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);
}
week02-5_ArrayList_Integer_new_for_size_get_add_mouseDragged
要利用資料結構，把歷史軌跡 記起來
程式碼
ArrayList<Integer> x = new ArrayList<Integer>(); // 新建資料結構
ArrayList<Integer> y = new ArrayList<Integer>();
PImage img;
void setup(){
size(400,400);
img = loadImage("dog.png"); // 每次新的檔案，要把圖"拉進來"
} // 記得把圖檔，像上周一樣拉到程式碼裡
void draw(){
background(img);
fill(255,200); // 半透明色彩 白色， alpha值是128
rect(0,0,400,400); // 畫超大的四邊形，全部蓋住
for(int i=1;i<x.size();i++){
line(x.get(i),y.get(i),x.get(i-1),y.get(i-1));
}
}
void mouseDragged(){
x.add(mouseX);
y.add(mouseY);
}
// week02-6_ArrayList_ArrayList_Integer_for_for_size_get_add_mouseDragged_mousePressed
// 想要有很多段，不要"一筆畫" 一直接著畫
程式碼
ArrayList<Integer> x, y; // 先有2個還沒準備好的 (小的)資料結構，等mousePressed再新增準備
ArrayList<ArrayList<Integer>> xx = new ArrayList<ArrayList<Integer>>(); // 大的資料結構
ArrayList<ArrayList<Integer>> yy = new ArrayList<ArrayList<Integer>>();
PImage img;
void setup(){
size(400,400);
img = loadImage("dog.png"); // 每次新的檔案，要把圖"拉進來"
} // 記得把圖檔，像上周一樣拉到程式碼裡
void draw(){
background(img);
fill(255,200); // 半透明色彩 白色， alpha值是128
rect(0,0,400,400); // 畫超大的四邊形，全部蓋住
// 上面是 week02-4，下面用迴圈，從資料結構取出來
for(int I=0;I<xx.size();I++){ // 大寫I對應大的資料結構
ArrayList<Integer> x = xx.get(I); // 取出裡面的小的資料結構
ArrayList<Integer> y = yy.get(I);
for(int i=1;i<x.size();i++){ // 小的，再照舊畫
line(x.get(i),y.get(i),x.get(i-1),y.get(i-1));
}
}
}
void mouseDragged(){
x.add(mouseX);
y.add(mouseY);
}
void mousePressed(){
x = new ArrayList<Integer>(); xx.add(x);
y = new ArrayList<Integer>(); yy.add(y);
}
week02-7_keyPressed_if_key_s_for_for_println_vertex_beginShape
想要把畫出來的座標
程式碼
ArrayList<Integer> x, y; // 先有2個還沒準備好的 (小的)資料結構，等mousePressed再新增準備
ArrayList<ArrayList<Integer>> xx = new ArrayList<ArrayList<Integer>>(); // 大的資料結構
ArrayList<ArrayList<Integer>> yy = new ArrayList<ArrayList<Integer>>();
PImage img;
void setup(){
size(400,400);
img = loadImage("dog.png"); // 每次新的檔案，要把圖"拉進來"
} // 記得把圖檔，像上周一樣拉到程式碼裡
void draw(){
background(img);
fill(255,200); // 半透明色彩 白色， alpha值是128
rect(0,0,400,400); // 畫超大的四邊形，全部蓋住
// 上面是 week02-4，下面用迴圈，從資料結構取出來
for(int I=0;I<xx.size();I++){ // 大寫I對應大的資料結構
ArrayList<Integer> x = xx.get(I); // 取出裡面的小的資料結構
ArrayList<Integer> y = yy.get(I);
for(int i=1;i<x.size();i++){ // 小的，再照舊畫
line(x.get(i),y.get(i),x.get(i-1),y.get(i-1));
}
}
}
void keyPressed(){ // 小心，注音輸入法會卡住按鍵，要換英文輸入
if(key=='s' || key=='S'){ // 如果按下英文的小寫 or 大寫 s 想 save 存檔的話
for(int I=0;I<xx.size();I++){ // 大寫I對應大的資料結構
ArrayList<Integer> x = xx.get(I); // 取出裡面的小的資料結構
ArrayList<Integer> y = yy.get(I);
for(int i=1;i<x.size();i++){ // 小的，再照舊畫
println("vertex(" + x.get(i) + ", " + y.get(i) + ");");
} // 改在 keyPressed() 按下 s 或 S 時，再全部印!
}
}
}
void mouseDragged(){
// println("vertex(" + mouseX + ", " + mouseY + ");"); // 不要在這裡印
x.add(mouseX);
y.add(mouseY);
}
void mousePressed(){ // 滑鼠按下去時，建"新的"資料結構
x = new ArrayList<Integer>(); xx.add(x);
y = new ArrayList<Integer>(); yy.add(y);
}
沒有留言:
張貼留言