My Sketch

const photo = [

    ["lion.png", 100],

    ["tiger.png", 100],

];

​

let imgs = [];

let bg;

let edgeThreshold = 100; // Default threshold for edge detection

let pointDensity = 0.005; // Default density of edge points

let triangles = [];

let points = [];

let shapes = [];

let selectedImgIndex = 0; // Index of the currently selected image

let imgOffset = { x: 0, y: 0 };

let imgVelocity = { x: 1, y: 1 };

let isGrayscale = false; // Tracks whether the image is grayscale or colored

let toggleButton; // Button for toggling color mode and image

​

function preload() {

    for (let i = 0; i < photo.length; i++) imgs[i] = loadImage(photo[i][0]);

}

​

function setup() {

    createCanvas(1112, 834);

    bg = createGraphics(width, height);

    generateBackground();

    initializeShapes();

​

    // Create the toggle button

    toggleButton = createButton('Change Image');

    toggleButton.size(200, 50); // Optional: Set a fixed size for the button

    toggleButton.position(800, 750); // Center the button

    toggleButton.mousePressed(toggleImageAndColors); // Assign function to button

}

​

function generateBackground() {

    bg.noStroke();

    for (let i = 0; i < 10000; i++) {

        let x = random(width);

        let y = random(height);

        let s = noise(x * 0.01, y * 0.01) * 2;

        bg.fill(random(100, 255), 20);

        bg.rect(x, y, s, s);

    }

}

​

function initializeShapes() {

    selectedImgIndex %= imgs.length; // Ensure the index is valid

    const img = imgs[selectedImgIndex];

    const ratio = min(width * 0.9 / img.width, height * 0.9 / img.height);

    img.resize(img.width * ratio, img.height * ratio);

​

    points = getEdgePoints(img, max(img.width, img.height) * pointDensity, photo[selectedImgIndex][1]);

    triangles = Delaunay.triangulate(points);

​

    shapes = triangles.map((_, i) => {

        if (i % 3 === 0) {

            const p1 = points[triangles[i]];

            const p2 = points[triangles[i + 1]];

            const p3 = points[triangles[i + 2]];

            return { p1, p2, p3 };

        }

    }).filter(Boolean);

}

​

function draw() {

    background(255);

    image(bg, 0, 0);

​

    // Move the image

    imgOffset.x += imgVelocity.x;

    imgOffset.y += imgVelocity.y;

​

    if (imgOffset.x < 0 || imgOffset.x + imgs[selectedImgIndex].width > width) imgVelocity.x *= -1;

    if (imgOffset.y < 0 || imgOffset.y + imgs[selectedImgIndex].height > height) imgVelocity.y *= -1;

​

    push();

    translate(imgOffset.x, imgOffset.y);

​

    if (isGrayscale) {

        filter(GRAY); // Apply grayscale filter if toggled

    }

​

    image(imgs[selectedImgIndex], 0, 0); // Draw the moving image

​

    for (let shape of shapes) {

        noStroke();

        fill(random(100, 255), random(100, 255), random(100, 255), 150);

        beginShape();

        vertex(shape.p1[0], shape.p1[1]);

        vertex(shape.p2[0], shape.p2[1]);

        vertex(shape.p3[0], shape.p3[1]);

        endShape(CLOSE);

    }

    pop();

}

​

function toggleImageAndColors() {

    // Toggle grayscale mode

    isGrayscale = !isGrayscale;

​

    // Switch to the other image

    selectedImgIndex = (selectedImgIndex + 1) % imgs.length;

​

    // Reinitialize shapes for the new image

    initializeShapes();

    redraw();

}

​

function getEdgePoints(img, span, threshold) {

    let points = [];

    points.push([0, 0]);

    points.push([img.width, 0]);

    points.push([img.width, img.height]);

    points.push([0, img.height]);

    for (let y = 0; y < img.height; y += span) {

        for (let x = 0; x < img.width; x += span) {

            if (x > img.width - span || y > img.height - span) continue;

            let currentCol = img.get(x, y);

            let nextCol = img.get(x + span, y);

            let underCol = img.get(x, y + span);

            if (getColDist(currentCol, nextCol) > threshold || getColDist(currentCol, underCol) > threshold) {

                points.push([x, y]);

            }

        }

    }

    return points;

}

​

function getColDist(col1, col2) {

    return dist(col1[0], col1[1], col1[2], col2[0], col2[1], col2[2]);

}

​

function mouseClicked() {

    initializeShapes();

    redraw();

}

​

function keyPressed() {

    if (key === 'S') {

        save("img_" + month() + '-' + day() + '_' + hour() + '-' + minute() + '-' + second() + ".jpg");

    } else if (key === 'R') {

        generateBackground();

        initializeShapes();

        redraw();

    }

}

​

function keyTyped() {

    if (key === '+') {

        edgeThreshold += 10;

        console.log("Edge Threshold:", edgeThreshold);

    } else if (key === '-') {

        edgeThreshold -= 10;

        console.log("Edge Threshold:", edgeThreshold);

    }

}

​

​