Synthwave Vibes – Canvas Nº013

I decided I wanted to do a bit of fun 3d work. This rendering combines three.js with 2d canvas rendering. CreditsTexture from SEspider Productions and Pixologic, used under CC license. The 3d bits were built using three.js.

Circular Clumps – Canvas Nº009

In a further endeavor to create my own physics system, I started working on correctly modeling impulse colliision responses, where two bodies of different masses can collide with one another. It was a bit difficult to find correct implementations of the formula with adequate explanations. I ended up driving up to my office to grab a book on game mechanics to have a more reasonably written explanation. I was quite happy with the way that…

Sphere Physics – Canvas Nº008

I started building a physics simulator from scratch, because why not? I’d like to write up some of the testing infrastructure I set up for it because it’s kind of fun.

Spiral – Canvas Nº007

This one is more verlet integration, but this time with a spiral. I had something else more intricate in mind, but liked the results here.

Point Clumping – Canvas Nº006

This session has points that get generated, and then clump together. They start to break down when the simulation starts taking too long to draw.

Torn Apart – Canvas Nº005

I’ve never done verlet integration before. I didn’t write on from scratch, but happened upon an old npm module, verlet-system from Matt DesLauries. I was happy about that, and so ended up with this current session.

Exponential Growth – Canvas Nº004

Copy and pasting from the last 2d session, this iteration adds subdiving behavior. Entities must gather enough resources to survive and subdivide. This ends up modeling an exponential boom and bust cycle.

Follow Your Buddy – Canvas Nº002

This not a boids algorithm, but rather is a simple following algorithm. One entity randomly follows another entity, while a few randomly wander to help break up the uniformity.

Tick Tock – Canvas Nº001

This is the first in a new session series, focusing on drawing with 2d. There is something very nice and immediate about working in a 2d space. I’m guessing this series will have more simple output compared to the 3d sessions.

Session 024 - Strange Mold

I created this piece during breaks inbetween sessions at the Eyeo Festival. It had been awhile since I did any creative coding, and it was fun to take some of the existing code I’ve done, and rework it for a new session. This is the first session to use a new implementation of the Catmull Clark subdivision algorithm that I wrote from scratch. The one I was using from npm didn’t work with holes in…

Session 022 - Spore Season

This piece was inspired by some earlier work I did for an animation backdrop. CreditsTexture used from SEspider Productions and Pixologic, used under CC license.

Session 021 - Float Medusa

I hadn’t done a session in awhile, so I decided to iterate on some of my previous ideas with growing geometry. This time I went for more of a jellyfish feel. I really enjoy the ambiance of watching jellyfish float freely in an aquarium. This was an attempt to capture a bit of that feel, and the feel of glowing undersea creatures. CreditsTexture used from SEspider Productions and Pixologic, used under CC license.

Session 020 - Golden Flows

This is my second reaction diffusion implementation. I had lots of different things I played with, but ended up making the system move over time with some sine functions. I also attempted to add a sense of 3d by doing some lighting where I drove the height of the surface by the concentration of particles ‘a’ and ‘b’. CreditsThanks to Karl Sims for the great tutorial on how to implement a reaction diffusion system.

Session 019 - React Diffuse

Reaction diffusion systems have always been a bit mysterious to me. I found a nice article on the theory and implementation of reaction diffusion. This example doesn’t work all the time nor in every browser. The systems are quite sensitive to variability, and I had to tweak some of the scalar values into ranges that were different than what the article provided. CreditsThanks to Karl Sims for the great tutorial on how to implement a reaction…

Session 017 - Cool Demo Bro

This was one that I had bigger ideas for, but I couldn’t implement them in a reasonable amount of time. I ended up pulling the trigger and releasing it as is. So pretty much this one is a “cool demo bro”, and not much else. I will say, this is literally my first time to ever directly use Calculus in programming, which was in of itself exciting.

Session 016 - Asteraceae V.

This session was written near Valentines day. It was supposed to be for my wife, but I gave it away to my Twitter followers first, so I went and bought my wife real flowers intead. It uses quads and subdivisions to generate the parts, and then loops to duplicate the geometry in various shapes.

Session 015 - Antlered Ones

Masked SpiritI have been building up my quad generation tools, and with this session I feel like I’m finally able to use them how I want to. I have a feeling in the next few sessions I will continue to refine these tools to make them easier to use and more powerful. The mask geometry is completely procedurally generated using squares that are subdivided using Catmull Clark subdivision. In general I’m using loops of geometry…

Session 013 - Cells Sticker

