The web canvas is a powerful tool, the API is fairly straight forward, and provides us with the tools to draw almost anything. Circles, squares and lines are the building blocks we have used since the dawn of time…
That said, there is also one other basic shape… that we all learn in school… passed down through generations… as old as time… no one really knows its origin.
Got a little sick of my old “new tab” page, so I built something small to replace it.
The idea of this little project was to build something that replaced the default “Chrome” new tabs page, which, although good, would be a little frustrating at times… it would load a whole google search bar, when really I was using the browsers URL bar to search anyway. It was also sending off requests this way and the next, which weren’t really neccesary.
All I really wanted was a simple speed dial, and some motivational text. So thats what I did!
One pleasant surprise, was that the FireFox addon’s use exactly the same api’s as Chrome, and that there is a whole documentation amongst browsers, about how to implement said extensions. Yay for standards!
A couple of months ago, I did a little commission work for Electric Object, in the form of Abstract Clocks. While working on the clocks, I ended up creating a bunch of different proof of concepts and directions. This was one of them.
The initial idea for “Tetris pieces” was to create a bunch of small video game demo’s that would use AI to play on your wall, I had looked at snake, a brick breaker game and a maze solver. Ultimately, I found myself drawn to the different renderings of Tetris games. It was so mezmerizing watching tetris play out automatically on the Electric Object, I had to stick with it.
To begin the project, I began researching tetri’s AI’s, and immediately found one that was absolutely perfect built by a very talented developer, Yiyuan Lee.
You can read about how the AI works in the post linked above. Here’s a snippet about how the AI decides where to put each piece. Its definitely worth the read!
To meet this goal, our AI will decide the best move for a given Tetris piece by trying out all the possible moves (rotation and position). It computes a score for each possible move (together with the lookahead piece), and selects the one with the best score as its next move.
The score for each move is computed by assessing the grid the move would result in. This assessment is based on four heuristics: aggregate height, complete lines, holes, and bumpiness, each of which the AI will try to either minimize or maximize.
From this point, I forked the code and set my mind to hacking how the pieces were drawn, so I could have multiple different looks and feels.
These are, from left to right.
1: Ambient Blocks, in this version the tiles take up solid block colors. As the game goes on, the hue of these colors rotates very slowly, meaning whenever you look at the wall you should see slightly different colors. This playful touch made it my personal favorite.
2: Classic Tetris, in this specific rendering I’ve copied the colors and patterns from the original GameBoy game, including that ever present green tinge.
3: Colored Classic, using the colors of the tetris game that appeared on Super Nintendo, the colored tiles perhaps look the nicest on the screen, and definitely bring back some nostalgic feelings!
All in all, the project was definitely a good experience. When you have to plow into someone elses code, with no background its funny what you can learn. Finding and editing the code that renders the tetris pieces to the canvas was a little tricky, but ultimately very rewarding.
“If you really hate someone, teach them to recognize bad kerning” ~ XKCD
Smelvetica is an experimentation in taking one of the worlds most beloved fonts, and turning it into a morbid monstrocity.
This project began by pulling the original “Helvetica” font from my system files, and making a copy of it. From there I opened it in FontForge, which is a brilliant open source font editor.
From here, the task was fairly simple. I opened up each “version” of Helvetica (these being bold, oblique, light etc), randomly went through the capital and non capital letters and moved them around within their guide grids. This had the desired effect of ruining their beautifully crafted kerning, as such, creating “Smelvetica”.
The installation ended up being the most devious part of the prank in the end, since it would install on the system it makes it really difficult for anyone to understand why everything looks just that little bit wrong.
“Remember everybody, the crisper is for green vegetables only, anything else found in it will be thrown out at the end of the day.” ~ Passive aggressive post-it note.
One of the funnier things I found from office life was the small messages that would blast out to the whole company “There’s a fire drill tomorrow.”, “The coffee machine on the first floor is broken” etc. Now that I’m working remotely, in a weird way, I miss them. As such, the passive agressive office simulator Slackbot was born.
The core of this slackbot is the npm module, slackbots, which honestly made the whole process a breeze. The bot itself is broken into a few key pieces.
The first piece, is the scheduler, which will take specific actions (namely sending a passive aggressive message), and give it a time to be shared with everyone. These are generally within work hours.
The second piece is a “ticker”, which keeps the script checking the time, and seeing if there is anything that needs to be ran.
The final piece, is of course, the messages themselves. They were all hand written by me, and also include wildcard variants… so something like the day of the week, or a piece of stationary (please put the stapler back where you found it!) could be switched out, to add a small extra dimension of randomness.
Another little piece, which I felt gave it that little bit of extra “officey” cringe, was follow up messages. If your office is out of ink, you’ll be sure to get another message when it gets back in!
… 5 days later
Building a slackbot was a fun way to spend a day or two, honestly, the amount of articles and support docs out there makes it one of those technical, yet quickly rewarding projects!
Animations for the strong of heart, but weak of mind.
As you’ll know, if you’ve been following my projects for a while, or seen any of my talks, one of my favorite things to do is find something thats good, in this case, the increasingly awesome set of CSS api’s for animations, and see what terrible things can be made from them.
Obnoxious.css is an exploration into what kind of freakishly frustrating things you can do with CSS animations on the web, the project itself is modeled after Dan Edens Animate.css.
The key to bad animations is fairly simple really, make them move to much, make them run to long, make them flash and jitter! All of these terrible components have been compiled into the Obnoxious.css library!
The crowining glory of these animations, is “fontalicious”, which contains a devestatingly frustating series of font changes.
I always find that when you explore the way things SHOULDN’T be used, you get a little bit of appreciation for how good we ultimately have it.
I recently talked to Electric Object about building something on their platform for their artists program, this is what I came up with.
When I was looking into what I could do on the Electric Object, the biggest thing that stood out to me was that not many people were taking advantage of the fact that it can run a browser, and as such, can display something made programmatically on the fly, or change with time. Instantly I wanted to do something with time.
Over the years, I’ve amassed a large collection of clocks and timers on CodePen, which served as a big inspirational source. The general idea here, is that the clocks would be abstract and difficult to read, but after spending a week with them it would be as easy to read as a regular clock, in a sense, the same way people are able to read time from the sun.
The theme for the clocks came as a combination of the original circular clock face, but instead using gradients as clock hands. From here, a lot of experimentation and explorations occured, resulting in the 5 “types” of clock.
You can read about how to understand each clock, on this little web page … some of them are a little trickier to get a handle on than the others, but ultimately learnable.
In season x, episode y of Rick and Morty, there’s a particular scene where Jerry is listening to the radio in the car, within a simulation of earth running at 5%, as he listens to the music it plays close to the most simplistic audio you could imagine.
I fired up ole Garage Band and had a go at re-creating it, and a few more inspired versions.
All up, I made 7 or so “human music” pieces, and wacked them together into an album for my soundcloud debut!
And of course, any project wouldn’t be complete without a little sharable web page.
A project aimed at creating a simple inspirational open source blog, that could be a launching point for people beginning to look at git/github and contributing to open source!
This blog was a fun little one to create, the aim of giving myself a simple area that I can share inspiring and creative work as well as a simple repository that I could use to help people kick off contributing to open source, either in person or online.
The design was a fairly simple isotope layout (thanks Dave!), and dark color scheme… really, the content speaks for itself.
This is the kind of project that grows slowly, but always has a place in my day-to-day life… fixing bugs/helping new contributors/adding new sites.
On the extra nerdy side, I have a script that I use to add posts from the command line. This creates the new post file, setting the date, and linking the image files needed to add a new post. Its not really needed, but means that I can create a new post without opening the text editor, or manually moving images around.
My personal take on the “fork me on GitHub” banners.
For a long time, I have used “fork me on GitHub” banners on my sites and projects, for the most part because these were regular go-to of most developers. I decided that I’d like to create something a little more modern and playful, and as such, this project was born.
Technically speaking this update isn’t really too much of a reach, but is one of those projects where you can do a little to get a lot.
I moved GitHubs infamous Octocat into the corner, as an SVG, and then seperated its arm in sketch, so I could add some CSS animations to it.
The animation is added with CSS, which means people can use it if they like, but its not going to be mandatory. The animation is added by default on hover, which will allow it to wave.
There are a lot of other advantages to using SVG, over the “original” github ribbons, one of the biggest is that the colors are totally malliable, you can change a single CSS property and have it change, rather than having to pull out and change a whole image (with text).
From here, I built a little site to offer the code, which was made to deliberately show off some of the colors and options available.
EDIT: There’s some great discussion about how to use CSS blend modes, to blend the github corners seamlessly with any background, including those that are not a flat color. Given the future, when blend modes are deeply rooted in the web, or for people not too worried about much older browsers, this is already an awesome option!
EDIT 2: Some awesome people have made tools to build your own custom corner. Ultimately I’ve left this GitHub issue open, just incase I decide to build an “official” version.
EDIT 3: Honestly seeing these all over the web. Always makes me proud.
Every now and then you find some interesting browser quirks that catch your eye, they’re always worth exploring!
In this instance, I found that if you are tracking the scroll position with an event listener, when you try to scroll down, beyond the end of the page, or up, beyond the top of the page, you still get values coming back. Which means the browser is telling you, the scroll position is in those “overscroll” areas.
Once I found this out, it was a matter of wiring up some functionality to them. I went with a small easter egg.
And on the top.
EDIT: Looks like of chrome 51, this doesn’t work… leaving us only with safari.
Palettab (palette ~ Tab) is a chrome extension built with my wonderful friend Claudio Guglieri. The thought here, is that every time you open a new tab, you will be greeted with a beautiful color palette, and a selection of fonts you haven’t seen yet.
The fonts are all available via Google Fonts, and the colors come from Colour Lovers. There are thousands of combinations, so its rare that you would recognize two of the same, even after using it for months.
Of course, we built a small webpage for sharability as well!
To date, the extension has around 30 thousand active users, which feels great.
Actually I lied, there are some cool tricks here! I always say you can learn something even from the most simple projects, and “The Finger” is no exception.
I needed to look into translating between one color and another. I read into this, and made sure I understood all the math. In the end, used an answer from Stack Overflow (because why re-invent the wheel), but at the same time, its always important to understand what you’re putting into your site, especially if you’re copy pasting.
EDIT: I also recieved an awesome pull request, allowing you to tilt your phone, to effect the ammount of finger the page is giving. Check it out on your phone.
Aquatilis was the kind of project that comes along once in a blue moon. Beautiful photography, russian dive team, oceanic adventure… how could anyone turn it down!
The Aquatilis expedition website was a project undertaken by a friend of mine, Tobias, and myself. Entailing the goals and ambitions of an experienced dive team… in their own words.
Our custom-built expedition yacht Aquatilis, will carry us through the world’s oceans for three
years. The places we sail to will take our breath away with their beauty, or with their danger.
The use of the most cutting-edge technology will give us the opportunity to scrutinize gelata in
their natural glory. Our experiences will be broadcast all over the world, encouraging everyone to
embark on their own journey of discovery.
The goal of the website was to be visually captivating, yet still get across the message and goals of the expedition.
The photography was so vivid, that it really pushed along the art direction in an incredible way.
There are several pieces of this website, that I found particularly enjoyable to build, and that find a nice way of having a powerful impact, while being subtle and clean.
When building this, the pieces that I felt could be abstracted, and shared with the world, I did! These include intense images, a library to show a clean full screen modal.
Also, if you look very closely on the website, you can see small things swimming around, as though they were in the ocean. You can check that out, on CodePen.
You can look at some of the original designs, and mood boards here.
While I was stuck indoors during hurricane Sandy, in 2015, I went down a strange rabbit hole of weird websites. Some of them didn’t seem like they should exist at all, and some (like eelslap) were incredibly perplexing.
I gathered as many of these sites as I could, and put them all into a small website, which I called The Useless Web.
It was through this simplicity that the website gained popularity, hundreds of thousand visitors a month!
Imagine your in-laws are helping you with a password… this is what they’d say.
I always irk a little inside, when a machine tells me something that I’ve done is wrong. The most common form of that, is probably passwords. “Your password is too weak”, “Your password needs to contain a number and a special character”.
While I absolutely understand why they need to be this way (they’re looking out for us!) … that said, its the jarring interaction that I wanted to focus on. What if they said meaner and meaner things. Thats what this website is all about.
This was done in collab with a new friend of mine, Tobias, who worked with me on the designs and interactions.
You can see a small pic above, but I really recommend checking out the live demo. There’s a link to the source below too… some cool stuff in there about the speed of mouse movement, and angles of direction.
The brushes work by saving single coordinates on the canvas, and then cross checking themselves with every other stored coordinate… they then apply different behaviours based on their proximity to the others.
Clicking on the screen with change the “brush”, as well as some of the properties of the flocking logic… this means the possible outcomes are pretty much endless.
I really love these clean canvas experiments. Somehow finishing them up feels like I’ve made something “complete”.
Experimenting with Image data in the canvas. There’s always fun to be had!
This is one of my earliest experiments (of course writing this from the future), that said there were a lot of great things to learn.
The canvas is (was) fresh to the web, and there was (still is!) a lot of experimenting to do. In these experiments I am loading image data in and checking it in the format of a grid (which color is this pixel, 10 pixels from the top and left, 20 pixels from the top and left, 30 pixels etc)
From that data, I decide certain things, “how dark is this”, or “what color is this” and then made different renderings from that information.
The custom controls here are using DAT.GUI, which is a great utility to use when building projects that have lots of workable variables.
I’ve added both of these projects to CodePen, where you can play with, and edit the source.