unicornsfartpixels is an online notebook cataloguing the always expanding web development landscape & creative side of code.

November 05, 2016

Shine Bright

Well, yesterday was a definitely a Codevember fail on my part. Turns out Friday night just not the most ideal night to stay in and code, 🍻! But since I missed a day, I figured I’d take a stab at something I haven’t really tried before: WebGL. I’ve heard so many varying opinions about this API over the years, that I’ve never quite found the courage to try to use it. But today I finally got my chance: my flight to Paris was delayed by two hours (thanks easyjet 😒🙄) and I had no access to the internet. It was just me and my p5.js editor, which if you didn’t know, comes with a bunch of example programs that you can play around with.

I picked the Sine Cosine in 3D example, and tried to dissect it, which actually wasn’t so hard to do. To be honest, of all the things that I expected to trip me up - like getting some control over the way my shapes moved, or how they were positioned in, space for example - it was the lighting in the end that took the most thinking to figure out. There’s just something about the reversed grid in computer graphics that throws me off… but unfortunately (or fortunately,) without any lights, your shapes end up looking pretty flat, so you don’t have much of a choice but to figure it out.

See the Pen #codevember 05.11.2016 by Eliza SJ (@elizasj) on CodePen.

After looking at a few other examples, I started to understand how to position the lights and manage their intensity. I went for a really high shine effect, to give the shapes a delicate, diamond-like appearance, which to me works quite well with the story the movement is telling.

Speaking of which, I always aim to create a ‘natural’ feeling in anything I animate. If I can, I try to void the (all-to-common, imo) fail-safe sine/cosine spirals that look like they were ported from a scientific calculator (here’s looking at you Texas Instruments!) So I tinkered away at the size, rotation and spin until I got a looped movement that felt like it kind of had a little narrative all to itself.

Thoughts/comments? Tweet me!