—— The Second Island of Misfit Code ——

Started on 10/17/2021. (Moved to here from testbed.html)
Reached 99 projects on 6/26/2022! Moved to testbed3.html.




Project #2.99: Crowded Constellations
(6/26/2022) Constellation generator, using modified circle packing. The circles are placed and sized the same as normal circle packing, but instead of drawing the circles themselves, a star (of fixed size) is drawn at each circle's position, and then a line connects it to the nearest circle. This creates varying distinct shapes that resemble constellations in a starry sky.
Update: (Later that day) Added padding so that constellations can't generate right on the edge of the canvas, making them all more visible overall.
Actually finished! (9/30/2022) Added to generative-art-gallery.html as "Chronicles of the Ages When Gods Dwelt Among Heroes."


Project #2.98: Animated Rectangle Subdivision
1%
[ FPS: ]
(6/25/2022) Rectangle subdivision that animates and splits further over time. I also made it where there is an initial hue that varies with each new rectangle that is split, so that it's not just a random rainbow.
(6/26/2022) Slightly modified the for-loop done per frame so that it doesn't slow down when there's more rectangles, and decreased the canvas resolution.


Project #2.97: [TEMPLATE]: Rectangle Subdivision
(6/25/2022) A template project similar to square subdivision, except instead of one square splitting into 4 smaller squares, one rectangle splits into two smaller rectangles (with a random orientation).


Project #2.96: Random Striped Grid
Grid Size: 6×6


Stripes Per Tile: 3


Stripe Thickness: 60%


Stripe Hue: 240°


(6/25/2022) A small project testing what it would look like to have a grid filled randomly with blocks that are either made up of horizontal stripes or vertical stripes.
Update: (Later that day) Added colors and sliders for settings.


Project #2.95: Circle Packing: Shapes With Regions
(6/24/2022) This project is similar to Project #2.73, except that there's triangles, squares, pentagons, and hexagons, and there's 9 regions on the grid that each have different settings to create distinct but overlapping regions. I also added more visual settings, like a third type of connection (instead of corners-->middle or midpoints-->middle), which connects adjacent midpoints to create a smaller copy of the shape inside itself.
Actually finished! (6/24/2022) Added to generative-art-gallery.html.


Project #2.94: [TEMPLATE]: Square Subdivision
(6/24/2022) Another template project based on old square subdivision code.
(6/25/2022) Added colors to make the template less bland.


Project #2.93: [TEMPLATE]: Circle Packing
(6/24/2022) A template project for circle packing, with just a barebones design of just drawing black circles, the code coming from older projects. This way, I can just copy and paste this code and change the drawing function every time I have an idea for another variation on circle packing.
(6/25/2022) Added colors to make the template less bland.


Project #2.92: Random Arc Walker
[ FPS: ]

Min Arc Angle: 0°


Max Arc Angle: 90°


Arc Radius: 20px


Starting Walkers: 10 walkers


Path Width: 2px


Wrap Walkers Around Canvas:


Interesting Settings:
- Low Arc Radius / Min Arc Angle = 180° / Max Arc Angle = 270°
- Low Arc Radius / Min Arc Angle and Max Arc Angle = 180°
(6/11/2022) Random arc walker, which is like a random walker except that the steps it takes are connected circular arcs, with an angle between "min angle" and "max angle," alternating clockwise and counterclockwise.
Update: (Later that day) Added more settings and sliders for everything.


Project #2.91: Spinners With Collision, Part 2
[ FPS: ]

Presets:
Rotation Speed: 3x



Bounciness: 80%



Gravity: 50%



Friction: 10%
Spinner Length: 150%



Spinner Thickness: 20%



Node Diameter: 12%



Node Outline: +4%
Trailing:



Node Hue: 0°



Node Brightness: 0%
Node Color:

(6/10/2022) An updated version of the previous project, with the spinners rotating from their center instead of their end. I realized a much easier way to add collision was just to calculate the width and the height of the bounding box around each spinner every time its angle changes, and do normal collision with that, so now it works fine. I also changed the visuals to look more cartoony and colorful, and also mouse control so you can click to add more. The physics still aren't accurate, since the speed of the spinning isn't taken into account when bouncing, but it still works pretty well.
(6/11/2022) Slightly modified the code so that each spinner's length, thickness, and node radius can be updated dynamically, instead of only when it spawns. I also made it so that bounciness is not taken into account when bouncing off the left and right walls, so that it more accurately matches what you would expect, and also will let the spinners keep sliding forever if you have 0% friction.
Update: (Later that day) Painstakingly added settings for 11 different variables.
(6/12/2022) Added preset support and a few settings presets.


Project #2.90: Spinners With Collision
[ FPS: ]
(6/9/2022) More bouncing experiments, this time it's a Hinge object that has a home point and an orbit point that rotates a distance away from it, and both have collision with the walls. I want to modify the code though to make it so that it's two points orbiting an equal distance from the center, so the whole line rotates smoothly instead of looking unnatural.
Update: (Later that day) I realized I'd have to completely redo my code to make the change I wanted, so I decided to leave this how it is and implement the changes in the next project. I polished it up a bit and added clicking to create more hinges as well. I also added decay so that hinges die over time and you can't just flood the canvas with them.


Project #2.89: FABRIK Man
[ FPS: ]

