互動技術 week01 筆記

 1-1 打開 Processing

第一個程式:

size(500,500);

(多一個小視窗)

第二個程式:

background(顏色代碼);

(改變視窗的顏色)

2-1 畫圖形

rect(w,x,y,z);  (w,x圖形位子    y,z圖形大小)

(劃出圖形)

fill(顏色代碼);

第二部分:讓程式有互動性

程式碼:

void setup()

{

  size(500,500);

}

void draw()

{

  background(#64F2F1);

  fill(#31FF24);

  rect(100,100,100,100);

  rect(mouseX,mouseY,100,100);

}

(第二個方塊會隨著滑鼠移動)

將 Processing 轉為 p5.js

轉換網址:https://pde2js.herokuapp.com/

轉換後:

function setup() {

    initializeFields();

    createCanvas(500, 500);

}

function draw() {

    background(color(0x64, 0xF2, 0xF1));

    fill(color(0x31, 0xFF, 0x24));

    rect(100, 100, 100, 100);

    rect(mouseX, mouseY, 100, 100);

}

function initializeFields() {

}

(執行後會跳出新的網站)

第三部分:用 Processing 做出小畫家

程式碼:

void setup()

{

  size(500,500);

}

void draw()

{

  if(mousePressed)

  {

    line(mouseX, mouseY, pmouseX, pmouseY);

  }

}

對程式做修改，讓程式更完整:

void setup()

{

  size(500,500);

  background(#FFFFFF);    ///背景顏色

  stroke(255, 0, 0);              ///一開始的畫筆顏色

}

void draw()

{

  if(mousePressed)

  {

    line(mouseX, mouseY, pmouseX, pmouseY);

  }

}

void keyPressed()

{

  if(key == '1') stroke(#0710F2);

  if(key == '2') stroke(#1AFF0F);

  if(key == '3') stroke(#F78800);

}

(按不同鍵可以改變顏色)