Week03 欣儀的課堂筆記

Part1 畫線-One stroke drawing

 Code: 

void setup(){//Start()  
  size(600,400);
}
void draw(){//Update()  
  line(mouseX,mouseY,pmouseX,pmouseY);//從滑鼠畫的位置到前一個滑鼠的位置
}

---

Part2 線的粗細和換色

 Code: 

void setup(){//Start()   
size(600,400);//視窗大小
}
void draw(){//Update()
  if(key==1) stroke(255,0,0);//按1~5都是換顏色
  if(key==2) stroke(255,169,0);
  if(key==3) stroke(255,255,0);
  if(key==4) stroke(0,255,0);
  if(key==5) stroke(0,80,255);
  if(key==6) strokeWeight(2);//按6~8是換粗細  
  if(key==7) strokeWeight(4);
  if(key==8) strokeWeight(10);
  if(mousePressed){//當按下滑鼠時開始畫線    
    line(mouseX,mouseY,pmouseX,pmouseY);//從滑鼠畫的位置到前一個滑鼠的位置  
  }
}

---

Part3 模擬小畫家

首先製作顏料盤，點選左側的顏色，就可以更改顏色。

 Code: 

void setup(){//Start()
  size(600,400);//視窗大小
  fill(255,0,0); rect(0,0,50,50);
  fill(255,169,0); rect(0,50,50,50);
  fill(255,255,0); rect(0,100,50,50);
  fill(0,255,0); rect(0,150,50,50);
  fill(0,80,255); rect(0,200,50,50);
}
void draw(){//Update()
  if(mouseX<50 && mousePressed){
    if(mouseY<50) stroke(255,0,0);//紅色
    else if(mouseY<100) stroke(255,169,0);//橘色
    else if(mouseY<150) stroke(255,255,0);//黃色
    else if(mouseY<200) stroke(0,255,0);//綠色
    else if(mouseY<250) stroke(0,80,255);//藍色
   
  }
  if(mousePressed){//當按下滑鼠時開始畫線
    line(mouseX,mouseY,pmouseX,pmouseY);//從滑鼠畫的位置到前一個滑鼠的位置
  }
}

接著製作調整線條粗細的圖示

 Code: 

void setup(){//Start()
  size(600,400);//視窗大小
  fill(255,0,0); rect(0,0,50,50);
  fill(255,169,0); rect(0,50,50,50);
  fill(255,255,0); rect(0,100,50,50);
  fill(0,255,0); rect(0,150,50,50);
  fill(0,80,255); rect(0,200,50,50);
  //畫出更換線條粗細的圖示
  fill(255);rect(0,250,50,150);
  line(25,250,25-10,400);
  line(25,250,25+10,400);
}
void draw(){//Update()
  if(mouseX<50 && mousePressed){
    if(mouseY<50) stroke(255,0,0);//紅色
    else if(mouseY<100) stroke(255,169,0);//橘色
    else if(mouseY<150) stroke(255,255,0);//黃色
    else if(mouseY<200) stroke(0,255,0);//綠色
    else if(mouseY<250) stroke(0,80,255);//藍色
    else{
      strokeWeight((mouseY-250)/10);//調整粗細
    }   
  }
  if(mouseX>50 && mousePressed){//當按下滑鼠且滑鼠X軸位置大於50，才開始畫線
    line(mouseX,mouseY,pmouseX,pmouseY);//從滑鼠畫的位置到前一個滑鼠的位置
  }
}

更改程式碼，使用滑鼠事件的函式，mousePressed()和mouseDragged()

 Code: 

void setup(){//Start()
  size(600,400);//視窗大小
  fill(255,0,0); rect(0,0,50,50);
  fill(255,169,0); rect(0,50,50,50);
  fill(255,255,0); rect(0,100,50,50);
  fill(0,255,0); rect(0,150,50,50);
  fill(0,80,255); rect(0,200,50,50);
  //畫出更換線條粗細的圖示
  fill(255);rect(0,250,50,150);
  line(25,250,25-10,400);
  line(25,250,25+10,400);
}
void draw(){
  
}
void mousePressed(){//滑鼠按下
  if(mouseX<50){
    if(mouseY<50) stroke(255,0,0);//紅色
    else if(mouseY<100) stroke(255,169,0);//橘色
    else if(mouseY<150) stroke(255,255,0);//黃色
    else if(mouseY<200) stroke(0,255,0);//綠色
    else if(mouseY<250) stroke(0,80,255);//藍色
    else{
      strokeWeight((mouseY-250)/10);//調整粗細
    }   
  }
}
void mouseDragged(){//滑鼠拖移
  if(mouseX>50 && mousePressed){//當按下滑鼠且滑鼠X軸位置大於50，才開始畫線
    line(mouseX,mouseY,pmouseX,pmouseY);//從滑鼠畫的位置到前一個滑鼠的位置
  }
}

---

Part4 key和keyCode

 Code: 

void setup(){//Start()
  size(600,400);//視窗大小
  fill(255,0,0); rect(0,0,50,50);
  fill(255,169,0); rect(0,50,50,50);
  fill(255,255,0); rect(0,100,50,50);
  fill(0,255,0); rect(0,150,50,50);
  fill(0,80,255); rect(0,200,50,50);
  //畫出更換線條粗細的圖示
  fill(255);rect(0,250,50,150);
  line(25,250,25-10,400);
  line(25,250,25+10,400);
}
void draw(){
  
}
void mousePressed(){//滑鼠按下
  if(mouseX<50){
    if(mouseY<50) stroke(255,0,0);//紅色
    else if(mouseY<100) stroke(255,169,0);//橘色
    else if(mouseY<150) stroke(255,255,0);//黃色
    else if(mouseY<200) stroke(0,255,0);//綠色
    else if(mouseY<250) stroke(0,80,255);//藍色
    else{
      strokeWeight((mouseY-250)/10);//調整粗細
    }   
  }
}
void mouseDragged(){//滑鼠拖移
  if(mouseX>50 && mousePressed){//當按下滑鼠且滑鼠X軸位置大於50，才開始畫線
    line(mouseX,mouseY,pmouseX,pmouseY);//從滑鼠畫的位置到前一個滑鼠的位置
  }
}
void keyPressed(){
  if(key=='1') stroke(247,90,182);//粉色
  if(keyCode==UP) line(300,200,300,0);
  if(keyCode==DOWN) line(300,200,300,400);
  if(keyCode==LEFT) line(300,200,0,200);
  if(keyCode==RIGHT) line(300,200,600,200);
}

按下鍵盤的"上" "下" "左" "右"鍵可以畫出線條

按下鍵盤的數字"1"線條變成粉色