You can edit the below JavaScript code to customize the image tool.
Apply Changes
function processImage(
originalImg,
intensity = 15,
overlayColor = "rgba(148, 0, 211, 0.2)",
addHexGrid = 1,
addVideoHUD = 1
) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const width = originalImg.width;
const height = originalImg.height;
canvas.width = width;
canvas.height = height;
// Draw original image
ctx.drawImage(originalImg, 0, 0);
// Apply "Audio/Video Glitch" (Chromatic Aberration & Static)
const imgData = ctx.getImageData(0, 0, width, height);
const data = imgData.data;
const outputData = new Uint8ClampedArray(data.length);
const rOffset = Math.floor(intensity);
const bOffset = -Math.floor(intensity);
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const i = (y * width + x) * 4;
// Clamp shifted X coordinates
let rX = Math.max(0, Math.min(width - 1, x + rOffset));
let bX = Math.max(0, Math.min(width - 1, x + bOffset));
const iR = (y * width + rX) * 4;
const iB = (y * width + bX) * 4;
// RGB Split / Chromatic Aberration
outputData[i] = data[iR]; // Red
outputData[i + 1] = data[i + 1]; // Green
outputData[i + 2] = data[iB + 2]; // Blue
outputData[i + 3] = data[i + 3]; // Alpha
// Add Audio/Video Static Noise
if (intensity > 0) {
const noise = (Math.random() - 0.5) * intensity * 2;
outputData[i] = Math.min(255, Math.max(0, outputData[i] + noise));
outputData[i + 1] = Math.min(255, Math.max(0, outputData[i + 1] + noise));
outputData[i + 2] = Math.min(255, Math.max(0, outputData[i + 2] + noise));
}
}
}
ctx.putImageData(new ImageData(outputData, width, height), 0, 0);
// Add Alternate Universe Color Tint
ctx.fillStyle = overlayColor;
ctx.fillRect(0, 0, width, height);
// Add Video Scanlines
ctx.fillStyle = "rgba(0, 0, 0, 0.25)";
for (let y = 0; y < height; y += 4) {
ctx.fillRect(0, y, width, 2);
}
// Abstract Big Hero 6 Tech Vibe (Hexagonal Grid overlay)
if (Number(addHexGrid) === 1) {
ctx.strokeStyle = "rgba(0, 255, 255, 0.15)";
ctx.lineWidth = 1;
const hexRadius = Math.max(20, width / 40);
const hexHeight = Math.sqrt(3) * hexRadius;
const hexWidth = 2 * hexRadius;
ctx.beginPath();
for (let y = 0; y < height + hexHeight; y += hexHeight) {
for (let x = 0, row = 0; x < width + hexWidth; x += (hexWidth * 0.75), row++) {
const yOffset = (row % 2 === 1) ? hexHeight / 2 : 0;
const cX = x;
const cY = y + yOffset;
for (let i = 0; i < 6; i++) {
const angle = (Math.PI / 3) * i;
const pX = cX + hexRadius * Math.cos(angle);
const pY = cY + hexRadius * Math.sin(angle);
if (i === 0) ctx.moveTo(pX, pY);
else ctx.lineTo(pX, pY);
}
ctx.lineTo(cX + hexRadius, cY);
}
}
ctx.stroke();
}
// Add Audio/Video HUD Overlay Screen
if (Number(addVideoHUD) === 1) {
ctx.fillStyle = "white";
ctx.shadowColor = "black";
ctx.shadowBlur = 5;
const fontSize = Math.max(16, width / 30);
ctx.font = `bold ${fontSize}px monospace`;
// REC Indicator
const pad = fontSize;
ctx.fillText("REC \u25CF", pad, pad * 1.5);
ctx.fillStyle = "red";
ctx.fillText("\u25CF", pad + ctx.measureText("REC ").width, pad * 1.5);
// Timecode and AU format indicator
ctx.fillStyle = "white";
const h = Math.floor(Math.random() * 24).toString().padStart(2, '0');
const m = Math.floor(Math.random() * 60).toString().padStart(2, '0');
const s = Math.floor(Math.random() * 60).toString().padStart(2, '0');
const timecode = `${h}:${m}:${s} [BH6-AU]`;
ctx.fillText(timecode, width - ctx.measureText(timecode).width - pad, pad * 1.5);
// Corner brackets / Crosshairs overlay
ctx.strokeStyle = "rgba(255, 255, 255, 0.7)";
ctx.lineWidth = Math.max(2, width / 300);
const bracketSize = Math.max(20, width / 15);
ctx.beginPath();
// Top Left
ctx.moveTo(pad, pad + bracketSize); ctx.lineTo(pad, pad); ctx.lineTo(pad + bracketSize, pad);
// Top Right
ctx.moveTo(width - pad - bracketSize, pad); ctx.lineTo(width - pad, pad); ctx.lineTo(width - pad, pad + bracketSize);
// Bottom Left
ctx.moveTo(pad, height - pad - bracketSize); ctx.lineTo(pad, height - pad); ctx.lineTo(pad + bracketSize, height - pad);
// Bottom Right
ctx.moveTo(width - pad - bracketSize, height - pad); ctx.lineTo(width - pad, height - pad); ctx.lineTo(width - pad, height - pad - bracketSize);
ctx.stroke();
// Center crosshair
ctx.beginPath();
const cX = width / 2;
const cY = height / 2;
ctx.moveTo(cX - 15, cY); ctx.lineTo(cX + 15, cY);
ctx.moveTo(cX, cY - 15); ctx.lineTo(cX, cY + 15);
ctx.stroke();
}
return canvas;
}
Apply Changes