Week 04

1. 一開始畫出不同顏色的線條

void setup(){
  size(400,500);
  background(255);
}
void draw(){


}

void mouseDragged(){
  stroke(204,102,0);// 改變筆觸顏色
  line (mouseX,mouseY,pmouseX,pmouseY);
}

2.   5個顏色框框 可以分別劃出不同顏色的線

void setup(){

  size(800,500);

  background(255);

}

void draw(){

  fill(255,0,0);

  rect(0,0 ,100,100); //畫紅色的框框

  fill(255,139,85);

  rect(0,100 ,100,100); //畫橘色的框框

  fill(247,254,36);

  rect(0,200 ,100,100); //畫黃色的框框

  fill(0,255,0);

  rect(0,300 ,100,100); //畫綠色的框框

  fill(0,0,255);

  rect(0,400 ,100,100); //畫藍色的框框

}

void mouseDragged(){

  

  line (mouseX,mouseY,pmouseX,pmouseY);

  

}

/*void mouseClicked(){

  if(mouseX<100 && mouseY<100) stroke(255,0,0);

  else if(mouseX<100 && mouseY<200) stroke(0,255,0);

  else if(mouseX<100 && mouseY<300) stroke(0,0,255);

}*/ //CLICKED會有時候出錯

void mousePressed(){

  if(mouseX<100 && mouseY<100) stroke(255,0,0);

  else if(mouseX<100 && mouseY<200) stroke(255,139,85);//橘色

  else if(mouseX<100 && mouseY<300) stroke(247,254,36);//黃色

  else if(mouseX<100 && mouseY<400) stroke(0,255,0);//綠色

  else if(mouseX<100 && mouseY<500) stroke(0,0,255);//藍色

} //Pressed比較不會出錯

3.HSB /RGB兩個測試

HSB

void setup(){

  size(800,500);

  background(255);

}

void draw(){

  fill(255,0,0);

  rect(0,0 ,100,100); //畫紅色的框框

  fill(255,139,85);

  rect(0,100 ,100,100); //畫橘色的框框

  fill(247,254,36);

  rect(0,200 ,100,100); //畫黃色的框框

  fill(0,255,0);

  rect(0,300 ,100,100); //畫綠色的框框

  fill(0,0,255);

  rect(0,400 ,100,100); //畫藍色的框框

  fill(80,40,247);

  rect(700,0 ,100,100); //畫靛色的框框

  fill(153,40,247);

  rect(700,100 ,100,100); //畫紫色的框框

  fill(0,0,0);

  rect(700,200 ,100,100); //畫黑色的框框

  fill(255,255,255);

  rect(700,300 ,100,100); //畫白色的框框

  fill(28,249,255);

  rect(700,400 ,100,100); //畫淺藍色的框框

}

void mouseDragged(){

  

  line (mouseX,mouseY,pmouseX,pmouseY);

  

}

/*void mouseClicked(){

  if(mouseX<100 && mouseY<100) stroke(255,0,0);

  else if(mouseX<100 && mouseY<200) stroke(0,255,0);

  else if(mouseX<100 && mouseY<300) stroke(0,0,255);

}*/ //CLICKED會有時候出錯

void mousePressed(){

  if(mouseX<100 && mouseY<100) stroke(255,0,0);

  else if(mouseX<100 && mouseY<200) stroke(255,139,85);//橘色

  else if(mouseX<100 && mouseY<300) stroke(247,254,36);//黃色

  else if(mouseX<100 && mouseY<400) stroke(0,255,0);//綠色

  else if(mouseX<100 && mouseY<500) stroke(0,0,255);//藍色

  

  else if(mouseX>700 && mouseY<100) stroke(80,40,247);//靛色

  else if(mouseX>700 && mouseY<200) stroke(153,40,247);//紫色

  else if(mouseX>700 && mouseY<300) stroke(0,0,0);//黑色

  else if(mouseX>700 && mouseY<400) stroke(255,255,255);//白色

  else if(mouseX>700 && mouseY<500) stroke(28,249,255);//淺藍色

} //Pressed比較不會出錯

RGB

void setup(){

  size(800,500);

  background(255);

  

  colorMode(RGB, 255);

  //fill(255,0,0);

  //rect(0,0 ,100,100); //畫紅色的框框

  fill(255,139,85);

  rect(0,100 ,100,100); //畫橘色的框框

  fill(247,254,36);

  rect(0,200 ,100,100); //畫黃色的框框

  fill(0,255,0);

  rect(0,300 ,100,100); //畫綠色的框框

  fill(0,0,255);

  rect(0,400 ,100,100); //畫藍色的框框

  fill(80,40,247);

  rect(700,0 ,100,100); //畫靛色的框框

  fill(153,40,247);

  rect(700,100 ,100,100); //畫紫色的框框

  fill(0,0,0);

  rect(700,200 ,100,100); //畫黑色的框框

  fill(255,255,255);

  rect(700,300 ,100,100); //畫白色的框框

  fill(28,249,255);

  rect(700,400 ,100,100); //畫淺藍色的框框

  

  noStroke();

  colorMode(HSB, 100);

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

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

      stroke(i, j, 100);

      point(i, j);

  }

}

}

