Transparency
Move the pointer left and right across the image to change its position. This program overlays one image over another by modifying the alpha value of the image with the tint() function.
To run this example locally, you will need an image file, and a running local server.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let img;
let offset = 0;
let easing = 0.05;
function setup() {
createCanvas(720, 400);
img = loadImage('assets/moonwalk.jpg'); // Load an image into the program
}
function draw() {
image(img, 0, 0); // Display at full opacity
let dx = mouseX - img.width / 2 - offset;
offset += dx * easing;
tint(255, 127); // Display at half opacity
image(img, offset, 0);
}