(6/4/2022) Another experiment with FABRIK chains, this time with a guy that "runs" towards the cursor by repeatedly choosing new points for his FABRIK legs to step towards. His name is Hezekiah and for some reason he moonwalks a lot. For best results, move the cursor slowly and near the top of the canvas.
(6/6/2022) Added a failsafe so that Hezekiah's legs can no longer get stuck in the same position as each other, making him a hopping one-legged person.
Update: (Later that day) I added FABRIK arms to him that reach towards the wall if he's close enough to a wall, and droop downwards if he isn't. I also added an option to give Hezekiah noodle limbs, where his arms and legs have 50 segments instead of 2.


Project #2.88: Bouncing Arrows
[ FPS: ]
(6/3/2022) Bouncing simulation, except that the bouncing objects have no size and instead draw an arrow on their position showing their current velocity, with size indicating speed. Click and drag to add arrows.


Project #2.87: Square Packing on a Grid

Grid Size: 50×50


Max Square Size: 30%


Draw Chance: 100%


Shape:


Contrast: 70%


Saturation: 50%


Outline Width: 30%
Coloring Mode:

(6/1/2022) Square packing on a grid. This is similar to the other square packing project on this page, except that it's aligned to a grid instead of randomly across the canvas.
Update: (Later that day) Added lots of settings and sliders for everything.


Project #2.86: Circle Locus

[ FPS: ]


Shapes Drawn: 2,000


Number of Locus Points: 15


Shape:




Selected point becomes:



Shape Color:



(5/29/2022) An array of Locus points are created randomly on the canvas, and then every step a random point on the canvas is selected. A thin circle is drawn, with the selected point as the center of the circle, and the edge of the circle touching the nearest Locus. I also added buttons for different modes of drawing.
Update: (Later that night) Changed from lots of buttons for different modes, to just different settings to change how the shapes draw.
Actually finished! (5/30/2022) Added to generative-art-gallery.html.


Project #2.85: Connectivity
(5/25/2022) Generative art that is similar to tiles.html, except that every single tile is guaranteed to connect to adjacent tiles, to create an intricate and solid structure. Today I added the first 14 tiles, I plan to have a total of 20+.
(5/26/2022) Finally added the final tiles, now I have a full 20, and everything connects exactly like I imagined it would.
Actually finished! (5/27/2022) Moved to connectivity.html.


Project #2.84: Profile Generator

Possible usernames:

(5/16/2022) Random profile generator--I have lists of hundreds of adjectives and nouns and each profile gets a random selection of those, connected and capitalized randomly. I also added random profile pictures, using mirrored random pixels. I want to have different kinds of profile pictures, maybe some with random shapes instead of only pixels.
Update: (Later that day) I made it so that 5 profiles generate every time to see the variation, and also added a new kind of random profile picture that draws a random polygon or star with a random number of sides/points. I later also added a new profile picture that draws a random dice roll.
Update: (Later that day) Added more nouns/adjectives, and also added a new profile picture type that parodies the default silhouette, but with googly eyes.
(5/17/2022) Added a failsafe so that no username will be above 30 characters long, so I don't have to worry about going past the screen even if I add longer words.
Actually finished! (5/17/2022) Moved to profile-generator.html.


Project #2.83: Tribal Beads
(5/6/2022) A failed attempt to make generative art that resembled tribal beads or bracelets or something like that, I liked the idea of connecting circles with lines to make bead-like shapes but I didn't know how to place them on the canvas or how to set the settings right to make it look like I was wanting, so it looks pretty bad right now. I might go back and fix this at some point but I'm not sure what I want to do with it.


Project #2.82: Recursive Square Packing
(5/5/2022) An attempt to do circle packing recursion, but with squares. For some reason, the squares start inside each other and also don't reach towards each other.
Update: (A few minutes later) I fixed the bug and now the squares pack correctly. Now I want to add recursion and alternate packing black squares in white squares and vice versa, to create contrasting layers of squares inside squares.
Update: (Later that day) I got the recursion working, so now there's 3 layers of packed squares. I'm not sure how much I love the final result, but it looks cool enough.


Project #2.81: Cellular Automata Alien Glyphs
(5/2/2022) More generative reverse-enineering: this time I copied the design from this Reddit post, with a grid of grids of cellular automata. Each rule appears once, randomly, in an 8x8 grid. I also randomized the hue every generation, so that is isn't just green like the post. The initial state of each cell is the same for all cells, but randomized every generation as well.


Project #2.80: Fiber Pushing
[ FPS: ]
(4/28/2022) I wanted to try to replicate the design from this Reddit post, so I have a system of spring particles and pusher particles that move around the screen, pushing points away by the square of the distance between them. It's pretty bland currently and doesn't look like the post.
(4/30/2022) I improved some code to improve framerate, and now I can support more points and still be around 50-60 FPS. I gave the points a yellow color and a motion blur, and made the pushers move and choose destinations randomly. This matches the post more, but I still feel like something is missing.


