228

Microscopic Snowflake Crystal

High-magnification microscopic ice crystal growth exhibiting 6-fold cyclic C6 rotational symmetry, primary hexagonal basal spines, and self-similar 60-degree secondary dendritic side prongs.

Playground
60 FPS Canvas 2D
Click + Drag to interact with field
</>

Full Executable Algorithm Code

// 043 - Microscopic Snowflake Crystal (geometry)
// 1:1 Original algorithm engine source
function createMicroscopicIceCrystal() {
  return {
    setup() {
    },
    render(context, timeState, params) {
      const { ctx, width, height } = context;
      const freezeSpeed = Number(params.freezeRate || 0.6);
      const complexity = Number(params.dendriteBranches || 5);
      const t = timeState.time * freezeSpeed;
      ctx.fillStyle = "#03050a";
      ctx.fillRect(0, 0, width, height);
      const cx = width * 0.5;
      const cy = height * 0.5;
      const crystalRadius = Math.min(width, height) * 0.42;
      const growthCycle = t * 0.4 % 1;
      const growth = Math.sin(growthCycle * Math.PI);
      ctx.save();
      ctx.translate(cx, cy);
      ctx.rotate(t * 0.1);
      for (let a = 0; a < 6; a++) {
        const armAngle = a / 6 * Math.PI * 2;
        const mainArmLen = crystalRadius * (0.3 + 0.7 * growth);
        ctx.save();
        ctx.rotate(armAngle);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(mainArmLen, 0);
        ctx.strokeStyle = hsla(195, 95, 80, 0.9);
        ctx.lineWidth = 2.4;
        ctx.stroke();
        for (let b = 1; b <= complexity; b++) {
          const branchPos = b / (complexity + 1) * mainArmLen;
          const branchGrowth = Math.max(0, (growth - b * 0.12) / (1 - b * 0.12));
          const branchLen = crystalRadius * 0.28 * (1 - b / (complexity + 1)) * branchGrowth;
          if (branchLen > 0) {
            ctx.beginPath();
            ctx.moveTo(branchPos, 0);
            const ux = branchPos + Math.cos(Math.PI / 3) * branchLen;
            const uy = -Math.sin(Math.PI / 3) * branchLen;
            ctx.lineTo(ux, uy);
            if (b <= 3 && branchGrowth > 0.6) {
              const subLen = branchLen * 0.4;
              ctx.moveTo(ux * 0.65 + branchPos * 0.35, uy * 0.65);
              ctx.lineTo(
                ux * 0.65 + branchPos * 0.35 + Math.cos(Math.PI / 3) * subLen,
                uy * 0.65 + Math.sin(Math.PI / 3) * subLen
              );
            }
            ctx.moveTo(branchPos, 0);
            const lx = branchPos + Math.cos(-Math.PI / 3) * branchLen;
            const ly = -Math.sin(-Math.PI / 3) * branchLen;
            ctx.lineTo(lx, ly);
            if (b <= 3 && branchGrowth > 0.6) {
              const subLen = branchLen * 0.4;
              ctx.moveTo(lx * 0.65 + branchPos * 0.35, ly * 0.65);
              ctx.lineTo(
                lx * 0.65 + branchPos * 0.35 + Math.cos(-Math.PI / 3) * subLen,
                ly * 0.65 - Math.sin(-Math.PI / 3) * subLen
              );
            }
            const branchHue = (185 + b * 10 + t * 20) % 360;
            ctx.strokeStyle = hsla(branchHue, 90, 75, 0.8);
            ctx.lineWidth = Math.max(1, 1.8 - b * 0.2);
            ctx.stroke();
            ctx.fillStyle = hsla(180, 100, 92, 0.95);
            ctx.beginPath();
            ctx.arc(ux, uy, 1.8, 0, Math.PI * 2);
            ctx.arc(lx, ly, 1.8, 0, Math.PI * 2);
            ctx.fill();
          }
        }
        ctx.fillStyle = hsla(190, 100, 95, 0.95);
        ctx.beginPath();
        ctx.arc(mainArmLen, 0, 2.5, 0, Math.PI * 2);
        ctx.fill();
        ctx.restore();
      }
      ctx.beginPath();
      const coreRadius = (16 + 12 * Math.sin(t * 2)) * Math.min(1, growth * 1.5);
      for (let k = 0; k <= 6; k++) {
        const a = k / 6 * Math.PI * 2;
        const px = Math.cos(a) * coreRadius;
        const py = Math.sin(a) * coreRadius;
        if (k === 0) ctx.moveTo(px, py);
        else ctx.lineTo(px, py);
      }
      ctx.closePath();
      ctx.fillStyle = "rgba(56, 189, 248, 0.2)";
      ctx.fill();
      ctx.strokeStyle = hsla(190, 95, 80, 0.95);
      ctx.lineWidth = 2;
      ctx.stroke();
      ctx.beginPath();
      const outerHexR = coreRadius * 2.2;
      for (let k = 0; k <= 6; k++) {
        const a = k / 6 * Math.PI * 2;
        const px = Math.cos(a) * outerHexR;
        const py = Math.sin(a) * outerHexR;
        if (k === 0) ctx.moveTo(px, py);
        else ctx.lineTo(px, py);
      }
      ctx.closePath();
      ctx.strokeStyle = hsla(210, 85, 65, 0.4);
      ctx.lineWidth = 1;
      ctx.stroke();
      ctx.restore();
    }
  };
}

