BK Week04 map+carrot

Processing 程式碼

匯入.svg

size(500, 500);
PShape taiwan = loadShape("Taiwan-icon.svg"); //這周教的
PShape taiwan2 = loadShape("tw.svg"); //第2張svg圖檔
shape(taiwan);
shape(taiwan2);


用 pushMatrix 和 popMatrix 顯示圖片
size(500, 500);
PShape taiwan = loadShape("Taiwan-icon.svg");
PShape taiwan2 = loadShape("tw.svg"); //第2張svg圖檔
pushMatrix();
    scale(10);
    shape(taiwan);
popMatrix();
pushMatrix();
    scale(0.5);
    shape(taiwan2);
popMatrix();


用 mouseWheel 控制台灣的大小
PShape taiwan, taiwan2; //宣告變數
void setup() {
  size(500, 500);
  taiwan = loadShape("Taiwan-icon.svg"); //讀入svg
  taiwan2 = loadShape("tw.svg");
}
float taiwanScale = 1;
void draw() {
  background(#75C0ED);
  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;
}


用 mouseWheel 控制世界地圖的大小
PShape world;
void setup() {
  size(800, 400);
  world = loadShape("world.svg");
}
float s = 0.4;
void draw() {
  background(#75C0ED);
  scale(s); //改用變數 s 初始值是 0.4
  shape(world);
}
void mouseWheel(MouseEvent e){
  if(e.getCount()<0) s *= 1.1;
  else s *= 0.9;
}



加上 mouseDragged 讓地圖可以用 mouse 拖曳
PShape world;
void setup() {
  size(800, 400);
  world = loadShape("world.svg");
}
float s = 0.4, x=0, y=0;
void draw() {
  background(#75C0ED);
  translate(x, y); //再加上一個移動量 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;
}



讓地圖在放大的時候會以 mouse 所在的座標為中心放大縮小
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(#75C0ED);
  translate(x, y); //再加上一個移動量 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) {
  // 中心 + 真實座標*s == mouseX,mouseY
  // 真實座標 == ((mouseX,mouseY) - 中心) / s
  
  // 如果有 s 縮放, 把新的中心算出來
  // 舊中心 + 真實座標*舊s == 新中心 + 真實座標*新s
  
  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;
}




畫一個沒填色的圓圈圈
size(600, 500);
background(0);
stroke(255);
fill(0);
ellipse(50, 50, 100, 100);


當 mousePressed 時 畫圓圈
void setup(){
   size(600,500);
   background(0); //黑畫1次
   stroke(255);
   fill(0);
}
void draw(){
   //ellipse(mouseX, mouseY, 100, 100); 
}
void mousePressed(){
    ellipse(mouseX, mouseY, 100, 100);
}


按 mouseLEFT 圈漸大 mouseRIGHT 圈漸小
void setup(){
   size(600,500);
   background(0); //黑畫1次
   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;
}


按 mouseLEFT 圈漸大 mouseRIGHT 圈漸小 但位置會利用 sin cos 自己給改變
void setup(){
   size(600,500);
   background(0); //黑畫1次
   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;
}