function processImage(originalImg, depth = 50, scaleFactor = 0.85, rotationAngle = -5, offsetX = 0, offsetY = 0, shadowOpacity = 0.5) {
const canvas = document.createElement('canvas');
const w = originalImg.width;
const h = originalImg.height;
canvas.width = w;
canvas.height = h;
const ctx = canvas.getContext('2d');
// Move the origin to the center of the canvas to allow proper centered scaling and rotation
ctx.translate(w / 2, h / 2);
let currentScale = 1;
let currentRotation = 0;
let transX = 0;
let transY = 0;
for (let i = 0; i < depth; i++) {
ctx.save();
// Apply cumulative transforms
ctx.translate(transX, transY);
ctx.rotate(currentRotation * Math.PI / 180);
ctx.scale(currentScale, currentScale);
// Apply a drop shadow to give depth to the collapse effect
// We skip the first iteration so the outermost image doesn't cast an invisible shadow
if (i > 0 && shadowOpacity > 0) {
ctx.shadowColor = `rgba(0, 0, 0, ${shadowOpacity})`;
// Manually scale down the blur radius so deeper levels have tighter shadows
ctx.shadowBlur = Math.max(2, (Math.min(w, h) * 0.03) * currentScale);
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
}
// Draw the image centered at the current transformed origin
ctx.drawImage(originalImg, -w / 2, -h / 2, w, h);
ctx.restore();
// Prepare variables for the next, deeper iteration
currentScale *= scaleFactor;
currentRotation += rotationAngle;
// Offset values are treated as percentages (e.g. 0.01 for 1% shift per level)
transX += offsetX * w;
transY += offsetY * h;
}
return canvas;
}The Infinite Loop Collapse Image Effect Creator generates a stylized tunnel or fractal-like visual effect by layering multiple copies of an image within itself. By adjusting parameters such as depth, scaling, rotation, and translation, users can create an illusion of infinite depth or a collapsing motion. This tool is ideal for creating psychedelic digital art, unique social media graphics, dynamic backgrounds, or abstract visual assets for graphic design projects.