Project #2.79: Recursive Circle Packing
(4/23/2022) Recursive circle packing -- a few medium circles are packed randomly within one large circle (the size of the canvas), and each of those medium circles has mini circles packed into it as well.
(4/24/2022) Added more medium circles and made th background black instead of white. I want to add another function to pack circles within a rectangle so that the medium circles reach to the edge of the canvas, instead of to the edge of a circle inside the canvas, so they fill the space better and more neatly. I also added a setting for center bias which affects how much the placed circles are biased towards the center, to create more scattered designs (although it fills up the canvas quicker). Negative bias values make the circles tend to the edge of the boundary instead. (Possible idea: Make each mini circle be a random inscribed polygon, withthe same polygon for all mini circles within one medium circle.)
(4/25/2022) I implemented the random shape idea but I wasn't happy with how it turned out. I'm not really sure where I want to go with this now--I really like the idea of packing circles in circles but it doesn't look super cool how it is right now.
Update: (Later that day) I turned off the circle outline and made the visual size ratio be 1.75×, which make the medium circles look more like paint splotches or something. I like this more but it's still missing something.
Update: (Slightly more later that day) I made the biggest boundary circle bigger than the canvas so the medium circles cover the whole screen, turned the visual size ratio to 5×, turned the opacity down to 0.8, and increased medium circles to 100. I think I finally like how this turned out, I'll do some more fiddling but it's starting to actually look like something now.
(4/26/2022) Reduced size ratio to make the circles more separated.
(4/27/2022) I added settings randomizing every regeneration (like hue variation, center bias, brightness variation, size ratio, etc.) and also added a new setting for the ratio of the inner ring of the circles instead of just always having solid circles. I might polish it up a bit more but I'm finally starting to like how this is turning out now.
Actually finished! (4/28/2022) Added to generative-art-gallery.html.


Project #2.78: Mandelbrot Viewer
Click and drag to zoom. Make sure the animation is running by toggling the Paused button. The render gets more accurate every swipe.
[ FPS: ]






Fractal Hue: 300°


Fractal:

The Mindlebrit Fractal is a fractal that is generated the exact same as the Mandelbrot--except z_0 = i, instead of 0.

The Cosine Fractal is generated similar to the Mandelbrot, except instead of squaring z_n and adding c every iteration, you take the cosine of z_n and add c (and color based on escape iterations similarly).

The Two-Cosine Fractal is the same as the Cosine Fractal, but with 2 times cosine each step.

(3/30/2022) I tried making a faster Mandelbrot set visualizer than the old one I had, but it's not much faster. I did add dragging and zooming though, which was really difficult to get working properly. It still loses a lot of detail at higher zoom levels, but I'm not sure how to fix that without waiting like 30 seconds for it to render. I also made it where the escape iterations for each point also affect the hue, not just the brightness, which creates a really interesting effect.
(3/31/2022) Added buttons for different fractal modes.
(3/31/2022) I significantly improved runtime and performance by adding an update frame function instead of just rendering the fractal all at once, one time. It instead now passes down the screen, rendering as it goes. Each time it reaches the bottom of the screen, it does another pass with higher iterations. (Deeper zooms will take longer to render as they have a higher iteration escape period).
Update: (Later that day) I made the rendering passes happen twice at once, moving from the center of the screen, and also added a setting to intensify the coloring, which means the intensity is multiplied based on the maximum iterations (as the higher the max iterations are, the less intense the colors typically are). I added it as an optional setting since sometimes it looks whitewashed with intense colors on.
Actually finished! (6/3/2022) Moved to mandelbrot-viewer.html.


Project #2.77: Animated Triangle Grid
[ FPS: ]
(3/10/2022) I decided to go with an animated design with a triangle grid this time. Each triangle slowly fades in and out with size and brightness, but the offset it has increases the further it is from the center, which makes a really cool rippling or breaking away effect.


Project #2.76: Bezier Point Connections
(3/7/2022) I tried to use something I implemented in the previous project, by connecting lines with random quadratic curves, but the result is pretty underwhelming.


Project #2.75: Phyllotaxis Spiral Network
(3/5/2022) Experimenting with point networks. At first I just made a phyllotaxis spiral and connected the nearest points but it looked pretty bland. Then I added randomness to how offset each point is, and then finally changed the golden angle from ≈137.5078° to 2-4° and made the connections get lighter and thinner as they go out. Now it resembles some kind of mystic tribal rune, or magical energy...
Update: (A few minutes later) I wanted to emphasize the theme of mysterious ancient energy so I changed the connections from simple line to quadratic curves, with a random offset bend that increases towards the edge of the circle. This creates an interesting contrast between the geometric design of the center and the stringy loops of the edge.
(3/6/2022) I added white shadows to everything to create a glowing effect and added random white glowing dots around to emphasize the energy theme.
Actually finished! (3/6/2022) Added to generative-art-gallery.html.


Project #2.74: Impossible Triangles
(3/4/2022) I worked out a program to draw the impossible Penrose Triangle.
(3/5/2022) Went from drawing one large triangle, to drawing lots of them in a hexagon grid. I really like the design of the triangles but I'm not happy with this arrangement of them and I want to find a more cool looking way to put them on the screen.


Project #2.73: Circle Packing: Triangles
(3/1/2022) More variation circle packing, this time with random triangles drawn instead of circles, and with a visual size ratio of 1.5x so they overlap each other but still are spaced out nicely.
Update: (Later that day) Added more paramaters that get randomized. Lines are drawn on every triangle either from its center to its corners or its center to its edges, randomized every generation. There is also a random tilt factor for how rotated each triangle will be off the global angle, and a skew angle for how skewed the triangles will be from a perfect equilateral.
Actually finished! (3/1/2022) Added to generative-art-gallery.html.


