week02 互動技術筆記@

1.複習上週上課內容


2.從 https://www.openprocessing.org/ 觀看其他人的成果
(老師特別強調看成果，不要看程式碼)


3.觀看別人的成果，並試著實作出來(圖中彩色圓圈)


3.1試著畫出圓

ellipse(mouseX,mouseY,r,r); //畫圓(在座標mouseX mouseY，畫出半徑為r的圓)

結果:畫出圓了，但只有單一顏色很單調

3.2處理顏色問題

colorMode(HSB,100); //改變顏色的色相度(亮度、飽和)
fill(h,100,100); //跟小畫家的填滿類似
r-=3; //改變圓圈大小
h++; //改變顏色RGB值

結果:顏色改變了，但圓圈是隨滑鼠座標產生，而不是隨機座標

3.3讓圓圈隨機產生

cirX+=random(30)-15; //讓圓圈座標值隨機產生(0~30)
cirY+=random(30)-15; //-15是為了讓數值變化加大，避免圓圈朝同一方向產生
if(r<0){ 
    r=50;
    cirX=200;  cirY=200; 
  } //圓圈縮到最小後(r<0)，半徑化為50，並從畫面正中央繼續產生

4.讀入並顯示圖片

PImage img; //宣告
void setup(){
  size(1280,720);
  img=loadImage("123.jpg"); //讀入圖片(只需讀入一次)
}
image(img,mouseX,mouseY); //顯示圖片

4.1背景圖片

background(0,0,0); //改變背景顏色，括號為RGB值
img1=loadImage("000.jpg");
image(img1,0,0,width,height); //圖片大小為視窗大小
可以利用 loadImage("..."); 讀入背景圖片
再利用image(...);顯示出來