let alpha = 255;

let imgFaded;

​

function preload() {

  img = loadImage("assets/mist.png");

}

​

function setup() {

  createCanvas(600, 800);

  imageMode(CENTER);

  imgFaded = img.get();

    btn = createButton("Motion");

  btn.mousePressed(function() {

    DeviceOrientationEvent.requestPermission();

  });

}

​

function draw() {

  alpha = map(mouseX, 0, width, 0, 255);

  background(225);

  setImageAlpha(img, imgFaded, alpha);

  frameRate(5);

  image(imgFaded, random(0, 5), 0);

}

​

function setImageAlpha(src, dst, alpha) {

  alpha = constrain(alpha, 0, 255);

  src.loadPixels();

  dst.loadPixels();

  const NUM_BYTES = dst.pixels.length;

  // skip every 4 values (r, g, b, a)

  for (let i = 0; i < NUM_BYTES; i += 4) {

    // copy R, G, B

    dst.pixels[i + 0] = src.pixels[i + 0];

    dst.pixels[i + 1] = src.pixels[i + 1];

    dst.pixels[i + 2] = src.pixels[i + 2];

    // access alpha (index + 3) and modify

    dst.pixels[i + 3] = alpha;

  }

  dst.updatePixels();

}

​

​

function deviceMoved() {

  alpha = alpha - 5;

  if (alpha <= 0) {

    alpha = 255;

  }

}

​