week03-2019/09/26

Week03-11:00不小心睡過頭了ಠ_ಠ

-------------------------------------------------------------------------------------------------------------------------

●Step01-使用滑鼠畫畫(做出簡單版的小畫家)

《程式碼》

void setup(){

  size(600,400);

}

void draw(){

  line(mouseX,mouseY,pmouseX,pmouseY);

}

●Step02-找出其他種可用的函式

《程式碼》

void setup() {

  size(600, 400);

}

void draw() {

  fill(255,0,0);<<<<<在fill按右鍵選參考文檔(find in Reference)

  if (mousePressed) {

    line(pmouseX, pmouseY, mouseX, mouseY);

  }

}

  >跑出網頁

  >發現了可用的函式！

●Step03-更改線的顏色(在多增加按滑鼠才能畫畫)

《程式碼》

void setup() {

  size(600, 400);

}

void draw() {

  stroke(255,255,0);

  if (mousePressed) {

    line(pmouseX, pmouseY, mouseX, mouseY);

  }

}

●Step04-按數字1線是紅色、數字2是黃色、數字3是綠色

《程式碼》

void setup() {

  size(600, 400);

}

void draw() {

  if(key=='1') stroke(255,0,0);

  if(key=='2') stroke(255,255,0);

  if(key=='3') stroke(0,255,0);

  if (mousePressed) {

    line(pmouseX, pmouseY, mouseX, mouseY);

  }

}

●Step05-多出數字4是線的粗細變4、數字5是綠色線的粗細變10

《程式碼》

void setup() {

  size(600, 400);

}

void draw() {

  if(key=='1') stroke(255,0,0);

  if(key=='2') stroke(255,255,0);

  if(key=='3') stroke(0,255,0);

  if(key=='4') strokeWeight(4);

  if(key=='5') strokeWeight(10);

  if (mousePressed) {

    line(pmouseX, pmouseY, mouseX, mouseY);

  }

}

●Step06-在旁邊做出色塊，按哪個色塊就是那個顏色

《程式碼》

void setup() {

  size(600, 400);

  fill(255,0,0); rect(0,0,50,50);

  fill(255,255,0); rect(0,50,50,50);

  fill(0,255,0); rect(0,100,50,50);

  fill(0,255,255); rect(0,150,50,50);

  fill(0,0,255); rect(0,200,50,50);

}

void draw() {

    if(mouseX<50 && mousePressed){

      if(mouseY<50) stroke(255,0,0);

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

        else if(mouseY<150) stroke(0,255,0);

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

        else if(mouseY<250) stroke(0,0,255);

    }

  if(key=='1') stroke(255,0,0);

  if(key=='2') stroke(255,255,0);

  if(key=='3') stroke(0,255,0);

  if(key=='4') strokeWeight(4);

  if(key=='5') strokeWeight(10);

      if (mousePressed) {

         line(pmouseX, pmouseY, mouseX, mouseY);

   }

}

●Step07-按色塊指定顏色+按畫筆粗細

《程式碼》

void setup() {
  size(600, 400);
  fill(255,0,0); rect(0,0,50,50);
  fill(255,255,0); rect(0,50,50,50);
  fill(0,255,0); rect(0,100,50,50);
  fill(0,255,255); rect(0,150,50,50);
  fill(0,0,255); rect(0,200,50,50);
  fill(255); rect(0,250,50,150);
  line(25,250, 25-7,400);
  line(25,250, 25+7,400);
}
void draw() {
  if(mouseX<50 && mousePressed){
    if(mouseY<50) stroke(255,0,0);
    else if(mouseY<100) stroke(255,255,0);
    else if(mouseY<150) stroke(0,255,0);
    else if(mouseY<200) stroke(0,255,255);
    else if(mouseY<250) stroke(0,0,255);
    else {//strokeweight()
      strokeWeight( (mouseY-250)/10);
    }
  }
  if (mouseX>50 && mousePressed) {
    line(pmouseX, pmouseY, mouseX, mouseY);
  }
}

●Step08-我想要讓程式碼有顏色，該怎麼做?

全選程式碼>Edit>Copy as HTML>到blogger貼上

                  (編輯>複製為HTML>到blogger貼上)