mbk/cohost
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

gonna add random ascii rocks and bunnies and such

Browse source
This commit is contained in:
mehbark 2023-09-03 07:47:05 -04:00
parent 1be5404db7
commit 973f716b0c
1 changed files with 35 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
html/blowing-in-the-wind.tsx
View file

@ -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",
transform: "translateX(0.5rem)",
// transformOrigin: "bottom",
// 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 */}
{/* it's really surprising that this works based on my understanding tbh */}
{/* best guess, it's expanding to <div><Blade/><Blade/><Blade/>...</div> and THEN expanding the Blades */}
{n_of(width * width, <Blade />)}
{new Array(width * width).fill(undefined).map((_, i) => (
<Blade x={i % width} y={Math.floor(i / width)} />
))}
</div>
);