console
<script src="https://unpkg.com/p5@0.7.2/lib/p5.min.js"></script>
<script src="https://unpkg.com/p5@0.7.2/lib/addons/p5.dom.min.js"></script>
<script>
let img;
function preload() {
img = loadImage('https://i.loli.net/2019/01/13/5c3ac84832d73.jpg');
}
function setup() {
createCanvas(img.width, img.height);
pixelDensity(1);
background(0);
}
function draw() {
loadPixels();
img.loadPixels();
for (let x = 0; x < width; x++) {
for (let y = 0; y < height; y++) {
let index = (x + y * width) * 4;
if (x < mouseX && y < mouseY) {
pixels[index + 0] = img.pixels[index + 0];
pixels[index + 1] = random(255);
pixels[index + 2] = img.pixels[index + 2]
pixels[index + 3] = random(255);
} else {
pixels[index + 0] = img.pixels[index + 0];
pixels[index + 1] = img.pixels[index + 1];
pixels[index + 2] = img.pixels[index + 2];
pixels[index + 3] = 255;
}
}
}
updatePixels();
}
</script>