Project #2.72: Circle Packing: Rocks
(2/28/2022) Random rock path generator, it's based on circle packing but instead of drawing circles it draws random rock shapes. I also worked with better color manipulation here, because each rock is colored as a random variation on a basic brown color, but less saturated. The orangey-brown shade of the rocks reminds me of a dry desert canyon.
Update: (Later that day) I added a few more settings so I could test some ideas for variations but none of them really interested me so they're all at their default values.
Actually finished! (2/28/2022) Added to generative-art-gallery.html.


Project #2.71: Colorful Triangle Grid
(2/28/2022) I finally got a triangle grid working, but I wasn't really sure what to do with it so I have this kind of kite pattern thing, which isn't super interesting. It sort of reminds me of square holes covering the ground.


Project #2.70: Nested Tangent Circles
(2/26/2022) Nested tangent circles, each circle (inside the main circles) touches the edge of the one around it.
(3/1/2022) Decreased the grid size and increased the outline width to make everything more visible.


Project #2.69: Random Walker With 3 Degrees of Freedom
(2/25/2022) Random walker but it has 3 degrees of freedom - hue, saturation, and/or lightness - which are randomly turned on or off every generation. If they are turned on, that degree will change randomly as it walks.


Project #2.68: Pythagorean Tiling
(2/24/2022) Random Pythagorean tiling with the same concentric coloring from the hexagon grid.
(2/25/2022) Added more randomness, the grid size and size of the smaller square is randomized every generation.


Project #2.67: Concentric Hexagon Tiling
(2/22/2022) Random concentric hexagon grid tiling.


Project #2.66: Cubic Optical Illusion
(2/22/2022) Random cubic optical illusion generator, it looks 3D and you can make it flip orientations in your mind.


Project #2.65: Fractal Tree Snowflake
(2/21/2022) I tried to make a different snowflake generator than the one I made for snowflake.html by using symmetric fractal trees, but I'm not super impressed with the result.


Project #2.64: T-Block Tiling
(2/21/2022) Tiling the plane with Tetris-style T-blocks, along with some random coloring.


Project #2.63: Unconstrained Shape Walker
Turn Chance: 100%
(2/17/2022) A variation on the previous project, with the same shape walker idea but uncontstrained, and it cycles through a few different shapes and colors every time.


Project #2.62: Shape Walkers in a Grid
(2/16/2022) Small clusters of connected shapes generated by a grid of random walkers that each have a set turn size (120°, 90°, or 60° (for triangle, square, or hexagon, respectively)) and walk around randomly until they leave their square.


Project #2.61: Slicing Blades With Sparks
[ FPS: ]
(2/16/2022) Experimenting with more particle physics, this time with "blades" cutting around the screen and shooting sparks.


Project #2.60: Grid of Binary Permutations
(2/12/2022) Another Genuary 2021 prompt, this time from January 25th's "Make a grid of permutations of something." I'm not super happy with how this turned out but it looks sort of interesting. It's a 23x23 grid where each square shows the next number in binary (backwards) (with lime being 0 and black being 1) drawn in another smaller 3x3 grid. So, the first tile is 0 in binary, being
000
000
000

And the next one is 1 in binary, being
100
000
000
, and so on.
For example the 21st tile would be
101
010
000
.
(2/15/2022) Added randomness--it works in the same way except that the first tile isn't always 0, it's a random number between 1 and 511. Then the next tile isn't always just one more, it's a random amount more. It's still pretty dull for the most part but at least it's not always the exact same.
Update: (A few minutes later) I added some more randomness so that the color is random as well as the size of each tile when it's drawn, to give some more variation.


Project #2.59: Grid of Symmetric Grids
(2/12/2022) Another late Genuary project, this time inspired from last year's prompt for January 4th: "Small areas of symmetry." Each tile has vertical and horizontal symmetry, and a randomized grid size.


Project #2.58: Sea of Shapes
(2/10/2022) A late project inspired by Genuary 2022's prompt for January 20th: "Make a sea of shapes."


Project #2.57: Generative Flower Growth
FPS:
(2/7/2022) (Click to add "flowers") I'm honestly not sure what this is...I was going for some interesting interactive generative art and ended up with a weird "flower"-like thing. I'm not sure how I feel about this one, but I don't like deleting work so it's gonna stay here.


Project #2.56: Tic-Tac-Toe
(2/5/2022) Simple Tic-Tac-Toe game, currently only works for 2 human players and has no ending. I want to add an AI algorithm for playing against a human, as well as sensing when the game is over and who won.
Update: (Later that day) Added an AI that currently just places an O in a random spot, as well as tracking for when the board is full (but not if a line is made, which should also end the game).
(2/7/2022) Added a button to switch between 2 player and 1 player. Eventually I want to add AI to the computer using this Coding Train tutorial, but for now the computer just plays randomly.


Project #2.55: Generative Crystals

(2/2/2022) Started following this generative art tutorial for random crystals by Matthew Epler.
(2/3/2022) I finished the tutorial, this time I didn't change very much about how it works (my code is completely different, but the output is basically the same), except making some layers more transparent so it gets less crowded. I also added a setting for rainbow colors instead of the default blue/pink palette.


Project #2.54: Euler Spirals
dθ: 1.01°







(2/1/2022) Turtle graphics plotting Euler spirals, inspired by this Numberphile video, with added buttons to change dθ, showing how sensitive the pattern is to intial conditions. Basically the turtle starts out moves forward and turns dθ°, then moves and turns 2dθ°, and then moves and turns 3dθ°, and then 4dθ°, and so on. By changing dθ°, even by an incredibly small amount, it greatly changes the complexity of the resulting designs.


