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 the topology. CreditsTexture used from SEspider Productions and Pixologic, used under CC license.

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 diffusion system.

...

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 that I then split and move around to control the overall shape of the mask. Making Of Video CreditsTexture from SEspider Productions and Pixologic, used under CC...

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 I then split and move around to control the overall shape of the mask. The Making Of Video CreditsTexture from SEspider Productions and Pixologic, used under CC...

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

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 interestingly as others have.

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 haven’t solved is computing the background in a single triangle draw call. I added an icosphere around the camera which was much easier to handle...

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 in and out of focus. I believe I started this in trying to figure out how to use environment maps in an object. I love that...

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 around a bit. It’s kind of a resource hog. I found out later that the noise functions I’m using grow in cost exponentially for every...

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 my first time to include some post-processing work. With the 1970-1980s retro sci-fi screens in Rogue One, there was lots of art being shared on...

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 by schewing the visuals with some noise in order to make it feel like you are looking at things floating around in an underwate environment.

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 point buffer. The gravity simulation then runs them across the screen. This quickly turns into a scene of chaos and patterns, which is somewhat interesting.

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 series of sequential works can turn into quite a complicated example. These boxes want to stear towards a certain location, but they are also compelled...