reFlow Devlog 1 - building a 3d wind tunnel without losing my mind (?)
enjoy my suffering.
hour 1: the “it’s not that hard” phase
decided on: react, three.js, and tailwind css.
getting three.js to render took half an hour because i forgot lights. stared at a pitch black void wondering why my life is like this. finally got a grey cube spinning. les go spinny coob
hour 2: wikipedia math is scary
goal: make an airfoil (wing shape).
searched “naca airfoil math formula” and got hit with an abomination of an equation: yt = 5 * t * (0.2969 * sqrt(x) - 0.1260 * x - 0.3516 * x^2 + 0.2843 * x^3 - 0.1015 * x^4). wouldn’t have signed up if i knew math was involved.
translated it into a javascript loop generating a THREE.Shape. my eyes watered staring at parentheses. messed up the loop direction 3 times and made twisted metal instead of a wing. had to scale it up cuz default was microscopic. after 4 tries, it looks like a wing. LETS GOOO
hour 3: the wind has to blow
made a particle system with 6,000 points. spawn at front, move back, respawn.
easy, but particles must bend around the wing. wrote a collision loop.
first draft: particles got stuck, formed a massive blue blob.
second draft: calculated slope. particles flew off at 90-degree angles.
coded a simplified double-flow vector calc. not real CFD (my laptop would explode running Navier-Stokes), but it looks real.
hour 4: adding cool dashboards
app needed to look like a telemetry deck. added:
sidebar with sliders for viscosity, inlet speed, angle of attack.
custom html5 canvas real-time graph. draws lift (cyan) and drag (orange) lines. legit math at home guys.
pressure heatmap. flat vertical plane in center. slow air hitting nose = high pressure (RED). fast air over top = low pressure (NEON GREEN). tilting the wing shifts the red spot. ASMR for the eyes wooooo
hour 5: stall warning and ai pilot
added stall physics! over 15deg tilt, lift cuts by 70% and drag multiplies. added a flashing CRITICAL STALL WARNING banner.
integrated Gemini API for aero reports then realized this comp requires no auth, so api keys are prolly an issue.
wrote a local backup expert system. no API key = runs generateLocalReport() with rule-based templates. 100% plug-and-play.
hour 6: single-file challenge
wanted app super portable. one .html file.
vite/tailwind output to .js and .css. wrote bundle.js to inline them which ended up giving
“ReferenceError: require is not defined in ES module scope.” bruh. renamed it to bundle.cjs and that worked yay
btw throwing html into google AI studio gets a free hosted site?? the more you know i guess
lots of math still broken lol.
coolest project i’ve built though. going to sleep for a week.
Comments 0
No comments yet. Be the first!
Sign in to join the conversation.