Image Pixels To Curve Converter

function processImage(originalImg, rowStep = 5, colStep = 5, lineWidth = 1, lineColor = 'pixel', amplitude = 20, backgroundColor = '#ffffff') {
    // Get image dimensions
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Create the output canvas
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

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

    // Create a temporary canvas to get pixel data from the original image
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = width;
    tempCanvas.height = height;
    const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
    tempCtx.drawImage(originalImg, 0, 0);
    const imageData = tempCtx.getImageData(0, 0, width, height);
    const data = imageData.data;

    /**
     * Helper function to get the color and brightness of a pixel at a given coordinate.
     * It handles edge cases by clamping coordinates to the image boundaries.
     */
    const getPixel = (x, y) => {
        const safeX = Math.round(Math.max(0, Math.min(x, width - 1)));
        const safeY = Math.round(Math.max(0, Math.min(y, height - 1)));
        const i = (safeY * width + safeX) * 4;
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        // Use the standard luminance calculation for a perceptually accurate brightness.
        const brightness = 0.299 * r + 0.587 * g + 0.114 * b;
        return { r, g, b, brightness };
    };

    // Set drawing styles for the curves
    ctx.lineWidth = lineWidth;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    // Iterate over the image height in steps, drawing one curve for each step.
    for (let y = 0; y < height; y += rowStep) {
        
        // Collect all the points that will define the curve for the current row
        const points = [];
        // Extend slightly beyond the edges to ensure curves render smoothly from edge to edge.
        for (let x = -colStep; x <= width + colStep; x += colStep) {
            const { brightness } = getPixel(x, y);
            
            // Calculate the vertical offset based on pixel brightness.
            // Bright pixels (value 255) are offset upwards, dark pixels (value 0) downwards.
            const offset = (0.5 - brightness / 255) * 2 * amplitude;
            points.push({ x: x, y: y + offset });
        }

        if (points.length < 3) {
            continue; // Not enough points to draw a meaningful curve
        }

        // Set the color for this specific curve
        if (lineColor === 'pixel') {
            // Use the color from the middle of the row for the entire curve for consistency.
            const { r, g, b } = getPixel(width / 2, y);
            ctx.strokeStyle = `rgb(${r},${g},${b})`;
        } else {
            ctx.strokeStyle = lineColor;
        }

        // Draw a smooth curve through the collected points using a chain of quadratic curves.
        ctx.beginPath();
        ctx.moveTo(points[0].x, points[0].y);

        for (let i = 1; i < points.length - 2; i++) {
            const xc = (points[i].x + points[i + 1].x) / 2;
            const yc = (points[i].y + points[i + 1].y) / 2;
            ctx.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
        }
        
        // For the last segment, curve to the final point.
        ctx.quadraticCurveTo(
            points[points.length - 2].x,
            points[points.length - 2].y,
            points[points.length - 1].x,
            points[points.length - 1].y
        );

        ctx.stroke();
    }

    // Return the final canvas element
    return canvas;
}