17/09/25 德宇的筆記Week2

目標一:簡易小畫家

筆記：

點擊滑鼠 → mousePressed();
滾動滑鼠 → mouseDragged();
HSB色彩觀念 → colorMode() & HSB
加入圖片→ loadImage();
加入背景 →background(0,0,0);
使物件與滑鼠連動 →image(img1,mouseX,mouseY,100,100);

程式：

1.點擊滑鼠

程式碼:void setup()
{
  size(800,600);
  colorMode(HSB,100); //色彩函數，H:色相、S:飽和度、B:亮度
}
void draw()
{
  line(mouseX,mouseY,pmouseX,pmouseY);//滑鼠畫線
}
void mousePressed()//點按滑鼠時
{
  if(mouseX<100)//當滑鼠X座標小於100時
  {
    strokeWeight(mouseY/50);//點按滑鼠改變粗細
  }
  if(mouseX>700)//當滑鼠X座標大於700時
  {
    stroke(mouseY/6.0,100,100); //點按滑鼠能改變顏色
  }
}

2.簡易小畫家

程式碼:

void setup()

{

  size(800,600);

  rect(width-100,0,width,height);  //畫兩個長方形當粗細與顏色選擇的區塊

  rect(0,0,100,height);

  colorMode(HSB,100);

}

void draw()

{

  if(mousePressed)line(mouseX,mouseY,pmouseX,pmouseY); //當點按滑鼠時還會畫

}

void mouseDragged()

{ 

  if(mouseX<100)//點擊左邊

  {

    strokeWeight(mouseY/50);//調整寬度

  }

  if(mouseX>width-100)//點擊右邊

  { 

    stroke(mouseY/6.0,100,100);//調整顏色

  }

}

3.HSB色彩

程式碼：

noStroke();

colorMode(HSB,100);//H: 彩虹、S: 飽和度、B:亮度

for(int i=0;i<100;i++)

{

  for(int j=0;j<100;j++)

  {

    stroke(i,100,100);//彩色（HSB）

    point(i,j);

  }

}

(i,100,100) : 彩色

程式碼：

 (100,100,100) : Red   

(100,i,100) : 紅色漸層(white > Red)   

 (100,100,i) : 亮度變化 (Black > Red)

4.加入圖片

1.先選擇圖片，“拖曳“拉入程式碼內!!!! (若未拖曳加入，否則會當掉)

2.加入背景 background(49,255,205);

3.讓圖片跟滑鼠軌跡移動