This particular piece looks like the geometry would take a lot of lines of code to generate, but it ended up being a fairly terse few lines of codes using my quad geometry tools. I created a box, then sudvidivided it, and finally extruded each cell face out multiple times into space with slight rotations. CreditsTexture from SEspider Productions and Pixologic, used under CC license. Shout out to Eric Arnebäck for his Catmull Clark subdivision surface algorithm…

Session 014 - Masked Spirit

I have been building up my quad generation tools, and with this session I feel like I’m finally able to use them how I want to. I have a feeling in the next few sessions I will continue to refine these tools to make them easier to use and more powerful. The mask geometry is completely procedurally generated using squares that are subdivided using Catmull Clark subdivision. In general I’m using loops of geometry that…

Session 012 - Is An Anenome

The name of this sessions is again one that is directly determined by the size of the space under the text. Another late night invention that I saw as funny. My quad library obtained a new power, that of extrusion. The easiest way to test that this power works, is to extrude a whole bunch of tendrils and make them flop around in the shader. This re-uses a lot of my previous visuals of underwater…

Session 011 - Segmentation

I saw some cool work by @hughskennedy pass through my Twitter feed and I had to give it a whirl. This piece is my first foray into defining my geometry as quads, which has proved to be quite useful. Defining an initial cuboid shape, I went through each quad and subdivide it in one direction. One unfortunate point here, is that updating geometry buffers in WebGL is quite slow, so this one didn’t scale as…

Session 010 - Spheres Orbit

I was curious about exploring reflections with this piece. I boiled down all of the background calculations to a single function that takes a direction vector. This was quite nice for computing the background and reflections of the spheres. Earlier on I had an error computing the reflection since I wasn’t taking into account the view matrix. After fixing it I ended up reverting the fix since I preferred the “mistaken” implementation. One part I still…

Session 009 - Microscopism

I’m quite happy with the organic nature of this demo. The math definitely got away from me on this one, but it looked pretty so I kept it. The camera positioning is completely computed wrong, but I have some of the same warbling from the previous demo. I also combined it with post processing effects to try and give it the effect of a microscope peering down at some microscoping blob, and having it pop…

Session 008 - Star Trakking

As a quick side note, I try to not adjust font sizes on the session pages, but I want the name of the session to match the text above it. So I come up with some arbitrary names that will fit in that space, for this one I chose “Star Trakking” because it was probably really late at night and I found it hilarious. I feel like this was one piece that ended up getting shared…

Session 006 - Sci Fi Interface

Shout out to Mikko Haapoja for this one. He made a series of npm modules awhile back with the idea of creating some sci fi interfaces. I took his npm modules and ran with the idea. I looked up a bunch of reference for what they look like, and then took my own stab. I’m doing some horrible things performance-wise on how to draw the scene, but my machine could take it. Noteably, this was…

Session 007 - The Undersea

Boids are classic, absolutely classic, and overdone. I love them still. This implementation built on the work of Session 005’s instanced geometry, and framebuffer computed positions. Boids is a O(n^2) complexity algorithm. I didn’t really do any optimizations, but threw it at the parallel nature of the graphics card. I used to work at an aquarium, and I’m still in love with the ambiance of underwater environments. I introduced some subtle post-processing effects with frambuffers…

Session 004 - Gravity Waves

I re-used a trick I had done previously in an unpublished three.js visualization. This one takes a large number of WebGL points, and plots them on a graph. In this case there are various sine functions combined together. Next I do some trickery with framebuffers to compute a gravity function in the shader where they all want to go towards the center. The colors of each point are stable to their initial position in the…

Session 005 - A Box School

Getting access to a lot of the raw power of shaders is quite fun. In this example I used instancing support to draw lots of boxes. It re-uses much of the code from the previous example, but implements the same logic with actual box meshes. I got some grief for not doing this the “proper” way as I could eek out more performance, but that’s not the point of these anyway. It’s funny how a…

Session 003 - Dotted Planet

In this exploration, I took it to space. Points in WebGL are quite fun to work with. It’s very easy to create a large amount of points, and adjust how they are drawn on the screen. Up until now I had not attempted any lighting. Using a framework that handles lighting with a normal scene graph abstraction feels natural, while defining light in terms of math function is a bit more intimidating.

Session 001 - Windy Terrain

This is the first “Session” in the series, and my first time really working in regl. It’s quite hard moving from a model where you think in terms of a scene graph, to one in which you think in terms of a draw call. In order to get some kind of quick output, this is one of the easier example implementations. It is a sine wave going through some plane geometry, with a secondary plane…

Session 002 - Beam Network

