xxxxxxxxxx
52
let img;
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;
}
}