ENOUGH: Site of the Month, June 2015

What did you want to accomplish with the site?

I've always loved the internet for its connectivity. The hyperlink, in my mind, is one of the most important inventions we as humans have created.

That being said, the internet has some pretty severe limitations. Graphically we are always at least a few years behind native programming, and we lack a few of the powerful tools that they have, such as compute shaders or 3D textures. This limitation does not mean beautiful things cannot be made, but it does mean that many times when we do 3D on the web it is more about gimmick than graphics.

I can't count the number of times that people talk about the how surprised they are that a project is on the web, before and more than they talk about the actual project.

My goal of this project was to make something that was done well enough for people to care more about the content and emotions of the piece rather than the simple fact it was on the web.

What technical challenges did you encounter and how did you solve them?

Pretty much the entire project was a technical challenge...

Each page was sort of a different simulation or exercise in learning how to program natural objects. Whenever you program, it's really fun/difficult, because you have to describe something in its essence.

Although I hate the word "grok", I do think that it aptly describes the sort of knowledge you need in order to explain to a computer what to do. But to "grok" seaweed, or tree growth, or the physics of flagella, is nearly impossible.

I have pages and pages of these sketches of the creature's head or body down to the individual springs that connect the vertices of its flesh self. Once you finally describe the object physically, than you have to make the math / code efficient enough that it will run in the browser, in this case by using gpgpu computing.

It's a bit too technical to go into here, but let's just say it was very very challenging...

What did winning the FWA award mean to you?

Whenever you tell a personal story its really hard to tell if it will make sense to other people. The more personal it is, the more I tend to worry that no one else will get it, or that it will be too mopey, trite, or cheesy.

It's also hard because the more personal the project is, the more you really want to tell others the truth that you have found.

For this project, it was just so much sweat and tears, so much time and uncertainty, so much fear, that before I released it, I was 100% convinced it would fail, or that the story or visuals would only have made sense in my tiny brain, and when others saw it, they wouldn't feel the love that I poured into making it.

That all those sleepless nights, or telling my friends I had to work instead of hang out would be for nothing.

Winning an award doesn't really mean much as far as the "prestige" goes, but just to know that somebody made it through the book, and felt something strongly enough to give the award makes all that work worth it.

It also makes me super happy that it is shown alongside things like e commerce, or company webpages, because it makes me hopeful that more people will start using webgl for not just games, but for blogs, products, and ads as well.

Tools used

Three.js by @mrdoob
Wagner.js by @thespite
Web audio api

Three hot facts

- there is not a single model loaded for the book. All the different structures are made procedurally, or given their form by real time physics simulations.

- every object in the book, aside from the text and the load bar, uses the fft of the audio to aide in its shading. Basically the four closest fft bins are packed into one pixel's rgba, a 1 x 256 texture made from these pixels is passed into the fragment shader, and used to color the objects. Slight variations in those 4 closest fft bins will give a sort of shimmer to the object. Its very minimal, but I hope that even if it doesn't make you think about how it is audio reactive, it should make you feel the audio reactiveness of all the objects in that world. This same technique is used for some of the simulations too, so Mani's tail, or the pulsing sun, are all driven at their core, by audio.

- if you type G.togglePostprocessing(); in the console, you can see an attempt at some pretty effects. It hasn't been tested across multiple platforms though, so don't blame me if it breaks :) also you can get to any of the pages by appending to the URL the page name, which are as follows:


So http://cabbi.bo/enough/#sun - I chose not to include this page selection into the project, because I really wanted to make sure that people experienced it linearly their first time through.



All rights reserved © 2000 - 2015 Favourite Website Awards (FWA) -  Terms & Conditions -  Privacy statement -  Cookie Policy -  Advertise -  About FWA -  Contact