Project #2.53: Pillars of Squares
(2/1/2022) More generative art, this time inspired by this artwork by Tyler Hobbs. There's lots of paramaters like brightness variation, saturation, etc. that are randomized every generation so that every time it looks similar but distinct.


Project #2.52: Colorful Particles With Trails

Mode:
FPS:
(1/31/2022) More generative art experimenting, with selectable modes for several different artworks, all based on a similar particle system that moves arounds and shrinks, leaving colored trails behind.
(2/1/2021) Added more modes.


Project #2.51: Curlicue Fractal Galaxy
FPS:
(1/31/2022) Experimenting with curlicue fractals gave me an idea for this "galaxy" generator. Each walker is a curlicue fractal, but it's step size is randomized every 500 steps (500 steps are taken per frame). This creates interesting and intricate doodle-like designs and patterns.


Project #2.50: Trailing and Bouncing Net
FPS:
(1/31/2022) Inspired by this Dweet, I made a simple recreation of it that turned out pretty underwhelming. I tried adding color and trailing so it's a bit more interesting but this took like 5 minutes and I'm not super proud of the end result.


Project #2.49: Interactive Plinko Game
FPS:
(1/25/2022) Interactive Plinko board game, click at the top to add a ball. I possibly want to add like some scoring system with different sections at the bottom but I'm not sure yet and it'll probably stay like this for awhile.
(1/27/2022) I added better UI for the remaining pinballs and made a little particle cloud when a ball falls off the screen, which I'll have change based on what section it landed in, when I add them.
(1/29/2022) Added some more randomness in the pegs, so that when a ball bounces off a peg, the angle and bounciness is randomized slightly.
(1/30/2022) I finally added the buckets at the bottom, and made an animation for scoring along with a total score variable. There is an array of buckets that get shuffled around every reset, to guarantee a good variety of bucket values. The reason I was delaying adding buckets is that I didn't want to try to figure out how to add add physics for the bucket edges, but I decided to make the edges not have any collision and it still looks fine.
Update: (Later that day) I added a game over screen so you can keep replaying the game like an arcade.
Update: (Even later that day) I added three different powerups that slide across the board -- there's a pink +1 ball powerup, a yellow x2 mult powerup (which makes the ball that collects it worth twice as much when falling into a bucket), and a gray elevator powerup, which makes the ball that collects it slide straight down, so you can align with a high value bucket for more strategy. I also added game stats to the game over page.
(1/31/2022) Made highscore saved in local storage, so it is retained on page reload, and slightly modified the animation when a peg is hit.
(6/12/2022) Removed the button to clear highscore, since awhile ago I removed all localStorage calls (the reason for this is that sometimes the localStorage call would fail, and that would make the game completely unplayable unless you specifically went into the console to clear your localStorage).


Project #2.48: Custom PRNG Random Walker
FPS:
(1/25/2022) Genuary 2022's prompt for January 24th, "Create your own pseudo-random number generator and visually check the results." I'm not super proud of this but I'm just gonna leave it how it is.


Project #2.47: FABRIK Servo
FPS:
Number of Arms: 6
Arm Thickness: 3px
Joints Per Arm: 5
Joint Size: 5px
Arm Length: 400px
Shadow Opacity: 25%
(1/24/2022) Continuing the FABRIK experiment trend, this is a simple FABRIK chain with symmetry (dragged by the cursor), making cool intricate patterns that are similar to servo.html but manually controlled.
Update: (Later that day) I added all the settings from servo.html and sliders for everything.


Project #2.46: FABRIK Factory
FPS:
(1/23/2022) I want to make another FABRIK-based animation, with colored claws reaching for colored boxes and placing them offscreen, and repeating. I have the arms working but the grabbing and placing down doesn't work yet.
(1/24/2022) I finally got everything working properly, each arm bends to grab its box and places it offscreen, and repeats. It might not be super impressive but I like this project and I'm pretty proud of it, and it's really satisfying to watch. I also got the claw part of the arms to look right, and added text to show each arm's total number of collected boxes. This is easily one of my favorite projects I've made.


Project #2.45: Colliding Concentric Circles
(1/23/2022) More random generative art -- I'm not super pleased with how this turned out and at some point in the future I might mess with the parameters until I like it more. But it's still interesting.


Project #2.44: FABRIK Spelunking
FPS:
(1/22/2022) "Spelunking" Move your cursor slowly around the screen to explore the cave. Another experiment with the FABRIK algorithm to make creatures follow the cursor around slowly. They also lose brightness and eye glow the further the cursor is to give an effect like shining a flashlight.


Project #2.43: Black Hole
FPS:
(1/22/2022) Simple black hole art/animation.


Project #2.42: In and Out Circle Packing
FPS:
Circles: 1

Max Circles: 1,000

(1/21/2022) Circle generative art, using this algorithm, the settings are randomized every generation.


Project #2.41: Follower Bugs
FPS:
Friction: 25%
Bug Random Wander Factor: 10%






Number of Bugs: 1000
Bug Size: 3px
Bug Hue: 0°
(1/20/2022) An attempt to replicate the design in this, with random bugs following each other, but it just devolves into a blob in the middle quickly.
(1/21/2022) I added a trailing effect which greatly improves how cool it looks and made each bug be assigned another random bug to follow -- without worrying about "each bug follows one bug, each bug is only followed by one bug." I also added reset buttons and made the bugs turn a little bit from directly facing their target for more random behavior. Later I made the bugs accelerate towards their targets instead of just moving towards it, with some friction, and I also added settings for everything and sliders.
Update: (Later that day) I finalized everything and added more settings and color.


