—— The Third Island of Misfit Code ——

Started on 6/26/2022. (Moved to here from testbed2.html)




Project #3.29: Stitch Walker
[ FPS: ]
(2/13/2022): I only got barely started on this but I want it to be a random walker that takes large steps and each step it draws a + end-to-end, to create a sort of "stitch" pattern across the canvas.


Project #3.28: Generative Slideshow
[ FPS: ]
(1/4/2022): An experiment with generatively displaying images. Currently, there's only one mode, which is randomly filling the screen with pixels, but I want to add other modes. It's also just set to show random images I put in from the `images` folder on this website.


Project #3.27: City Skyline
(12/30/2022): Currently this is just a basic proof-of-concept but I want to develop an interesting random city skyline generator, with buildings, windows, trees, maybe even streetlights and things like that.

(1/4/2022): Added some color and made things more visible.


Project #3.26: Random Bead Bracelets
(12/24/2022): I combined random smooth blobs from Project #3.20 and tangent circle rings from Project #3.24 to create blobby rings of tangent circles. Each circle sits on the edge of a random smoothed blob, but is always tangent to the circles adjacent to it. This creates organic shaped strings of beads, resembling bracelets or something similar to that. Currently, they're just randomly placed on the canvas.

(12/30/2022): I added a new CirclePack class and used that to make the bracelets fill the canvas without overlapping.


Project #3.25: Multi-Seed DLA
(12/17/2022): A failed ChatGPT program inspired me to make Diffusion Limited Aggregation, except with lots of particles moving at once, and they can all stick to each other. The result ended up being...underwhelming. The canvas fills up too quickly and doesn't make interesting patterns.
(Later that day): I redid how the program draws, and I actually like how it turned out now. Instead of drawing the circles themselves, I draw lines between each pair of colliding particles. Along with this, the frozen particle affects the color of the line, so you get small webs of the same color.
(Even later that day): I changed things even more. Now, I keep track of each particle's base particle and connected particle, and then draw it all at once (drawn by base particle) after the canvas is filled. I removed the frame() and animation functionality, now it's just a draw() function. I also added some settings that get randomized every generation, to create unique shapes every time; the settings are randomized for every blob, so that each blob looks unique as well. I also added a "zoom" setting, which scales everything on the canvas up by some certain factor, so I can modify `canvas25Scale` to zoom the final image in or out on regeneration.

(12/18/2022): I completely removed the "blob" algorithm and restructured how the program works. Before, I would slowly spawn particles over time, and if any of them collided, they'd stick and start a "blob." Then each time something stuck to something else, it would join that particle's "blob" and match the style of it. After the canvas is filled, I'd draw each "blob." The problem was, this is unnecessarily complicated, and also had some annoying bugs where blobs would share particles sometimes, for reasons I couldn't understand. So, I changed it. NOW, I lay out a few initial "seed" particles, and then apply DLA to that, just with multiple different trees to stick to. Now the drawing algorithm is much simpler and it seems to be quicker. Most encouragingly, I was able to remove those bugs, and now distinct trees don't touch. I also zoomed out the canvas a bit so that the trees never touch the edge, instead of always going past it.
(Later that day): I added different types of accents, instead of just a black dot at endpoints of each line. I want to consider adding a setting to vary "global styles" versus "individual styles," where, if active, some styles (line width, accent chance, accent type, etc.) will be global: randomized per generation, but not randomized for each tree.
(Even later that day): I implemented the global styles settings, and made it overcomplicated as well -- there's different presets for which settings will be synced, and complicated random value generation and synergy with that in an attempt to create random but interesting synced settings.

(12/19/2022): I added different spawning modes for seed particles: spawning randomly, spawning only on the edges, or spawning only on one edge.

(12/20/2022): I added a new accent type, along with a new connector type, which resembles a leaf instead of a simple line. I later added a third connector type, which is a cross shape.

(12/21/2022): Added a connector ratio setting to affect the sizes of different connector types, and some minor visual changes.

(3/6/2023): Actually finished! Added to generative-art-gallery.html as "Disrupted Possibilities (What Might Have Been)"


