week03-1
做一個小方塊，讓他對Y軸旋轉
程式碼:
//week03-1_P3D_translate_rotateY_radians_box
void setup(){
size(400,400,P3D);//開啟3D模式
}
void draw(){
background(128);//灰階背景
translate(mouseX,mouseY);
rotate(radians(frameCount));//對Y旋轉
box(200);//大小200的3D Box盒子
}
week03-2
畫出程式基礎2D圖形:直線、點、圓形、橢圓形
程式碼:
//week03-2_2D_point_line_rect_ellipse
size(400,400);//2D座標系統
stroke(255,0,0);//筆觸是紅色
strokeWeight(8);//筆觸的權重大小
point(200,200);//預設的點很小，只有1pixe
line(200,0,400,100);//畫線
rect(50,50,100,100);//四邊形 x,y,w,h
fill(255,255,0,0);//填黃色
ellipse(300,200,50,80);//橢圓x,y,w,h
week03-3
程式碼:
//week03-3_rect_corners
size(400,400);
rect(50,50,100,100,20);
rect(50,200,100,100,20);
rect(200,50,100,100,10,20,30,40);
week03-4
滑鼠游標移動的哪一個顏色，便可以畫出那一個顏色
程式碼:
//week03-4_mousePressed_stroke_line
void setup(){
size(500,500);
}
void draw(){
//background(255);//先刪掉
fill(255,0,0);//紅色
rect(0,0,50,50);
fill(255,255,0);//黃色
rect(0,50,50,50);
fill(0,255,0);//綠色
rect(0,100,50,50);
fill(0,0,255);//藍色
rect(0,150,50,50);
if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);
}
void mousePressed(){
if(mouseX<50){
if(mouseY<50) stroke(255,0,0);
else if(mouseY<100) stroke(255,255,0);
else if(mouseY<150) stroke(0,255,0);
else if(mouseY<200) stroke(0,0,255);
}
}
week03-4b
原本的程式碼，移動到調色盤會對應到對應顏色，現在改成不會
程式碼:
//week03-4b_mousePressed_stroke_line
void setup(){
size(500,500);
}
void draw(){
//background(255);//先刪掉
stroke(0);
fill(255,0,0);//紅色
rect(0,0,50,50);
fill(255,255,0);//黃色
rect(0,50,50,50);
fill(0,255,0);//綠色
rect(0,100,50,50);
fill(0,0,255);//藍色
rect(0,150,50,50);
stroke(myStroke);
if(mousePressed) line(mouseX,mouseY,pmouseX,pmouseY);
}
color myStroke;
void mousePressed(){
if(mouseX<50){
if(mouseY<50) myStroke=color(255,0,0);
else if(mouseY<100) myStroke=color(255,255,0);
else if(mouseY<150) myStroke=color(0,255,0);
else if(mouseY<200) myStroke=color(0,0,255);
}
}
week03-5
貓抓老鼠
程式碼:
//week03-5_mouse_cat_x_y
void setup(){
size(400,400);
}
float x,y;//貓的座標
void draw(){
background(255);
ellipse(mouseX,mouseY,40,20);
ellipse(x,y,40,40);
x=(x*14+mouseX)/15;
y=(y*14+mouseY)/15;
}//新的座標，舊的座標*14，目標*1
week03-6
學習從起點座內插，讓他能夠跑到終點
程式碼:
//week03-6_lerp_frameCount
void setup(){
size(400,400);
}
float startX=0,startY=0;
float stopX=400,stopY=400;
void draw(){
ellipse(startX,startY,10,10);
ellipse(stopX,stopY,10,10);
//lerp()可以做內插，要給他0.0-1.0之間的數
float midX=lerp(startX,stopX,frameCount/200.0);
float midY=lerp(startY,stopY,frameCount/200.0);
//frameCount是「第幾個frame」 1小時=60分，1分60秒 1秒=60frame
ellipse(midX,midY,10,10);
}
week03-7
學習貝氏曲線，有初步的了解
程式碼:
//week03-7_bezier_curve
size(400,400);
int x1=340,x2=40,x3=360,x4=60;
int y1=80,y2=40,y3=360,y4=320;
line(x1,y1,x2,y2);
line(x3,y3,x4,y4);
bezier(x1,y1,x2,y2,x3,y3,x4,y4);//貝式曲線
week03-8
程式碼:
//week03-8_bezier
void setup(){
size(400,400);
}
int x1=340,x2=40,x3=360,x4=60;
int y1=80,y2=40,y3=360,y4=320;
void draw(){
background(255);
line(x1,y1,x2,y2);
line(x3,y3,x4,y4);
bezier(x1,y1,x2,y2,x3,y3,x4,y4);//貝式曲線
float t=frameCount/200.0; //%1
float t2=1-t;
float x=x1*t2*t2*t2+3*x2*t*t2*t2+3*x3*t*t*t2+x4*t*t*t;
float y=y1*t2*t2*t2+3*y2*t*t2*t2+3*y3*t*t*t2+y4*t*t*t;
ellipse(x,y,10,10);
}
week03-8b
改成另一個版本
程式碼;
//week03-8b_bezier_equation
void setup(){
size(400,400);
}
int x1=120,x2=320,x3=320,x4=120;//只改控制點的座標
int y1=80,y2=20,y3=300,y4=300;
void draw(){
background(255);
line(x1,y1,x2,y2);
line(x3,y3,x4,y4);
bezier(x1,y1,x2,y2,x3,y3,x4,y4);//貝式曲線
float t=frameCount/200.0; //%1
float t2=1-t;
float x=x1*t2*t2*t2+3*x2*t*t2*t2+3*x3*t*t*t2+x4*t*t*t;
float y=y1*t2*t2*t2+3*y2*t*t2*t2+3*y3*t*t*t2+y4*t*t*t;
ellipse(x,y,10,10);
}
week03-9
程式碼:
//week03-9_3D_radom_radom_point
float[]x=new float[1000];
float[]y=new float[1000];
void setup(){
size(400,400,P3D);
for(int i=0;i<1000;i++){
x[i]=random(400);
y[i]=random(400);
}
}
void draw(){
background(0);//黑色的背景
stroke(255);//白色的線條
for(int i=0;i<1000;i++){
point(x[i],y[i]);//現在只有2D的點，還差z座標
}
}
week03-10
這變成一個3D的星空的感覺了，滑鼠移動可以調整星空的遠近
程式碼:
//week03-10_3D_radom_radom_point
float[]x=new float[5000];
float[]y=new float[5000];
float[]z=new float[5000];
void setup(){
size(400,400,P3D);
for(int i=0;i<5000;i++){
x[i]=random(400);
y[i]=random(400);
z[i]=random(-400,400);
}
}
void draw(){
background(0);//黑色的背景
stroke(255);//白色的線條
translate(0,0,mouseY);
for(int i=0;i<5000;i++){
point(x[i],y[i],z[i]);//現在是3D的點
}
}
week03-11
無打光版本
程式碼:
//week03-11_3D_sphere_translate_rotateY
void setup(){
size(400,400,P3D);
}
void draw(){
background(128);
translate(mouseX,mouseY);
rotate(radians(frameCount));
sphere(200);
}
week03-12
有打光版本
程式碼:
//week03-12_3D_sphere_translate_rotateY_lights
void setup(){
size(400,400,P3D);
}
void draw(){
background(128);
lights();//加上打光
translate(mouseX,mouseY);
rotate(radians(frameCount));
sphere(200);
}
week03-13
兩個圓球自轉
程式碼:
//week03-13_3D_pushMatrix_translate_sphere_popMatrix
void setup(){
size(600,400,P3D);
}
void draw(){
background(128);
lights();
pushMatrix();//備份矩陣
translate(300,100);//習慣上，要往右縮排
rotate(radians(frameCount));//試試看
sphere(100);
popMatrix();//還原矩陣
//要備份矩陣、還原矩陣就不會出錯
pushMatrix();
translate(100,100);
rotate(radians(frameCount));//試試看
sphere(100);
popMatrix();
}
沒有留言:
張貼留言