Project #2.40: 1D Cellular Automata Scroller
FPS:
(1/19/2022) (Somewhat underwhelming) 1D Cellular Automata scrolling viewer, with randomly changing rule and random colors.


Project #2.39: Random Chord Probability

Number of Lines: 0
Current Ratio: 0% (Ideal: 33.33333%)
FPS:
(12/20/2021) Simple simulation I made to replicate the first problem in this Numberphile video, demonstrating the 1/3 probability that a random chord drawn in a circle will have a greater side length than its inscribed triangle.


Project #2.38: Hitomezashi Stitching Patterns
Grid Size: 25×25
Randomness: 100%
Selected Lines:



(12/9/2021) Random Hitomezashi stitch patterns, based on this Numberphile video. I changed the algorithm some to add both sets of diagonal lines across the square.
(12/10/2021) Added sliders and settings.
(12/11/2021) I realized the way I was drawing the diagonal lines was a bit off, which didn't make a difference unless you turned the randomness down. But now it's fixed and everything is drawing correctly and evenly, even with 0% randomness. The code's an absolute mess and there's definitely a better way to do this algorithm, but somehow it works so I'm not gonna touch it.


Project #2.37: Aligned Random Walkers
FPS:
Walker Alignment: 50%
Number of Walkers: 100
(12/6/2021) Aligned random walker generative art - a line of random walkers are spawned at the bottom with alignment towards the top and a chance to walk in a random direction, making colorful streaks across the screen. I could add sliders later but I don't want to right now.
(12/7/2021) Added sliders and buttons.


Project #2.36: Triangle and Quadrilateral Fracture
Splits: 1 level
(12/2/2021) Another variation on fracture, this time combining both triangles and quadrilaterals.


Project #2.35: Random Walker With Trail Interaction

FPS:
Turn chance: 1%
(12/1/2021) Another random walker creation I tried, which ended up failing pretty miserably. The way it works is the random walker goes in a straight line until it comes to a square it has already visited, and then it turns to a random direction. I'm not sure what I was expecting, but it's pretty boring.
Update: (Later that day) I managed to salvage this project, somewhat. I added colors (that randomize each reset) so that the color drawn is based on the walker's direction (e.g., moving up might mean red, moving right might mean green, etc.). I also added a turn chance variable so that the walker has a chance to turn on newly visited squares as well, giving it more interesting patterns.


Project #2.34: Quadrilateral Fracture
Splits: 1 level
Skew factor: 50%




Hue Variation: 10%
(11/30/2021) Quadrilateral frature splitting - I ealized I could use the same code I wrote for triangle fracture and make it work for four-sided shapes. I also was able to add a skew variable that makes the splitting more or less distorted.
(12/1/2021) Changed some code and added a slider for skew.


Project #2.33: Triangle Fracture
Splits: 1 level



Hue Variation: 5%
(11/28/2021) Triangle fracture fractal, based on this Neocities page.


Project #2.32: Rectangle Random Walker
FPS:
Grid Size: 100×100
Turn Rate: ~1 step
Draw Chance: 100%
Line Length: 400%
Line Thickness: 100%
Line Brightness: 70%
Line Opacity: 5%
Line Color Variation: 0.5%
Settings Presets:
(11/28/2021) Generative art made by a random walker, each step it moves either left/right/up/down, and draws a rectangle in the direction it moved, with a set thickness and length and opacity. The hue changes some per step as well, and it creates interesting intricate patterns.
Update: (Later that day) Added more settings and sliders, and added settings presets.
(11/29/2021) Added draw chance and turn rate settings and sliders, and more presets.
Actually finished! (6/2/2022) Moved to stripe-walker.html.


Project #2.31: Color Field Averaging
FPS:
(11/28/2021) Simple color averaging art based on this video.


Project #2.30: Square Packing
Squares:
Min Square Size: 5px
Max Square Size: 200px
Square Visual Size Ratio: 100%
Square Fill Mode:




Square Outline Mode:




Settings Presets:
Outline width: 5px
(11/27/2021) I finally redid my old square packing algorithm, and it's significantly faster now. I also added settings, sliders, and presets.
Actually finished! (5/20/2022) Added to generative-art-gallery.html.


Project #2.29: Interactive Card Table
FPS:
(11/26/2021) I'm wanting this to be a simple card table, where you can drag the cards around and slide them, right now I have the cards working but not the dragging or sliding yet.
Update: (Later that day) I got the dragging hitboxes working properly after a lot of Googling and messing with dot products, so the dragging mechanic works. I took out sliding the cards across the table, and I'm not sure what else I want to do with it right now.
(11/27/2021) Added animation buttons for the cards, and a trailing option.


Project #2.28: Blob Cow Evolution
FPS:
(11/24/2021) I'm trying to make a (probably pretty lame) version of Cow Evolution, using blobs. Right now I have the wandering down, and the dragging works, but I haven't added points or merging. I have a class set up with different layers for different stages of evolution but currently it only has one item, the first layer. I'm probably never going to finish this so it'll probably stay as just random blobs walking around.


