Wwwk06第六週課堂作業

期中進度；

先做出火柴人主角，把人物貼上。

老師課堂示範

Week05第五週課堂作業

size(640,480);

translate(300,200);

rotate(PI/3*1); //以左上角為中心旋轉
ellipse(0,0,25,250); //橢圓得形狀
rotate(PI/3*1);
ellipse(0,0,25,250);
rotate(PI/3*1);
ellipse(0,0,25,250);

void setup(){

    size(640,480);

    colorMode(HSB,480);

}

int flowerBan=10;

void draw(){  

  translate(mouseX,mouseY);

  fill(mouseX,mouseY,480);

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

    rotate(PI/flowerBan);

    ellipse(0,0,25,300);

  }

}

void mouseClicked(){

  flowerBan++;

}

Week03第三週課堂作業

1. 今天目標: 畫出一個五子棋
1.1. 使用 Tool- Color Selector

void setup(){
  size(800,800);
}
void draw(){
  background(#F0D079);
  noFill();
  strokeWeight(6);
  rect(50,50,700,700);
  strokeWeight(1);
  for(int i=0;i<9;i++){
    line(50,50+i*80,750,50+i*80); //橫線
    line(50+i*80,50,50+i*80,750); //直線 
  }

}

1.2. 要畫外框,可以用 rect()來畫, 要修改填充的顏色可以用fill(), 要讓畫的內部不要填充, 可以查看 Help-Reference 後,在 fill()樓上樓下相關的地方找到你要的功能 (ex. noFill() )
1.3. 使用 stroke() 來調畫線stroke的顏色, 在 Help-Reference 裡面可以找 stroke 相關的功能,像是比較粗的 stroke 可以用 strokeWeight() 來設定權重粗細
1.4. 想要畫裡面的細黑線,可以用 line() 來畫,配上不同的 strokeWeight() 粗細


int nowX,nowY;
void setup(){
  size(800,800);
}
void draw(){
  background(#F0D079);
  noFill();
  strokeWeight(6);
  rect(50,50,700,700);
  strokeWeight(1);
  for(int i=0;i<9;i++){
    line(50,50+i*80,750,50+i*80);
    line(50+i*80,50,50+i*80,750);
  }
  fill(0,255,0);
  rect(nowX*80+50,nowY*80+50,80,80);
}

void mouseMoved(){
  nowX = (mouseX-50)/80;
  nowY = (mouseY-50)/80;
  println("mouseX: " + mouseX + "mouxeY: " + mouseY + "noeX: " + nowX + "nowY:" + nowY);
}

int nowX,nowY;

int [][] array = new int [8][8]; //宣告陣列

void setup(){

  size(800,800);

}

void draw(){

  background(#F0D079);

  noFill();

  strokeWeight(6);

  rect(50,50,700,700);

  strokeWeight(1);

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

    line(50,50+i*80,750,50+i*80);

    line(50+i*80,50,50+i*80,750);

  }

  fill(0,255,0);

  rect(nowX*80+50,nowY*80+50,80,80);

  fill(0,0,255);

  for(int i=0;i<8;i++){ //使用for迴圈 進行陣列比較 畫圖

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

      if(array[i][j]==1) rect(i*80+50,j*80+50,80,80);

    }

  }

}

void mousePressed(){ //使用函式將mouse 改變 array[i][j]裡面的值

  array[nowX][nowY]=1;

}

void mouseMoved(){

  nowX = (mouseX-50)/80;

  nowY = (mouseY-50)/80;

  println("mouseX: " + mouseX + "mouxeY: " + mouseY + "noeX: " + nowX + "nowY:" + nowY);

}

Week02第二週課堂作業

1. Processing 啟動, 有問題的同學請再下載download
http://processing.org

2. 試 for迴圈

3. 試用 Processing-Help-Reference
3.1. 找 rect() 函式
3.2. 看看 rect() 樓上樓下的相關函式, 並嘗試畫出和老師不同的圖  [課堂作業1]

void setup(){
  size(600,400);
}

void draw(){
  for(int x=0;x<600;x+=100){
    for(int y=0;y<400;y+=100){
      rect(x,y,100,100);
      ellipse(x+50, y+50, 50, 50); //圓形
    }
  }

}

4. 那想要改變顏色呢?
4.1. fill() 是填充的顏色, stroke()是筆的顏色
4.2. 透明的顏色(alpha),其實也是顏色(color) [課堂作業2]把你獨一無二的圖,加點不同的色彩吧


void setup(){
  size(600,400);
}

void draw(){
  for(int x=0;x<600;x+=100){
    for(int y=0;y<400;y+=100){
      fill(0, 0, 255); //顏色
      rect(x,y,100,100); //方形
      fill(255, 0, 0, 128 //透明);
      ellipse(x+50, y+50, 50, 50); //圓形
      fill(0, 255, 0);
      triangle(x+50, y, x+50, y+50, x, y+50); //三角
    }
  }

}

5. 加一點點滑鼠的互動吧! 可以使用 mouseX 及 mouseY 的值,來進行色彩繽紛的運算


void setup(){
  size(600,400);
}

void draw(){
  for(int x=0;x<600;x+=100){
    for(int y=0;y<400;y+=100){
      fill(0, 0, 255);
      rect(x,y,100,100);
      fill(255, 0, 0, dist(x,y,mouseX, mouseY)*2); //dist
      ellipse(x+50, y+50, 50, 50);
      fill(0, 255, 0);
      triangle(x+50, y, x+50, y+50, x, y+50);
    }
  }

}

6. 亂數 random(數字上界) 來設定初始的亂數值 [課堂作業3] 利用mouseX,mouseY,random()做設計


color [][] myColor = new color[6][4]; //random
void setup(){
  size(600,400);
   for(int x=0;x<600;x+=100){
    for(int y=0;y<400;y+=100){
      myColor[x/100][y/100] = color(random(256), random(256), random(256)); //random
    }
   }
}

void draw(){
  for(int x=0;x<600;x+=100){
    for(int y=0;y<400;y+=100){
      fill(myColor[x/100][y/100]);
      rect(x,y,100,100);
      fill(255, 0, 0, dist(x,y,mouseX, mouseY)*2);
      ellipse(x+50, y+50, 50, 50);
      fill(0, 255, 0);
      triangle(x+50, y, x+50, y+50, x, y+50);
    }
  }

}

[課堂作業4] 請大家寫一下到現在的心得 (ex. 速度, 內容, 想學的東西, 期待、希望、夢想..)

上課的速度還OK，內容也不會太難導致跟不上。

Week01第一週課堂作業

0. 課程準備
0.1. 加入 課程FB社團
0.2. Google文件 填寫修課資料 (學號姓名,email,電話)
0.3. 加入 Blog, 設定

編交作業方式: tag: 000葉正聖老師, Week01, 00160011葉大明
逗號隔開, 學號姓名間不要有空格



1. 看一下去年學長姐們做的成果 (划船、吃角子老虎、數位手套、直昇機控制搖桿), 聖誔老公公下樓梯
2. 試著執行 Processing

size(600,600);
background(255, 0, 0);
rect(150,150, 300,300);
執行結果:

秀圖程式碼:

size(600,600);

background(255, 0, 0);
rect(150,150, 300,300);
PImage imgBird=loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/bird.png");
PImage imgPig =loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/pig.gif");
image(imgBird, 0,0);
image(imgPig, 200,200,  100,100);

結果:

第三節課的範例

PImage imgBird, imgPig;

void setup() {
  size(600, 600);
  imgBird=loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/bird.png");
  imgPig =loadImage("http://www.cmlab.csie.ntu.edu.tw/~jsyeh/processing/angryBirdsBrick/pig.gif");
  imageMode(CENTER);
}

void draw() {
  background(255, 0, 0);
  image(imgBird, mouseX, mouseY);
  image(imgPig, 200, 200, 100, 100);
}