Week02 是賴小沫的

✎利用滑鼠點擊切換筆觸粗細和顏色

👀透過 mousePressed() 函式來設定滑鼠點擊的功能

void setup(){
  size(800,600);
  colorMode(HSB,100);  //彩色學中的色相(H)飽和度(S)亮度(B),0~100
}
void draw(){
  line(mouseX,mouseY,pmouseX,pmouseY);
}

//點擊滑鼠
void mousePressed(){ 
  if(mouseX<100){
    strokeWeight(mouseY/50);
  }
  if(mouseX>700){
    stroke(mouseY/6.0,100,100);
  }
}

 按下左上角的三角形或Ctrl+R,即可執行看結果

✎只有按住滑鼠才會畫

👀使用 if(mousePressed) 判斷的方式,設定為只有在按住滑鼠時才會畫

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 mousePressed(){
  if(mouseX<100){
    strokeWeight(mouseY/50);
  }
  if(mouseX>width-100){
    stroke(mouseY/6.0,100,100);
  }
}

 按下左上角的三角形或Ctrl+R,即可執行看結果

✎透過拖曳的方式改變筆觸顏色及粗細

👀使用mouseDragged()來設定滑鼠拖曳的效果

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);
  }
}

 按下左上角的三角形或Ctrl+R,即可執行看結果

✎用點的方式畫出色階圖

👀設定不同的顏色變化,並用point(x,y);來繪製,並將i設為rgb中的r值

noStroke();
colorMode(HSB,100);
for(int i=0;i<100;i++){
  for(int j=0;j<100;j++){
    stroke(i,100,100);
    point(i,j);  //畫點
  }
}

 按下左上角的三角形或Ctrl+R,即可執行看結果

👀把i設為rgb的g值

noStroke();
colorMode(HSB,100);
for(int i=0;i<100;i++){
  for(int j=0;j<100;j++){
    stroke(100,i,100);
    point(i,j);  //畫點
  }
}

 按下左上角的三角形或Ctrl+R,即可執行看結果

👀把i設為rgb的b值

noStroke();
colorMode(HSB,100);
for(int i=0;i<100;i++){
  for(int j=0;j<100;j++){
    stroke(100,100,i);
    point(i,j);  //畫點
  }
}

 按下左上角的三角形或Ctrl+R,即可執行看結果

✎觀察別人的程式碼,並嘗試做出

👀先選擇一個他人已製作好並分享的程式,觀察其程式碼

 開啟程式碼,並複製其內容

 在processing新增一個檔案,並將剛剛複製的內容貼上

 按下左上角的三角形或Ctrl+R,即可執行看結果

👀嘗試做出相似的內容

void setup(){

  size(720,720,P2D);
}
void draw(){
}
void mouseDragged(){
  ellipse(mouseX,mouseY,100,100);
}

 按下左上角的三角形或Ctrl+R,即可執行看結果

👀做出漸漸縮小的效果

void setup(){
  size(720,720,P2D);
}
float pX=-100,pY=-100,r=100;
void draw(){
  ellipse(pX,pY,r,r);
  if(r>3){
    r-=10;
    pX+=13;
  }
}
void mousePressed(){
  pX=mouseX;pY=mouseY;r=100;
}
/*void mouseDragged(){
  ellipse(mouseX,mouseY,100,100);
}*/

 按下左上角的三角形或Ctrl+R,即可執行看結果

✎匯入圖片

👀下載一張已去背的png圖,並透過processing顯示圖片

將下載好的圖片拉進processing裡面,Ctrl+K可確認是否有成功放置圖片

PImage img=loadImage("gloomy.png");  //讀取圖片
image(img,0,0,100,100);  //顯示圖片

  按下左上角的三角形或Ctrl+R,即可執行看結果

👀增加背景顏色

size(500,500);
background(0,0,255);  //背景顏色
PImage img=loadImage("gloomy.png");
image(img,0,0,500,500);

  按下左上角的三角形或Ctrl+R,即可執行看結果

👀匯入第二張圖片,成為滑鼠游標

PImage img1,img2;
void setup(){
  size(500,500);
  img1=loadImage("gloomy.png");
  img2=loadImage("gloomy2.png");
}
void draw(){
  background(0,0,255);
  image(img1,150,150,200,200);
  image(img2,mouseX,mouseY,50,50);  //滑鼠游標
}

  按下左上角的三角形或Ctrl+R,即可執行看結果