Project #3.24: Concentric Rings of Tangent Circles
(12/11/2022): I was experimenting with creating rings of circles that all touched at a single point. After doing some calculations, I realized that the answer lied in inscribed polygons, since n circles around a ring, touching at a single point, would form the vertices of an n-gon. So, I found a surprisingly simple formula for the radius of each circle, in terms of n: sin(Ï€/n). This program uses randomly spaced concentric rings of circles, with random designs on each one.

(12/12/2022): Added more circle types.


Project #3.23: "Generations" Cellular Automata


[ FPS: ]


Random Density: 50%

Grid Size: 100×100

Currently Drawing: State #1
Rule Presets:
(11/26/2022): I decided to run this as an experiment to see if I could accurately code a "Generations" cellular automata, which is an extension of a regular Life-like cellular automata but with support for multiple states. I did actually get it working relatively quickly and introduced some functionality like clicking and drawing.
(Later that day): Added lots of rule presets, along with settings and sliders for various things.


Project #3.22: Dynamic Shape Packing


Min Circle Size: 10
Max Circle Size: 100
Visual Size Ratio: 100%
Corner Skew: 20%
Shape Sides: 4 sides
(10/11/22): Simple bare-bones circle packing generative art, except I implemented the xoshiro128** seeded PRNG algorithm, so that the art doesn't randomize when you change settings, and you can see what the current piece would've looked like with those settings. "Randomize" sets a new seed.


Project #3.21: Connected Random Walkers
[ FPS: ]
(10/2/2022): Another idea that was less underwhelming in my head. Each shape is generated by a group of random walkers that connect together and draw lines as they move randomly around, which in turn randomly moves the entire group. It looks interesting enough, but I wish I could do something more with it to make it look really cool.


Project #3.20: 3D Blobby Terrain
(9/5/2022): Right now, this is just the base code for a simple grid averaging to create smooth noise, but I want to do more with it.

(9/6/2022): I finished up the grid averaging and added a more interesting way to draw the cells. Instead of grayscale squares at every value, they're instead circles (larger than the cells) with varying color, which are also drawn in a random order so they overlap randomly. I also added lots of random settings that make each output look unique. I like how this looks, but it still feels like something is missing.
(Later that day): I slightly changed the code so that instead of randomly ordering the cells, they are drawn lowest to highest, to create an interesting 3D look.
(Also later that day): I used my random smooth blob code from Project #3.14 to replace the circles, and added more randomness to how the blobs generate, along with adding yet more settings that are randomized every generation. There's currently 10 parameters that vary every time it redraws. I also added a chance to draw circles again instead of blobs.

(9/7/2022): I added a "jitter" variable that is randomized every generation, which controls how much variation each blob is drawn at from its original position. I also upped the number of points on each blob to make them less jagged, and slightly changed the smoothness variable to reflect that. I'm really pleased with how this turned out now, it's really satisfying to zoom in on it and look around at the landscape.

(9/8/2022): As one finishing touch, I just added an extra row and column on each side of the grid, so that there isn't a chance for gaps around the edges of the canvas, and the whole thing comes together better.

(9/13/2022): Actually finished! Added to generative-art-gallery.html as "Into The Floral Caverns"


Project #3.19: Flag Generator
(8/6/2022): A random flag generator that currently only generates flags in the style of Germany, Italy, Gambia, and that same general structure. Eventually I want to add a lot more to this, like flags similar to the US or Australia or England.


Project #3.18: Bouncing Blobs
[ FPS: ]
(8/3/2022): A bouncing simulation except that the objects that bounce are ellipses with a set width, and a height that just always stretches to the floor, creating a blobby bouncing effect.

(8/4/2022): Added a maximum height to the blobs so that it doesn't always reach the floor and bounces more convincingly now. I also made the blob's width adjust dynamically so that it stretches and squishes as it hits the floor. I also added mouse control, so you can click to add more blobs, and fixed some bugs.


