​

Tech: Moiré Pattern

​

*/

​

let angle, scal, vari, speed;

let frontex, backtex;

let moire1 = [];

let moire2 = [];

​

function preload() {

  frontex = loadImage("3.png");

  backtex = loadImage("2.png");

  img = loadImage("bg.jpg");

}

​

function setup() {

  createCanvas(600, 600, WEBGL);

  rectMode(CENTER);

  angleMode(DEGREES);

}

​

function draw() {

  background(186, 220, 240);

  // image(img,0,0,width,height);

  // ambientLight(255);

  scale(scal);

  rotateY(-90);

​

  if (mouseX > width) {

    mouseX = width;

  }

  if (mouseX < 0) {

    mouseX = 0;

  }

​

  if (mouseX < width / 2) {

    angle = map(mouseX, 0, width / 2, 0, 90);

    scal = map(mouseX, 0, width / 2, 0.5, 1.8);

  } else if (mouseX > width / 2) {

    angle = map(mouseX, width / 2, width, 90, 180);

    scal = map(mouseX, width / 2, width, 1.8, 0.5);

  }

​

​

  push();

  fill(0);

  //ambientMaterial(0,0,0);

  rotateY(angle);

  box(192, 380, 10);

  pop();

​

​

  push();

  rotateY(angle);

  translate(0, 0, 5);

  texture1();

  plane(192, 380);

  pop();

​

  push();

  noFill();

  noStroke();

  rotateY(angle);

  translate(0, 0, -5);

  texture(backtex);

  plane(192, 380);

  pop();

​

  console.log(angle);

​

  // speed = 1;

  // angle = angle + speed;

  // if( angle >= 180){

  //   speed = -1;

  // }else if( angle < 0 ){

  //   speed = 1;

  // }

​

}

​

​

function texture1() {

​

  fill(255);

​

  // push();

  // noFill();

  // rotate(50);

  // for (let i=0; i<width*2; i+=10){

  //   stroke("rgba(0,0,0,20)");

  //   moire1[i] = ellipse(0,0,i);

  //   //line(i-width/2,-height/2,i-width/2,height/2);

  // }

  // pop();

​

  for (let i = -86; i < 86; i += 5) {

    stroke(50);

    strokeWeight(2);

    line(i, -190, i, 190);

    //moire2[i] = ellipse(0,0,i);

  }

​

  if (mouseX < width / 2) {

    vari = map(mouseX, 0, width / 2, 40, 0);

  } else if (mouseX > width / 2) {

    vari = map(mouseX, width / 2, width, 0, 40);

  }

​

  for (let i = -86; i < 86; i += 5) {

    stroke(50);

    strokeWeight(2);

    line(i - vari, -190, i + vari, 190);

  }

​

  text('NOW YOU SEE ME', 0, 0);

  textSize(100);

​

  texture(frontex);

​

  noStroke();

​

}