Week04 有沒有機會放三天

 1.第一節上課程式碼

下載taiwan svg檔案

//week04_1_PShape_loadShape_shape

//google:taiwan.svg 下載 svg檔

//PImage img = loadImage("image.jpg");//上週教的

//image(img,0,0);

PShape taiwan = loadShape("Taiwan-icon.svg");//本周要教的

PShape taiwan2 = loadShape("tw.svg");

size(500,500);

shape(taiwan);

shape(taiwan2);

下載svg檔案拉入processing 裡面，把圖檔顯示出來

//week04_2_pushMatrix_scale_popMatrix

size(500,500);

PShape taiwan = loadShape("Taiwan-icon.svg");//本周要教的

PShape taiwan2 = loadShape("tw.svg");

pushMatrix();

  scale(10);

  shape(taiwan);

popMatrix();

pushMatrix();

  scale(0.5);

  shape(taiwan2);

popMatrix();

利用之前電腦圖學的pushmatrix、popmatrix、scale來調整圖片的大小

//week04_3_void_setup_void_draw_void_wheelMouse

PShape taiwan, taiwan2;

void setup() {

  size(500, 500);

  taiwan = loadShape("Taiwan-icon.svg");//本周要教的

  taiwan2 = loadShape("tw.svg");

}

float taiwanScale=1;

void draw() {

  background(#92C2F5);

  pushMatrix();

    scale(10*taiwanScale);

    shape(taiwan);

  popMatrix();

  

  pushMatrix();

    scale(0.5*taiwanScale);

    shape(taiwan2);

  popMatrix();

}

void mouseWheel(MouseEvent e){//mouseWheel是mouse的滾輪

  float d = e.getCount();

  if(d>0)taiwanScale *=1.1;

  else taiwanScale *=0.9;

}

利用滑鼠滾輪來調整畫面大小，設定背景就不會出現殘影

2.第二節上課程式碼

//week04_4_world_svg_float_s_scale_s_void_mouseWheel_s

PShape world;

void setup(){

  size(800,400);

  world = loadShape("world.svg");

}

float s = 0.4;

void draw(){

  background(#92C2F5);

  scale(s);

  shape(world);

}

void mouseWheel(MouseEvent e){

  if(e.getCount()>0)s*=1.1;

  else s*=0.9;

}

貼上一張世界地圖，利用滑鼠滾輪來縮放

//week04_5_flaot_x_y_translate_x_y_void_mouseDragged

PShape world;

void setup(){

  size(800,400);

  world = loadShape("world.svg");

}

float s = 0.4,x=0,y=0;

void draw(){

  background(#92C2F5);

  translate(x,y);

  scale(s);//改用變數s,初始數值是0.4

  shape(world);

}

void mouseDragged(){

  x+=mouseX-pmouseX;

  y+=mouseY-pmouseY;

}

void mouseWheel(MouseEvent e){

  if(e.getCount()>0)s*=1.1;

  else s*=0.9;

}

mouseDragged來讓滑鼠來拖曳

//week04_6_better_scale

PShape world;

void setup(){

  size(800,400);

  world = loadShape("world.svg");

}

float s = 0.4,x=0,y=0;

float realX=0,realY=0;//地圖上,真的座標

void draw(){

  background(#92C2F5);

  translate(x,y);

  scale(s);//改用變數s,初始數值是0.4

  shape(world);

  ellipse(realX,realY,10,10);//地圖上,真的座標

}

void mouseDragged(){

  x+=mouseX-pmouseX;

  y+=mouseY-pmouseY;

}

void mouseWheel(MouseEvent e){

  realX = (mouseX-x)/s;//地圖上,真的座標

  realY = (mouseY-y)/s;//地圖上,真的座標

  float oldS = s;

  if(e.getCount()>0)s*=1.1;

  else s*=0.9;

  x = x+realX*oldS-realX*s;

  y = y+realY*oldS-realY*s;

}

讓縮放的中心點照著滑鼠游標

3.第三節上課程式碼

//week04_7_carrot01_background_stroke_fill_ellipse

size(600,500);

background(0);

stroke(255);

fill(0);

ellipse(50,50,100,100);

用填充和畫線來畫圓圈

//week04_8_carrot02_void_setup_void_draw_void_mouseDragged

void setup(){

  size(600,500);

  background(0);

  stroke(255);

  fill(0);

}

void draw(){

  //ellipse(mouseX,mouseY,100,100);

}

void mouseDragged(){

  ellipse(mouseX,mouseY,100,100);

}

//week04_9_carrot03_float_s_mouseButton_LEFT_RIGHT

void setup(){

  size(600,500);

  background(0);

  stroke(255);

  fill(0);

}

void draw(){

  //ellipse(mouseX,mouseY,100,100);

}

float s =25;

void mousePressed(){

  ellipse(mouseX,mouseY,s,s);

  if(mouseButton==LEFT)s*=1.1;

  if(mouseButton==RIGHT)s*=0.9;

}

//week04_a_carrot04_cos_sin_t

void setup(){

  size(600,500);

  background(0);

  stroke(255);

  fill(0);

}

void draw(){

  //ellipse(mouseX,mouseY,100,100);

}

float s =25,t=0;

void mousePressed(){

  ellipse(300+200*cos(t),250+200*sin(t),s,s);

  t+=0.06;

  if(mouseButton==LEFT)s*=1.1;

  if(mouseButton==RIGHT)s*=0.9;

}

4.上傳github