Project #3.17: Sierpinski Quilt
(7/31/2022): Experimenting with Sierpinski Triangles resulted in this artwork, which tiles the plane with widely varying Sierpinski Triangles. Each one has a random set of settings, including "skew," which affects how imperfect each triangle is drawn, and messes with the overall structure of the Sierpinski Triangle.


Project #3.16: Von Neumann Fractal
(7/29/2022): I started wondering what would happen if you translated the brackets in a Von Neumann ordinal into L/R directions and ran it as an L-System. The Von Neumann ordinals are a system for representing natural numbers in set theory, such that 0 = {}, 1 = {{}}, 2 = {{}, {{}}}, 3 = {{}, {{}}, {{}, {{}}}}, etc. If we remove the commas and convert any "{" into "L" and "}" into "R," we obtain a set of left/right directions for each number. An L-System generator then acts out drawing these numbers by moving forward one unit and turning 90° left or right, based on the current letter in the directions. I was at first expecting some boring shape, but I was surprised to see that the Levy C Curve fractal appeared! And the interesting part is that the first steps don't actually match the typical first steps of a Levy C Curve, and yet it approaches the same shape. This is, in a sense, what numbers "look like" using the Von Neumann representation of natural numbers.

(7/30/2022): Added a text box displaying the Von Neumann Ordinal of the current number.


Project #3.15: Text Walker
Running...0.01% drawn

[ FPS: ]
(7/27/2022): A random walker that gradually writes out a given string of text. If it walks off the canvas, it picks a random edge position and continues. I also made the font size and brightness change gradually to give more variation. Currently, the quote that it is writing out is "Auguries of Innocence" by William Blake.

(7/28/2022, slightly past midnight): I changed the code for coloring so that instead of a color with varying brightness, it instead takes the color of an image based on it's current position, so that the text traces out an image over time. For now, it's just set to background.jpg. I also added a shadow blur so that text still stands out even when drawing over other text.
(Later that day): I made the stepsPerFrame change dynamically over time so that it starts off slow but gets really fast over time. After the Walker has reached 40,000 letters, it stops, completing the image. I also changed the background image to flower.png. I also added buttons to change between different modes, so that there's not just the Blake poem and flower as an option. Note for future self: If you want to change the image in the console, use img15.src, and use quote15 to change the quote.

(7/29/2022): Added percent complete text.

(7/30/2022): Added "Squares" mode.


Project #3.14: Sunny-Side-Up Eggsteroid Belt
(7/18/2022): Experimenting with random blob generating turning into this Eggsteroid Belt. The eggs are placed with normal circle packing, and the shapes of the eggs are are made by assigning random radii around a point and then averaging out each radius with its neighbors a few times (and scaling so it matches the initial given radius).

(7/20/2022): I spent ages trying to change the code so that eggs could be closer together, based on the actual shape of the egg, instead of just the bounding circle around it. I finally got it working though, which means that the eggs pack together better and leave less awkward spaces.
(Later that night): I added a Path object that eggs can't touch, which is a randomized sine wave snaking across the canvas, clearing a path through the asteroid field.

(7/18/2022): I added a rocket that is placed randomly in the open path, and is angled so it looks like it's flying through the path. It's just a blue rectangle for now but I want to make it a bacon rocketship to fit with the breakfast/space theme. I also added random tiny stars in the background to fill the empty space better and also make it more clear that this is in space, and added some randomization for the minimum and maximum circle sizes to create more variation on each generation.

(7/24/2022): I finally got an algorithm working for drawing random bacon, and I actually like how it turned out. It has a random size, waviness, number of stripes, etc. and it replaces the blue rectangle as the rocket body.
(Later that day): Added a fire trail to the bacon rocket and added motion blur lines that slope with the path to show the route the rocket has taken, and indicate it's going really fast.

(9/15/2022): Actually finished! Added to generative-art-gallery.html as "Surfing the Sunny-Side-Up Eggsteroid Belt"


