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

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

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

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

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

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

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

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

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

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

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

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

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 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 from the same draw function in order to draw the beams moving across the screen. The grid on the floor is pretty close to the...