Project #2.27: Faster DLA on a Grid With Color
FPS:
Number of Pixels: 0
Grid Size: 500×500
Stickiness: 100%
Turn Chance: 5%
Hue Step: 0.01°
Initial Shape:

(11/18/2021) I redid my old DLA aligned to a grid project, this time using a cached array keeping track of the states of all the pixels, instead of manually checking every pixel every step, making it ridiculously faster. Like, a 100x100 grid would take 10,000 steps EVERY time the Walker moved, whereas this one only checks its current position. I also added colors, and a turn chance setting (currently set to 5%), so that the walker only has a X% chance to turn each step, instead of definitely turning every step, which makes it reach the pixels faster (since it spends less time wandering aimlessly), and still makes a really interesting coral-like pattern. Interestingly, the resulting pattern with a low turn chance is basically just a denser version of the classic one, which I think looks better actually.
Update: (Later that day) Added a stickiness setting, for the chance of a pixel sticking versus continuing to wander when it touches something (currently set to 100%).
(11/22/2021) Added a tracker for the current number of pixels, different spawning modes, and more sliders.


Project #2.26: Recursive Triangle Tree
Recursion layers: 15
Initial triangle size: 400px
Presets:
Triangle left angle: 60°
Triangle top angle: 90°
Triangle hue: 180°
Hue variation: 0%
(11/16/2021) Nested triangle tree generator, based on this Turtletoy project.
(11/17/2021) Added more settings and sliders, as well as a few presets.


Project #2.25: Curlicue Fractals
FPS:
(11/10/2021) I tried to replicate the pattern in this image, using Curlicue fractals, but I couldn't get it to quite look right.


Project #2.24: Circle-Aligned Random Walkers
FPS:
(11/5/2021) An experiment with giving random walkers a direction bias, which actually worked the first try. Now they all crawl out in more of a circle formation, instead of randomly walking clumped in the middle, or in a spiral shape. This can be used for lots of different designs and shapes.


Project #2.23: Self-Avoiding Paths
FPS:
Grid Size: 50×50
Density: 30%
Turn Chance: 20%
(11/4/2021) An attempt to replicate the self-playing snake game from this Reddit post, but I spent ages trying to get it to turn and could not figure it out to save my life. Right now it just randomly turns, but it doesn't steer away from it's own body like I was trying to get it to do.
(11/5/2021) Modified the code some so that there's adjustable density and each new path is a different color, and I like how it turned out. Now it reminds me of subway maps and it actually looks interesting.
Update: (Later that day) Added settings and sliders for everything.


Project #2.22: Circle Packing: Smiley Faces
Min Circle Radius: 10px
Max Circle Radius: 200px
Circle Visual Size Ratio: 120%
(11/3/2021) Variation on the circle packing project I did awhile ago, where it generates all at once (which speeds things up a lot) and also draws little smiley faces on each circle.


Project #2.21: Random Rocks
(11/2/2021) Messing around with generating random rock-like shapes, it's not the best but I like how it turned out.


Project #2.20: Growing and Pruning Squares
FPS:
(11/1/2021) Square animation I was messing around with: each square grows at the same speed and if there's 9 touching squares that are all at their max size, they all get their sizes reset (to a random value below 0, so that they don't stay aligned).


Project #2.19: City Skyline
(11/1/2021) Another unsuccessful generative art attempt, this time I was trying to make a generative city skyline to mimic the skyline in this Reddit post, but mine looks pretty boring.


Project #2.18: 3D Rectangular Prisms
(10/31/2021) Generative art of 3D rectangular prisms, but it's honestly pretty dull.
(11/1/2021) Messed with the generation some more, but I still don't feel like it's particularly interesting.


Project #2.17: Clifford Attractor
FPS:
(10/30/2021) Clifford Attractor visualizer based on the tutorial from this article.


Project #2.16: Flow Field
FPS:
Total Points Drawn: 0
Settings Presets:
Flow Field Size: 25×25
Flow Field Smoothness: 3 iterations
Flow Field Strength: ×1.0
Max Point Age: 50 steps
Friction: 10%
Path Hue: 120°
Path Opacity: 5%
Path Hue Variation: 50%
(10/30/2021) An unsuccessful attempt to simulate a flow field, by having a grid of random vectors that are averaged together. For some reason, there is a strong bias towards angles around 120° and 240°, with little to no other angles, meaning there's something wrong with my averaging function, but I don't know what. The field is visualized with magnitude being brightness and angle being hue.
Update: (A few minutes later) I realized I was going about the averaging completely wrong, I had been just averaging up the magnitudes and averaging up the angles and calling it good, but that's not how vector addition works. What I should have been doing is adding the vectors x and y components and dividing that resulting magnitude by 9 (the number of neighbors). I added that, and also added a Point16 class that moves around the flow field, tracing its path. Each point only lasts a set number of frames, and then it is replaced with a new point at a random position. Now everything works perfectly and it looks really cool. I also added more settings and sliders for everything, as well as presets.
(10/31/2021) Slightly modified the code so that instead of 500 points moving 5 times per frame, there's one point moving 5000 times per frame, which is less laggy and almost twice as fast.
Actually finished! (6/13/2022) Moved to flow-field.html.


Project #2.15: How Random Are You?
How random are you? Start typing random numbers below...
Random Numbers Submitted: 0
(10/29/2021) An idea I had for showing how not random humans are, where you type "random" numbers that get fed into a program as psuedorandom numbers, and it shows you some vizualization of how not random those numbers actually are. It works well enough, but it's kinda dull and takes ages to type out a reasonable amount of numbers to get a feel for it.