Project #3.13: Luminous Snowflakes
[ FPS: ]
(7/17/2022): I was inspired by the look of Project #3.12 so this has a similar structure. A number of "Collectors" are strewn about the canvas, each with a set position, hue, scale, angle, etc. Each frame (2000 times), a random Collector is chosen and a line is drawn, biased towards the center of the collector. The angle of the drawn line is constrained to be a multiple of 60° to make 6-fold symmetry (and angled by the Collector's angle). This creates interesting patterns from the overlay of hundreds of thousands of incredibly thin and translucent lines that resemble snowflake shapes.
(Later that night): Added more settings that are randomized every time you click "Reset." I wanted to make this a piece in the Generative Art Gallery, but in order for it to have the look I want, over 300,000 lines have to be drawn, which takes a solid 5-6 seconds every single time, which would probably be way too laggy to actually implement.
(Even later that night): Added a tilt variable that affects how offset the lines' angles are, instead of always snapping to a 60° multiple.


Project #3.12: Random Crossing Lines
(7/16/2022): I'm honestly not really sure what this is. It started out as an attempt to draw some simple colorful pattern for a background on Project #3.11, but it didn't fit the galaxy theme so I moved it to a new project. It's basically a 50×50 grid randomly filled with bars that go from left-to-right or top-to-bottom, but positioned from their corner, and biased towards the center of the canvas. This creates an interesting shape in the middle of the canvas.


Project #3.11: Clustering Stars
(7/16/2022): I wanted to make a generative art galaxy generator, but currently I only have the stars working. The stars randomly lerp to a few random invisible black holes around the canvas so that they cluster and form structures and groups, instead of just being randomly strewn about the canvas. I want to add more to this generator eventually so that it actually looks like an intricate galaxy.


Project #3.10: Random Open Circles in a Grid
(7/14/2022): I'm not really sure where I was going with this, but the final result is kinda interesting looking. It's a variation on Project #3.87 in Test Bed 2, but where the smallest circles aren't drawn, and each circle has a random "mouth" cut out from it. It looked different in my head before making it, so I'm not super proud of the outcome, but it looks cool enough that I'll keep it.

(7/16/2022): I changed how the "mouths" draw to just be a slice cut out of a full circle instead of a strange rounded cutout (but added a button to switch to the old moded too).


Project #3.9: Generative Pipes
(7/9/2022): This started out as a variation on Project #3.4, except without the self-avoidance. Basically, it's just a random walker that only draws a line when it isn't on a previously visited square, which will eventually fill the whole grid with one connected path. Soon after I got that working, I added lots of varying settings and designs and it now resembles abstract pipes or connectors. This was a small project initially that I didn't really care about but I really love how it looks now.
(Later that night): Added a simple black shadow blur to everything and it greatly improved the depth of the piece overall.

(7/10/2022): Modified the grid so that there's extra tiles off the canvas, so that the pipes connect offscreen, which brings the piece together better.
(Later that day): Actually finished! Added to generative-art-gallery.html as "Jumbled Pipeworks"


Project #3.8: Camera-Following Random Walker
[ FPS: ]
(7/4/2022, slightly past midnight): A random walker that moves with Brownian motion and traces out a path behind it, except a "camera" always centers on it as it moves around, so the walker is always in the middle of the canvas. I like how this looks but I want to find some way to make a smoother random walker, so the camera doesn't shake around so much every frame.
(Later that day): I improved the smoothness by only taking 1 step per frame, instead of 5, and just turning up the velocity, and fiddling with some other settings. I also gave it a cool visual change which reminds me of maybe a firefly or a spark, with a glowing yellow trail that gets smaller and dimmer towards the end of the tail.
(Even later that day): Added a glowing Spark object that spawns around the walker's trail as it moves.
(Later that night): Modified the Sparks and made them spawn randomly on the canvas, and made the walker's hue gradually change.

(7/9/2022) Made the walker always draw above Sparks, which looks better when it moves over one.


Project #3.7: Generative Caves With Marching Squares
(7/2/2022): Procedural cave generator using cellular automata. I used the same idea as this tutorial from Sebastian Lague but with my own code.
(Later that night): I implemented the marching squares algorithm onto the cave generator so it creates smoother and more natural looking formations, and added colors.
(Even later that night): Still following the videos, I added polishing the cave to remove tiny sections of walls and tiny pockets of air.

