Create an invisible object where only the shadows can be seen.

Noise that pushes a bunch of particles around on the screen. There is 1 (or more) ‘shadows’ on the screen that push the dust away.

If the shadow runs off the screen it will come back in a bit from the opposite edge.

Settings:

• dustCount is how much dust
• dustSpeed is a multiplier for how fast the dust goes per frame
• dustDieOff is how much dust disappears each frame
• onlyEdgeDust sets dust to only spawn on the edges, rather than anywhere (has some weird visual artifacts when the dust is a nearly horizontal / vertical)
• rainbowDust makes the dust far more colorful
• windScale is the scale of the noise, 1 will wiggle a lot more, 5 is closer to straight lines and slow changes
• fade will leave trails by fading the screen; turning this off is interesting since the shadow will be much more subtle
• shadowCount is how many shadows there are
• shadowForce is how strongly they repel dust
• shadowWindIndependent means the shadow doesn’t always move with the particles
• shadowEdge will show where the shadow shape actually is
• shadowsMove will allow the shadows to move / stop them

read more...

14) Fits Perfectly

Basically, we’ll pack as many circles in as we can!

• retriesPerFrame is how many circles it will try to place before giving up and drawing the frame
• minDiameter is the smallest a circle can be (this should be 1 for a ‘perfect fit’)
• maxDiameter is the largest one can be
• spacing is how much space to leave between circles (this should be 0 a ‘perfect fit’)
• borders will draw a black border on each circle
• fillInside will place circles inside of each other as well as outside, so long as there is still enough spacing
• blackPercent is how many of the circles will be black rather than bright colors

read more...

13) Self Portrait

That was surprisingly fun.

Basically, it will take recursively divide the picture over time. Each time, it will find the node with the largest error (real image color compared to the current random color) and split it in 4, assigning each to the nearest random color from our palette.

• colors controls how many maximum (random) colors will be chosen
• edges will draw the boxes of the tree
• minimumBlock is the size at which it won’t split any more
• resetAfter will generate new colors even this many frames
• evenSplit will split each box into exactly 4; if this is off, each axis will randomly be 25-75%
• weightErrorBySize will split small boxes earlier; with this off, larger boxes have more error because they are larger

If you don’t want to look at me any more, turning off selfPortraitMode will load an image from picsum.dev.

read more...

12) Boxes

It’s like draw a box. But somehow even more. And automatic.

If you let it run for a while, you get some crazy abstract art!

read more...

11) Quine

Making a genart quine? That’s… certainly a thing!

So basically I made a very simple stack based virtual machine. You can check the source code below for what commands it can actually run. It will then run until it outputs enough code to match the input length (or times out). If it happens to output a quine? Woot!

If not, it will randomly mutate and try again.

• cellSize - Change how big the program is (default is 10, theoretically with semi quines size shouldn’t matter)
• ticksPerFrame - How fast the simulation will run
• asFastAsPossible - Ignore the above and run an entire simulation per frame (it could technically go even faster 😄)
• pauseAfter - Pause to see what happened after output is done or a break
• stopAfter - When a single program has run, stop the main loop (mostly useful for debugging)
• randomizePercent - How much of the input to randomly change for the next iteration
• runOutput - Run the output as the next program (otherwise, randomize the input)
• highlightActive - Highlight the parts of the program that actually ran (brighter colors)
• allowSemiQuine - Ignore non-active parts of the program when considering a quine (if you copied the output to the program in these parts, they’d be a quine, so I think it counts)
• allowReadingCode - Allow (new) commands that allow reading our own source code
• allowWritingCode - Allow (new) commands that can modify the code you were originally running
• debugPrint - Print each command run/output to console.log for debugging
• debugSlow - Drops the framerate to 1 fps for debugging
• debugStepButton - Add a ‘step’ button that runs one step at a time (noLoop) for debugging (reload the page)

In addition, you can put in code in the box and ’load’ it to run. This will be helpful to verify quines! I have some interesting code below (including a hand written quine! That uses the self reading instructions).

If you manage to find a quine organically (or write one), I’d love to hear what it was!

read more...

10) Polar coordinates

CIrcles within circles within circles.

read more...

9) Cellular automata

Just a bunch of random rules, with the ability (if you put this in p5js at least) to add them pretty easily.

This one can do some wacky things if you randomize it. But also, it might crash your browser tab on some of these settings. Sorry. 😄

Try:

• Perlin, Max, fuzz, diffuse

read more...

8) A city

Simple parallax graphics and (slowly) blinking windows. I enjoyed this one.

read more...

5) Boolean algebra

So the basic idea here is to recursively divide the space. The black squares are the randomly chosen values. Then, for each level of the tree, combine the children using one of the selected functions (and/or/xor/etc), drawing a border if the result of that combination is true.

Try various combinations of settings!

read more...

5) Lights on/off

😄

(Turn on flickering.)

(If you dare.)

read more...