Chromatic Aberration Effect

This code demonstrates how to create a dynamic chromatic aberration effect - an image distortion technique often seen in glitch art and modern digital design. By manipulating individual color channels and applying animation, we can create a mesmerizing visual effect that makes images appear to shift and separate in a psychedelic way.

At its core, the chromatic aberration effect relies on separating an image into its fundamental color components. Our code starts by taking an input image, either pre-loaded or uploaded by the user, and splitting it into its three primary color channels: Red, Green, and Blue. Each color channel is isolated and stored in its own canvas element, giving us complete control over how we manipulate each color layer independently.

The heart of our effect lies in two primary functions. First, processImg() handles all the initial image processing tasks. It takes care of resizing the image to fit within specified dimensions, methodically separates the image into individual R, G, B channels, and creates a blended version of all channels as a base state.

    
javascript
    
// Create separate color channels
const rData = new ImageData(width, height);
const gData = new ImageData(width, height);
const bData = new ImageData(width, height);

// Copy image data
const imgData = origCtx.getImageData(0, 0, width, height);
const data = imgData.data;
for (let i = 0; i < data.length; i += 4) {
  rData.data[i + 0] = data[i + 0];
  rData.data[i + 3] = 255;
  gData.data[i + 1] = data[i + 1];
  gData.data[i + 3] = 255;
  bData.data[i + 2] = data[i + 2];
  bData.data[i + 3] = 255;
}
    
  

The heart of our effect lies in two primary functions. First, processImg() handles all the initial image processing tasks. It takes care of resizing the image to fit within specified dimensions, methodically separates the image into individual R, G, B channels, and creates a blended version of all channels as a base state.

The real magic happens in the animate() function. Here, each color channel is set into motion, moving independently along carefully calculated paths. The movement follows smooth sine and cosine patterns, creating an organic flowing effect. These separated channels are then blended back together using the "screen" composition mode, resulting in a dynamic chromatic aberration effect where colors appear to drift apart and reunite in a continuous dance.

    
javascript
      
const ctx = animatedCanvas.getContext("2d")!;
ctx.clearRect(0, 0, width, height);
time += animationSpeed;

// Calculate offsets for each channel
const rOffset = {
  x: Math.sin(time * 0.5) * displacement,
  y: Math.cos(time * 0.7) * displacement,
};
const gOffset = {
  x: Math.sin(time * 0.8) * displacement,
  y: Math.cos(time * 0.6) * displacement,
};
const bOffset = {
  x: Math.sin(time * 0.9) * displacement,
  y: Math.cos(time * 0.5) * displacement,
};

// Draw each channel
ctx.globalCompositeOperation = "screen";
ctx.drawImage(rCanvas, rOffset.x - displacement, rOffset.y - displacement);
ctx.drawImage(gCanvas, gOffset.x - displacement, gOffset.y - displacement);
ctx.drawImage(bCanvas, bOffset.x - displacement, bOffset.y - displacement);

      
    

By combining these elements, we create a captivating visual effect that can add a unique dynamic element to any web project. Whether you're creating an artistic portfolio, a modern web application, or just experimenting with creative coding, this chromatic aberration effect offers an interesting way to manipulate and present images.