// Default parameters from content metadata
const defaultParams = [
  {
    "key": "freezeRate",
    "label": "Crystallization Speed",
    "type": "range",
    "min": 0.2,
    "max": 2,
    "step": 0.1,
    "defaultValue": 0.6,
    "description": "Stefan phase-change growth cycle rate"
  },
  {
    "key": "dendriteBranches",
    "label": "Dendrite Branching Order",
    "type": "range",
    "min": 2,
    "max": 8,
    "step": 1,
    "defaultValue": 5,
    "description": "Number of secondary side-prong pairs"
  }
];

if (!window.__art_instances) window.__art_instances = {};
if (!window.__art_instances['microscopic-ice-crystal']) {
  const inst = typeof createMicroscopicIceCrystal === 'function' ? createMicroscopicIceCrystal() : null;
  if (inst && inst.setup) {
    inst.setup({ ctx, width, height, dpr: 1, aspectRatio: width / height }, defaultParams);
  }
  window.__art_instances['microscopic-ice-crystal'] = inst;
}

const instance = window.__art_instances['microscopic-ice-crystal'];
if (instance && instance.render) {
  instance.render(
    { ctx, width, height, dpr: 1, aspectRatio: width / height },
    { time, deltaTime: dt, frameCount: Math.floor(time * 60), fps: 60 },
    defaultParams
  );
}
Edit in Interactive Playground Zero Dependencies • Standalone Canvas 2D
ƒ

Mathematical Formulation

high
Analytical Equation
r(θ,t)=r0(t)+k=1KAk(t)cos(6kθ),pprong(s)=pspine+s[cos(±π/3)sin(±π/3)]r(\theta, t) = r_0(t) + \sum_{k=1}^K A_k(t) \cos(6 k \theta), \quad \mathbf{p}_{\text{prong}}(s) = \mathbf{p}_{\text{spine}} + s \begin{bmatrix} \cos(\pm\pi/3) \\ \sin(\pm\pi/3) \end{bmatrix}
Click to expand
Compact Formula
main_spine = L*(0.3 + 0.7*growth), prong = spine_pos + [cos(±π/3)*len, sin(±π/3)*len]

Mathematical Tags

#snowflake #microscopic #crystals #ice #geometry #hexagonal #fractal #symmetry
Author: Math Art Core Target: 60 FPS

Export & Embed: Microscopic Snowflake Crystal

4K PNG Snapshot

High-resolution single frame render

WebM Video (5s Loop)

60 FPS browser-captured stream

Standalone JS Script

Complete executable Canvas 2D algorithm

HTML Iframe Embed

<iframe src="https://art.fazleyrabbi.xyz/embed/microscopic-ice-crystal" width="500" height="500" frameborder="0" loading="lazy"></iframe>
ESC
↑↓ Navigate Select
110 Mathematical Artworks
Made by Fazley Rabbi

Support the Project

Keep mathematical creative coding alive & open source

Or via Direct Payoneer ($0 Fee)
Payoneer Customer ID: $0 Fee Direct
24076084

💡 Payoneer app: Go to Pay → Pay to recipient → Enter ID 24076084.

Thank you for supporting generative mathematical animations! ✨