小畫家

 

背景顏色、滑鼠設定(mousePressed)

利用滑鼠可以切換背景的顏色。

將背景的程式碼改成畫線

在按滑鼠的時候會跑出線(如上圖)

但這種寫法會有殘影所以要修改成下面這樣:

把line()裡面的程式碼稍微修改一下 

(改變座標)

就能讓線跟著滑鼠畫出想要的形狀

先設定一個rect再利用stroke換線的顏色

再來是利用strokeWeight改變線的粗度

程式碼:

void setup(){

  size(500,500);

  rect(0,50,50,50);ellipse(25,25+50,1,1);

  rect(0,100,50,50);ellipse(25,25+100,2,2);

  rect(0,150,50,50);ellipse(25,25+150,3,3);

  rect(0,200,50,50);ellipse(25,25+200,4,4);

  rect(0,250,50,50);ellipse(25,25+250,5,5);

  rect(0,300,50,50);ellipse(25,25+300,6,6);

  rect(0,350,50,50);ellipse(25,25+350,7,7);

  rect(0,400,50,50);ellipse(25,25+400,8,8);

}

void draw(){

  if(mousePressed){

    if(mouseX<50){

       if(mouseY>1*50 && mouseY<1*50+50) strokeWeight(1);//線的粗度

       if(mouseY>2*50 && mouseY<2*50+50) strokeWeight(2);

       if(mouseY>3*50 && mouseY<3*50+50) strokeWeight(3);

       if(mouseY>4*50 && mouseY<4*50+50) strokeWeight(4);

       if(mouseY>5*50 && mouseY<5*50+50) strokeWeight(5);

       if(mouseY>6*50 && mouseY<6*50+50) strokeWeight(6);

       if(mouseY>7*50 && mouseY<7*50+50) strokeWeight(7);

       if(mouseY>8*50 && mouseY<8*50+50) strokeWeight(8);

    }  else line(mouseX,mouseY,pmouseX,pmouseY);

  }

}

企鵝

 

一開始老師先帶著我們做初始設定

可以進去檔案裡面的偏好設定裡設定字體大小跟字型

將自行設定標楷體才能打中文

然後帶著我們做了一些基本的程式碼

ex.背景顏色、方塊、橢圓.....

第二節課老師繼續帶著我們做出企鵝的樣子

這裡比較不一樣的是多加了stroke

還有fille、line等等 

讓這隻企鵝逐漸成形

第三節課開始加入互動式的程式碼

利用變數讓眼睛能跟著滑鼠一起動

----------------------------------------------------
*1秒有60個frame(畫面)

*control+R=執行程式

*control+N=開新視窗

*control+T=自動排版

*通常background();會放在draw的函示裡，不然會有殘影

*存檔注意事項:不能有空格、不能有中文、不能用特殊符號、不能用數字開頭

程式碼:

void setup(){
  size(600,600); 
}
void draw(){
  background(128);
  fill(255);
  noStroke();
  rect(100,100,400,400);
  stroke(128);
  strokeWeight(5);
  ellipse(mouseX,mouseY,30,30);
  ellipse(400,300,30,30);
  noStroke();
  fill(#EA9411);
  ellipse(300,400,200,100);
  stroke(255);
  line(200,400,400,400);
}