Jingjing Sun

Project 5

*/

let input;

let name;

let button;

let show;

​

​

​

function setup() {

  // create canvas

  createCanvas(600, 600);

  background(0);

  fill(255,0,0);

ellipse(30,30,20,20);

  textSize(20);

  text('REC', 48, 39);

  input = createInput();

  input.position(230, 570);

​

  button = createButton('submit');

  button.position(input.x + input.width - 2, 570);

  button.mousePressed(showText);

​

  show = input;

  show.position(230, 570);

​

  textAlign(CENTER);

  textSize(45);

​

​

​

}

​

// reference:

//https://p5js.org/zh-Hans/examples/dom-input-and-button.html

function showText() {

​

  let name = input.value();

  input.value('');

  fill(255);

  text(name, random(0, 500), random(0, 500));

​

​

}

/*

Backgroudn inspired by:

https://forum.processing.org/two/discussion/3599/how-to-do-this-op-art-spiral

*/

function bk1() {

  fill(255, 102, 204);

​

  push();

  for (let y = 0; y <= height; y++) {

    for (let x = 0; x <= width; x++) {

      if ((x + y) % 2 == 0) {

        rect(x * 20, y * 30, 20, 30);

      }

    }

  }

​

  fill(128, 255, 0);

  for (let a = 0; a <= height; a++) {

    for (let b = 0; b <= width; b++) {

      if ((a + b) % 2 == 0) {

        quad(a * 20, b * 30, a * 20 + 20, b * 30 - 10,

             a * 20 + 40, b * 30, a * 20 + 20, b * 30 + 10);

      }

    }

  }

  pop();

​

​

}

​

function bk2() {

  fill(128, 0, 255);

​

  push();

  for (let y = 0; y <= height; y++) {

    for (let x = 0; x <= width; x++) {

      if ((x + y) % 2 == 0) {

        rect(x * 20, y * 30, 20, 30);

      }

    }

  }

​

  fill(0, 102, 204);

  for (let a = 0; a <= height; a++) {

    for (let b = 0; b <= width; b++) {

      if ((a + b) % 2 == 0) {

        quad(a * 20, b * 30, a * 20 + 20, b * 30 - 10,

             a * 20 + 40, b * 30, a * 20 + 20, b * 30 + 10);

      }

    }

  }

  pop();

}

​

function bk3() {

​

​

  push();

  fill(0, 64, 128);

  for (let y = 0; y <= height; y++) {

    for (let x = 0; x <= width; x++) {

      if ((x + y) % 4 == 0) {

        rect(x * 20, y * 30, 20, 30);

      }

    }

  }

​

  fill(255, 69, 0);

  for (let a = 0; a <= height; a++) {

    for (let b = 0; b <= width; b++) {

      if ((a + b) % 4 == 0) {

        quad(a * 20, b * 30, a * 20 + 20, 

             b * 30 - 10, a * 20 + 40, b * 30, 

             a * 20 + 20, b * 30 + 10);

      }

    }

  }

  pop();

}

​

function bk4() {

  fill(72, 61, 139);

  push();

  fill(255, 255, 0);

  for (let y = 0; y <= height; y++) {

    for (let x = 0; x <= width; x++) {

      if ((x + y) % 2 == 0) {

        rect(x * 20, y * 30, 20, 30);

      }

    }

  }

​

  fill(255, 69, 0);

  for (let a = 0; a <= height; a++) {

    for (let b = 0; b <= width; b++) {

      if ((a + b) % 4 == 0) {

        quad(a * 20, b * 30, a * 20 + 20, b * 30 - 10,

             a * 20 + 40, b * 30, a * 20 + 20, b * 30 + 10);

      }

    }

  }

  pop();

}

​

​

function mousePressed() {

  //if click, the butterflies will move slower

  if (mousePressed) {

    bk1();

​

    //color change to yellow

  } else {

​

    bk2();

  }

}

​

function keyPressed() {

  if (keyCode == UP_ARROW) {

    bk1();

​

    blendMode(LIGHTEST);

​

  }

  if (keyCode == LEFT_ARROW) {

    bk2();

​

    blendMode(MULTIPLY);

​

  }

  if (keyCode == RIGHT_ARROW) {

    bk3();

    blendMode(BURN);

​

  } else if (keyCode == DOWN_ARROW) {

    bk4();

    blendMode(DIFFERENCE);

  }

​

​

​

​

}