。畫圖
1. PNG透明背景
//week02-1
size(400,400);
background(255);
fill(238); //填充色彩
noStroke(); //無框線
rect(0,0,20,20); //矩形
rect(x,y,w,h);
rect(0,40,20,20);
rect(0,80,20,20);
執行結果：
2. 改成用for迴圈減少程式碼行數
//week02-2
size(400,400);
background(255);
fill(238); //填充色彩
noStroke(); //無框線
float s = 400/14; //格子大小
for(int i=0; i<14; i++){ //y座標的格子
for(int j=0; j<14; j++){ //x座標的格子
if((i+j)%2==0) rect(j*s,i*s,s,s);
}
}
執行結果：
。滑鼠事件
用if判斷mousePressed事件，劃出線段
//Week02-3
//Week02-3
void setup(){ //執行一次
size(400,400);
background(255);
fill(238); //填充色彩
noStroke(); //無框線
float s = 400/14; //格子大小
for(int i=0; i<14; i++){ //y座標的格子
for(int j=0; j<14; j++){ //x座標的格子
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的座標
}
執行結果：
。描圖
匯入一張圖片，調整不透明度
//Week02-4
PImage img; //全域變數
void setup(){
size(375,500);
img = loadImage("toothless.jpg"); //讀進圖檔
}
void draw(){ //每秒重複執行60次
background(img); //重複背景,避免被矩形蓋過
fill(255,mouseX); //填充白色矩形, 移動滑鼠調整alpha值
println(mouseX); //印出滑鼠的x座標
rect(0,0,375,500);
}
設定好不透明度後，把畫筆程式碼加回來：
//Week02-5
ArrayList<Integer> x = new ArrayList<Integer>(); //新增資料陣列
ArrayList<Integer> y = new ArrayList<Integer>();
PImage img; //全域變數
void setup(){
size(375,500);
img = loadImage("toothless.jpg"); //讀進圖檔
}
void draw(){ //每秒重複執行60次
background(img); //重複背景,避免被矩形蓋過
fill(255,200); //填充白色矩形, 移動滑鼠調整alpha值
rect(0,0,375,500);
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);
}
直接將line()寫在draw()內會被img蓋過
宣告鏈結串列，儲存滑鼠的x, y座標, line()的參數用for迴圈取出串列中的值
執行結果：
建立二維串列, 儲存複數個歷史痕跡
避免重新按下滑鼠與上一個點出現連接線段
//Week02-6
//利用二維串列儲存複數的滑鼠拖曳座標
ArrayList<Integer>x, y; //兩個小串列
ArrayList<ArrayList<Integer>> xx = new ArrayList<ArrayList<Integer>>();
ArrayList<ArrayList<Integer>> yy = new ArrayList<ArrayList<Integer>>(); //大串列
PImage img; //全域變數
void setup() {
size(375, 500);
img = loadImage("toothless.jpg"); //讀進圖檔
}
void draw() { //每秒重複執行60次
background(img); //重複背景,避免被矩形蓋過
fill(255, 200); //填充白色矩形, 移動滑鼠調整alpha值
rect(0, 0, 375, 500);
for (int I=1; I<xx.size(); 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,y座標值
x.add(mouseX);
y.add(mouseY);
}
void mousePressed() { //當滑鼠按下後建立新的內層串列
x = new ArrayList<Integer>();
xx.add(x);
y = new ArrayList<Integer>();
yy.add(y);
}
#資料結構的魅力
執行結果：
___________________________________________________________________________________
#HW畫圖
在畫圖的過程中印出座標程式碼
//Week02-7
//利用二維串列儲存複數的滑鼠拖曳座標
ArrayList<Integer>x, y; //兩個小串列
ArrayList<ArrayList<Integer>> xx = new ArrayList<ArrayList<Integer>>();
ArrayList<ArrayList<Integer>> yy = new ArrayList<ArrayList<Integer>>(); //大串列
PImage img; //全域變數
void setup() {
size(375, 500);
img = loadImage("toothless.jpg"); //讀進圖檔
}
void draw() { //每秒重複執行60次
background(img); //重複背景,避免被矩形蓋過
fill(255, 200); //填充白色矩形, 移動滑鼠調整alpha值
rect(0, 0, 375, 500);
for (int I=0; I<xx.size(); 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,y座標值
//println("vertex(" + mouseX + "," + mouseY); //印出當前座標
x.add(mouseX);
y.add(mouseY);
}
void keyPressed() { //鍵盤事件 p.s用.英文輸入法
if ( key == 's'|| key == 'S') { //在按下S鍵時, 印出串列內儲存的數值
for (int I=0; I<xx.size(); I++) {
println("beginShape();");
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) + ");"); //印出儲存在串列內的座標+程式碼
}
println("endShape();");
}
}
}
void mousePressed() { //當滑鼠按下後建立新的內層串列
x = new ArrayList<Integer>();
xx.add(x);
y = new ArrayList<Integer>();
yy.add(y);
}
執行結果：
按下S鍵：
沒有留言:
張貼留言