hashvatar 0.1.0 → 0.1.2

package/dist/index.cjs

@@ -155,7 +155,85 @@ var SHAPES = [
   [[0.15, 0.2], [0.55, 0.08], [0.92, 0.35], [0.78, 0.75], [0.4, 0.92], [0.2, 0.6]],
   [[0.45, 0.08], [0.82, 0.3], [0.7, 0.85], [0.3, 0.88], [0.08, 0.5], [0.25, 0.25]]
 ];
-function drawBlurredShape(ctx, path, size, tx, ty, rotate, scale, fillStyle, offsetX, offsetY) {
+var _filterSupported = null;
+function hasFilterBlur() {
+  if (_filterSupported !== null) return _filterSupported;
+  try {
+    const c = document.createElement("canvas");
+    c.width = 30;
+    c.height = 30;
+    const x = c.getContext("2d");
+    x.fillStyle = "#fff";
+    x.fillRect(0, 0, 30, 30);
+    x.filter = "blur(6px)";
+    x.fillStyle = "#000";
+    x.fillRect(12, 12, 4, 4);
+    _filterSupported = x.getImageData(22, 22, 1, 1).data[0] < 255;
+    x.filter = "none";
+  } catch {
+    _filterSupported = false;
+  }
+  return _filterSupported;
+}
+function boxBlurCanvas(ctx, w, h, radius, passes = 3) {
+  const r = Math.max(1, Math.round((Math.sqrt(4 * radius * radius + 1) - 1) / 2));
+  const imgData = ctx.getImageData(0, 0, w, h);
+  const s = imgData.data;
+  const d = new Uint8ClampedArray(s.length);
+  const diam = r * 2 + 1;
+  const inv = 1 / diam;
+  for (let pass = 0; pass < passes; pass++) {
+    for (let y = 0; y < h; y++) {
+      const row = y * w;
+      let rs = 0, gs = 0, bs = 0, as = 0;
+      for (let dx = -r; dx <= r; dx++) {
+        const i = row + Math.max(0, Math.min(w - 1, dx)) << 2;
+        rs += s[i];
+        gs += s[i | 1];
+        bs += s[i | 2];
+        as += s[i | 3];
+      }
+      for (let x = 0; x < w; x++) {
+        const o = row + x << 2;
+        d[o] = rs * inv;
+        d[o | 1] = gs * inv;
+        d[o | 2] = bs * inv;
+        d[o | 3] = as * inv;
+        const ai = row + Math.min(w - 1, x + r + 1) << 2;
+        const ri = row + Math.max(0, x - r) << 2;
+        rs += s[ai] - s[ri];
+        gs += s[ai | 1] - s[ri | 1];
+        bs += s[ai | 2] - s[ri | 2];
+        as += s[ai | 3] - s[ri | 3];
+      }
+    }
+    for (let x = 0; x < w; x++) {
+      let rs = 0, gs = 0, bs = 0, as = 0;
+      for (let dy = -r; dy <= r; dy++) {
+        const i = Math.max(0, Math.min(h - 1, dy)) * w + x << 2;
+        rs += d[i];
+        gs += d[i | 1];
+        bs += d[i | 2];
+        as += d[i | 3];
+      }
+      for (let y = 0; y < h; y++) {
+        const o = y * w + x << 2;
+        s[o] = rs * inv;
+        s[o | 1] = gs * inv;
+        s[o | 2] = bs * inv;
+        s[o | 3] = as * inv;
+        const ai = Math.min(h - 1, y + r + 1) * w + x << 2;
+        const ri = Math.max(0, y - r) * w + x << 2;
+        rs += d[ai] - d[ri];
+        gs += d[ai | 1] - d[ri | 1];
+        bs += d[ai | 2] - d[ri | 2];
+        as += d[ai | 3] - d[ri | 3];
+      }
+    }
+  }
+  ctx.putImageData(imgData, 0, 0);
+}
+function drawShape(ctx, path, size, tx, ty, rotate, scale, fillStyle, offsetX, offsetY) {
   const cx = size / 2;
   const cy = size / 2;
   ctx.save();
@@ -174,11 +252,19 @@ function drawBlurredShape(ctx, path, size, tx, ty, rotate, scale, fillStyle, off
   ctx.fill();
   ctx.restore();
 }
+function getDevicePixelRatio() {
+  if (typeof window === "undefined" || !window.devicePixelRatio) return 1;
+  return Math.min(window.devicePixelRatio, 3);
+}
 function renderGradient(canvas, { size, colors, animated = false, seeds }) {
   if (colors.length < 4) return null;
-  canvas.width = size;
-  canvas.height = size;
+  const dpr = getDevicePixelRatio();
+  canvas.width = size * dpr;
+  canvas.height = size * dpr;
+  canvas.style.width = `${size}px`;
+  canvas.style.height = `${size}px`;
   const ctx = canvas.getContext("2d");
+  ctx.scale(dpr, dpr);
   const mix = seeds[0].toString() + seeds[1].toString() + seeds[2].toString() + seeds[3].toString();
   const allSeeds = hashToSeeds(mix, 24);
   const layers = [0, 1, 2, 3, 4, 5].map((i) => {
@@ -200,22 +286,26 @@ function renderGradient(canvas, { size, colors, animated = false, seeds }) {
     { composite: "overlay", alpha: 0.4 },
     { composite: "soft-light", alpha: 0.6 }
   ];
-  const blur = Math.max(8, Math.round(size * 0.21));
+  const blur = Math.max(2, Math.round(size * 0.21));
   const pad = Math.ceil(blur * 1.9);
+  const useFilter = hasFilterBlur();
   const ROT_SPEEDS = [0.5, 0.6, 0.45, 0.55, 0.5, 0.65];
   const DRIFT_AMP = size * 0.18;
   const DRIFT_FREQS = [0.5, 0.45, 0.4, 0.48, 0.52, 0.38];
   const DRIFT_PHASE_OFFSETS = [0, 1, 2, 0.5, 1.5, 3];
   const PHASE_SPEED = 1.2;
+  const w = size + pad * 2;
+  const h = size + pad * 2;
+  const animResScale = !useFilter && animated ? 0.5 : 1;
+  const offCanvas = document.createElement("canvas");
+  offCanvas.width = w * dpr * animResScale;
+  offCanvas.height = h * dpr * animResScale;
+  const offCtx = offCanvas.getContext("2d");
+  offCtx.scale(dpr * animResScale, dpr * animResScale);
   const draw = (phase2) => {
     ctx.clearRect(0, 0, size, size);
     ctx.fillStyle = hex0;
     ctx.fillRect(0, 0, size, size);
-    const w = size + pad * 2;
-    const h = size + pad * 2;
-    const offCtx = document.createElement("canvas").getContext("2d");
-    offCtx.canvas.width = w;
-    offCtx.canvas.height = h;
     for (let i = 0; i < 6; i++) {
       const layer = layers[i];
       const rot = layer.rotate + (animated ? phase2 * ROT_SPEEDS[i] : 0);
@@ -226,24 +316,22 @@ function renderGradient(canvas, { size, colors, animated = false, seeds }) {
       const opts = LAYER_OPTS[i];
       const hex = hexColors[i % 3];
       offCtx.clearRect(0, 0, w, h);
-      drawBlurredShape(
-        offCtx,
-        SHAPES[i],
-        size,
-        layer.tx + driftX,
-        layer.ty + driftY,
-        rot,
-        scale,
-        hex,
-        pad,
-        pad
-      );
-      ctx.save();
-      ctx.filter = `blur(${blur}px)`;
-      ctx.globalCompositeOperation = opts.composite;
-      ctx.globalAlpha = opts.alpha;
-      ctx.drawImage(offCtx.canvas, 0, 0, w, h, -pad, -pad, w, h);
-      ctx.restore();
+      drawShape(offCtx, SHAPES[i], size, layer.tx + driftX, layer.ty + driftY, rot, scale, hex, pad, pad);
+      if (useFilter) {
+        ctx.save();
+        ctx.filter = `blur(${blur * dpr}px)`;
+        ctx.globalCompositeOperation = opts.composite;
+        ctx.globalAlpha = opts.alpha;
+        ctx.drawImage(offCanvas, 0, 0, offCanvas.width, offCanvas.height, -pad, -pad, w, h);
+        ctx.restore();
+      } else {
+        boxBlurCanvas(offCtx, offCanvas.width, offCanvas.height, blur * dpr * 1.4 * animResScale, animResScale < 1 ? 2 : 3);
+        ctx.save();
+        ctx.globalCompositeOperation = opts.composite;
+        ctx.globalAlpha = opts.alpha;
+        ctx.drawImage(offCanvas, 0, 0, offCanvas.width, offCanvas.height, -pad, -pad, w, h);
+        ctx.restore();
+      }
     }
     ctx.globalCompositeOperation = "source-over";
     ctx.globalAlpha = 1;
@@ -283,27 +371,36 @@ function hexToRgb2(hex) {
   const n = parseInt(hex.replace("#", ""), 16);
   return { r: n >> 16 & 255, g: n >> 8 & 255, b: n & 255 };
 }
+function getDevicePixelRatio2() {
+  if (typeof window === "undefined" || !window.devicePixelRatio) return 1;
+  return Math.min(window.devicePixelRatio, 3);
+}
 function renderDither(canvas, { size, colors, dotScale: dotScaleOpt, animated = false, seeds }) {
-  canvas.width = size;
-  canvas.height = size;
+  const dpr = getDevicePixelRatio2();
+  const sizePx = Math.round(size * dpr);
+  canvas.width = sizePx;
+  canvas.height = sizePx;
+  canvas.style.width = `${size}px`;
+  canvas.style.height = `${size}px`;
   const ctx = canvas.getContext("2d");
-  const dotScale = dotScaleOpt ?? Math.max(2, Math.round(size / 35));
+  const dotScaleLogical = dotScaleOpt ?? Math.max(1, Math.round(size / 35));
+  const dotScale = Math.max(1, Math.round(dotScaleLogical * dpr));
   const colA = hexToRgb2(oklchToHex(colors[0]));
   const colB = hexToRgb2(oklchToHex(colors[Math.min(1, colors.length - 1)]));
   const baseAngle = seeds[0] * Math.PI * 2;
   const falloff = 0.55 + seeds[1] * 0.25;
   const swirlSpeed = 0.45;
   const padding = 1;
-  const gridSize = Math.ceil(size / dotScale) + padding * 2;
+  const gridSize = Math.ceil(sizePx / dotScale) + padding * 2;
   const cellPhase = (gx, gy) => ((gx * 31 + gy * 17) * (seeds[2] * 1e3 + 1) + (seeds[3] * 1e3 | 0)) % 1e3 / 1e3 * Math.PI * 2;
   const cellAmp = (gx, gy) => 0.035 + (gx * 7 + gy * 13 + seeds[2] * 50 | 0) % 55 / 1100;
   const draw = (phase2) => {
-    const img = ctx.createImageData(size, size);
+    const img = ctx.createImageData(sizePx, sizePx);
     const d = img.data;
     const angle = baseAngle + (animated ? phase2 * swirlSpeed : 0);
     const cosA = Math.cos(angle);
     const sinA = Math.sin(angle);
-    for (let i = 0; i < size * size * 4; i += 4) {
+    for (let i = 0; i < sizePx * sizePx * 4; i += 4) {
       d[i] = colB.r;
       d[i + 1] = colB.g;
       d[i + 2] = colB.b;
@@ -329,8 +426,8 @@ function renderDither(canvas, { size, colors, dotScale: dotScaleOpt, animated =
           for (let px = 0; px < dotScale; px++) {
             const x = (gx - padding) * dotScale + px;
             const y = (gy - padding) * dotScale + py;
-            if (x < 0 || y < 0 || x >= size || y >= size) continue;
-            const idx = (y * size + x) * 4;
+            if (x < 0 || y < 0 || x >= sizePx || y >= sizePx) continue;
+            const idx = (y * sizePx + x) * 4;
             d[idx] = colA.r;
             d[idx + 1] = colA.g;
             d[idx + 2] = colA.b;

package/dist/index.js

@@ -121,7 +121,85 @@ var SHAPES = [
   [[0.15, 0.2], [0.55, 0.08], [0.92, 0.35], [0.78, 0.75], [0.4, 0.92], [0.2, 0.6]],
   [[0.45, 0.08], [0.82, 0.3], [0.7, 0.85], [0.3, 0.88], [0.08, 0.5], [0.25, 0.25]]
 ];
-function drawBlurredShape(ctx, path, size, tx, ty, rotate, scale, fillStyle, offsetX, offsetY) {
+var _filterSupported = null;
+function hasFilterBlur() {
+  if (_filterSupported !== null) return _filterSupported;
+  try {
+    const c = document.createElement("canvas");
+    c.width = 30;
+    c.height = 30;
+    const x = c.getContext("2d");
+    x.fillStyle = "#fff";
+    x.fillRect(0, 0, 30, 30);
+    x.filter = "blur(6px)";
+    x.fillStyle = "#000";
+    x.fillRect(12, 12, 4, 4);
+    _filterSupported = x.getImageData(22, 22, 1, 1).data[0] < 255;
+    x.filter = "none";
+  } catch {
+    _filterSupported = false;
+  }
+  return _filterSupported;
+}
+function boxBlurCanvas(ctx, w, h, radius, passes = 3) {
+  const r = Math.max(1, Math.round((Math.sqrt(4 * radius * radius + 1) - 1) / 2));
+  const imgData = ctx.getImageData(0, 0, w, h);
+  const s = imgData.data;
+  const d = new Uint8ClampedArray(s.length);
+  const diam = r * 2 + 1;
+  const inv = 1 / diam;
+  for (let pass = 0; pass < passes; pass++) {
+    for (let y = 0; y < h; y++) {
+      const row = y * w;
+      let rs = 0, gs = 0, bs = 0, as = 0;
+      for (let dx = -r; dx <= r; dx++) {
+        const i = row + Math.max(0, Math.min(w - 1, dx)) << 2;
+        rs += s[i];
+        gs += s[i | 1];
+        bs += s[i | 2];
+        as += s[i | 3];
+      }
+      for (let x = 0; x < w; x++) {
+        const o = row + x << 2;
+        d[o] = rs * inv;
+        d[o | 1] = gs * inv;
+        d[o | 2] = bs * inv;
+        d[o | 3] = as * inv;
+        const ai = row + Math.min(w - 1, x + r + 1) << 2;
+        const ri = row + Math.max(0, x - r) << 2;
+        rs += s[ai] - s[ri];
+        gs += s[ai | 1] - s[ri | 1];
+        bs += s[ai | 2] - s[ri | 2];
+        as += s[ai | 3] - s[ri | 3];
+      }
+    }
+    for (let x = 0; x < w; x++) {
+      let rs = 0, gs = 0, bs = 0, as = 0;
+      for (let dy = -r; dy <= r; dy++) {
+        const i = Math.max(0, Math.min(h - 1, dy)) * w + x << 2;
+        rs += d[i];
+        gs += d[i | 1];
+        bs += d[i | 2];
+        as += d[i | 3];
+      }
+      for (let y = 0; y < h; y++) {
+        const o = y * w + x << 2;
+        s[o] = rs * inv;
+        s[o | 1] = gs * inv;
+        s[o | 2] = bs * inv;
+        s[o | 3] = as * inv;
+        const ai = Math.min(h - 1, y + r + 1) * w + x << 2;
+        const ri = Math.max(0, y - r) * w + x << 2;
+        rs += d[ai] - d[ri];
+        gs += d[ai | 1] - d[ri | 1];
+        bs += d[ai | 2] - d[ri | 2];
+        as += d[ai | 3] - d[ri | 3];
+      }
+    }
+  }
+  ctx.putImageData(imgData, 0, 0);
+}
+function drawShape(ctx, path, size, tx, ty, rotate, scale, fillStyle, offsetX, offsetY) {
   const cx = size / 2;
   const cy = size / 2;
   ctx.save();
@@ -140,11 +218,19 @@ function drawBlurredShape(ctx, path, size, tx, ty, rotate, scale, fillStyle, off
   ctx.fill();
   ctx.restore();
 }
+function getDevicePixelRatio() {
+  if (typeof window === "undefined" || !window.devicePixelRatio) return 1;
+  return Math.min(window.devicePixelRatio, 3);
+}
 function renderGradient(canvas, { size, colors, animated = false, seeds }) {
   if (colors.length < 4) return null;
-  canvas.width = size;
-  canvas.height = size;
+  const dpr = getDevicePixelRatio();
+  canvas.width = size * dpr;
+  canvas.height = size * dpr;
+  canvas.style.width = `${size}px`;
+  canvas.style.height = `${size}px`;
   const ctx = canvas.getContext("2d");
+  ctx.scale(dpr, dpr);
   const mix = seeds[0].toString() + seeds[1].toString() + seeds[2].toString() + seeds[3].toString();
   const allSeeds = hashToSeeds(mix, 24);
   const layers = [0, 1, 2, 3, 4, 5].map((i) => {
@@ -166,22 +252,26 @@ function renderGradient(canvas, { size, colors, animated = false, seeds }) {
     { composite: "overlay", alpha: 0.4 },
     { composite: "soft-light", alpha: 0.6 }
   ];
-  const blur = Math.max(8, Math.round(size * 0.21));
+  const blur = Math.max(2, Math.round(size * 0.21));
   const pad = Math.ceil(blur * 1.9);
+  const useFilter = hasFilterBlur();
   const ROT_SPEEDS = [0.5, 0.6, 0.45, 0.55, 0.5, 0.65];
   const DRIFT_AMP = size * 0.18;
   const DRIFT_FREQS = [0.5, 0.45, 0.4, 0.48, 0.52, 0.38];
   const DRIFT_PHASE_OFFSETS = [0, 1, 2, 0.5, 1.5, 3];
   const PHASE_SPEED = 1.2;
+  const w = size + pad * 2;
+  const h = size + pad * 2;
+  const animResScale = !useFilter && animated ? 0.5 : 1;
+  const offCanvas = document.createElement("canvas");
+  offCanvas.width = w * dpr * animResScale;
+  offCanvas.height = h * dpr * animResScale;
+  const offCtx = offCanvas.getContext("2d");
+  offCtx.scale(dpr * animResScale, dpr * animResScale);
   const draw = (phase2) => {
     ctx.clearRect(0, 0, size, size);
     ctx.fillStyle = hex0;
     ctx.fillRect(0, 0, size, size);
-    const w = size + pad * 2;
-    const h = size + pad * 2;
-    const offCtx = document.createElement("canvas").getContext("2d");
-    offCtx.canvas.width = w;
-    offCtx.canvas.height = h;
     for (let i = 0; i < 6; i++) {
       const layer = layers[i];
       const rot = layer.rotate + (animated ? phase2 * ROT_SPEEDS[i] : 0);
@@ -192,24 +282,22 @@ function renderGradient(canvas, { size, colors, animated = false, seeds }) {
       const opts = LAYER_OPTS[i];
       const hex = hexColors[i % 3];
       offCtx.clearRect(0, 0, w, h);
-      drawBlurredShape(
-        offCtx,
-        SHAPES[i],
-        size,
-        layer.tx + driftX,
-        layer.ty + driftY,
-        rot,
-        scale,
-        hex,
-        pad,
-        pad
-      );
-      ctx.save();
-      ctx.filter = `blur(${blur}px)`;
-      ctx.globalCompositeOperation = opts.composite;
-      ctx.globalAlpha = opts.alpha;
-      ctx.drawImage(offCtx.canvas, 0, 0, w, h, -pad, -pad, w, h);
-      ctx.restore();
+      drawShape(offCtx, SHAPES[i], size, layer.tx + driftX, layer.ty + driftY, rot, scale, hex, pad, pad);
+      if (useFilter) {
+        ctx.save();
+        ctx.filter = `blur(${blur * dpr}px)`;
+        ctx.globalCompositeOperation = opts.composite;
+        ctx.globalAlpha = opts.alpha;
+        ctx.drawImage(offCanvas, 0, 0, offCanvas.width, offCanvas.height, -pad, -pad, w, h);
+        ctx.restore();
+      } else {
+        boxBlurCanvas(offCtx, offCanvas.width, offCanvas.height, blur * dpr * 1.4 * animResScale, animResScale < 1 ? 2 : 3);
+        ctx.save();
+        ctx.globalCompositeOperation = opts.composite;
+        ctx.globalAlpha = opts.alpha;
+        ctx.drawImage(offCanvas, 0, 0, offCanvas.width, offCanvas.height, -pad, -pad, w, h);
+        ctx.restore();
+      }
     }
     ctx.globalCompositeOperation = "source-over";
     ctx.globalAlpha = 1;
@@ -249,27 +337,36 @@ function hexToRgb2(hex) {
   const n = parseInt(hex.replace("#", ""), 16);
   return { r: n >> 16 & 255, g: n >> 8 & 255, b: n & 255 };
 }
+function getDevicePixelRatio2() {
+  if (typeof window === "undefined" || !window.devicePixelRatio) return 1;
+  return Math.min(window.devicePixelRatio, 3);
+}
 function renderDither(canvas, { size, colors, dotScale: dotScaleOpt, animated = false, seeds }) {
-  canvas.width = size;
-  canvas.height = size;
+  const dpr = getDevicePixelRatio2();
+  const sizePx = Math.round(size * dpr);
+  canvas.width = sizePx;
+  canvas.height = sizePx;
+  canvas.style.width = `${size}px`;
+  canvas.style.height = `${size}px`;
   const ctx = canvas.getContext("2d");
-  const dotScale = dotScaleOpt ?? Math.max(2, Math.round(size / 35));
+  const dotScaleLogical = dotScaleOpt ?? Math.max(1, Math.round(size / 35));
+  const dotScale = Math.max(1, Math.round(dotScaleLogical * dpr));
   const colA = hexToRgb2(oklchToHex(colors[0]));
   const colB = hexToRgb2(oklchToHex(colors[Math.min(1, colors.length - 1)]));
   const baseAngle = seeds[0] * Math.PI * 2;
   const falloff = 0.55 + seeds[1] * 0.25;
   const swirlSpeed = 0.45;
   const padding = 1;
-  const gridSize = Math.ceil(size / dotScale) + padding * 2;
+  const gridSize = Math.ceil(sizePx / dotScale) + padding * 2;
   const cellPhase = (gx, gy) => ((gx * 31 + gy * 17) * (seeds[2] * 1e3 + 1) + (seeds[3] * 1e3 | 0)) % 1e3 / 1e3 * Math.PI * 2;
   const cellAmp = (gx, gy) => 0.035 + (gx * 7 + gy * 13 + seeds[2] * 50 | 0) % 55 / 1100;
   const draw = (phase2) => {
-    const img = ctx.createImageData(size, size);
+    const img = ctx.createImageData(sizePx, sizePx);
     const d = img.data;
     const angle = baseAngle + (animated ? phase2 * swirlSpeed : 0);
     const cosA = Math.cos(angle);
     const sinA = Math.sin(angle);
-    for (let i = 0; i < size * size * 4; i += 4) {
+    for (let i = 0; i < sizePx * sizePx * 4; i += 4) {
       d[i] = colB.r;
       d[i + 1] = colB.g;
       d[i + 2] = colB.b;
@@ -295,8 +392,8 @@ function renderDither(canvas, { size, colors, dotScale: dotScaleOpt, animated =
           for (let px = 0; px < dotScale; px++) {
             const x = (gx - padding) * dotScale + px;
             const y = (gy - padding) * dotScale + py;
-            if (x < 0 || y < 0 || x >= size || y >= size) continue;
-            const idx = (y * size + x) * 4;
+            if (x < 0 || y < 0 || x >= sizePx || y >= sizePx) continue;
+            const idx = (y * sizePx + x) * 4;
             d[idx] = colA.r;
             d[idx + 1] = colA.g;
             d[idx + 2] = colA.b;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hashvatar",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Deterministic avatar generation from any hash string. Zero dependencies.",
   "author": "Médhy",
   "license": "MIT",
@@ -27,7 +27,7 @@
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
-    "demo": "npx serve . -p 5000",
+    "demo": "npx serve . -l tcp://0.0.0.0:5000",
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
@@ -57,6 +57,6 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/medhychabour/hashvatar"
+    "url": "git+https://github.com/medhychabour/hashvatar.git"
   }
 }