week04-1
想要模仿做出一個眼睛會跟著滑鼠動
程式碼://week04-1_atan2_dy_dx_cos_sin
void setup(){
size(600,300);
}
void draw(){
background(#C0FFEE);
ellipse(150,150,100,100);
float dx=mouseX-150,dy=mouseY-150;
float a=atan2(dy,dx);
ellipse(150+cos(a)*25,150+sin(a)*25,50,50);
//ellipse(150+25,150,50,50);
}
week04-2
做出一對眼睛，會跟著箭頭旋轉
程式碼:
//week04-2atan2_for_x_dx__dy_cos_sin
void setup(){
size(600,300);
}
void draw(){
background(#C0FFEE);//粉青咖啡色
for(int x=150;x<=450;x+=300){//迴圈做出
ellipse(x,150,100,100);//大眼睛
float dx=mouseX-x, dy=mouseY-150;
float a=atan2(dy,dx);//算出角度
ellipse(x+cos(a)*25,150+sin(a)*25,50,50);
}
}
week04-3
程式碼:
//week04-3_rotate_rotateX_radians+mouseY
void setup(){
size(400,400,P3D);
}
void draw(){
background(128);
translate(width/2,height/2);
//rotateY(radians(mouseX));//上周的左右轉
rotateX(radians(-mouseY));//本周的上下轉
box(200);
}
week04-4
程式碼:
//week04-4_rotateZ
void setup(){
size(400,400,P3D);
}
void draw(){
background(128);
translate(width/2,height/2);
//rotateY(radians(mouseX));//上周的左右轉
rotateZ(radians(-mouseX));//本周的上下轉
ellipse(0,0,100,150);
}
week04-5
程式碼:
//week04-5_robot_arm
void setup(){
size(400,400,P3D);
}
void draw(){
background(128);
translate(width/2,height/2);
pushMatrix();
translate(0,100);
box(50);//台座
pushMatrix();
translate(0,-25);
rotateZ(radians(mouseX));
translate(0,-50-25);
box(10,100,10);
popMatrix();
popMatrix();
}
week04-5a
這一題老師分別穰我們試試看，如果只有rotate這一行程式碼，跟translate這一行程式碼的差別
程式碼:
//week04-5a_rotateZ_translate_box
void setup(){
size(400,400,P3D);
}
void draw(){
background(128);
translate(width/2,height/2);//移動到畫面中心點
//以下兩行，分別註解、排列組和觀察
rotateZ(radians(mouseX));//對z軸旋轉
//translate(0,-50-25);//把下端，移動到中心去
box(10,100,10);//可轉動長度
}
只有rotate這一行:
只有translate這一行:
這一行是讓指針自轉:
week04-5b
加上 translate mouseX 還有 mouseY
程式碼:
//week04-5b_translate_mouseX_mouseY_rotateZ_translate_box
void setup(){
size(400,400,P3D);
}
void draw(){
background(128);
//translate(width/2,height/2);//移動到畫面中心點
translate(mouseX,mouseY);//加這行
rotateZ(radians(frameCount));//對z軸旋轉
translate(0,-50-25);//把下端，移動到中心去
box(10,100,10);//可轉動長度
}
week04-6
讓一顆小圓球自轉，熟練translte、rotate、sphere的應用
程式碼:
//week04-6_push_translate_rotate_sphere_pop
void setup(){
size(400,400,P3D);
}
void draw(){
background(128);
pushMatrix();
translate(mouseX,mouseY);
rotateY(radians(frameCount));
sphere(100);
popMatrix();
}
week04-7
模擬地球繞著太陽公轉
程式碼://week04-7_sun_earth
void setup(){
size(400,400,P3D);
}
void draw(){
background(128);
translate(width/2,height/2);
sphere(50);
rotateY(radians(frameCount));
pushMatrix();
translate(150,0);
rotateY(radians(frameCount));
sphere(30);
popMatrix();
}
week04-8
對translate、rotate、sphere更加了解了，模擬地球、月球、月球三個星球的狀態
程式碼:
//week04-8_sun_earth_moon
void setup(){
size(400,400,P3D);
}
void draw(){
background(128);
translate(width/2,height/2);
sphere(50);//太陽
rotateY(radians(frameCount));
pushMatrix();
translate(150,0);
rotateY(radians(frameCount));
sphere(30);//地球
pushMatrix();
translate(50,0);
rotateY(radians(frameCount));
sphere(10);//月球
popMatrix();
popMatrix();
}
week04-9
載入地球的貼圖
程式碼:
//week04-9_earth_texture
//google:earth map texture 下載1張地球的地圖 earth.jpg
//把圖檔拉到程式裡面
PImage img=loadImage("earth.jpg");
size(600,300);
image(img ,0,0,600,300);
week04-10
把地球的貼圖貼到地球上面
程式碼:
//week04-10_earth_createShape_setTexture_shape
//google: processing sphere texture 可找到程式
size(400,400,P3D);
PShape earth=createShape(SPHERE,100);
PImage img=loadImage("earth.jpg");
earth.setTexture(img);
shape(earth);
week04-11
把地球移動到中間，讓他在中間自轉
程式碼:
//week04-11_earth_setTexture_translate_rotate
PShape earth;
void setup(){
size(400,400,P3D);
earth=createShape(SPHERE,100);
PImage img=loadImage("earth.jpg");
earth.setTexture(img);
}
void draw(){
background(0);
translate(width/2,height/2);
rotateY(radians(frameCount));
shape(earth);
}
week04-12
把月球貼圖貼到圓球上
程式碼:
//week04-12
PShape moon;
void setup(){
size(400,400,P3D);
moon=createShape(SPHERE,100);
PImage img=loadImage("moon.jpg");
moon.setTexture(img);
}
void draw(){
background(0);
translate(width/2,height/2);
rotateY(radians(frameCount));
shape(moon);
}
week04-13
把太陽的貼圖貼到圓球上
程式碼:
//week04-13_sun_setTexture_translate_rotate
PShape sun;
void setup(){
size(400,400,P3D);
sun=createShape(SPHERE,100);
PImage img=loadImage("sun.jpg");
sun.setTexture(img);
}
void draw(){
background(0);
translate(width/2,height/2);
rotateY(radians(frameCount));
shape(sun);
}
week04-14
成功把地球，月球，太陽的貼圖貼到剛剛寫出的三個圓球繞著轉的程式碼中
程式碼:
//week04-14_sun_earth_moon_Texture
PShape sun,earth,moon;
//樓下，是剪貼自week04-8，樓上，是week04-11，12，13
void setup(){
size(400,400,P3D);
earth=createShape(SPHERE,30);
PImage img=loadImage("earth.jpg");
earth.setTexture(img);
moon=createShape(SPHERE,10);
img=loadImage("moon.jpg");
moon.setTexture(img);
sun=createShape(SPHERE,50);
img=loadImage("sun.jpg");
sun.setTexture(img);
}
void draw(){
background(128);
translate(width/2,height/2);
shape(sun);//sphere(50);//太陽
rotateY(radians(frameCount));
pushMatrix();
translate(150,0);
rotateY(radians(frameCount));
shape(earth);//sphere(30);//地球
pushMatrix();
translate(50,0);
rotateY(radians(frameCount));
shape(moon);//sphere(10);//月球
popMatrix();
popMatrix();
}
沒有留言:
張貼留言