2022互動技術week01

# Week01

## step01-2_設定程式的畫面大小size(), 設定背景色background(),使用Color Selector幫忙挑

size(500,500);//大視窗

可利用Tool(工具)-Color Selector(色彩選擇器),挑色彩

size(500,500);//大視窗

background(#FAFC94);//淡黃色背景

## step02-1_填充色彩fill() 四邊形rect()

size(500,500);

background(#FAFC94);

fill(#94D0FC);

rect(100,100, 100,150);

## step02-1_靜態模式、互動模式,差別在 void setup() 及 void draw() 小心要寫完才不會弄混了。最後用 mouseX mouseY 來改變座標

void setup(){

  size(500,500);

}

void draw(){

  background(#FAFC94);

  fill(#94D0FC);

  rect(100,100, 100,150);

  rect(mouseX,mouseY, 100,150);

}

## step02-3_把互動的程式 copy 到 processing to p5.js 的網頁 pde2js.herokuapp.com 貼到左邊,翻譯到右邊,就可拿來 p5.js 用, 執行會跳出網頁

function setup() {

    initializeFields();

    createCanvas(500, 500);

}

function draw() {

    background(color(0xFA, 0xFC, 0x94));

    fill(color(0x94, 0xD0, 0xFC));

    rect(100, 100, 100, 150);

    rect(mouseX, mouseY, 100, 150);

}

function initializeFields() {

}

## step03-1_想要做出簡單的小畫家,所以畫過的地方需要留下來,不呼叫 background(), 直接用 line()來畫, 配 mouseX mouseY及 pmouseX pmouseY 來連線。想要有好的體驗,就 if(mousePressed) 才畫線

void setup(){

  size(500,500);

}

void draw(){

  if( mousePressed ){

    line(mouseX,mouseY, pmouseX,pmouseY);

  }

}

## step03-2_做出不同色彩的小畫家,使用keyPressed()配合 if() key 及 stroke() 來完成

void setup(){//只執行1次

  size(500,500);//開個500x500窗

  background(#FFFFF2);//先背景

  stroke(255,0,0); //筆觸紅色

}

void draw(){//每秒60次

  if( mousePressed ){

    line(mouseX,mouseY, pmouseX,pmouseY);

  }

}

void keyPressed(){//如果有按下按鍵

  if( key == '1' ) stroke(#FA0834);

  if( key == '2' ) stroke(#FACA08);

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

  if( key == '4' ) stroke(#08FA66);

  if( key == '5' ) stroke(#0829FA);

}

## step03-3_最後可以匯出到網頁版 p5.js ,並上傳 GitHub

function setup() {

    initializeFields();

    // 只執行1次

    // 開個500x500窗

    createCanvas(500, 500);

    // 先背景

    background(color(0xFF, 0xFF, 0xF2));

    // 筆觸紅色

    stroke(255, 0, 0);

}

function draw() {

    // 每秒60次

    if (mouseIsPressed) {

        line(mouseX, mouseY, pmouseX, pmouseY);

    }

}

function keyPressed() {

    // 如果有按下按鍵

    if (key == '1')

        stroke(color(0xFA, 0x08, 0x34));

    if (key == '2')

        stroke(color(0xFA, 0xCA, 0x08));

    if (key == '3')

        stroke(color(0xFA, 0xF2, 0x08));

    if (key == '4')

        stroke(color(0x08, 0xFA, 0x66));

    if (key == '5')

        stroke(color(0x08, 0x29, 0xFA));

}

function initializeFields() {

}