EMVs-Creative-coding/Day-2/pixels.js

let img;

function preload() {
    img = loadImage("Images/monitoring-miku.png");
}

function setup() {
    createCanvas(600, 600);
    pixelDensity(1);
}

function draw() {
    background(0);
    image(img, 100, 100, 400, 400);
    /* img.loadPixels();
    for (let i = 0; i < img.pixels.length; i += 4) {
        let red = img.pixels[i + 0];
        let green = img.pixels[i + 1];
        let blue = img.pixels[i + 2];
        let alpha = img.pixels[i + 3];
        img.pixels[i + 0] = red;
        img.pixels[i + 1] = green;
        img.pixels[i + 2] = blue;
        img.pixels[i + 3] = alpha;
    }
    img.updatePixels(); */
    img.loadPixels();
    for ( let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            const index = (x + y * width) * 4;
            img.pixels[index + 0] = mouseX;
            img.pixels[index + 1] = mouseY;
            img.pixels[index + 2] = y;
            img.pixels[index + 3] = 100;
        }
    }
    img.updatePixels();
}