function processImage(originalImg, amplitude = 20, frequency = 0.1) {
const width = originalImg.width;
const height = originalImg.height;
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
// Draw the original image onto the canvas
ctx.drawImage(originalImg, 0, 0);
// Get pixel data
const srcData = ctx.getImageData(0, 0, width, height);
const destData = ctx.createImageData(width, height);
const inputData = srcData.data;
const outputData = destData.data;
const amp = Number(amplitude);
const freq = Number(frequency);
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
// Apply Popcorn distortion algorithm
let srcX = x + amp * Math.sin(freq * y);
let srcY = y + amp * Math.sin(freq * x);
// Clamp coordinates to image boundaries
srcX = Math.min(Math.max(Math.floor(srcX), 0), width - 1);
srcY = Math.min(Math.max(Math.floor(srcY), 0), height - 1);
// Map standard coordinates to 1D array index
const srcIndex = (srcY * width + srcX) * 4;
const destIndex = (y * width + x) * 4;
// Copy pixel channels (RGBA)
outputData[destIndex] = inputData[srcIndex]; // Red
outputData[destIndex + 1] = inputData[srcIndex + 1]; // Green
outputData[destIndex + 2] = inputData[srcIndex + 2]; // Blue
outputData[destIndex + 3] = inputData[srcIndex + 3]; // Alpha
}
}
// Put the processed pixel data back
ctx.putImageData(destData, 0, 0);
return canvas;
}The Popcorn Image Effect Generator applies a unique wave-based distortion to your images, creating a wavy, undulating visual effect. By adjusting the amplitude and frequency of the distortion, users can control the intensity and pattern of the waves. This tool is ideal for creating stylized digital art, adding psychedelic textures to social media posts, or generating abstract backgrounds for graphic design projects.