gonna add random ascii rocks and bunnies and such

html/blowing-in-the-wind.tsx

@@ -1,7 +1,12 @@
 import { Main, n_of, pick_random, render_and_copy } from "./common.tsx";
 
 // ⾋ is grass which is neat
-const grass_chars = ".,'`".split("");
+// meh, this seems to be the least worst option
+// random ascii rocks and bunnies and such might be neat but would
+// be total possible actually so i'm going to do that now
+const grass_chars = "^".split("");
+// const grass_chars = ["^", '"', "'", ";", ":", "*", "+", "~"];
+
 const grass_colors = ["#136D15", "#117C13", "#138510", "#268B07", "#41980A"];
 
 // i want to keep this minimal (i want to have a lot of grass :])
@@ -11,17 +16,38 @@ const grass_colors = ["#136D15", "#117C13", "#138510", "#268B07", "#41980A"];
 // i'm going to need to be smarter and consider the position but that's going
 // to be a lot more difficult
 
+// i should really have more randomness utilities
+const blade_delay = (x: number, y: number): number => {
+    const t = x + y;
+    return t + (Math.random() - 0.5) * 1.5;
+    // return Math.sin(t / 3) < 0 ? 3 * Math.sin(t) : Math.sin(t) / 4;
+    // const den = 3;
+    // return (
+    //     (Math.sin(t / den) < 0 && Math.sin(t) < 0
+    //         ? Math.sin(t) / den
+    //         : Math.sin(t)) +
+    //     (Math.random() - 0.5) * 1.5
+    // );
+};
+
 // truncing floats a bit could save a lot of bytes but eh
-const Blade = () => (
+// should be a util obviously
+// toFixed is sufficient for css stuff methinks
+// you know it's a good css crime when using toFixed saves multiple kilobytes
+const Blade = ({ x, y }: { x: number; y: number }) => (
     <b
         style={{
-            transformOrigin: "bottom",
+            // transformOrigin: "bottom",
-            transform: "translateX(0.5rem)",
+            // transform: "translateX(0.5rem)",
             animation: "spin infinite ease-in-out alternate",
+            transform: "translateX(0.5rem)",
 
-            animationDelay: `${(Math.random() - 0.5) * 2}s`,
+            // putting math knowledge to work :D
+            animationDelay: `${blade_delay(x, y).toFixed(2)}s`,
             // having some randomness with the duration is a great idea!!
-            animationDuration: `${2.5 + Math.random()}s`,
+            // maybe not with things being synchronized though!
+            // animationDuration: `${2.5 + Math.random() * 0}s`,
+            animationDuration: "6.5s",
             color: pick_random(grass_colors),
             // helps the squareness
             overflow: "hidden",
@@ -47,10 +73,9 @@ const Field = ({ width }: { width: number }) => (
             fontSize: "1.1rem",
         }}
     >
-        {/* won't be this clean when i do the blowing but eh */}
+        {new Array(width * width).fill(undefined).map((_, i) => (
-        {/* it's really surprising that this works based on my understanding tbh */}
+            <Blade x={i % width} y={Math.floor(i / width)} />
-        {/* best guess, it's expanding to <div><Blade/><Blade/><Blade/>...</div> and THEN expanding the Blades */}
+        ))}
-        {n_of(width * width, <Blade />)}
     </div>
 );