(10/14/2021) Simple interlocking bands generational art. (10/15/2021) Added more settings, colors, and sliders, as well as randomizing settings and settings presets. (10/17/2021) Added more presets. Actually finished! (11/18/2021) Moved to bands.html.
Project #1.98: PRNG Manipulation
Random Mode: [ random ]
Average of 1,000 random values:
(10/13/2021) Experimenting with how different random functions can have different results. (10/14/2021) Added more functions and average of 1,000 random values text.
Project #1.97: Jittery Spiral Walker
(10/11/2021) Not really sure what this is, I was originally just going to make some art thing where when you click it makes a random spiral with random shape and color, but then I discovered this, and I kinda like it. It's just a spiral with random turn speed and grow speed, but also a random jitter property that randomizes where it draws to each frame by a set amount of pixels. I also some settings and sliders. At some point I might fully flesh this out into a background generator, but for now it'll stay how it is.
Project #1.96: Digital Etch-A-Sketch
(10/10/2021) An attempt to make a digital Etch-a-Sketch, but I didn't get the knobs working. I'll probably fix it at some point. (10/11/2021) Got everything working right! Now the movement is calculated based on the sign of the last angle and the current angle from the mouse cursor to the knob you're dragging.
(10/8/2021) Rollercoaster generator using Bezier curves. At some point I want this to have a little rollercoaster cart rolling along it using the tangent and normal directions at a current point, and have it infinitely scroll along, generating new coaster tracks, and driving along it. I also want to fix the spacing of the supports so that they're more regular and not bunched up.
Project #1.93: Space Golf
(10/7/2021) Space Golf! I want to have different levels with different planets and obstacles, where you try to get your golf ball into a black hole.
Project #1.92: Elastic String
(10/7/2021) Just a simple elastic string simulation, using the same nodes/springs code from the last project. I'm not too happy about this one but I'm not sure what to do with it to make it better.
Project #1.91: Spring Force Simulation / Sproing Clone
Hide Connected Nodes:
Destroy Springs After Contact:
Node Velocity Damping:
Max Springs Per Node:8
(10/6/2021) Spring force simulation, which I finally got actually working. I basically cloned William Hoza's Sproing, but with my own code that I think works better and I understand it. The basic system I wrote for nodes and connectors works really well and I think I can use it in lots of different ways. Update: (Later that night) Redid the spring system, so that it's a separate function for springs, instead of each node having a list of connected nodes that it refers to. I also implemented holding shift to delete clicked nodes, which was surprisingly difficult, but it works now. Also added more settings and sliders.
Project #1.90: FABRIK Snake
(10/1/2021) More FABRIK experiments, this time it's just a simple little snake that follows the mouse cursor. (10/3/2021) Added shadow banding to the snake to give it more texture and gave the background a simple gradient.
Project #1.89: Interactive FABRIK Network
Number of Lines:50
Points Per Line:100
(10/1/2021) Experimenting with different things that can be made with FABRIK chains. For coolest results, move the cursor in a circle. It kinda looks like pinching and pulling a cloth around. Update: (Later that day) Added a changeable path that the chains all snap to, or you can click and drag to override the path. Also added sliders and more settings.
Project #1.88: Bezier Curve Visualizer
(9/30/2021) Bezier Curve visualizer, the blue line is velocity and orange is the normal. You can drag the points around with the mouse.
Project #1.87: Interactive Rope Simulation
(9/29/2021) Rope simulation using this video at 6:43 as a reference. Update: (Later that day) I finally got everything working correctly. The Start/Stop button is the global canvasRunning button, so clicking that just stops or starts everything. But the Play/Pause button controls if the points and sticks update or not. If it's paused, you can click to add a new point, and drag a line between points to make a new stick, or if you click a point it'll switch between locked and unlocked. If it's playing, you can drag points around with the cursor. Currently it gets pretty glitchy when you try to drag an unlocked point, especially if you drag it out more than its stick's length, but I'm fine with that since it's kinda fun. There's a few bugs, like dragging one point doesn't always affect the one next to it (like if you make a rope and drag the first unlocked point), but I'm not sure how to fix them. Overall, this algorithm is really useful and it gives me lots of ideas, like replicating William Hoza's Sproing, or a spring simulation, etc. Update (Also later that day) Added boundaries that the points bounce off of, currently I'm pretty happy with how they bounce, but it isn't perfect.
Project #1.86: FABRIK Chain
Elastic Cursor Following:
Chain Size:6 links
(9/28/2021) Simple simulation of something like a string or rope being pulled behind the mouse, using an implementation that I wrote of the surprisingly simple and fast FABRIK algorithm. I wanted it to be like some robotic arm reaching towards the cursor, but accidentally discovered this string thing by having it not reconstrain to the original point. I might later make another project with the robotic arm, but I like this one for now. There are 100 individual segments in the chain, FABRIK-ing to the cursor each frame. Update: (Later that day) Made the string follow the cursor more dynamically, as if it's stretching, and also added settings and sliders. Click and drag to pull the string along. Update: (15 or so minutes later) I figured out I can just go back through the FABRIK algorithm backwards one more time to make the string anchored to a point, so I added a checkbox for that and a checkbox to make the string either follow the cursor slowly or follow it exactly.
(9/27/2021) An experiment to try to make different kind of grid tilings. The square tiling works (obviously) but triangular doesn't work at all and I want to add different types like on this Wikpedia page.
Project #1.83: Nested Rotating Squares
Alternate Turning Directions:
(9/26/2021) An attempt to replicate the rotating squares design from this gif, but I can't get it working at all and the trigonometry is driving me crazy. Update: (A few seconds later) Realized I had it all down fine, but forgot to convert to radians. Now the basic idea is working. Update: (About 15 minutes later) I got it all working properly and there's a whole grid and it cycles. I might want to do something more with this idea eventually but I'm happy with it for now. Also rotated it 45 degrees and added color. Basically the way this works is each square is rotated by a set angle each step, and then scaled down so that it is tangent with the inside of it's previous size and angle square. (9/27/2021) Added export canvas button to allow for mobile downloading, and added more settings and sliders.
Project #1.82: Organic Fractal Tree
Recursion Layers:7 layers
Minimum Splits Per Branch:2 splits
Maximum Splits Per Branch:8 splits
Random Length Ratio:50%
Random Angle Offset:45°
Random Hue Offset:30°
Random Branch Bend:50%
Leaf Grow Chance:50%
(9/25/2021) The ultimate random fractal tree generator, each time the branch splits it has a random number of splits, and each new branch has randomize length ratio, width ratio, etc. The branches also bend randomly for more variation. (9/26/2021) Added leaves that draw at the end of each branch, and sliders for different settings. Actually finished! (6/13/2022) Moved to organic-tree.html.
Project #1.81: Variable-Split Fractal Tree
Number of Branches Per Split:7
(9/25/2021) Fractal Tree generator with a changeable number of splitting branches. It works fine and I'm happy with it, but I want to eventually improve it to have more interesting results. Right now the main problem I ran into was generating interesting trees from random rules, as most of them just made boring trees. Right now the way it works is each branch is offset from the previous one by some angle, and then the other branch settings are randomized normally.
Project #1.80: Random Noise From Static Smoothing
Current Smoothing Iterations:0
Smoothing Iterations Per Step:25
(9/24/2021) Something that I think might be random noise, I have an array of random values from 0 to 1 and then each step they're averaged together by a set weighted average. (9/25/2021) Added different color modes.
Project #1.79: Pixel Landscape Generator
(9/24/2021) Pixel landscape generator, using a similar method to the snowfall generator by averaging rows to smooth the terrain.
Project #1.78: Midnight Snowfall Pixel Art
(9/23/2021) (and 9/24/2021, a few minutes past 12am) Pixel art nightime snowfall art. Each snowflake falls at a set gravity, with lower gravity snowflakes being drawn darker to make them appear further back, and if the current y-position of a snowflake is more than the snowpile below it, that snowpile is incremented and the snowflake destroyed. Snowpiles grow lighter as they grow taller, to give the appearance of layers of snow with shading. The snowpiles interact like Tetris blocks, so that if there is 10 complete rows at the bottom, they all decrement. Each snowpile also averages each frame with its neighbors by a 15% / 70% / 15% averaging method.
Project #1.77: Pythagoras Fractal Tree
Left Branch Hue Offset:15°
Right Branch Hue Offset:15°
Side Branch Angle:45°
Top Branch Angle:90°
Randomize Side Branch Angle:
Randomize Top Branch Angle:
(9/21/2021) Pythagoras Fractal Tree generator, currently not working. Update: (later that night) I finally got it working properly and you can change the branch angle as well. You can also make it randomize the branch angle each new branch. (9/22/2021) Added the ability to change the entire shape of the triangle by changing the top angle. At some point I might want to add the ability to have each new branch be a rectangle instead of a square. Also added colors. Actually finished! (5/20/2022) Added to generative-art-gallery.html. Actually finished, again! (6/16/2022) Also moved to pythagoras-tree.html.
Project #1.76: Ball Collision
(9/21/2021) An attempt to make a physics simulation with colliding balls, which works somewhat fine, except that when two spheres collide, they bounce off without taking their current velocity or mass into account, and I can't figure out how to fix that, which I want to do at some point. This means when you drag to add circles they all get bunched up for a second before actually falling. They also get caught up on the ceiling and sides a lot for some reason that I can't figure out. (9/22/2021) Changed the collision code using this page as a reference, and now the collisions work properly.
Project #1.75: Electromagnetic Force Simulation
(9/20/2021) Electromagnetic force simulation, with various charged particles attracting and repelling each other. It works fine, but it's kinda boring and I don't know what to do with it. Click and drag to add particles.
Project #1.74: Space Spheres
Black Hole Strength:0.25x
Black Hole Repels:
(9/19/2021) Balls bouncing off the inside of a circle simulation. I want to add more settings at some point, such as turning gravity and changing its power, or maybe having the balls be attracted towards a black hole you can drag around. (9/20/2021) Added angled gravity and changed the settings some, as well as added ball decay that slowly shrinks the balls. Update: Added draggable black hole that the balls are attracted to.
Project #1.73: Butterfly Effect: Ball Bouncing
Number of Balls:1000
(9/19/2021) Another Butterfly Effect simulation, with balls at slightly different offset bouncing along the inside of a circle. I got the bouncing working kinda right, but not perfectly and it doesn't seem very realistic, so I want to fix this. Update: (about 5 minutes later): I looked up a formula for vector reflection across a normal, and figured out I just needed to use dot products and now it works perfectly! There's 1000 balls, each offset by a millionth of a pixel.
Project #1.72: Butterfly Effect: Double Pendulums
(9/18/2021) Butterfly Effect simulation, with 500 double pendulums, each offset by a millionth of a degree.
Project #1.71: Binary Fractal Tree
Starting Branch Length:250px
Starting Branch Width:15px
Minimum Branch Width:0.5px
Left Branch Settings
Branch Length Ratio:65%
Branch Width Ratio:50%
Right Branch Settings
Branch Length Ratio:75%
Branch Width Ratio:80%
(9/18/2021) Fractal Binary Tree generator, with separate settings for the new left and right branches. (9/21/2021) Added more presets. Actually finished! (6/13/2022) Moved to asymmetric-tree.html.
Project #1.70: Brownian Motion Simulation
(9/16/2021) Brownian motion simulator. I figured out that the other Brownian motion implementations I had, which were basically just a random walk, were not actually as representative of what Brownian motion actually looks like. This one adds a random unit vector to the velocity each step, scaled by the acceleration mult, and then scales down the velocity by the friction coefficient. The walker then steps forward based on the current velocity, scaled by the velocity mult.
Project #1.69: Random Fibonacci Sequence Visualizer
(9/14/2021) Random Fibonacci Sequence visualizer. Each term either adds or subtracts the two previous terms (scaled by a set scaling value). These values are then plotted around a polar graph, and filled with an even-odd fill rule, creating interesting chaotic spiky islands. Tomorrow I'll probably add sliders for maxValuesLength, scale, angle, and fillRule. Update: (about 5 minutes later) I realized the way I was getting the next term was backwards, I had it at (n - 1) - (n), when it should have been (n) - (n - 1). Fixing this completely changed the way the spirals form, and now the whole design is thrown off and tends towards zero, which creates very dull and uninteresting patterns. I had to mess with the scaling some to make it scale less when increasing, but this feels like it's no longer a good representation of the sequence because of how much I have to play with these values. At some point I want to fix the visualization to look good while still having the Random Fibonacci Sequence generate correctly.
Project #1.68: Vector Field Visualizer
(9/13/2021) Vector field visualizer with a ball flying around, and the vectors all pointing towards the mouse cursor, turned by a set offset angle from that angle.
(9/8/2021) Interactive double pendulum simulation, also based on differential equations. I had to use the code I stole the last time I made a double pendulum, but I improved the simulation and added the ability to drag it around with the mouse. Actually finished! (9/9/2021) Moved to neon-pendulum.html.
Project #1.65: Interactive Pendulum
(9/8/2021) Interactive pendulum swinging simulation, based on differential equations. Calculates angle and distance to the mouse when you drag it or click, letting you drag the pendulum bob around.
Project #1.64.5: Large Number Describer/Visualizer
When you hear about most really big numbers, it can be hard to visualize exactly how big they really are. Exactly how big is 1e?
(9/7/2021) Generator to help describe and visualize massive numbers. (9/8/2021) Created the X years, X days, etc. function.
Project #1.64: L-System
(9/6/2021) L-System generator, with a few presets, using paulbourke.net/fractals/lsys and en.wikipedia.org/wiki/L-system as a guide. There is a lot of unused potential in this system that at some point I want to fully utilize. (9/7/2021) Added a lot more presets, and added custom replace direction functions per preset, to allow for more systems such as using X or G. I also added the ability to use [ and ] to save and restore the current position and angle, and symbols like |, (, and ).
(9/4/2021) Bezier Curve visualizer, using plotting points from different t-values. I want to further use this to its full potential, I imagine some kind of cool wave design with dots racing along it. Right now it's set to just create random paths but in theory I want them to be spaced regularly to create cool designs. (9/5/2021) Made the curves more regularly spaced around a circle and having the end points follow the mouse.
Project #1.59: Music Generator
Project #1.58: Wooden Floor Generator
(9/2/2021) Just a simple little wooden plank floor generator.
Project #1.57: Crowd Avoidance
(9/2/2021) An attempt to make a thing where people try to avoid one certain person, but currently it's pretty jumpy and doesn't look great.
Project #1.56: Sand Particle Physics
(8/31/2021) An attempt to make a simple sand particle simulation to build a sand pile, which doesn't work at all. (9/24/2021) Completely rewrote the code, so that it works like the snowfall simulation (except without the averaging or Tetris row removing). I'm still not completely satisfied with it, and sand particles will be inside other ones a lot, and it doesn't always look like a sand pile, but atleast it works now. I have it so that each sand particle has a set max age that increases each frame it's touching a sand pile, and when it reaches its max age, it gets stuck.
Project #1.55: Canvas Smearing
(8/28/2021) Messing around with smearing effects made by drawing the canvas on top of itself with less alpha.
Project #1.54: Car Driving Simulator
(8/27/2021) I want to make this a simple car simulator, where you drive the car around and it leaves tire tracks that slowly disappear, and it drives and turns like a real car.
Project #1.53: Belousov-Zhabotinsky Reaction
(8/26/2021) An attempt to simulate the Belousov-Zhabotinsky Reaction, using this as a reference. I couldn't get it working at all.
Project #1.52: Primordial Particle System
(8/25/2021) Another attempt to replicate the Primordial Particle System from Softology, which I couldn't get working yet again.
Project #1.51: Maze Generator
(8/24/2021) Random maze generator, made by moving along a grid and at each square drawing a line at either the top, right, bottom, or left. (8/25/2021) Added direction bias and bias strength variables, which affect the chance of a wall being either to the top / bottom or right / left.
Project #1.50: Anglular Random Walker
(8/23/2021) Random walker aligned to a circle instead of a grid, with random angle and set velocity, along with a slider for the chance of it turning each frame. (8/24/2021) Added more settings and sliders, for turn angle, velocity, smooth turning, and random turning. This way you can choose between turning a random direction each step, or turning a certain angle each step randomly, either exactly or smoothly (random turn between 0° and turn angle°).
Project #1.49: Nighttime Rain
(8/21/2021) Some sort of rain simulation / art thingy, I'm not really sure.
Project #1.48: Rocket Game
(8/21/2021) Rocket game, similar to Guitar Rat, but with rockets and eventually I want to add different modes, like Arcade and Infinite.
Project #1.47: Isometric 3D Renderer
(8/21/2021) An attempt to make a simple isometric 3D renderer.
Project #1.46: Diamond Drawing
(8/21/2021) An attempt to make a simple diamond canvas function, which works fine except when you try to rotate it. (8/22/2021) Fixed a stupid mistake where I swapped width and height values, now it works perfectly fine.
Project #1.45: Square Packing
(8/18/2021) Same as the circle packing, except with square packing. Faster than the old circle packing algorithm because of the faster calculations for rectangle intersection.
Project #1.44: Circle Packing
(8/18/2021) Circle packing algorithm, currently pretty slow to do only 1000 circles. (8/19/2021) Improved the algorithm some, so that instead of slowly growing and checking for intersections, it calculates the closest distance and then just sets it to that size right away. This makes it faster because there's less callbacks to the same "grow and check" function, but with the downside of having to use lots of expensive square root calls every frame. Update: added a function to calculate if the current X and Y intersects any circles before it chooses a new position for the new circle, as well as making each circle draw once and not having the canvas clear. This sped things up a LOT and FPS averages around 40-60 up to 1000. (8/22/2021) Added minimum circle size and maximum circle size variables.
(8/16/2021) Collatz Conjecture visualizer, lots of unused potential for cool designs, such as randomizing the angle / distance, changing the line thickness, etc.
Project #1.41: DLA Cracking
(8/16/2021) DLA, except it's connected by lines instead of just touching circles, making a cracking pattern. (8/25/2021) Added a change where each time the walker reaches a point it connects to the 2 nearest, making the cracking look cooler.
Supposed to mimic the Sandpile Fractal from this Numberphile video, but I can't get it to render evenly for some reason and I just completely gave up now. Update 7/29/2021: I copied borrowed some code and now it works. Last Updated: 7/29/2021
Project #1.16: Servo
Joint Offset Factor:1x
Number of Arms:6
Alternate Joint Direction:
Actually finished! (7/26/2021) Moved to servo.html.
Project #1.15: Circle Music
Supposed to mimic the circle music from this old Flash game website, where each time two circles touch, they each change diretion and make a noise, but I never got the collisions working properly or any music to be made at all.
Project #1.14: Rectangular Cycles
Tried a variation on dots.html where a circle moves around a rectangular path based on the current angle, but it ended up being pretty complicated and I decided not to try to turn it into a full thing. Last Updated: 7/25/2021
Project #1.13: Gravity Simulation
Gravity simulation. Last Updated: 7/25/2021
Project #1.12: Tangent Moving Circles
Experiment where circles find the closest neighbor and then set their size equal to that distance, so no two circles overlap. (8/21/2021) Made the circles direction based on velocity and angle, so that its angle can change and have more interesting movement.
Project #1.11: Dots
Dot Offset Factor:0.3x
Number of Dots:24
Actually finished! (7/24/2021) Moved to dots.html.
Project #1.10: Random Person Generator
Random person generator. Their characteristics - like hair, skin color, height, body type, etc. - are determined by a seeded random number generator using their name as the seed. Last Updated: 7/16/2021
Project #1.9: Biome Scene Generator
Biome scene generator. I want it to create a grassy landscape with flowers and trees and clouds, with the option to generate different biomes, using a set seed. Last Updated: 7/10/2021
Project #1.8: Bouncing Block
Bouncing block simulator. I want it to squish against the floor and walls when it hits and bounce back some, with customiseable squishiness, bounciness, gravity, etc. Last Updated: 7/1/2021
Project #1.7: Bubbles
Bubble simulator, ideally the bubbles will connect to each other like (][) as they float around. Never got it working properly, the bubbles don't float convincingly like real bubbles and I never even tried to figure out how to make them stick together. Last Updated: 7/1/2021
Project #1.6: 2D Shooter
Supposed to be some sort of Risk of Rain-style game with abilities and cooldowns (WASD/arrows to move, click to shoot). I never managed to figure out why the shooting is so completely off, and I never got the cooldowns or separate abilities working. I want to have randomly spawning enemies shoot at or attack the player. Last Updated: 6/30/2021
Project #1.5: Olympiad Windmill Problem
Supposed to mimic the "windmill problem" from the International Math Olympiad, the line rotates from a pivot point and every time it touches another point, that point becomes the new pivot point. For some reason, the line simply ignores some points and I never figured out why. Last Updated: 6/30/2021
Project #1.4: ???
I don't really know what this is
Project #1.3: Square Corner Connection
If finished, the corners of the two squares will connect as it turns, making a cool design/loading icon. Update 7/1/2021: Got the lines connecting properly, now all the corners connect as it rotates. I want to add the ability for it to work with any positioning and sizes of the squares, as well as different pivot points, for more interesting animations.
Project #1.2: Random Colored Pixels
Random Pixel Mode: 0 (Random RGB)
0: Random RGB
1: Random HSL
2: Random RGB or Random HSL
3: Random RGB with R = 255
4: Random RGB with G = 255
5: Random RGB with B = 255