webtools/site/gradient-bands/main.js

function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

function interpolateColor(startRgb, endRgb, t) {
  return {
    r: Math.round(startRgb.r + (endRgb.r - startRgb.r) * t),
    g: Math.round(startRgb.g + (endRgb.g - startRgb.g) * t),
    b: Math.round(startRgb.b + (endRgb.b - startRgb.b) * t)
  };
}

function rgbToString(rgb) {
  return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
}

function getBandColorAtT(startRgb, endRgb, bands, t) {
  const bandIndex = Math.floor(t * bands);
  const bandT = bandIndex / (bands - 1);
  const clampedBandT = Math.max(0, Math.min(1, bandT));
  return interpolateColor(startRgb, endRgb, clampedBandT);
}

function applyFunction(t, funcType) {
    switch ( funcType) {
        case 'linear':
            return t;
        case 'quad':
            return t * t;
        case 'cubic':
            return t * t * t;
        case 'sin':
            return -Math.cos(t * Math.PI) / 2.0 + 0.5;
    }
}

function renderGradient() {
  const canvas = document.getElementById('gradient-canvas');
  const ctx = canvas.getContext('2d');
  const startColor = document.getElementById('start-color').value;
  const endColor = document.getElementById('end-color').value;
  const bands = parseInt(document.getElementById('bands').value);
  const funcType = document.getElementById('func').value;

  const startRgb = hexToRgb(startColor);
  const endRgb = hexToRgb(endColor);

  if (!startRgb || !endRgb || bands < 1) {
    return;
  }

  const width = canvas.width;
  const height = canvas.height;

  const imageData = ctx.createImageData(width, height);
  const data = imageData.data;

  for (let y = 0; y < height; y++) {
    const t = y / (height - 1);
    const u = applyFunction(t, funcType);
    const color = getBandColorAtT(startRgb, endRgb, bands, u);

    for (let x = 0; x < width; x++) {
      const index = (y * width + x) * 4;
      data[index] = color.r;
      data[index + 1] = color.g;
      data[index + 2] = color.b;
      data[index + 3] = 255;
    }
  }

  ctx.putImageData(imageData, 0, 0);
}

function downloadCanvas() {
  const canvas = document.getElementById('gradient-canvas');
  const link = document.createElement('a');
  link.download = 'gradient-bands.png';
  link.href = canvas.toDataURL();
  link.click();
}

function initializeEventListeners() {
  document.getElementById('start-color').addEventListener('input', renderGradient);
  document.getElementById('end-color').addEventListener('input', renderGradient);
  document.getElementById('bands').addEventListener('input', renderGradient);
  document.getElementById('func').addEventListener('input', renderGradient);
  document.getElementById('download-btn').addEventListener('click', downloadCanvas);
}

document.addEventListener('DOMContentLoaded', () => {
  initializeEventListeners();
  renderGradient();
});