Week02_陳示珮

Week02

利用processing做出類似Open Processing網站的作品

(1) 利用滑鼠做出互動圓圈

程式碼 :

void setup(){
 size(400,400);
}
int r=30;
void draw(){
  ellipse(mouseX,mouseY,r,r); //畫圓圈
  r-=5;
  if(r<0)r=30;
}



















(2) 加入色彩

程式碼 :

void setup(){
 size(400,400);
 colorMode(HSB,100);
}
int r=30,H=0;
void draw(){
  fill(H,100,100); //填充顏色
  ellipse(mouseX,mouseY,r,r); //畫圓圈
  r-=5;
  if(r<0)r=30;
  H++;
  if(H>=100)H=0;
}

(3) 完成成果

程式碼 :

void setup(){
 size(400,400);
 colorMode(HSB,100);
}
int r=50,H=0;
int circleX=200,circleY=200;
void draw(){
  fill(H,100,100); //填充顏色
  ellipse(circleX,circleY,r,r); //畫圓圈
  r-=2;
  circleX+=random(30)-15; //亂數
  circleY+=random(30)-15;
  if(r<0){
    r=50;
    circleX=200;
    circleY=200;
  }
  H++;
  if(H>=100)H=0;
}


讀取圖檔

(1)載入圖片方法1 : 利用圖片網址載入圖片

(2)載入圖片方法2 : 利用檔名打開圖檔

需將圖片檔拉入processing中

即可成功

(4)ctrl+k能打開圖片檔案位置

(5)能利用另存新檔改變圖片儲存位置

(1)利用滑鼠顯示多個圖片

程式碼 :

PImage img;
void setup(){
 size(800,600);
 img=loadImage("g.jpg");
}
void draw(){
  image(img,mouseX,mouseY,100,100);
}

(2)在網路上下載png圖檔並將背景調成白色

程式碼 :

PImage img;
void setup(){
 size(800,600);
 img=loadImage("sh.png");
}
void draw(){
  background(255);
   image(img,mouseX,mouseY,100,100);
}

(3)加入背景

程式碼 :

PImage img,imgBG;
void setup(){
 size(800,600);
 img=loadImage("sh.png");
 imgBG=loadImage("home.jpg");
}
void draw(){
  //background(255);
  image(imgBG,0,0,width,height);
  image(img,mouseX,mouseY,100,100);
}

資料夾內檔案