Collatz Garden

{"index.html":"\n\n\n \n \n Collatz Garden\n \n \n \n \n\n\n\n \n

\n\n \n

\n\n \n \n\n \n

\n \n \n \n

\n\n \n

\n \n

\n Stopping time\n —\n

\n Peak altitude\n —\n

\n Current value\n —\n

\n Sequence\n

\n\n \n

🏆 Tallest Plants

\n\n \n

\n\n \n\n","style.css":"/* ============================================\n COLLATZ GARDEN — Styles\n Aesthetic: Warm Botanical / Golden Hour\n ============================================ */\n\n:root {\n /* Sky palette */\n --sky-top: #1a1a2e;\n --sky-mid: #16213e;\n --sky-bottom: #e8c4a0;\n\n /* Garden palette */\n --earth-dark: #2d1810;\n --earth-mid: #4a2c1a;\n --earth-light: #6b4226;\n --grass: #3a5a28;\n\n /* Branch colors (cold → hot) */\n --branch-cold: #4a7c59;\n --branch-warm: #c0883e;\n --branch-hot: #c44536;\n\n /* UI palette */\n --glass-bg: rgba(255, 248, 240, 0.12);\n --glass-border: rgba(255, 248, 240, 0.18);\n --glass-bg-solid: rgba(32, 22, 14, 0.75);\n --text-primary: #fdf0e0;\n --text-secondary: rgba(253, 240, 224, 0.65);\n --text-dim: rgba(253, 240, 224, 0.4);\n --accent: #e8a654;\n --accent-glow: rgba(232, 166, 84, 0.35);\n --flower-pink: #e8a0b4;\n --flower-gold: #f0c860;\n --flower-lilac: #b8a0d8;\n --danger: #c44536;\n\n /* Typography */\n --font-display: 'Cormorant Garamond', Georgia, serif;\n --font-body: 'Quicksand', 'Segoe UI', sans-serif;\n\n /* Spacing */\n --radius-sm: 8px;\n --radius-md: 14px;\n --radius-lg: 20px;\n}\n\n/* ---- Reset & Base ---- */\n*,\n*::before,\n*::after {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nhtml, body {\n width: 100%;\n height: 100%;\n overflow: hidden;\n font-family: var(--font-body);\n color: var(--text-primary);\n background: #0d0d1a;\n}\n\n/* ---- Canvas ---- */\n#garden-canvas {\n position: fixed;\n inset: 0;\n width: 100%;\n height: 100%;\n z-index: 0;\n}\n\n/* ---- Particles Layer ---- */\n#particles-layer {\n position: fixed;\n inset: 0;\n z-index: 1;\n pointer-events: none;\n}\n\n.petal {\n position: absolute;\n width: 6px;\n height: 6px;\n border-radius: 50% 50% 50% 0;\n opacity: 0;\n animation: petal-float linear infinite;\n pointer-events: none;\n}\n\n@keyframes petal-float {\n 0% {\n opacity: 0;\n transform: translate(0, 0) rotate(0deg) scale(0.5);\n }\n 10% {\n opacity: 0.7;\n }\n 90% {\n opacity: 0.5;\n }\n 100% {\n opacity: 0;\n transform: translate(var(--drift-x, 80px), var(--drift-y, -300px)) rotate(540deg) scale(0.2);\n }\n}\n\n/* ---- Header ---- */\n#header {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 10;\n text-align: center;\n padding: 28px 20px 16px;\n pointer-events: none;\n background: linear-gradient(to bottom, rgba(13, 13, 26, 0.6) 0%, transparent 100%);\n}\n\n#header h1 {\n font-family: var(--font-display);\n font-weight: 600;\n font-size: clamp(1.8rem, 4vw, 3rem);\n letter-spacing: 0.04em;\n color: var(--text-primary);\n text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);\n animation: title-enter 1.2s ease-out both;\n}\n\n#header .subtitle {\n font-family: var(--font-body);\n font-size: clamp(0.8rem, 1.5vw, 1rem);\n font-weight: 400;\n color: var(--text-secondary);\n margin-top: 4px;\n letter-spacing: 0.06em;\n animation: title-enter 1.2s ease-out 0.3s both;\n}\n\n@keyframes title-enter {\n from {\n opacity: 0;\n transform: translateY(-16px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* ---- Controls Panel ---- */\n#controls {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 20;\n padding: 0 16px 24px;\n display: flex;\n justify-content: center;\n animation: controls-enter 0.8s ease-out 0.5s both;\n}\n\n@keyframes controls-enter {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.controls-inner {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 18px;\n background: var(--glass-bg-solid);\n border: 1px solid var(--glass-border);\n border-radius: var(--radius-lg);\n backdrop-filter: blur(24px);\n -webkit-backdrop-filter: blur(24px);\n box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.4),\n inset 0 1px 0 rgba(255, 255, 255, 0.06);\n}\n\n.input-group {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n#number-input {\n width: 160px;\n padding: 10px 14px;\n font-family: var(--font-body);\n font-size: 0.95rem;\n font-weight: 500;\n color: var(--text-primary);\n background: rgba(255, 255, 255, 0.07);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: var(--radius-sm);\n outline: none;\n transition: all 0.3s ease;\n -moz-appearance: textfield;\n}\n\n#number-input::-webkit-outer-spin-button,\n#number-input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n#number-input::placeholder {\n color: var(--text-dim);\n font-weight: 400;\n}\n\n#number-input:focus {\n border-color: var(--accent);\n box-shadow: 0 0 0 3px var(--accent-glow);\n background: rgba(255, 255, 255, 0.1);\n}\n\n/* Buttons */\n#btn-plant,\n#btn-random {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 10px 16px;\n font-family: var(--font-body);\n font-size: 0.9rem;\n font-weight: 600;\n color: var(--text-primary);\n border: 1px solid rgba(255, 255, 255, 0.12);\n border-radius: var(--radius-sm);\n cursor: pointer;\n transition: all 0.25s ease;\n white-space: nowrap;\n}\n\n#btn-plant {\n background: linear-gradient(135deg, #4a7c59, #3a6248);\n border-color: rgba(74, 124, 89, 0.5);\n}\n\n#btn-plant:hover {\n background: linear-gradient(135deg, #5a9069, #4a7858);\n transform: translateY(-1px);\n box-shadow: 0 4px 16px rgba(74, 124, 89, 0.35);\n}\n\n#btn-random {\n background: linear-gradient(135deg, #8a6a3a, #705528);\n border-color: rgba(138, 106, 58, 0.5);\n}\n\n#btn-random:hover {\n background: linear-gradient(135deg, #9a7a4a, #806838);\n transform: translateY(-1px);\n box-shadow: 0 4px 16px rgba(138, 106, 58, 0.35);\n}\n\n#btn-plant:active,\n#btn-random:active {\n transform: translateY(0);\n}\n\n.btn-icon {\n font-size: 1.1rem;\n line-height: 1;\n}\n\n.controls-row {\n display: flex;\n gap: 4px;\n margin-left: 4px;\n padding-left: 12px;\n border-left: 1px solid rgba(255, 255, 255, 0.08);\n}\n\n.icon-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 38px;\n height: 38px;\n background: transparent;\n border: 1px solid transparent;\n border-radius: var(--radius-sm);\n cursor: pointer;\n font-size: 1.1rem;\n transition: all 0.2s ease;\n color: var(--text-secondary);\n}\n\n.icon-btn:hover {\n background: rgba(255, 255, 255, 0.08);\n border-color: rgba(255, 255, 255, 0.1);\n}\n\n/* ---- Stats Panel ---- */\n#stats-panel {\n position: fixed;\n top: 100px;\n right: 20px;\n z-index: 15;\n width: 260px;\n padding: 20px;\n background: var(--glass-bg-solid);\n border: 1px solid var(--glass-border);\n border-radius: var(--radius-md);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);\n transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n#stats-panel.hidden {\n opacity: 0;\n transform: translateX(20px);\n pointer-events: none;\n}\n\n#stats-close {\n position: absolute;\n top: 10px;\n right: 12px;\n background: none;\n border: none;\n color: var(--text-dim);\n font-size: 1.3rem;\n cursor: pointer;\n transition: color 0.2s;\n line-height: 1;\n}\n\n#stats-close:hover {\n color: var(--text-primary);\n}\n\n#stats-number {\n font-family: var(--font-display);\n font-size: 1.8rem;\n font-weight: 600;\n color: var(--accent);\n margin-bottom: 14px;\n}\n\n.stat-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 7px 0;\n border-bottom: 1px solid rgba(255, 255, 255, 0.05);\n}\n\n.stat-label {\n font-size: 0.78rem;\n font-weight: 500;\n color: var(--text-secondary);\n letter-spacing: 0.03em;\n text-transform: uppercase;\n}\n\n.stat-value {\n font-family: var(--font-display);\n font-size: 1.15rem;\n font-weight: 600;\n color: var(--text-primary);\n}\n\n#sequence-display {\n margin-top: 12px;\n}\n\n#sequence-display .stat-label {\n display: block;\n margin-bottom: 8px;\n}\n\n#sequence-trail {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n max-height: 180px;\n overflow-y: auto;\n scrollbar-width: thin;\n scrollbar-color: rgba(255,255,255,0.15) transparent;\n}\n\n#sequence-trail::-webkit-scrollbar {\n width: 4px;\n}\n\n#sequence-trail::-webkit-scrollbar-thumb {\n background: rgba(255,255,255,0.15);\n border-radius: 4px;\n}\n\n.seq-num {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 28px;\n padding: 2px 6px;\n font-family: var(--font-body);\n font-size: 0.7rem;\n font-weight: 600;\n border-radius: 4px;\n transition: all 0.3s ease;\n opacity: 0;\n transform: scale(0.7);\n animation: seq-pop 0.3s ease-out forwards;\n}\n\n.seq-num.even {\n background: rgba(74, 124, 89, 0.35);\n color: #a0d8a8;\n}\n\n.seq-num.odd {\n background: rgba(196, 69, 54, 0.3);\n color: #e8a0a0;\n}\n\n.seq-num.final {\n background: rgba(232, 166, 84, 0.4);\n color: var(--accent);\n}\n\n@keyframes seq-pop {\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n/* ---- Leaderboard ---- */\n#leaderboard {\n position: fixed;\n top: 100px;\n left: 20px;\n z-index: 15;\n width: 200px;\n padding: 16px;\n background: var(--glass-bg-solid);\n border: 1px solid var(--glass-border);\n border-radius: var(--radius-md);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);\n opacity: 0;\n transform: translateX(-20px);\n transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n pointer-events: none;\n}\n\n#leaderboard.visible {\n opacity: 1;\n transform: translateX(0);\n pointer-events: auto;\n}\n\n#leaderboard h3 {\n font-family: var(--font-display);\n font-size: 1.05rem;\n font-weight: 600;\n color: var(--accent);\n margin-bottom: 10px;\n}\n\n#leaderboard-list {\n list-style: none;\n counter-reset: lb;\n}\n\n#leaderboard-list li {\n counter-increment: lb;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 5px 0;\n font-size: 0.82rem;\n color: var(--text-secondary);\n border-bottom: 1px solid rgba(255,255,255,0.04);\n}\n\n#leaderboard-list li::before {\n content: counter(lb) \".\";\n font-family: var(--font-display);\n font-weight: 600;\n font-size: 0.95rem;\n color: var(--text-dim);\n min-width: 20px;\n}\n\n.lb-number {\n font-weight: 700;\n color: var(--text-primary);\n}\n\n.lb-steps {\n margin-left: auto;\n font-size: 0.72rem;\n color: var(--text-dim);\n white-space: nowrap;\n}\n\n/* ---- Notification ---- */\n#notification {\n position: fixed;\n top: 90px;\n left: 50%;\n transform: translateX(-50%) translateY(-10px);\n z-index: 25;\n padding: 10px 20px;\n font-family: var(--font-body);\n font-size: 0.85rem;\n font-weight: 500;\n color: var(--text-primary);\n background: var(--glass-bg-solid);\n border: 1px solid var(--glass-border);\n border-radius: var(--radius-sm);\n backdrop-filter: blur(16px);\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n white-space: nowrap;\n}\n\n#notification.hidden {\n opacity: 0;\n transform: translateX(-50%) translateY(-20px);\n pointer-events: none;\n}\n\n/* ---- Responsive ---- */\n@media (max-width: 700px) {\n .controls-inner {\n flex-direction: column;\n gap: 8px;\n padding: 12px;\n }\n\n .controls-row {\n margin-left: 0;\n padding-left: 0;\n border-left: none;\n padding-top: 4px;\n border-top: 1px solid rgba(255, 255, 255, 0.08);\n }\n\n #stats-panel {\n top: auto;\n bottom: 120px;\n right: 10px;\n left: 10px;\n width: auto;\n }\n\n #leaderboard {\n top: auto;\n bottom: 120px;\n left: 10px;\n width: 170px;\n }\n\n .btn-text {\n display: none;\n }\n\n #number-input {\n width: 120px;\n }\n}","script.js":"/* ============================================\n COLLATZ GARDEN — Application Logic\n ============================================ */\n\n// ─── Collatz Math ────────────────────────────\nconst Collatz = {\n sequence(n) {\n const seq = [n];\n let current = n;\n let safety = 0;\n while (current !== 1 && safety < 10000) {\n current = current % 2 === 0 ? current / 2 : 3 * current + 1;\n seq.push(current);\n safety++;\n }\n return seq;\n },\n stoppingTime(seq) {\n return seq.length - 1;\n },\n peak(seq) {\n return Math.max(...seq);\n }\n};\n\n// ─── Seeded Random ───────────────────────────\nfunction seededRandom(seed) {\n let s = seed;\n return function () {\n s = (s * 16807 + 0) % 2147483647;\n return (s - 1) / 2147483646;\n };\n}\n\n// ─── Color Utilities ─────────────────────────\nfunction valueToColor(value, maxVal) {\n const t = Math.min(Math.log(value + 1) / Math.log(maxVal + 1), 1);\n // Cool green → warm gold → hot coral\n const r = Math.round(74 + t * (196 - 74));\n const g = Math.round(124 + t * (69 - 124));\n const b = Math.round(89 + t * (54 - 89));\n return `rgb(${r},${g},${b})`;\n}\n\nfunction valueToColorAlpha(value, maxVal, alpha) {\n const t = Math.min(Math.log(value + 1) / Math.log(maxVal + 1), 1);\n const r = Math.round(74 + t * (196 - 74));\n const g = Math.round(124 + t * (69 - 124));\n const b = Math.round(89 + t * (54 - 89));\n return `rgba(${r},${g},${b},${alpha})`;\n}\n\n// ─── Sound Engine ────────────────────────────\nclass SoundEngine {\n constructor() {\n this.enabled = false;\n this.ctx = null;\n // Pentatonic scale frequencies (C4-based, multiple octaves)\n this.notes = [261.6, 293.7, 329.6, 392.0, 440.0, 523.3, 587.3, 659.3];\n }\n\n init() {\n if (!this.ctx) {\n this.ctx = new (window.AudioContext || window.webkitAudioContext)();\n }\n if (this.ctx.state === 'suspended') this.ctx.resume();\n }\n\n toggle() {\n this.enabled = !this.enabled;\n if (this.enabled) this.init();\n return this.enabled;\n }\n\n playNote(value, maxVal) {\n if (!this.enabled || !this.ctx) return;\n const t = Math.min(Math.log(value + 1) / Math.log(maxVal + 1), 1);\n const idx = Math.floor(t * (this.notes.length - 1));\n const freq = this.notes[idx];\n const isEven = value % 2 === 0;\n\n const now = this.ctx.currentTime;\n const osc = this.ctx.createOscillator();\n const gain = this.ctx.createGain();\n const filter = this.ctx.createBiquadFilter();\n\n osc.type = isEven ? 'sine' : 'triangle';\n osc.frequency.setValueAtTime(freq * (isEven ? 1 : 1.5), now);\n\n filter.type = 'lowpass';\n filter.frequency.setValueAtTime(1200, now);\n\n gain.gain.setValueAtTime(0, now);\n gain.gain.linearRampToValueAtTime(0.08, now + 0.02);\n gain.gain.exponentialRampToValueAtTime(0.001, now + 0.5);\n\n osc.connect(filter);\n filter.connect(gain);\n gain.connect(this.ctx.destination);\n\n osc.start(now);\n osc.stop(now + 0.5);\n }\n\n playBloom() {\n if (!this.enabled || !this.ctx) return;\n const now = this.ctx.currentTime;\n [523.3, 659.3, 784.0].forEach((freq, i) => {\n const osc = this.ctx.createOscillator();\n const gain = this.ctx.createGain();\n osc.type = 'sine';\n osc.frequency.setValueAtTime(freq, now + i * 0.08);\n gain.gain.setValueAtTime(0, now + i * 0.08);\n gain.gain.linearRampToValueAtTime(0.06, now + i * 0.08 + 0.03);\n gain.gain.exponentialRampToValueAtTime(0.001, now + i * 0.08 + 0.8);\n osc.connect(gain);\n gain.connect(this.ctx.destination);\n osc.start(now + i * 0.08);\n osc.stop(now + i * 0.08 + 0.8);\n });\n }\n}\n\n// ─── Plant Class ─────────────────────────────\nclass Plant {\n constructor(n, x, groundY, maxHeight) {\n this.n = n;\n this.baseX = x;\n this.baseY = groundY;\n this.maxHeight = maxHeight;\n this.seq = Collatz.sequence(n);\n this.steps = Collatz.stoppingTime(this.seq);\n this.peak = Collatz.peak(this.seq);\n this.segments = [];\n this.currentStep = 0;\n this.growing = true;\n this.bloomed = false;\n this.growProgress = 0; // 0–1 progress within current segment\n this.windPhase = Math.random() * Math.PI * 2;\n this._buildSegments();\n }\n\n _buildSegments() {\n const rng = seededRandom(this.n * 7919);\n const count = this.seq.length;\n\n // Scale segment length so plant fits in available height\n const baseLen = Math.min(\n this.maxHeight * 0.85 / Math.max(count * 0.55, 1),\n 28\n );\n const minLen = 3;\n\n let angle = -Math.PI / 2; // Start pointing up\n let x = this.baseX;\n let y = this.baseY;\n\n for (let i = 0; i < count; i++) {\n const val = this.seq[i];\n const isEven = val % 2 === 0;\n const t = i / Math.max(count - 1, 1); // progress 0→1\n\n // Angle change: even → left, odd → right\n const angleChange = (12 + rng() * 14) * (Math.PI / 180);\n if (i > 0) {\n if (isEven) {\n angle -= angleChange;\n } else {\n angle += angleChange;\n }\n // Gravity: pull back toward vertical\n angle += (-Math.PI / 2 - angle) * 0.12;\n }\n\n // Length: odd steps stretch slightly, decay over time\n const decay = Math.pow(0.985, i);\n let len = baseLen * decay * (isEven ? 1 : 1.18);\n len = Math.max(len, minLen);\n\n // Thickness\n const thickness = Math.max(1, (1 - t * 0.8) * 5.5);\n\n const endX = x + Math.cos(angle) * len;\n const endY = y + Math.sin(angle) * len;\n\n // Control points for bezier (slight random sway)\n const sway = (rng() - 0.5) * len * 0.4;\n const midX = (x + endX) / 2 + Math.cos(angle + Math.PI / 2) * sway;\n const midY = (y + endY) / 2 + Math.sin(angle + Math.PI / 2) * sway;\n\n this.segments.push({\n x1: x, y1: y,\n cx: midX, cy: midY,\n x2: endX, y2: endY,\n thickness,\n value: val,\n isEven,\n angle\n });\n\n x = endX;\n y = endY;\n }\n }\n\n update(dt) {\n if (!this.growing) return false;\n\n this.growProgress += dt * 4.5; // Speed of segment growth\n if (this.growProgress >= 1) {\n this.growProgress = 0;\n this.currentStep++;\n if (this.currentStep >= this.segments.length) {\n this.growing = false;\n this.bloomed = true;\n return true; // Signal: finished growing\n }\n }\n return false;\n }\n\n draw(ctx, time) {\n const wind = Math.sin(time * 0.8 + this.windPhase) * 0.008;\n const windY = Math.cos(time * 0.5 + this.windPhase) * 0.003;\n\n // Draw completed segments\n const drawCount = this.growing ? this.currentStep : this.segments.length;\n\n for (let i = 0; i < drawCount; i++) {\n this._drawSegment(ctx, i, 1, wind * i, windY * i);\n }\n\n // Draw currently growing segment (partial)\n if (this.growing && this.currentStep < this.segments.length) {\n const ease = this.growProgress < 0.5\n ? 2 * this.growProgress * this.growProgress\n : 1 - Math.pow(-2 * this.growProgress + 2, 2) / 2;\n this._drawSegment(ctx, this.currentStep, ease, wind * this.currentStep, windY * this.currentStep);\n }\n\n // Draw flower at tip if bloomed\n if (this.bloomed) {\n this._drawFlower(ctx, time, wind);\n }\n }\n\n _drawSegment(ctx, idx, progress, windOffsetX, windOffsetY) {\n const seg = this.segments[idx];\n const color = valueToColor(seg.value, this.peak);\n const glowColor = valueToColorAlpha(seg.value, this.peak, 0.15);\n\n const ex = seg.x1 + (seg.cx - seg.x1) * progress * 2;\n const ey = seg.y1 + (seg.cy - seg.y1) * progress * 2;\n const fx = progress <= 0.5\n ? seg.x1 + (seg.cx - seg.x1) * (progress * 2)\n : seg.cx + (seg.x2 - seg.cx) * ((progress - 0.5) * 2);\n const fy = progress <= 0.5\n ? seg.y1 + (seg.cy - seg.y1) * (progress * 2)\n : seg.cy + (seg.y2 - seg.cy) * ((progress - 0.5) * 2);\n\n // Apply wind offset (cumulative — farther from base = more sway)\n const wx = windOffsetX;\n const wy = windOffsetY;\n\n // Glow\n ctx.beginPath();\n ctx.moveTo(seg.x1 + wx, seg.y1 + wy);\n ctx.quadraticCurveTo(\n seg.x1 + (seg.cx - seg.x1) * Math.min(progress * 2, 1) + wx,\n seg.y1 + (seg.cy - seg.y1) * Math.min(progress * 2, 1) + wy,\n fx + wx, fy + wy\n );\n ctx.strokeStyle = glowColor;\n ctx.lineWidth = seg.thickness + 4;\n ctx.lineCap = 'round';\n ctx.stroke();\n\n // Main branch\n ctx.beginPath();\n ctx.moveTo(seg.x1 + wx, seg.y1 + wy);\n ctx.quadraticCurveTo(\n seg.x1 + (seg.cx - seg.x1) * Math.min(progress * 2, 1) + wx,\n seg.y1 + (seg.cy - seg.y1) * Math.min(progress * 2, 1) + wy,\n fx + wx, fy + wy\n );\n ctx.strokeStyle = color;\n ctx.lineWidth = seg.thickness;\n ctx.lineCap = 'round';\n ctx.stroke();\n }\n\n _drawFlower(ctx, time, wind) {\n const last = this.segments[this.segments.length - 1];\n const wx = wind * this.segments.length;\n const fx = last.x2 + wx;\n const fy = last.y2;\n const pulse = 1 + Math.sin(time * 2 + this.n) * 0.08;\n\n const colors = ['#e8a0b4', '#f0c860', '#b8a0d8', '#a0d8a8', '#f0a070'];\n const flowerColor = colors[this.n % colors.length];\n const petalCount = 5 + (this.n % 3);\n\n // Petals\n for (let i = 0; i < petalCount; i++) {\n const a = (i / petalCount) * Math.PI * 2 + time * 0.3;\n const r = 6 * pulse;\n const px = fx + Math.cos(a) * r;\n const py = fy + Math.sin(a) * r;\n ctx.beginPath();\n ctx.arc(px, py, 3.5 * pulse, 0, Math.PI * 2);\n ctx.fillStyle = flowerColor;\n ctx.globalAlpha = 0.8;\n ctx.fill();\n ctx.globalAlpha = 1;\n }\n\n // Center\n ctx.beginPath();\n ctx.arc(fx, fy, 2.5 * pulse, 0, Math.PI * 2);\n ctx.fillStyle = '#fff8e0';\n ctx.fill();\n\n // Glow\n ctx.beginPath();\n ctx.arc(fx, fy, 10 * pulse, 0, Math.PI * 2);\n const grad = ctx.createRadialGradient(fx, fy, 0, fx, fy, 10 * pulse);\n grad.addColorStop(0, flowerColor.replace(')', ',0.3)').replace('rgb', 'rgba'));\n grad.addColorStop(1, 'transparent');\n ctx.fillStyle = grad;\n ctx.fill();\n }\n\n getTipPosition() {\n if (this.segments.length === 0) return { x: this.baseX, y: this.baseY };\n const last = this.segments[this.segments.length - 1];\n return { x: last.x2, y: last.y2 };\n }\n}\n\n// ─── Particle System ─────────────────────────\nclass ParticleSystem {\n constructor(canvasW, canvasH) {\n this.w = canvasW;\n this.h = canvasH;\n this.particles = [];\n this.maxParticles = 25;\n }\n\n resize(w, h) {\n this.w = w;\n this.h = h;\n }\n\n spawn() {\n if (this.particles.length >= this.maxParticles) return;\n const colors = ['#e8a0b4', '#f0c860', '#b8a0d8', '#a0d8a8', '#fff8e0'];\n this.particles.push({\n x: Math.random() * this.w,\n y: this.h * 0.3 + Math.random() * this.h * 0.5,\n vx: (Math.random() - 0.5) * 0.3,\n vy: -0.15 - Math.random() * 0.3,\n size: 2 + Math.random() * 3,\n color: colors[Math.floor(Math.random() * colors.length)],\n life: 1,\n decay: 0.002 + Math.random() * 0.004,\n rotation: Math.random() * 360,\n rotSpeed: (Math.random() - 0.5) * 2\n });\n }\n\n update() {\n for (let i = this.particles.length - 1; i >= 0; i--) {\n const p = this.particles[i];\n p.x += p.vx + Math.sin(Date.now() * 0.001 + i) * 0.15;\n p.y += p.vy;\n p.rotation += p.rotSpeed;\n p.life -= p.decay;\n if (p.life <= 0) this.particles.splice(i, 1);\n }\n }\n\n draw(ctx) {\n for (const p of this.particles) {\n ctx.save();\n ctx.translate(p.x, p.y);\n ctx.rotate(p.rotation * Math.PI / 180);\n ctx.globalAlpha = p.life * 0.6;\n ctx.fillStyle = p.color;\n // Petal shape\n ctx.beginPath();\n ctx.ellipse(0, 0, p.size, p.size * 0.6, 0, 0, Math.PI * 2);\n ctx.fill();\n ctx.globalAlpha = 1;\n ctx.restore();\n }\n }\n}\n\n// ─── Garden (Main Orchestrator) ──────────────\nclass Garden {\n constructor() {\n this.canvas = document.getElementById('garden-canvas');\n this.ctx = this.canvas.getContext('2d');\n this.plants = [];\n this.sound = new SoundEngine();\n this.particles = null;\n this.leaderboard = [];\n this.activePlant = null; // Currently growing / selected\n this.animFrame = null;\n this.lastTime = 0;\n this._resize();\n this._drawBackground();\n window.addEventListener('resize', () => {\n this._resize();\n this._drawBackground();\n });\n this._startLoop();\n }\n\n _resize() {\n const dpr = window.devicePixelRatio || 1;\n this.width = window.innerWidth;\n this.height = window.innerHeight;\n this.canvas.width = this.width * dpr;\n this.canvas.height = this.height * dpr;\n this.canvas.style.width = this.width + 'px';\n this.canvas.style.height = this.height + 'px';\n this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n this.groundY = this.height * 0.82;\n if (this.particles) this.particles.resize(this.width, this.height);\n else this.particles = new ParticleSystem(this.width, this.height);\n }\n\n _drawBackground() {\n const ctx = this.ctx;\n const w = this.width;\n const h = this.height;\n\n // Sky gradient\n const skyGrad = ctx.createLinearGradient(0, 0, 0, this.groundY);\n skyGrad.addColorStop(0, '#0f1123');\n skyGrad.addColorStop(0.3, '#1a1a3e');\n skyGrad.addColorStop(0.6, '#2d2848');\n skyGrad.addColorStop(0.85, '#5a3d5c');\n skyGrad.addColorStop(1, '#c47a5a');\n ctx.fillStyle = skyGrad;\n ctx.fillRect(0, 0, w, this.groundY);\n\n // Stars\n const rng = seededRandom(42);\n ctx.fillStyle = '#fff';\n for (let i = 0; i < 80; i++) {\n const sx = rng() * w;\n const sy = rng() * this.groundY * 0.6;\n const sr = 0.3 + rng() * 1.2;\n ctx.globalAlpha = 0.3 + rng() * 0.5;\n ctx.beginPath();\n ctx.arc(sx, sy, sr, 0, Math.PI * 2);\n ctx.fill();\n }\n ctx.globalAlpha = 1;\n\n // Distant hills\n ctx.fillStyle = 'rgba(30, 25, 40, 0.8)';\n ctx.beginPath();\n ctx.moveTo(0, this.groundY);\n for (let x = 0; x <= w; x += 20) {\n const hill = Math.sin(x * 0.003) * 35 + Math.sin(x * 0.008 + 1) * 20;\n ctx.lineTo(x, this.groundY - 50 - hill);\n }\n ctx.lineTo(w, this.groundY);\n ctx.fill();\n\n // Closer hills\n ctx.fillStyle = 'rgba(35, 30, 28, 0.9)';\n ctx.beginPath();\n ctx.moveTo(0, this.groundY);\n for (let x = 0; x <= w; x += 15) {\n const hill = Math.sin(x * 0.005 + 2) * 25 + Math.sin(x * 0.012) * 12;\n ctx.lineTo(x, this.groundY - 20 - hill);\n }\n ctx.lineTo(w, this.groundY);\n ctx.fill();\n\n // Ground\n const groundGrad = ctx.createLinearGradient(0, this.groundY, 0, h);\n groundGrad.addColorStop(0, '#2d1e12');\n groundGrad.addColorStop(0.15, '#3a2818');\n groundGrad.addColorStop(1, '#1a1008');\n ctx.fillStyle = groundGrad;\n ctx.fillRect(0, this.groundY, w, h - this.groundY);\n\n // Grass line\n ctx.strokeStyle = '#3a5a28';\n ctx.lineWidth = 2;\n ctx.beginPath();\n for (let x = 0; x <= w; x += 3) {\n const gy = this.groundY + Math.sin(x * 0.1) * 1.5;\n if (x === 0) ctx.moveTo(x, gy); else ctx.lineTo(x, gy);\n }\n ctx.stroke();\n\n // Grass blades\n for (let i = 0; i < 150; i++) {\n const gx = rng() * w;\n const gh = 4 + rng() * 12;\n const lean = (rng() - 0.5) * 0.4;\n ctx.strokeStyle = `rgba(${50 + rng() * 40}, ${70 + rng() * 40}, ${30 + rng() * 20}, ${0.3 + rng() * 0.3})`;\n ctx.lineWidth = 1;\n ctx.beginPath();\n ctx.moveTo(gx, this.groundY);\n ctx.quadraticCurveTo(gx + lean * gh, this.groundY - gh * 0.6, gx + lean * gh * 1.5, this.groundY - gh);\n ctx.stroke();\n }\n\n // Cache background\n this._bgData = ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);\n }\n\n addPlant(n) {\n // Prevent duplicates\n if (this.plants.find(p => p.n === n)) {\n showNotification(`n = ${n} is already in your garden!`);\n return;\n }\n\n // Position: spread plants evenly\n const slotWidth = this.width / (this.plants.length + 2);\n // Reposition existing plants\n const totalPlants = this.plants.length + 1;\n const newSlotWidth = this.width / (totalPlants + 1);\n\n this.plants.forEach((p, i) => {\n p.baseX = newSlotWidth * (i + 1);\n p.segments = [];\n p.currentStep = p.growing ? p.currentStep : p.seq.length;\n p.growProgress = 0;\n // Rebuild segments at new position\n p._buildSegments = Plant.prototype._buildSegments;\n p.baseX = newSlotWidth * (i + 1);\n p._buildSegments();\n if (!p.growing) {\n p.currentStep = p.seq.length;\n }\n });\n\n const x = newSlotWidth * totalPlants;\n const maxH = this.groundY - 80;\n const plant = new Plant(n, x, this.groundY - 2, maxH);\n this.plants.push(plant);\n this.activePlant = plant;\n\n // Update leaderboard\n this._updateLeaderboard(plant);\n\n // Show stats\n this._showStats(plant);\n\n showNotification(`Planting n = ${n} — ${plant.steps} steps, peak ${plant.peak.toLocaleString()}`);\n }\n\n _updateLeaderboard(plant) {\n const entry = { n: plant.n, steps: plant.steps, peak: plant.peak };\n this.leaderboard.push(entry);\n this.leaderboard.sort((a, b) => b.steps - a.steps);\n this.leaderboard = this.leaderboard.slice(0, 8);\n this._renderLeaderboard();\n }\n\n _renderLeaderboard() {\n const list = document.getElementById('leaderboard-list');\n const el = document.getElementById('leaderboard');\n if (this.leaderboard.length === 0) {\n el.classList.remove('visible');\n return;\n }\n el.classList.add('visible');\n list.innerHTML = this.leaderboard.map(e =>\n `

${e.n}${e.steps} steps

`\n ).join('');\n }\n\n _showStats(plant) {\n const panel = document.getElementById('stats-panel');\n panel.classList.remove('hidden');\n document.getElementById('stats-number').textContent = `n = ${plant.n}`;\n document.getElementById('stat-steps').textContent = plant.steps;\n document.getElementById('stat-peak').textContent = plant.peak.toLocaleString();\n document.getElementById('stat-current').textContent = plant.seq[0];\n document.getElementById('sequence-trail').innerHTML = '';\n }\n\n _updateStatsStep(plant, stepIdx) {\n const val = plant.seq[stepIdx];\n document.getElementById('stat-current').textContent = val.toLocaleString();\n const trail = document.getElementById('sequence-trail');\n const span = document.createElement('span');\n span.className = `seq-num ${val === 1 ? 'final' : val % 2 === 0 ? 'even' : 'odd'}`;\n span.textContent = val;\n span.style.animationDelay = '0s';\n trail.appendChild(span);\n trail.scrollTop = trail.scrollHeight;\n }\n\n clear() {\n this.plants = [];\n this.leaderboard = [];\n this.activePlant = null;\n this._renderLeaderboard();\n document.getElementById('stats-panel').classList.add('hidden');\n document.getElementById('sequence-trail').innerHTML = '';\n }\n\n exportPNG() {\n const link = document.createElement('a');\n link.download = 'collatz-garden.png';\n link.href = this.canvas.toDataURL('image/png');\n link.click();\n }\n\n _startLoop() {\n let lastSpawn = 0;\n const loop = (timestamp) => {\n const dt = Math.min((timestamp - this.lastTime) / 1000, 0.1);\n this.lastTime = timestamp;\n const time = timestamp / 1000;\n\n // Restore background\n if (this._bgData) {\n this.ctx.putImageData(this._bgData, 0, 0);\n }\n\n // Update & draw particles\n if (timestamp - lastSpawn > 400) {\n this.particles.spawn();\n lastSpawn = timestamp;\n }\n this.particles.update();\n\n // Draw all plants\n let prevStep = null;\n for (const plant of this.plants) {\n if (plant.growing) {\n prevStep = plant.currentStep;\n }\n\n const finished = plant.update(dt);\n\n // Play sound on new step\n if (plant.growing && plant === this.activePlant && plant.currentStep !== prevStep) {\n this.sound.playNote(plant.seq[plant.currentStep], plant.peak);\n this._updateStatsStep(plant, plant.currentStep);\n }\n\n // Bloom sound\n if (finished && plant === this.activePlant) {\n this.sound.playBloom();\n document.getElementById('stat-current').textContent = '1 ✿';\n }\n\n plant.draw(this.ctx, time);\n }\n\n // Particles on top\n this.particles.draw(this.ctx);\n\n this.animFrame = requestAnimationFrame(loop);\n };\n\n this.animFrame = requestAnimationFrame(loop);\n }\n}\n\n// ─── Notifications ───────────────────────────\nfunction showNotification(text) {\n const el = document.getElementById('notification');\n el.textContent = text;\n el.classList.remove('hidden');\n clearTimeout(el._timer);\n el._timer = setTimeout(() => el.classList.add('hidden'), 3500);\n}\n\n// ─── DOM Particle Decoration ─────────────────\nfunction spawnDOMPetals() {\n const container = document.getElementById('particles-layer');\n const colors = ['#e8a0b4', '#f0c860', '#b8a0d8', '#a0d8a8', '#fff8e0'];\n\n setInterval(() => {\n if (container.children.length > 15) return;\n const petal = document.createElement('div');\n petal.className = 'petal';\n petal.style.left = Math.random() * 100 + '%';\n petal.style.top = 60 + Math.random() * 30 + '%';\n petal.style.background = colors[Math.floor(Math.random() * colors.length)];\n petal.style.setProperty('--drift-x', (Math.random() - 0.5) * 160 + 'px');\n petal.style.setProperty('--drift-y', -(100 + Math.random() * 300) + 'px');\n petal.style.animationDuration = 6 + Math.random() * 8 + 's';\n container.appendChild(petal);\n setTimeout(() => petal.remove(), 14000);\n }, 1200);\n}\n\n// ─── Initialize ──────────────────────────────\ndocument.addEventListener('DOMContentLoaded', () => {\n const garden = new Garden();\n\n const input = document.getElementById('number-input');\n const btnPlant = document.getElementById('btn-plant');\n const btnRandom = document.getElementById('btn-random');\n const btnSound = document.getElementById('btn-sound');\n const btnClear = document.getElementById('btn-clear');\n const btnExport = document.getElementById('btn-export');\n const statsClose = document.getElementById('stats-close');\n\n function plantNumber() {\n const val = parseInt(input.value, 10);\n if (!val || val < 1 || val > 9999999) {\n showNotification('Enter a number between 1 and 9,999,999');\n input.focus();\n return;\n }\n garden.addPlant(val);\n input.value = '';\n input.focus();\n }\n\n function plantRandom() {\n // Bias toward interesting numbers (longer sequences)\n const interesting = [27, 97, 871, 6171, 77031, 113383, 837799, 7, 15, 255, 447, 639, 703, 1819];\n const n = Math.random() < 0.35\n ? interesting[Math.floor(Math.random() * interesting.length)]\n : Math.floor(Math.random() * 9999) + 2;\n input.value = n;\n garden.addPlant(n);\n input.value = '';\n }\n\n btnPlant.addEventListener('click', plantNumber);\n input.addEventListener('keydown', (e) => {\n if (e.key === 'Enter') plantNumber();\n });\n\n btnRandom.addEventListener('click', plantRandom);\n\n btnSound.addEventListener('click', () => {\n const on = garden.sound.toggle();\n document.getElementById('sound-icon').textContent = on ? '🔊' : '🔇';\n });\n\n btnClear.addEventListener('click', () => {\n garden.clear();\n showNotification('Garden cleared');\n });\n\n btnExport.addEventListener('click', () => {\n garden.exportPNG();\n showNotification('Exported as PNG!');\n });\n\n statsClose.addEventListener('click', () => {\n document.getElementById('stats-panel').classList.add('hidden');\n });\n\n spawnDOMPetals();\n\n // Plant a starter tree after a brief delay\n setTimeout(() => {\n garden.addPlant(27);\n }, 800);\n});"}

MrDebugger's submission — Collatz Garden