小凱 Week01

第一節課

1.開啟processing 調整視窗大小、語言，寫一行程式碼，執行後會有一個小灰視窗。

2.加第二行程式碼，視窗會變黃色。

//直接模式 Immediate Mode
size(500,500);//視窗大小(寬,高);
background(255,255,0);

第二節課

了解第一堂的程式為直接模式後，試用互動模式來寫程式

1.開新視窗，打上程式碼

//互動模式 Interative Mode(Active Mode)
void setup(){
  size(500,500);
  background(255,255,0);
}
void draw(){
  ellipse(mouseX,mouseY,8,8);
}

會發現黃色視窗裡移動滑鼠會畫小圓球

!!看了學長姊的範例

2.接著要教如何不把線黏在一起

void setup(){
  size(500,500);
  background(255);
}
void draw(){
  if(mousePressed){
  line(mouseX,mouseY,pmouseX,pmouseY);
  }//畫線(滑鼠座標mouseX,mouseY,到之前滑鼠座標mouseX,mouseY);
}
4.接著改良一下，讓線多三種顏色(紅、綠、藍)

void setup(){
  size(500,500);
  background(255);
}
void draw(){
  if(mousePressed){
  line(mouseX,mouseY,pmouseX,pmouseY);
  }//畫線(滑鼠座標mouseX,mouseY,到之前滑鼠座標mouseX,mouseY);
}
void keyPressed(){
  if(key=='1') stroke(255,0,0);
  if(key=='2') stroke(0,255,0);
  if(key=='3') stroke(0,0,255);
}
在剛剛的程式加上存檔(save)

  if(key=='s'||key=='S') save("output.png");
第三節課
把前兩節課的程式碼上傳到github
新建一個倉庫:2023interaction
把程式上傳上去

1.更改筆觸重輕(strokeWeight)但只能改1或10，筆觸固定
void setup(){
  size(500,500);
  background(255);
}
void draw(){
  if(mousePressed){
  line(mouseX,mouseY,pmouseX,pmouseY);
  }//畫線(滑鼠座標mouseX,mouseY,到之前滑鼠座標mouseX,mouseY);
}
void keyPressed(){
  if(key=='1') stroke(255,0,0);//紅
  if(key=='2') stroke(0,255,0);//綠
  if(key=='3') stroke(0,0,255);//藍
  if(key=='s'||key=='S') save("output.png");
  if(key=='+') strokeWeight(10);
  if(key=='-') strokeWeight(1);
}
2.讓筆觸可以做調整(1-10)
void setup(){
  size(500,500);
  background(255);
}
void draw(){
  if(mousePressed){
  line(mouseX,mouseY,pmouseX,pmouseY);
  }//畫線(滑鼠座標mouseX,mouseY,到之前滑鼠座標mouseX,mouseY);
}
int w=1;
void keyPressed(){
  if(key=='1') stroke(255,0,0);//紅
  if(key=='2') stroke(0,255,0);//綠
  if(key=='3') stroke(0,0,255);//藍
  if(key=='s'||key=='S') save("output.png");
  if(key=='+') strokeWeight(++w);
  if(key=='-') strokeWeight(--w);
  println(w);
}
註冊openProcessing帳號