Plan blog post Lorenz Attractor visualization

Robert
Robert Soare • @robert-daniel-soare
 7mo ago
Medium
Unlisted
can you add a blog post about Lorenz Attractor? what visualization library should we use? Shoud library shold we use to render the math formulas and the sample code? Make a plan first with suggestions.

Now I have a clear picture of the setup. Here's my plan:

📋 Plan: Lorenz Attractor Blog Post

Blog Post Content Outline

  1. Intro — What is the Lorenz Attractor, brief history (Edward Lorenz, 1963, chaos theory)
  2. The Math — The system of 3 ODEs with parameters σ, ρ, β
  3. Python sample code — Numerical integration using Euler's method (or scipy)
  4. Interactive 3D visualization — Rendered in the browser
  5. Chaos & sensitivity — Butterfly effect, sensitivity to initial conditions

🎨 Visualization Library — Recommendation

Option Pros Cons
Three.js Stunning 3D with rotation/zoom, fits the cyberpunk theme perfectly ~150KB, needs a wrapper component
Canvas API (vanilla) Zero dependencies, lightweight 2D only, less impressive
Plotly.js Interactive 3D out of the box Very heavy (~3MB)

➡️ Recommendation: Three.js — A rotating, glowing 3D Lorenz attractor in cyan (#00f0ff) on a dark background will look incredible with your theme. We'd embed it as a <canvas> with a <script> tag directly in the MDX — no framework component needed.

📐 Math Formula Rendering — Recommendation

Option Pros Cons
KaTeX via remark-math + rehype-katex Fast, integrates with Astro's MDX pipeline, $...$ syntax Slightly less coverage than MathJax
MathJax Most comprehensive Heavier, slower rendering

➡️ Recommendation: KaTeX via remark-math + rehype-katex plugins. This lets you write $\sigma$ inline and $$...$$ for display math directly in MDX. It's fast and renders at build time.

💻 Code Samples

No extra library needed — Astro has built-in Shiki syntax highlighting. Python code blocks in MDX (```python) will render beautifully out of the box.

Implementation Steps

  1. Install deps: remark-math, rehype-katex, three
  2. Configure astro.config.mjs to add remark/rehype plugins to MDX
  3. Add KaTeX CSS to BaseHead.astro
  4. Create the MDX blog post with math, code, and an inline Three.js visualization
  5. Build & deploy

Want me to proceed with this plan?

let's go

Deployed! Here's what was added:

  • Blog post: src/content/blog/lorenz-attractor.mdx — full article with history, math, code, and interactive viz
  • Three.js visualization: src/components/LorenzVisualization.astro — rotating 3D attractor with glowing cyan trail and animated head particle
  • Math component: src/components/Math.astro — build-time KaTeX rendering (avoids MDX curly brace conflicts)
  • Config: remark-math + rehype-katex plugins in astro.config.mjs, KaTeX CSS in BaseHead.astro

Live at https://robertsoare.xyz/blog/lorenz-attractor/

I do not see the page in the Blog? did you register it?

Fixed! The blog index was hardcoded with a "Coming Soon" placeholder. It now queries the blog collection and lists posts with title, date, and description. The Lorenz Attractor post should be visible at https://robertsoare.xyz/blog/.

one thing is one we need to make sure to label this post al AI generate. Thus add prefix to the title "Prompt Training", along with a label

Done! The post now has:

  • Title prefix: "Prompt Training: The Lorenz Attractor"
  • 🤖 AI Generated label — shown both on the blog list page and on the post itself (below the title)
  • aiGenerated frontmatter flag in the content schema, so future AI-generated posts just need aiGenerated: true
Also add a notice to say that the content of the blog Ai generated inside the blog page.
Read 1 file, edited 1 file (+19), ran 1 command

Done! The blog post now shows a notice banner right below the title, with a cyan left border accent, stating the content was AI-generated with a disclaimer about verifying details. It appears automatically for any post with aiGenerated: true in its frontmatter.