(7/3/2022, continuing past midnight): Added the beginning of making passageways between isolated rooms so that they're all connected. It doesn't work yet but the groundwork for the code is there and functional.
(Later that day): Got the passageway algorithm working properly, though they still don't actually draw yet.

(7/9/2022): Finally finished the tutorial and got the passageways working!


Project #3.6: 1D Circle Packing
(7/2/2022): Circle packing in one dimension, but repeated several times at different heights. I like the structure that the output has, but even after fiddling with the visual style a lot I can't get it to look quite how I want it to.
(Later that day): I changed up the code a lot for how it draws. Now there's between 20 and 30 rows (so they smush together), and lots of settings are randomized every generation. The ends also vary in length and together, and there's a shadow blur. I'm actually really pleased with how it turned out now.

(7/9/2022): Actually finished! Added to generative-art-gallery.html as "Harmonic Precision"


Project #3.5: Alien Hieroglyphs
(7/2/2022): Alien glyph generator, using the same random path generator from Project #3.4, but run multiple times in a grid, resembling some kind of intricate alien language. I added glow and colors to increase the effect, and also made the characters generate similar to Japanese kanji (in columns from the top). I also added lots of randomization for each character to increase the variety.

(7/9/2022): Actually finished! Added to generative-art-gallery.html as "Alien Hieroglyphs"


Project #3.4: Space-Filling Path
[ FPS: ]
Grid Size: 10×10



Turn Chance: 10%



Total Coverage: 100%
Path Thickness: 40%



Path Hue: 60°



Path Contrast: 0%



(6/30/2022): A variation on the previous project where there is only ever one path, but once it gets stuck it just stops drawing and is allowed to walk through itself, until it reaches an open square. This is repeated over and over, slowly filling the canvas with a single branching path.
(Later that night): I spent over an hour trying half a dozen different ways to fix one bug and finally got it (hopefully) fixed. The bug was that diagonal paths could sometimes cause lines to be drawn incorrectly and you could have 2 distinct disconnected paths, instead of a single connected path every time.

(7/1/2022, and 7/2/2022 past midnight): Added more visual settings like hue and contrast, and added sliders for everything.


Project #3.3: Self-Avoiding Random Walkers
[ FPS: ]

Grid Size: 50×50



Turn Chance: 10%



Total Coverage: 100%
Path Thickness: 50%



End Node Size: 0%



Drawing Mode:

Movement Directions:





Rendering Speed:


(6/28/2022): I finally got an implementation of a self-avoiding random walk working correctly--the walker moves randomly (with a low turn chance) but never crosses itself or an old path. When it gets stuck, it starts a new path with a new color and repeats until the canvas is filled.
(Later that day): Added a second drawing mode which is just filled squares instead of connected paths.

(6/29/2022): Added sliders for everything. Added support for diagonal movement which works well but not perfectly. I got the kinks worked out so that even diagonal paths never cross--but there's often lots of space left open as a result of that, and I'm not sure if I can do anything about that.
(Slightly later that night): I fiddled with the code some more and got diagonal movement working perfectly now, and added radio buttons for directions.

(10/1/2022): Actually finished! Added to generative-art-gallery.html as "The Jeweled Halls of Isfet"


Project #3.2: Skewed Grid
(6/27/2022): A grid of squares but with an added skew variable (which affects how much the corners of each square move from their normal position), which increases towards the center of the grid. There is also a draw chance variable for various lines across each square that also increases towards the center of the grid.


Project #3.1: Banded Bouncing Trails
[ FPS: ]
(6/26/2022): A random project involving bouncing circles that randomly change their hue over time, and which slowly grow darker and smaller until they disappear, creating twisting trails with bands of color along them. Click to add more circles. This isn't a super important project but I implemented a really important idea for bouncing--smoothness. Instead of getting blocky trails (like in bounce.html) when trailing is turned on, the circles instead render 5 times per frame, moving at 1/5 their speed every time. This results in identical behavior, but with more pleasing and smooth trails.