Lately, I've become quite interested in procedural generation. And by interested I mean I've done zero research into it as a concept nor how to accomplish it programmatically. Honestly, I'm not even sure what I'm talking about is procedural generation but saying it makes me feel intelligent. Eh, let me google it. According to the wiki:

"In computing, procedural generation (sometimes shortened as proc-gen) is a method of creating data algorithmically as opposed to manually, typically through a combination of human-generated assets and algorithms coupled with computer-generated randomness and processing power."

Two things: 1) I understand some of these words. Enough to say with an almost certainly wrong certainty that what I am working on fits under the 'procedural generation' umbrella. 2) I'll never say proc-gen in my life ever again ever.

I randomly had this grandiose psychedelic vision of an application that produces colorful layered landscapes and unique music based on an algorithm or algorithms that set a standard for all potential datasets introduced. A never-the-same artistic petri dish full of a digital data-driven life. Not a profound idea necessarily but this one was mine all the same. I was pretty stoked so I jumped in head first. I've been in a bit of a development rut lately, especially in terms of passion projects, and I've finally stumbled upon an idea that stirred my interest. I got home from work, jetted off to my computer with zero planning and got to work. My mind raced like scared cattle from rabid coyotes. My fingers danced like drunken daddy long-legs ritually descending uncomfortably hot drywall. I soared in a state of development frenzy screaming at the top of my lungs until my vocal cords ruptured and when my vocal cords ruptured I wrote my screams on planks of wood and held them above my head while typing with my feet. I was pretty excited.

Aaaaand a couple of hours later, what I had were balls of various colors and sizes that were generated based on an array of "heights" and would chaotically fly and bounce around a black screen releasing a cacophony of 3 note melodies in the key of C major. Every few seconds would sound like someone or something was being murdered on a piano by another someone or something who was dangerous enough to take a life and dangerously precise enough to do so without disturbing a single black key. It made freeform jazz sound like a viny-lized Bacon Turkey Bravo from Panera Bread spun through a gramophone, and I loathe freeform jazz. Tone.js is entirely new to me and getting it to operate as I intended took way longer than it needed to. A terrible start but you've got to start somewhere. I was reminded that you should choose whatever works best for you but that it's often not best to start with everything all at once. Separation of concerns, divide and conquer, and aaaall that jaaaaazz.

The Music

I've decided to start with the visuals but do want to touch on music a bit. Tone.js is what I've started with and it should work fine for now as a placeholder if nothing else. Ideally, the music will be entirely composed based on the data presented and while not impossible will probably require more interference than I'd like to maintain some semblance of structure. Perhaps a series of premade backing tracks or chords that change progressions with the melodies and arrangements being created directly from the data. Food for thought and this buffet don't close; to be continued...

The Visuals, evolution one:

After the flying balls incident, I started thinking a little bigger. As in, bigger balls. I will refer to these bigger balls moving forward as "suns" as that is what they sorta kinda represent. Currently, I've whipped up pulsating, red, and blurry suns that have about a 25% chance of spawning based on an effect that fires every 10 seconds. They take roughly twice as long to travel across the screen after which they disappear and the cycle continues. There are still many things here that need to be dug into and altered but the generic code at least for spawning and moving objects across the screen is there. Each "sun" is a component with the spawning effect held within. Three suns are currently housed in a larger component which makes up one of several layers of the skybox. The other layers consist of sky coloring which is made up of 3 stacked components each with a randomized linear gradient and an opacity of 33%, a series of stacked waves utilizing react-wavify, a range of laughable 'mountains' that sits between the sky and waves, and finally a layer of lines meant to add texture to the background.
The mountains are generated by divvying up the window size and generating the appropriate x and y coordinates based on the size. This is faulty and will occasionally generate shards rather than anything that resembles a mountain. I unintentionally created an infinite loop while trying to generate the background lines. What transpired was an old-timey video effect, or rain depending on the stroke-dasharray setting.

That is where I stand currently. I don't love the look but it has a certain charm to it and already feels lightyears beyond the initial showing. Back to studying SVG.