The second session was a jam on the first one. I love being free to copy and paste code without repercussions. There is a lot of cost in time for properly versioning and supporting shared code. This project is about output. For this first time in this project I explored a full screen background with an algorithm, using a combination of simple noise patterns. I also explored the proper use of multiple regl draw calls…

River - Paths over Time

Launch It Source Code This is a coding exploration inspired by flying over rivers while flying. I was inspired by the paths that they traveled and left over time. Video of Visualization…

Wandering Lines - Move Until a Collision

Launch It Source Code Having been inspired by the work of Anders Hoff, I decided to try my hand at doing some algorithmic line growth. With this piece lines wander through a 3d noise field until they collide with an existing line. The lines regenerate in a diamond space. Video of Visualization About the CodeDrawing lines is interesting because the moment you draw more than one, and care about how they interact, you have a fairly…

Growth - Fungal State

Launch It Source Code Growing geometry as I’ve come to find out is a fairly difficult programming problem to solve. Rather than regenerate geometry and figuring out the algorithms for connecting the topology of additional vertices and faces, I’m playing around with the manipulation of existing geometry. This particular algorithm is similar to other fungus-like growth patterns I’ve seen online. While mine didn’t get the same ordered feel as my references, I did quite…

Growth - Incremental Additions

Launch It Source Code Growth in life is mesmerizing with the intricacies of the structures that are created. This programming poem series is an exploration of what happens with small incremental additions. The first installment features the dynamic growth of a 3d tree structure. Video of interaction The creation process The coding processI knew I wanted to start a growth series, but the topic seemed pretty difficult to even begin, so I started with what was comfortable,…

Polar Space - A Retro Space Game

Launch It Source Code I’m straying a little bit from my programming poem metaphor, and dipping a toe into online gaming. I’m taking a similar approach to my poems and iteratively developing levels for a space shoot ‘em up. It works on mobile and desktop.   Interaction video…

Gravity #4 - Self Attraction with Friction

Launch It Source Code This poem doesn’t follow as strictly to the rules of Gravity. There is some friction that was tuned to make the arrows behave in an interesting manner, otherwise they didn’t stick together enough to be visually appealing.

Gravity #3 - Directed Gravitational Paths

Launch It Source Code NASA calculated orbital paths using slide rulers, this programming poems uses the mouse to direct arrows at “planetary” bodies. I enjoy trying to see how many loops I can make with it.

Recursivity #4 - Repeating Circles

Launch It Source Code This poem is built on a simple rule, take a circle, divide it in half, and then create two more circles. Every time you click, it goes down another level. I also paired it with some WebAudio generators. The circles are slightly offset in their rotation making the circles appear to have been drinking (go home circles, you’re drunk!)…

Gravity #2 - Multiple Black Holes

Launch It Source Code After creating the initial setup, the best thing to do is add even more to it. The first simulation used only one “black hole,” but this one uses 5 randomly spinning holes. I ended up changing the behaviors of the arrows a little bit as well.

Recursivity #3 - Draw a beautiful fractal tree

Launch It Source Code I’m quite happy with the way this particular poem turned out. It’s very satisfying taking an idea and iterating on it enough to where the result becomes an entirely new experience. What’s funny about this particular piece is that I spent more time creating a specialized line simplifying algorithm that could draw cool bezier curves. I ended up throwing away most of that (beautiful) code and going for a much…

Gravity #1 - Black Hole

Launch It Source Code After reading Neal Stephenson’s Anathema a second time, watching Cosmos, and of course that one movie with Sandra Bullock, I’ve spent some time thinking about gravity. This is my first in a series on exploring the math and physics behind it. I’m finding it pretty mesmerizing so far.

Recursivity #2 - Branching Fractal Trees

Launch It Source Code The second poem in my fractal series explores the idea of branching structures. These really are starting to feel like organic vascular structures. The rules are still pretty simple. The biggest tweaking here are some of the ways that the rules change as the depth of the recursion is increased. The default branching rules were not quite as interesting without a little bit of adjustment.

Recursivity #1 - Koch Fractal

Launch the poem. Fork it on GitHub. I’m starting out a new series of programming poems using the idea of recursion. Recursion is done by taking the output of the previous operation as the input for the new operation. Lots of really crazy and interesting complexity can happen because of it. This is how fractals are generated.

Stochasticity #8 - Webcam

This stochastic poem takes the idea of random drawing, but with a sampled color. It take the webcam, and each time one of the “walkers” walks, it draws the color that it finds on the webcam.

Stochasticity #7 - Audio

