Please bookmark this page to avoid losing your image tool!

Image To Seurat Painting Converter

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image tool.
/**
 * Converts an image into a Seurat-style pointillist painting.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @param {number} dotSize The radius of the dots used in the painting. Default is 3.
 * @param {number} dotJitter The amount of random positional variation for each dot. A higher value creates a more chaotic, less grid-like appearance. Default is 3.
 * @param {number} colorVariation The amount of random variation applied to the RGB channels of each dot's color. Default is 15.
 * @returns {HTMLCanvasElement} A canvas element with the Seurat-style painting.
 */
function processImage(originalImg, dotSize = 3, dotJitter = 3, colorVariation = 15) {
    // Sanitize and parse parameters to ensure they are numbers
    const size = Math.max(1, parseFloat(dotSize) || 3);
    const jitter = Math.max(0, parseFloat(dotJitter) || 3);
    const variation = Math.max(0, parseFloat(colorVariation) || 15);

    // Get image dimensions
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

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

    // Get the pixel data from the entire source canvas
    const imageData = sourceCtx.getImageData(0, 0, width, height).data;

    // Create the target canvas where the new painting will be drawn
    const targetCanvas = document.createElement('canvas');
    targetCanvas.width = width;
    targetCanvas.height = height;
    const targetCtx = targetCanvas.getContext('2d');

    // Fill the background to simulate a canvas. A light cream color can look nice.
    targetCtx.fillStyle = '#f0f0e0';
    targetCtx.fillRect(0, 0, width, height);

    // Define the step size for iterating over the image.
    // This controls the density of the dots.
    const step = Math.floor(size);

    // Loop through the image in steps, drawing a dot for each grid point
    for (let y = 0; y < height; y += step) {
        for (let x = 0; x < width; x += step) {
            // Calculate the index for the pixel in the flat imageData array
            const index = (y * width + x) * 4;

            // Get the original color components from the image data
            const r = imageData[index];
            const g = imageData[index + 1];
            const b = imageData[index + 2];

            // Apply random color variation to each channel
            const newR = Math.max(0, Math.min(255, r + (Math.random() - 0.5) * variation));
            const newG = Math.max(0, Math.min(255, g + (Math.random() - 0.5) * variation));
            const newB = Math.max(0, Math.min(255, b + (Math.random() - 0.5) * variation));

            targetCtx.fillStyle = `rgb(${Math.floor(newR)}, ${Math.floor(newG)}, ${Math.floor(newB)})`;

            // Apply random jitter to the dot's position for a more organic feel
            const jitterX = x + (Math.random() - 0.5) * jitter * 2;
            const jitterY = y + (Math.random() - 0.5) * jitter * 2;

            // Draw the dot as a filled circle
            targetCtx.beginPath();
            targetCtx.arc(jitterX, jitterY, size, 0, Math.PI * 2, true);
            targetCtx.fill();
        }
    }

    // Return the final canvas element
    return targetCanvas;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The Image To Seurat Painting Converter transforms a standard image into a Seurat-style pointillist painting. Users can customize the appearance of the artwork by adjusting the size of the dots, adding randomness to the dot placement, and varying the colors used for each dot. This tool is ideal for artists, designers, or anyone looking to create unique visual art from photographs or images, making it suitable for prints, digital art projects, or creative explorations.

Leave a Reply

Your email address will not be published. Required fields are marked *