​

let windowHalf;

let threeD;

let openAmount;

​

function preload() {

  windowHalf = loadImage("window-half.png");

}

​

function setup() {

  createCanvas(400, 400);

  threeD = createGraphics(width, height, WEBGL);

  angleMode(DEGREES);

  threeD.angleMode(DEGREES);

  imageMode(CENTER);

  windowHalf.resize(width, height);

  openAmount = createSlider(0, 1, 0, 0);

  openAmount.position(width/2, 50);

}

​

function draw() {

  background("green");

  let angle = openAmount.value();

  if (enable3D) {

    threeD.push();

    threeD.clear();

    threeD.noStroke();

    threeD.texture(windowHalf);

    // threeD.translate(width/4, 0, 0);

    // threeD.translate(0, 0, angle*90);

    threeD.rotateY(angle*90);

    threeD.plane(width, height);

    threeD.pop();

​

    translate(width/2, height/2);

​

    image(threeD, -width/2, 0);

​

    push();

    translate(width/2, 0);

    rotate(180);

    image(threeD, 0, 0);

    pop();

  } else {

    push();

​

    if (openAmount.value() < 1) {

      push();

      translate(width/2, height/2);

      image(windowHalf, -width/2, 0, (1-angle)*windowHalf.width, windowHalf.height);

      rotate(180);

      image(windowHalf, -width/2, 0, (1-angle)*windowHalf.width, windowHalf.height);

      pop();

    }

​

    pop();

  }

}