Week 02 Hankins

上課目標作品一:
 

像是花朵綻開的樣子。

步驟1:
先劃出一個由圓形(ellipse)組成的圖案，滑鼠移到哪，圖案就畫到哪。

步驟2:
為了做出很酷炫的圓形，將半徑遞減，若小於零就reset。

步驟3:
為了更炫的顏色效果，一般的單顏色似乎沒那麼酷。因此先用HSB來設定。

colorMode()的說明。

步驟4:加入random()隨機產生顏色，像彩虹的感覺。

最後一步:
讓電腦自己畫圖，以CirecleX,CirecleY來做為圓形開始的目標位置。接著讓圖案隨機出現在加減範圍20~40的地方。

程式碼:

void setup(){

   size(400,400); 

  colorMode(HSB, 100);

  

}

int r=40, H=0;

int CircleX=200, CircleY=200;

void draw(){

 fill(H,100,100);

 ellipse(CircleX,CircleY, r,r);

 r-=2;

 CircleX+=random(40)-20;

 CircleY+=random(40)-20;

 if(r<0){

  r=40;

  CircleX=200; CircleY=200;

 }

 H++;

 if(H>=100) H=0;

}

課堂作業2:Load an image in processing

首先要加入PImage這個language，有兩種做法可以載入圖片:

第一種:將圖片預先下載好，也不用管存放路徑，因為可以直接拖曳到processing中，很方便也很強大的功能。

第二種:可以直接把網址貼上，但做法不如上個方法好用，速度較慢，並且網址還需要檢查是否正確。

我稍微把程式碼寫完整，將視窗大小設置成500X500的大小，並加入滑鼠移動可以改變圖片位置，但這樣做背景沒有清除，會有很炫的一個效果。

自行加入滑鼠點擊並拖曳:

如果像要背景顏色不會因為圖片受影響，那就加入background()，讓程式在跑的時候可以讓背景再重新上色。

NOTE: Control + K 可以打開Data folder(因為還沒有保存程式，因此在Temp底下)

最後來實作一個很簡單的作品，有背景圖片，主角是可以任意移動的。

(貓咪和鳥籠)
NOTE:這裡要注意宣告新的變數imgBG。

附上程式碼:

PImage img,imgBG;
void setup(){
 size(1280,720);
 img = loadImage("cat2.png");
 imgBG = loadImage("back.jpg");
}

void draw(){
   image(imgBG, 0,0,width,height);
   image(img, mouseX,mouseY, 250,150);

}





個圖片檔案:

http://www.persan-chinchilla.com/temoignages/apple.jpg

https://www.62icon.com/images/uploads/artwork/default/9e01fbd4fbded086529728a385ab8829.png

http://img.52lishi.com/pic/201802/05/8dd31f25f4.jpg