let theShader;

​

function preload() {

  // load the shader

  theShader = loadShader('assets/basic.vert', 'assets/basic.frag');

}

​

​

let graphics;

let sliderX;

let sliderY;

​

function setup() {

  // shaders require WEBGL mode to work

  createCanvas(710, 400, WEBGL);

  graphics = createGraphics(610, 400, WEBGL);

  graphics.noStroke();

​

  graphics.shader(theShader);

  theShader.setUniform('resolution', [width, height]);

  sliderX = createSlider(0, width, 1);

  sliderY = createSlider(0, height, 1);

}

​

let time = 0;

let visibility = 0;

let doReverse = false;

​

let X = 0;

let Y = 0;

let velX = 5;

let velY = 5;

​

function draw() {

  background(28, 28, 28)

  // shader() sets the active shader with our shader

  graphics.shader(theShader);

  if (visibility > 1.0) {

    visibility = 1.0;

    doReverse = true;

  } else if (visibility < 0.0) {

    visibility = 0.0;

    doReverse = false;

  }

  if (X > width  || X < 0) velX = -velX, velY += random(-1.0, 1.0);

  if (Y > width  || Y < 0) velY = -velY, velX += random(-1.0, 1.0);

  theShader.setUniform('visibility', visibility);

​

  // rect gives us some geometry on the screen

  graphics.rect(0, 0, width, height);

​

  push();

  translate(-width/2, -height/2);

  let outX = map(X, 0, width, 115,  width - 115);

  let outY = map(Y, 0, height, 100, height - 180);

  translate(outX, outY);

  texture(graphics);

  rotateX(time);

  rotateY(time);

  box(100);

  pop();

​

  strokeWeight(4);

  noFill();

  rect(-width/2, -height/2, width, height);

  time += deltaTime * 0.001;

  if (doReverse)

    visibility -= deltaTime * 0.001;

  else visibility += deltaTime * 0.001;

  X += velX;

  Y += velY;

}