第一節課
第一個小程式week03_1
SEPT 1.畫一個小點，設視窗大小500*500，點的位置放在畫面中心250*250位置大小5*5
///sept1.點線面 void setup(){ size(500,500); } float x=250,y=250; void draw(){ ellipse(x,y,5,5); }
SEPT 2. 加入dx,dy畫出一條線從中點往右下方畫線
///sept1.點線面 void setup(){ size(500,500); } float x=250,y=250; float dx=1,dy=1; void draw(){ ellipse(x,y,5,5); x+=dx; y+=dy; }
第二個小程式week03_2_background_random
SEPT 3.設背景為黑色，加入亂數，讓小球隨機跑遇到牆壁時往回彈
void setup(){ size(500,500); dx = random(-1,+1); dy = random(-1,+1);//亂數決定往哪裡跑 } float x=250,y=250; float dx=1,dy=1; void draw(){ background(0); ellipse(x,y,5,5); x+=dx; y+=dy; if(x<0 || x>500)dx = -dx; if(y<0 || y>500)dy = -dy; }
第三個小程式week03_3_array_forloop
SEPT 4.用迴圈和陣列將隨機跑的小點變很多個
void setup(){ size(500,500); for(int i=0; i<20; i++){ x[i] = random(500); y[i] = random(500); dx[i] = random(-1,+1); dy[i] = random(-1,+1);//亂數決定往哪裡跑 } } float [] x = new float[20]; float [] y = new float[20]; float [] dx = new float[20]; float [] dy = new float[20]; void draw(){ background(0); for(int i=0; i<20; i++){ ellipse( x[i], y[i], 5, 5); x[i] += dx[i]; y[i] += dy[i]; if(x[i]<0 || x[i]>500)dx[i] = -dx[i]; if(y[i]<0 || y[i]>500)dy[i] = -dy[i]; } }
第四個小程式week03_4_near_line
SEPT 5.當小球靠很近的時候連線
void setup(){ size(500,500); for(int i=0; i<20; i++){ x[i] = random(500); y[i] = random(500); dx[i] = random(-1,+1); dy[i] = random(-1,+1);//亂數決定往哪裡跑 } } float [] x = new float[20]; float [] y = new float[20]; float [] dx = new float[20]; float [] dy = new float[20]; void draw(){ background(0); for(int i=0; i<20; i++){ ellipse( x[i], y[i], 5, 5); for(int k=0; k<20; k++){ stroke(255,0,0);//如果很近的話,畫線 if(dist(x[i],y[i], x[k],y[k])<100)//dist距離小於100 line(x[i],y[i], x[k],y[k]);//將兩顆相近的點連起來 } x[i] += dx[i]; y[i] += dy[i]; if(x[i]<0 || x[i]>500)dx[i] = -dx[i]; if(y[i]<0 || y[i]>500)dy[i] = -dy[i]; } }第二節課第五個小程式week03_5_stroke_arrary_size
SEPT 6.增加點數量，改線顏色越近越亮越遠越暗
void setup(){
size(500,500);
for(int i=0; i<N; i++){
x[i] = random(500);
y[i] = random(500);
dx[i] = random(-1,+1);
dy[i] = random(-1,+1);//亂數決定往哪裡跑
}
}
int N = 40;///讓點變多
float [] x = new float[N];
float [] y = new float[N];
float [] dx = new float[N];
float [] dy = new float[N];
void draw(){
background(0);
for(int i=0; i<N; i++){
ellipse( x[i], y[i], 5, 5);
for(int k=0; k<N; k++){
float d= dist(x[i],y[i],x[k],y[k]);
stroke(2.55*(100-d));//stroke色彩//2.55*100最亮//2.55*0最暗
if(d<100)//dist距離
line(x[i],y[i], x[k],y[k]);
}
x[i] += dx[i];
y[i] += dy[i];
if(x[i]<0 || x[i]>500)dx[i] = -dx[i];
if(y[i]<0 || y[i]>500)dy[i] = -dy[i];
}
}
第六個小程式week03_6_attractionSEPT 7.讓小點彼此之間加一點吸引力
void setup(){
size(500,500);
for(int i=0; i<N; i++){
x[i] = random(500);
y[i] = random(500);
dx[i] = random(-1,+1);
dy[i] = random(-1,+1);//亂數決定往哪裡跑
}
}
int N = 40;///讓點變多
float [] x = new float[N];
float [] y = new float[N];
float [] dx = new float[N];
float [] dy = new float[N];
void draw(){
background(0);
for(int i=0; i<N; i++){
ellipse( x[i], y[i], 5, 5);
for(int k=0; k<N; k++){
float d= dist(x[i],y[i],x[k],y[k]);
stroke(2.55*(100-d));//stroke色彩//2.55*100最亮//2.55*0最暗
if(d<100)//dist距離
line(x[i],y[i], x[k],y[k]);
dx[i] += (x[k]-x[i])*0.00001;
dx[i] += (y[k]-y[i])*0.00001;
}
x[i] += dx[i];
y[i] += dy[i];
if(x[i]<0 || x[i]>500)dx[i] = -dx[i];
if(y[i]<0 || y[i]>500)dy[i] = -dy[i];
}
}
第三節課在Processing內有一些範例Book可以下載根據課本裡面的範例第七個小程式week03_7_colorMode_HSB_frameCount
想做一個彩虹 Step1.開啟色彩選擇器
Step2.挑一個顏色顯示出來
Step3. colorMode(HSB,360,100,100);製作漸變的彩虹void setup(){
size(500,500);
colorMode(HSB,360,100,100);///H:360度，S:0-100%,B:0-100%
}
void draw(){
background(frameCount%360,27,96);
}
第八個小程式week03_8_colorMode_HBS_stroke_point想畫出彩虹，用HSB座標色彩系統colorModesize(400,400);
colorMode(HSB,400);
for(int i=0; i<400; i++){///
for(int j=0; j<400; j++){///J飽和度
stroke(i,400,400);//顏色，最後是亮度
point(i,j);
}
}
當stroke(i,400,200);
第九個小程式week03_9_STEP1. 畫出5*5圓圈圈，和上背景色
機上隨機色，隨機改變HSB的顏色每次執行都不一樣
void setup(){
size(300,300);
colorMode(HSB,360,100,100);
chooseColor();
}
float h,s,b;
void chooseColor(){
h =random(360);
s =random(100);
b =random(100);
}
void draw(){
background(213,27,96);
for(int i=0;i<5;i++){
for(int j=0;j<5;j++){
fill(h,s,b);
ellipse(30+j*60,30+i*60,60,60);
}
}
}
STEP 2. 滑鼠按下去改變顏色
void setup(){
size(300,300);
colorMode(HSB,360,100,100);
chooseColor();
}
void mousePressed(){
chooseColor();///按滑鼠時改變顏色
}
float h,s,b;
void chooseColor(){
h =random(360);
s =random(50,100);
b =random(50,100);///設定範圍以免顏色太醜
}
void draw(){
background(213,27,96);
for(int i=0;i<5;i++){
for(int j=0;j<5;j++){
fill(h,s,b);
ellipse(30+j*60,30+i*60,60,60);
}
}
}
STEP 3. 設定其中一個圓圈顯示的跟別人不一樣
void setup(){
size(300,300);
colorMode(HSB,360,100,100);
chooseColor();
}
void mousePressed(){
chooseColor();///按滑鼠時改變顏色
}
int I,J;
float h,s,b,dh,ds,db;
void chooseColor(){
h =random(360);
s =random(50,100);
b =random(50,100);///設定範圍以免顏色太醜
I=int(random(5));
J=int(random(5));
dh=random(-10,+10);
ds=random(-10,+10);
db=random(-10,+10);
}
void draw(){
background(213,27,96);
for(int i=0;i<5;i++){
for(int j=0;j<5;j++){
if(i==I && j==J)fill(h+dh,s+ds,b+db);
else
ellipse(30+j*60,30+i*60,60,60);
}
}
}
沒有留言:
張貼留言