Image Weird Chorded Effect Creator

/**
 * Creates a "weird chorded effect" on an image by drawing numerous lines (chords)
 * between points on the image's perimeter. The color of each line is determined
 * by sampling the color of the original image at the line's midpoint.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {number} numChords [=3000] The total number of chords to draw. More chords result in a denser, more detailed effect.
 * @param {number} numPoints [=200] The number of anchor points on the perimeter of the image from which chords are drawn.
 * @param {number} lineWidth [=1] The width of each chord line in pixels.
 * @param {string} backgroundColor [='black'] The background color of the output canvas.
 * @returns {HTMLCanvasElement} A new canvas element displaying the chorded effect.
 */
function processImage(originalImg, numChords = 3000, numPoints = 200, lineWidth = 1, backgroundColor = 'black') {
    // Get image dimensions
    const width = originalImg.width;
    const height = originalImg.height;

    // Create a source canvas to get image pixel data
    const sourceCanvas = document.createElement('canvas');
    sourceCanvas.width = width;
    sourceCanvas.height = height;
    const sourceCtx = sourceCanvas.getContext('2d');
    sourceCtx.drawImage(originalImg, 0, 0);
    const imageData = sourceCtx.getImageData(0, 0, width, height).data;

    // Create the destination canvas for drawing the effect
    const destCanvas = document.createElement('canvas');
    destCanvas.width = width;
    destCanvas.height = height;
    const destCtx = destCanvas.getContext('2d', {
        alpha: false
    });

    // Fill background
    destCtx.fillStyle = backgroundColor;
    destCtx.fillRect(0, 0, width, height);

    // Set line properties
    destCtx.lineWidth = lineWidth;
    destCtx.globalAlpha = 0.7; // Use slight transparency for better blending

    // Generate anchor points along an ellipse that fits the image dimensions
    const points = [];
    const centerX = width / 2;
    const centerY = height / 2;
    const radiusX = width / 2;
    const radiusY = height / 2;

    for (let i = 0; i < numPoints; i++) {
        const angle = (i / numPoints) * 2 * Math.PI;
        const x = centerX + radiusX * Math.cos(angle);
        const y = centerY + radiusY * Math.sin(angle);
        points.push({
            x,
            y
        });
    }

    // Draw the chords
    for (let i = 0; i < numChords; i++) {
        // Pick two random, distinct anchor points
        let idx1 = Math.floor(Math.random() * numPoints);
        let idx2 = Math.floor(Math.random() * numPoints);
        while (idx1 === idx2) {
            idx2 = Math.floor(Math.random() * numPoints);
        }

        const p1 = points[idx1];
        const p2 = points[idx2];

        // Find the midpoint of the chord
        const midX = Math.round((p1.x + p2.x) / 2);
        const midY = Math.round((p1.y + p2.y) / 2);

        // Clamp coordinates to be safely within the image bounds
        const sampleX = Math.max(0, Math.min(width - 1, midX));
        const sampleY = Math.max(0, Math.min(height - 1, midY));

        // Get the color from the original image at the midpoint
        const pixelIndex = (sampleY * width + sampleX) * 4;
        const r = imageData[pixelIndex];
        const g = imageData[pixelIndex + 1];
        const b = imageData[pixelIndex + 2];

        // Set the line color and draw the line
        destCtx.strokeStyle = `rgb(${r}, ${g}, ${b})`;
        destCtx.beginPath();
        destCtx.moveTo(p1.x, p1.y);
        destCtx.lineTo(p2.x, p2.y);
        destCtx.stroke();
    }

    return destCanvas;
}