END interaction week01

 Processing 4.0b8

1.size and background

2.rectangle

3.mouseX,mouseY,setup,draw

void setup()

{

  size(500,500);

}

void draw()

{

  background(#A3B2C1);

  fill(#C3B2A1);

  rect(100,100,300,300);

  fill(#538251);

  rect(mouseX,mouseY,100,100);

}

4.p5js

4.1 install

4.2 java to p5js

Processing to JS (pde2js.herokuapp.com)

function setup() {

    initializeFields();

    createCanvas(500, 500);

}

function draw() {

    background(color(0xA3, 0xB2, 0xC1));

    fill(color(0xC3, 0xB2, 0xA1));

    rect(100, 100, 300, 300);

    fill(color(0x53, 0x82, 0x51));

    rect(mouseX, mouseY, 100, 100);

}

function initializeFields() {

}

4.3 small website

5. 小畫家

void setup()

{

  size(500,500);

}

void draw()

{

  if(mousePressed)

  {

    line(mouseX,mouseY,pmouseX,pmouseY);

  }

}

6.multipainter

void setup()

{

  size(500,500);

  background(#556423);

  stroke(0,125,136);///筆觸

}

void draw()

{

  if(mousePressed)

  {

    line(mouseX,mouseY,pmouseX,pmouseY);

  }

}

void keyPressed()

{

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

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

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

}