Unicorns Fart Pixels

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

Sine/Cosine == Circles?

As I’ve been studying the The Book of Shaders , I’ve spent a fair amount of time on chapter 5, Algorithmic Drawing . It deals with one-dimensional functions and understanding how to take the result of a Lerp , which we looked at last time , and shape it into something new…

Lerp & Normalization

While my foray into the mysterious land of shaders has thus far had me happily experimenting with ready-made examples, I’m at a point where my mind is comfortable enough with the c-like syntax that I wan’t to start building from the ground up. No more playing around with things…

Intro to Shaders (pt.3)

Using data to power animations is one of the most interesting aspects of programing to me. However, pairing data with raw GLSL can be a bit tricky. Which is why I chose to dive into shader language via Three.js. Shaders alone can’t easily handle (if at all) the amount of data and…

Intro to Shaders (pt.2)

Graphics demand a lot of your computer because rendering them means your machine is doing pixel-by-pixel calculations. Each and every digital dot needs to be computed. Imagining all the computing involved in 3D animations sets my head spining - things like color & location, but…

Intro to Shaders (in Three.js)

If you’re interested in textures or are curious about how you might digitally render out something that looks more organic than it does, well, digital, shaders might be for you. That’s what got me interested anyways, in taking on the notoriously complex language. If you’re not…

2018 - Looking Forward

After the chaotic year that was 2017 I almost didn’t want to repeat this whole goal setting exercise. But when I look back on what I set out to achieve last year, I have to admit that I’m pleasantly surprised by how many of the goals I’d actually honoured, despite the tumult that…

Japanese Fireworks w/Mo.js

In November I took part in the Codevember challenge, which if you have no idea what I’m talking about, is a yearly month-long creative coding challenge. The concept is pretty straight forward and fun: make a sketch a day, and share it online with the the hashtag #codvember…

2017 - A Year In Review

A few days late but hey, if last year taught me anything it was how to be flexible when it comes to the timing of things. So 2017… What a complicated year. And not only because of world events and the crazy politics that govern them. Shortly after I highlighted my excitement…

Visualising Sound (pt2): Three.js

Visualising audio using three.js isn’t all that different than doing it with the p5 library. You use the FFT to analyze and isolate frequencies, which you then use to influence and act on certain aspects of your visuals. Things like shape and size, colour, rotation angle… N.B…

Visualising Sound (pt1): The FFT

The Fast Fourier Transform is what got me started with data visualisation. There are many other entry points when it comes to dataviz, but I’ve always been really influenced by, and interested in music and the way rythms can play with our senses. It felt only natural to explore…

Update & New Things

I started this blog just over a year ago as new coder, to document the things that I needed to explain to myself and stash away somewhere for safekeeping. This space has been on a brief(-ish) hiatus since may, that crept up on me as Jekyll’s slow churn wore down the enjoyment I’d…

Building @weizenbaumbot

My first encounter with Twitter bots happened last year via Python and involved my building a bot that would receive tweets with a specific hashtag and photo attached, apply an instagram-like filter to it, and retweet the user with the new photo. It was a fun first pass at…

CSS Variables

Sass has always been one of those things on my ever-growing list of things to get to. While I haven’t gotten to it yet , after a recent encounter with CSS variables, I’ve been wondering if I even still should bother at all. Because aren’t variables one of the main reasons that…

2017 - Looking Forward

As last year was my first real experience as a dev, my main goal was simply to keep my head above water. Having survived (!!) I figure for year two I ought to set some slightly clearer goals for myself. Yea, I know… UGH bcs who wants to preepmtively disappoint themselves. But…

2016 - A Year In Review

With the end of 2016 fast approaching, it seems as good a time as any to take stock of the last 360+ days. The past year has been an exciting one for sure, but it’s also been confusing and scary as hell. But before I dive into why, let me give some context: In 2015 I moved to…

CSS Animations - an Introduction

“All you need to get some CSS animation happening is to attach an animation to an element in the CSS. ” - Smashing Mag Sounds simple enough … right ? One might expect that after a first successful foray into WebGL (via the P5.js lib, but still…) CSS animations would be a breeze…

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…

Murky Waters

So far I’ve stuck to some pretty basic animations for my contributions to Codevember , but today I thought I’d try to create slightly more fluid (see what I did there? ⁽(◍˃̵͈̑ᴗ˂̵͈̑)⁽ 🌊) movement in my sketch. The easiest way to achieve that in p5.js is of course to use…

Generating Colors

For day two of Codevember I wanted to see if I could do something interesting with color. Anyone who knows the basics of generative art & design knows that real-time color and gradient generation are not the easiest of things to sculpt, but I figure hey, it’s #codevember! Why…

Codevember 2016

Codevember is officially upon us!! And what better a reason to finally get down to doing what I set out to do when I created this little online space in the first place - that being to chronicle and catalogue all the useful/interesting/confusing code bits and bobs I encounter as…

So it turns out...

…Unicorns fart pixels! That’s why the internet is such a magical place. A magical, exciting, challenging, confusing, sometimes scary, sometimes beautiful place that’s overrun with programming languages, libraries, frameworks, databases, servers, API’s, compilers, oh and let’s not…