Project #2.14: Tiles
Grid Size: 10x10
Outline Thickness: 3px
Selected Tiles:




Tile Presets:
(10/29/2021) Generative tile art generator, based on the idea from https://generated.space/sketch/tilework. I also added some more tiles of my own.
Update: (Later that day) Added more tiles and line width around each tile, as well as more settings, sliders, and buttons.
(10/30/2021) Added presets and added more tiles.


Project #2.13: Square Subdivision With Faces
(10/28/2021) Random square subdivision faces, based on the image from this Reddit post. I also added random eyebrows for more expressions.


Project #2.12: Spinning Interlocking Arcs
FPS:
(10/28/2021) Simple colorful interlocking rings animation, I might add settings later but for now this is all there is to it.


Project #2.11: Generative Mountain Range
(10/28/2021) Generative mountain range with fog, based on this Reddit post. Basically, each mountain starts at a certain level and a random walker traces the peaks of the mountain by moving along and varying the y-coordinate. Each time it's redrawn, there's a random fog level (brightness contrast between closest mountain and furthest mountain), random height ratio (how high up the tallest mountains can start), and random number of mountains. Each mountain is given a random steepness (how much the random walker tracing the mountain moves vertically per step) and a random ratio offset for starting height and coloring, to give more variation.


Project #2.10: Random Walkers With Position-Based Coloring
FPS:
(10/28/2021) Simple random walker art with 200 random walkers of different colors drawing along the canvas, with their brightness being determined by their starting y-position, and their hue determined by their starting x-position.


Project #2.9: Clock Averaging
Pixel Mode:
Alternative Pixel Coloring:
Number of Real-Time Clocks: 4
Real-Time Clock Speed: 100%
Clock Averaging Weight: 80%
FPS:
(10/27/2021) Cool clock animation, where each clock takes the average of its neighbors time, but some of them show their actual time, based on this Reddit post (I actually didn't copy the code, I just used the idea and made it myself). I wanted to constantly modulus each clock's time so that it never goes past 720, but for some reason that throws the whole system off and you get these weird pulsations each time one of the real time clocks sets back to zero. Sadly this means the times are constantly counting up, but that's not really a huge deal. I also added pixel mode, based off an idea from a comment on that post, where each clock is rendered as a pixel with its hue being based on the hour hand's angle, and its brightness being based on the minute hand's angle.
(10/28/2021) Added a setting and checkbox for aternative pixel coloring, so that the hue is based on the minute hand, and the brightness based on the hour hand, instead of vice versa.


Project #2.8: Triangle Mesh
Mesh Size: 10x10
Mesh Crumple: 25%
Extra Crumple:
Drawing Mode:


Grayscale Fill:


White Outline:
Outline Width: 3px
Fill Hue: 240°
Brightness Contrast: 80%
Hue Variation: 30%
(10/27/2021) Generative triangular mesh art, from https://generativeartistry.com/tutorials/triangular-mesh.
Update: (Later that day) Added more settings for shaping and coloring the mesh that weren't in the tutorial, and sliders for everything.


Project #2.7: Rainbow Additive Sine Waves
FPS:
Wave Amplitude: 100%
Wave Frequency: 100%
Wave Period: 50 frames
Number of Waves: 10 copies
Wave Spacing: 10px
(10/26/2021) Additive sine waves visualization, I wanted it to look like some interesting generative art but it ended up being pretty dull.
Update: (Later that day) Added more settings and sliders for everything, as well as an FPS counter.


Project #2.6: Cursor-Following Square Subdivision
(10/24/2021) Just simple square splitting where the mouse moves. It's not perfect, like I want it to not immediately split down to the lowest layer, and it gets laggy around ~2,000 squares.


Project #2.5: Gravity Wells
Number of Gravity Wells: 25
Gravity Well Strength: 150%
Friction: 10%
Point Spawning:

Point Spawn Velocity: 0
Line Width: 0.5px
Line Opacity: 100%
Line Hue: 0°
Line Brightness: 60%
Color Variation: 40%
(10/23/2021) Art generator where points are spawned in that are attracted to various gravity wells around the canvas, leaving a trial behind them.
(10/24/2021) Added more settings and sliders for everything.
Actually finished! (5/18/2022) Moved to gravity-wells.html.


Project #2.4: Spiral Tiling
(10/22/2021) An attempt to make interesting spiral tiling with different settings for grow speed and turn speed, but I couldn't get it working right for when each spiral should stop drawing, so it doesn't look very interesting right now.


Project #2.3: Dottie Number Visualizer
Average Angle: 0.000000 radians
Percent Error: 100.000000%
(10/18/2021) Extremely simple (and probably not very helpful) visualization showing how the Dottie number (≈0.739085 radians) shows up from repeatedly taking the cosine of any angle.


Project #2.2: Plinko Board Distribution
Flow Rate: 500%
(10/18/2021) Simple Plinko board simulation, showing random data distribution.


Project #2.1: Holomorphic Dynamics
(10/17/2021) Holomorphic Dynamics visualization of escape paths. The yellow point is the starting value, and the blue point is the c value for the equation z_n+1 = (z_n)^2 + c. The red lines show the paths of the point through several iterations in the complex plane, scaled from -1 to 1. The mouse cursor drags either point.