—— The Island of Misfit Code ——

(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.

(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.


(3/17/2023) Picked up this project again after nearly 2 years to add some more stuff to it. The descriptions of random modes are more consistent now: R represents an arbitrary random number in [0, 1), so R^R means a random number raised to the power of itself. R1, R2, R3, ... represent arbitrary but distinct random numbers, so R1^R2 means a random number raised to the power of another random number. I also added a bunch of new settings, like R^R^R. I also reworked the program structure so it is easier to maintain and add new rand modes, and added a trailing option.
(3/18/2023) Added different drawing modes. Currently there's (1) random circles, (2) random static, and (3) random walker. Most random settings result in the walker mainly walking in a circle, because the walker turns right if rand() < 0.5, and turns left otherwise, meaning if values are usually over 0.5 then it will typically turn left and make circles.
(3/20/2023) Added more modes and cleaned up the settings, adding sliders for everything.
(3/21/2023) Added even more modes and added more statistics for 1000 random values (used to be just average, now it includes standard deviation, skewness, etc.).
(3/22/2023) Added a new draw mode, circle packing, using the template in Project #2.93, which saved a TON of time from having to handwrite a circle packing algorithm again. Later I also added a "point splattering" mode which draws tiny yellow dots randomly on the canvas, so that the distrubution is more visible. I also added a different static mode, so there's now random HSL static and random RGB static, and they have interestingly different styles, along with implementing a random CMYK generator, which interestingly has reversed behavior (CMYK(0, 0, 0, 0) = white).

(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.

(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/9/2021) Trailing dots behind the cursor, implemented from the idea on https://fahad-haidari.medium.com/build-a-simple-circle-based-physics-simulation-with-pi2-js-edd6d7ce857f?p=711cf788bb. Each dot follows the one before it when you click and drag.
(10/10/2021) Added sliders for all the settings.

(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.

(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.

(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.

(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.

(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.

(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.

(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.

(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.

(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/28/2021) Rotating ellipses tangent inside of each other, using https://commons.wikimedia.org/wiki/File:Nested_Ellipses.png as a reference.
Update: (Later that day) Added lots of settings and sliders.

(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.

(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.

(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.

(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.

(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.

(9/24/2021) Pixel landscape generator, using a similar method to the snowfall generator by averaging rows to smooth the terrain.

(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.

(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.

(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.

(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.

(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.

(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.

(9/18/2021) Butterfly Effect simulation, with 500 double pendulums, each offset by a millionth of a degree.

(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.

(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.

(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.

(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/9/2021) I started the base code for a N-Bob Pendulum system, which at some point I want to implement, using the differential equations from www.researchgate.net/publication/336868500_Equations_of_Motion_Formulation_of_a_Pendulum_Containing_N-point_Masses. Currently, it does literally nothing, but eventually I want it to work like a pendulum with N amount of bobs.

(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.

(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.

(9/7/2021) Generator to help describe and visualize massive numbers.
(9/8/2021) Created the X years, X days, etc. function.

(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/6/2021) Terdragon Curve generator.

(9/6/2021) Simple Heighway Dragon Curve generator.

(9/5/2021) Curlicue Fractal generator, from oolong.co.uk/curlicue.htm and archive.lib.msu.edu/crcmath/math/math/c/c850.htm.

(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.

(9/2/2021) I tried to make a music generator by generating sounds in JavaScript that play when each ball bounces, but it's not very cross-browser compatible and it sounds awful.

(9/2/2021) Just a simple little wooden plank floor generator.

(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.

(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.

(8/28/2021) Messing around with smearing effects made by drawing the canvas on top of itself with less alpha.

(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.

(8/26/2021) An attempt to simulate the Belousov-Zhabotinsky Reaction, using this as a reference. I couldn't get it working at all.

(8/25/2021) Another attempt to replicate the Primordial Particle System from Softology, which I couldn't get working yet again.

(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.

(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°).

(8/21/2021) Some sort of rain simulation / art thingy, I'm not really sure.

(8/21/2021) Rocket game, similar to Guitar Rat, but with rockets and eventually I want to add different modes, like Arcade and Infinite.

(8/21/2021) An attempt to make a simple isometric 3D renderer.

(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.

(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.

(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/17/2021) The algorithm I used to try to generate an all RGB image to upload to allrgb.com (VERY SLOW).
Actually finished! (8/18/2021) Uploaded at allrgb.com/random-walk-e4494s.

(8/16/2021) Collatz Conjecture visualizer, lots of unused potential for cool designs, such as randomizing the angle / distance, changing the line thickness, etc.

(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.

(8/16/2021) Boid simulation, from https://www.youtube.com/watch?v=bqtqltqcQhw. I couldn't get the first and third rules implemented correctly (steer away from, move towards center).

(8/15/2021) Worley noise visualizer.

(8/13/2021) Animated Maurer Rose generator.

(8/13/2021) Line grid drawn using the 10 PRINT command from COMMODORE 64.
(8/15/2021) Added more sliders, I want to have different modes of how the lines are drawn for more interesting patterns.

(8/12/2021) Generative art drawing, using this video as a reference.
Actually finished! (8/14/2021) Moved to generative-sketch.html.

(8/12/2021) Animated Voronoi diagram with changeable distance metric.

(8/11/2021) Random walker that randomly changes its color per step.

(8/9/2021) Brownian Snowflake generator, using 6 Brownian trees reflected around the center and made symmetrical. It works well enough, but I want it to look like the results from https://codegolf.stackexchange.com/questions/42506/draw-a-snowflake, as well as constrain it within a 30° wedge per tree.
Actually finished! (8/16/2021) Moved to snowflake.html.

(8/8/2021) DLA Brownian Tree, but aligned to a grid, and with changeable stickiness.

(8/8/2021) Supershape grapher, based on the supershape equation from http://paulbourke.net/geometry/supershape. It works correctly, but it's pretty boring and I can't figure out what to do with it.

(8/8/2021) Random walker variation where the walkers all start at the same point and walk in a straight line, moving either up or down each step.
(8/18/2021) Added sliders.

(8/6/2021) Random walker shading a plane, from http://paulbourke.net/fractals/randomwalk.
Actually finished! (8/6/2021) Moved to walker.html.

(8/5/2021) An attempt to replicate the fractal planar design from http://paulbourke.net/fractals/noise, which I couldn't get to work properly.

(8/4/2021) Spring force simulation, clearly not working.

(8/1/2021) Metaballs!
Actually finished! (8/2/2021) Moved to metaballs.html.

(8/1/2021) Phyllotaxis spiral generator, mimicing leaf patterns on plants.
(8/22/2021) Added different settings and improved the visual to be more like a plant.

(7/31/2021) Reaction diffusion simulation using this Coding Train video as a reference. For some reason it just completely doesn't work.

(7/30/2021) An attempt at making smooth turning motions for some sprite movement across the canvas.

(7/29/2021) Agar.io-like game where colored cells move around and if they collide, the bigger cell (or a random one if they're the same size) takes up the mass of the other.

(7/29/2021) Chaos Game, using https://www.youtube.com/watch?v=A0NHGTggoOQ as a reference.

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

Not finished, but moved to fractal-spirograph.html. Last Updated: 7/28/2021

Here we go...I'm finally doing it, I'm gonna try to implement the Fourier Series in pure JavaScript. Tutorial: https://www.youtube.com/watch?v=Mm2eYfj0SgA. Last Updated: 7/27/2021
(9/25/2021) Started working on it again, redid the whole code, and now it doesn't work at all.

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.

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

Gravity simulation. Last Updated: 7/25/2021

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.

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

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

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

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

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

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

I don't really know what this is

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.