97

Sacred Water Lotus Bloom

Multi-tier water lotus blossom featuring translucent gradient petals, mathematical gothic ogee arches, glowing golden seed pods (receptacle), and serene ambient ripples.

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

Full Executable Algorithm Code

// 067 - Sacred Water Lotus Bloom (botany)
// 1:1 Original algorithm engine source
function createSacredLotus() {
  return {
    setup() {
    },
    render(context, timeState, params) {
      const { ctx, width, height } = context;
      const petals = Math.max(6, Math.min(20, Math.round(Number(params.petalsPerWhorl ?? 12))));
      const whorls = Math.max(2, Math.min(6, Math.round(Number(params.whorlLayers ?? 4))));
      const bloomDepth = Number(params.bloomOpenness ?? 1);
      const speed = Number(params.breathSpeed ?? 0.4);
      const t = timeState.time * speed;
      ctx.fillStyle = "#03060a";
      ctx.fillRect(0, 0, width, height);
      const cx = width * 0.5;
      const cy = height * 0.5;
      const maxR = Math.min(width, height) * 0.44;
      ctx.save();
      ctx.translate(cx, cy);
      for (let r = 1; r <= 3; r++) {
        const rippleR = maxR * (0.85 + 0.15 * r) * (1 + 0.05 * Math.sin(t * 1.5 + r));
        ctx.beginPath();
        ctx.ellipse(0, 0, rippleR, rippleR * 0.92, t * 0.05, 0, Math.PI * 2);
        ctx.strokeStyle = hsla(185, 80, 60, 0.12 - r * 0.02);
        ctx.lineWidth = 1.2;
        ctx.stroke();
      }
      for (let w = whorls; w >= 1; w--) {
        const wFrac = w / whorls;
        const petalLen = maxR * (0.35 + 0.65 * wFrac) * bloomDepth;
        const petalWidth = petalLen * (0.42 - wFrac * 0.1);
        const whorlOffset = w * Math.PI / petals + Math.sin(t * 0.8 + w) * 0.06;
        const baseHue = 330 - (whorls - w) * 14;
        for (let p = 0; p < petals; p++) {
          const angle = p / petals * Math.PI * 2 + whorlOffset;
          ctx.save();
          ctx.rotate(angle);
          ctx.beginPath();
          ctx.moveTo(0, 0);
          const c1x = -petalWidth * (0.8 + 0.1 * Math.sin(t * 2 + p));
          const c1y = petalLen * 0.45;
          const tipX = 0;
          const tipY = petalLen;
          const c2x = petalWidth * (0.8 + 0.1 * Math.sin(t * 2 + p));
          const c2y = petalLen * 0.45;
          ctx.bezierCurveTo(c1x, c1y, -petalWidth * 0.3, petalLen * 0.85, tipX, tipY);
          ctx.bezierCurveTo(petalWidth * 0.3, petalLen * 0.85, c2x, c2y, 0, 0);
          ctx.fillStyle = hsla(baseHue + p % 2 * 8, 85, 65 + (whorls - w) * 6, 0.22);
          ctx.fill();
          ctx.strokeStyle = hsla(baseHue + 15, 90, 80, 0.65);
          ctx.lineWidth = 1.2;
          ctx.stroke();
          ctx.beginPath();
          ctx.moveTo(0, 0);
          ctx.lineTo(0, petalLen * 0.9);
          ctx.strokeStyle = hsla(baseHue + 25, 95, 88, 0.4);
          ctx.lineWidth = 0.8;
          ctx.stroke();
          ctx.restore();
        }
      }
      const podR = maxR * 0.15;
      const stamens = petals * 3;
      for (let s = 0; s < stamens; s++) {
        const sAng = s / stamens * Math.PI * 2 + t * 0.15;
        const sLen = podR * (1.1 + 0.3 * Math.sin(s * 4 + t * 3));
        const px = Math.cos(sAng) * sLen;
        const py = Math.sin(sAng) * sLen;
        ctx.beginPath();
        ctx.moveTo(Math.cos(sAng) * (podR * 0.7), Math.sin(sAng) * (podR * 0.7));
        ctx.lineTo(px, py);
        ctx.strokeStyle = hsla(45, 95, 75, 0.7);
        ctx.lineWidth = 1.2;
        ctx.stroke();
        ctx.fillStyle = hsla(50, 100, 85, 0.95);
        ctx.beginPath();
        ctx.arc(px, py, 1.6, 0, Math.PI * 2);
        ctx.fill();
      }
      ctx.beginPath();
      ctx.arc(0, 0, podR * 0.75, 0, Math.PI * 2);
      ctx.fillStyle = "rgba(234, 179, 8, 0.35)";
      ctx.fill();
      ctx.strokeStyle = hsla(48, 95, 80, 0.9);
      ctx.lineWidth = 1.6;
      ctx.stroke();
      const seedRings = 2;
      for (let sr = 1; sr <= seedRings; sr++) {
        const seeds = sr * 6;
        const sRadius = sr / (seedRings + 1) * (podR * 0.65);
        for (let i = 0; i < seeds; i++) {
          const sa = i / seeds * Math.PI * 2 + t * 0.05;
          const sx = Math.cos(sa) * sRadius;
          const sy = Math.sin(sa) * sRadius;
          ctx.fillStyle = hsla(42, 90, 45, 0.9);
          ctx.beginPath();
          ctx.arc(sx, sy, 2, 0, Math.PI * 2);
          ctx.fill();
        }
      }
      ctx.restore();
    }
  };
}

// Default parameters from content metadata
const defaultParams = [
  {
    "key": "petalsPerWhorl",
    "label": "Petals Per Whorl",
    "type": "range",
    "min": 6,
    "max": 18,
    "step": 2,
    "defaultValue": 12,
    "description": "Number of petals in each concentric layer"
  },
  {
    "key": "whorlLayers",
    "label": "Layer Count",
    "type": "range",
    "min": 2,
    "max": 5,
    "step": 1,
    "defaultValue": 4,
    "description": "Number of overlapping petal whorls"
  },
  {
    "key": "bloomOpenness",
    "label": "Bloom Flare",
    "type": "range",
    "min": 0.6,
    "max": 1.4,
    "step": 0.1,
    "defaultValue": 1,
    "description": "Radial flare opening factor"
  },
  {
    "key": "breathSpeed",
    "label": "Breathing Rate",
    "type": "range",
    "min": 0.2,
    "max": 1.5,
    "step": 0.1,
    "defaultValue": 0.4,
    "description": "Organic expansion and ripple pulsation rate"
  }
];

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

const instance = window.__art_instances['sacred-lotus'];
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
Bpetal(u)=(1u)3P0+3(1u)2uP1+3(1u)u2P2+u3P3,ϕw=wπN\mathbf{B}_{\text{petal}}(u) = (1-u)^3 \mathbf{P}_0 + 3(1-u)^2 u \mathbf{P}_1 + 3(1-u) u^2 \mathbf{P}_2 + u^3 \mathbf{P}_3, \quad \phi_w = \frac{w \pi}{N}
Click to expand
Compact Formula
petal = cubicBezier(base, ctrl1, tip, ctrl2), whorl_offset = w*π/N

Mathematical Tags

#lotus #flower #water #sacred #botany #petals #translucent #pond
Author: Math Art Core Target: 60 FPS

Export & Embed: Sacred Water Lotus Bloom

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/sacred-lotus" width="500" height="500" frameborder="0" loading="lazy"></iframe>
ESC
↑↓ Navigate Select
101 Mathematical Artworks

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! ✨