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.
60 FPS • Canvas 2D
Click + Drag to interact with field
</>
Full Executable Algorithm Code
153 lines
5449 chars
// 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=1∑KAk(t)cos(6kθ),pprong(s)=pspine+s[cos(±π/3)sin(±π/3)]
Click to expand
∑
Microscopic Snowflake Crystal
Full Mathematical System • geometry
100%
Complete System of Equations
[Governing Law][Discrete Progression][Domain & Space][Parameter State]r(θ,t)=r0(t)+k=1∑KAk(t)cos(6kθ),pprong(s)=pspine+s[cos(±π/3)sin(±π/3)]mainspine=L⋅(0.3+0.7⋅growth),prong=spinepos+[cos(±π/3)⋅len,sin(±π/3)⋅len]x∈R2,t∈R+,ω∈[0,2π]λfreezeRate=0.6(Crystallization Speed),λdendriteBranches=5(Dendrite Branching Order)
r(θ,t)=r0(t)+k=1∑KAk(t)cos(6kθ),pprong(s)=pspine+s[cos(±π/3)sin(±π/3)]
Computational Implementation (JavaScript Engine Equivalent)
main_spine = L*(0.3 + 0.7*growth), prong = spine_pos + [cos(±π/3)*len, sin(±π/3)*len] 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
Press ESC or F to exit