Week 2 - 文郁上課誌

                     ２０１７互動技術

2017 / 9 / 25

1. 做出小畫家，線條可改變粗細、顏色

2. 線條可自訂是否延續

3. 讀檔

開啟 Processing

線條可以改變粗細、可以改變顏色

*void draw(){

  line(mouseX, mouseY, pmouseX, pmouseY);
}
void mousePressed(){
  if(mouseX<100){
    strokeWeight(mouseY/50);
  }
  if(mouseX>700){
    stroke(mouseY/6.0 , 100,100);
  }
}

  

* 線條可以自己自訂，滑鼠點一下則線條繼續畫，可以在旁邊先設定好自己要的線條粗細以及顏色，在進行畫圖。

void setup(){
  size(800,600);
  rect(width-100,0, width,height); ///modify!
  rect(0,0, 100, height); ///modify!
  colorMode(HSB, 100);
}
void draw(){
  if(mousePressed) ///modify!
  line(mouseX, mouseY, pmouseX, pmouseY);
}
void mouseDragged(){ ///modify!
  if(mouseX<100){
    strokeWeight(mouseY/50);
  }
  if(mouseX>width-100){ ///modify!
    stroke(mouseY/6.0 , 100,100);
  }

}

     

* 自行調整參數，看看有神麼改變。

     

  

Openprocessing ：https://www.openprocessing.org/browse#

*網頁上有許多範例可以觀看，也可以點進去參考程式碼並執行看看。

*拖曳滑鼠就可以畫出連續圓形

void setup(){
  size(600,700,P2D);
}
void draw(){

}
void mouseDragged(){
  ellipse(mouseX,mouseY, 100,100);

}

*

* 讀檔(照片要png檔，才可以更換背景)

要從桌面拉圖片檔案到城市裡頭！！！！！
size(500,500);
background(255,198,242);
PImage img=loadImage("queen.png");
image(img, 0,0, 500,500);