void draw(){

  

}

void mouseDragged(){

  

  line (mouseX,mouseY,pmouseX,pmouseY);

  

}

/*void mouseClicked(){

  if(mouseX<100 && mouseY<100) stroke(255,0,0);

  else if(mouseX<100 && mouseY<200) stroke(0,255,0);

  else if(mouseX<100 && mouseY<300) stroke(0,0,255);

}*/ //CLICKED會有時候出錯

void mousePressed(){

  if(mouseX<100 && mouseY<100){

    colorMode(HSB,100);

    stroke(mouseX,mouseY,255);

  }

  else if(mouseX<100 && mouseY<200){

     colorMode(RGB,255);

    stroke(255,139,85);//橘色

}

  else if(mouseX<100 && mouseY<300){

  colorMode(RGB,255); 

  stroke(247,254,36);//黃色

}

  else if(mouseX<100 && mouseY<400){

  colorMode(RGB,255); 

  stroke(0,255,0);//綠色

}

  else if(mouseX<100 && mouseY<500){

  colorMode(RGB,255); 

  stroke(0,0,255);//藍色

}

  

  else if(mouseX>700 && mouseY<100){

  colorMode(RGB,255); 

  stroke(80,40,247);//靛色

}

  else if(mouseX>700 && mouseY<200){

  colorMode(RGB,255); 

  stroke(153,40,247);//紫色

} 

  else if(mouseX>700 && mouseY<300){

  colorMode(RGB,255); 

  stroke(0,0,0);//黑色

}

  else if(mouseX>700 && mouseY<400){

  colorMode(RGB,255);  

  stroke(255,255,255);//白色

} 

else if(mouseX>700 && mouseY<500){

  colorMode(RGB,255);  

  stroke(28,249,255);//淺藍色

}

} //Pressed比較不會出錯

4.最終作品~~小畫家

void setup(){
  size(800,500);
  background(255);
 
 
  colorMode(RGB, 255);
  //fill(255,0,0);
  //rect(0,0 ,100,100); //畫紅色的框框
  fill(255,139,85);
  rect(0,100 ,100,100); //畫橘色的框框
  fill(247,254,36);
  rect(0,200 ,100,100); //畫黃色的框框
  fill(0,255,0);
  rect(0,300 ,100,100); //畫綠色的框框
  fill(0,0,255);
  rect(0,400 ,100,100); //畫藍色的框框

 
  noStroke();
  colorMode(HSB, 100);
  for (int i = 0; i < 100; i++) {
    for (int j = 0; j < 100; j++) {
      stroke(i, j, 100);
      point(i, j);
  }
}
  fill(255);
  rect(700,0,100,100);
  strokeWeight(10);
  stroke(#000000);
  point(750,50);
   fill(255);
 
}
void draw(){
  if (mouseX < 50) {
    cursor(CROSS);
  } else {
    cursor(HAND);
  }
}

void keyPressed(){ //按S就會存檔
  if(key =='s'){
    save("paint.jpg");
  }
}

void mouseDragged(){
 
 if(mouseX>100) line (mouseX,mouseY,pmouseX,pmouseY);//這樣才不會畫到

}
/*void mouseClicked(){
  if(mouseX<100 && mouseY<100) stroke(255,0,0);
  else if(mouseX<100 && mouseY<200) stroke(0,255,0);
  else if(mouseX<100 && mouseY<300) stroke(0,0,255);
}*/ //CLICKED會有時候出錯
void mousePressed(){
  if(mouseX<100 && mouseY<100){
    colorMode(HSB,100);
    stroke(mouseX,mouseY,255);
  }
  else if(mouseX<100 && mouseY<200){
     colorMode(RGB,255);
    stroke(255,139,85);//橘色
}
  else if(mouseX<100 && mouseY<300){
  colorMode(RGB,255);
  stroke(247,254,36);//黃色
}
  else if(mouseX<100 && mouseY<400){
  colorMode(RGB,255);
  stroke(0,255,0);//綠色
}
  else if(mouseX<100 && mouseY<500){
  colorMode(RGB,255);
  stroke(0,0,255);//藍色
}
 


} //Pressed比較不會出錯

5.心得:

終於完成了這次的作品了，我的小畫家有4個格子可以在四格格子換色 然後基本的第一個格子可以隨便選顏色換喜歡的顏色，右上角是線條粗細，很開心的是我可以完成一個特別的程式了，從開始聽到小畫家的時候，其實有點不敢相信自己可以完成類似的程式，非常感謝老師，今天學到怎麼存檔，怎麼樣可以改變滑鼠指標，改變線條粗細，改變顏色，之前的透明度有稍微複習一下，這次沒使用到，但是更加了解了，然後還學到滑鼠指令，CLICK跟PRESSED的差異，開檔案怎麼開，如果想要用在網路上的圖片，要怎麼用，可以只用開檔的指令就可以使用等等...，今天真的收穫很多!學程式因為老師開心的教導我們才能學的這麼開心~~真的謝謝