Another exploration of a sci fi landscape. Everything is algorithmically generated. CreditsThe 3d bits were built using three.js.

This is another algorithmic exploration of geometry using three.js. For this one I took the time to figure out how to hack into the three.js shader system.

I decided I wanted to do a bit of fun 3d work. This rendering combines three.js with 2d canvas rendering. CreditsInspiration for the piece comes from Dan McPharlin. I didn’t really realize how close I got to the original until after I had finished it, so kudos to his work. Texture from SEspider Productions and Pixologic, used under CC license. The 3d bits were built using three.js.

This is a variant of the draw explosions sessions.

This is based off of the previous canvas session, but this time with drawn interaction.

A swarm of spheres.

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…

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.

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.

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.

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.

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.

Small swimming entities find food near them, and eat it up.

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.

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.

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…

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.

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.

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.

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…

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.

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.

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…

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…

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…

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…

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…

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…

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…

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…

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…

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…

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…

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…

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.

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…

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…