This stochastic piece dives into some audio. The poem uses the new Web Audio specification for browsers. It’s still a fairly experimental feature in browsers, but it seems like it will be really powerful. This piece sounds best with some headphones. I’d love to continue to explore this intersection between programmatic visuals and audio. There are some issues in Firefox with crackling that I wasn’t able to sort out.

Stochasticity #6 - Weather Vectors

Another vector field poem, this simulation is starting to feel a lot like weather. The rules are similar to last time, but with more of the “walkers”. I find it fascinating how the lines of color converge together as time progresses, and then can randomly split apart. Theoretically if two “walkers” ended up on the exact same point, then they would be merged together forever. However, the location is stored in a double precision float.

Stochasticity #5 - Etch-A-Sketch

This poem is a little bit of a departure form the last ones. There is a vector field that spreads across the entire screen. Each vector is randomly pointed in a direction according to the simplex noise algorithm (comparable to Perlin noise). Essentially the algorithm takes into account 3 dimensions, with the third being time. What’s interesting about this is that the noise can be thought to be a 2d slice moving through 3d space. After…

Stochasticity #4 - Polar Blobs

I changed up the coordinate space and size of the random color “walkers” on this fourth version of the poem. I had to wrack my brains but I remembered polar coordinate space from my high school math class. The sizing difference creates an interesting effect I think.

Stochasticity #3 - Chasing

This third sketch is a variation on #2, but it adds a lot of personality to the random color “walkers”. They grow and multiply this time, again at a random rate. What is interesting about the growth was that I had to make it a linear growth instead of an exponential. The poem was not nearly as interesting with exponential growth because the “walkers” became too numerous too quickly to be visually appealing. The rule…

Stochasticity #2 - Moving Out

This variation on the previous poem changes the way that the probability of the random color “walkers” is portrayed. Instead of walking randomly up, down, left, and right, they walk randomly up, down, and right only. There is a fading a effect that helps visualize how the distribution changes over time. The color of the “walkers” continues to shift randomly as they move.

Stochasticity #1 - Random Walkers

I’ve started a new series of programming poems exploring the idea of stochasticity. What is stochasticity? It’s a fancy word for the process of random events. The opposite of a stochastic event is a deterministic event. Computers are inherently deterministic machines, but I’m interested in the stochastic process for visualization and processing. Heady stuff, right? Well I’m trying to make visually appealing pieces that let me explore these ideas so that I can have an…

EvolveJS 3d

I’m working a new and improved version of the 3d evolution simulator. I abstracted all of the vector math so that it doesn’t matter if it’s in 2 dimension or 3 dimensions. Currently I’m working on updating the UI, finishing up some 3d specifics for determining mouse position in 3d space, and then I will probably tackle optimizing the rendering code. Three.js doesn’t have anything built in that I can tell that is good for…

Artifacts from an Evolution Simulator

It’s amazing to see the various emergent behaviors from developing an evolution simulator. These screenshots are unintended behaviors that are essentially bugs in the functionality. However, these bugs are generally related to the way the entities are taking advantage of properties of fitness in an evolutionary sense.

EvolveJS

I’ve been playing around with an evolution simulator using the latest in web technologies. It’s all built in JavaScript.

Interactive Bait Ball

Here is another example of my schooling fish and motion detection. It’s going to be used in an interactive kiosk to talk about predators and prey, about the strategies used for protecting themselves, and the ones used to exploit those strategies. You must have a webcam for this example to work, and it must be enabled, otherwise it might not look right. You can also view a larger version here. If it runs too slow…

Predator Prey Opening Title

Here is a video of an opening title I’m working on for an interactive kiosk. The fish move based on an algorithm I wrote, it’s not a pre-set animation. It’s modified off of my webcam motion sensitive algorithm I’ve posted about previously which I’ve posted (and subsequently improved). This will play in Flash on the kiosk, but it might be fun to experiment programming animations for more traditional things.

Water Ripples in Flash

Here’s another little fun thing I’ve been programming. Move your mouse through the water’s surface and click to interact with it. The artwork is really just filler graphics at this point.

Swarm Motion Control in Adobe Flash

There are lots of examples on the web of people doing motion detection in Flash. Here’s my own script to add to the mix. It’s for an interactive kiosk, but I figured I’d share the base code as it’s pretty fun to play around with. You can download the code here. I’m releasing it under the Creative Commons Share Alike license. If you use it please include a credit line and a link back to…

Motion Detection in Flash

Most of the time I can’t share what I’m working on while programming as there is nothing really visual to show. This little test that I’m working on is pretty cool though.