Back in 2012, I built The Useless Web, a portal to the weird of the internet. Now, I’m tracking down how those sites came to exist.
When The Useless Web was built, honestly, I was on a broad search for everyone all sorts of weird sites here and there, but didn’t put a whole lot of research into them… they exist, people all over the world have been spending time creating all sorts of useless wonders. Now, I’m going back and trying to find out the what, when, where, and why’s of these sites.
The hub for them, is here, a subdirectory of the main site. As the sluthing continues, and the emails roll back in, I’m updating it with the backgrounds of these sites.
I’m also using the service to try to appeal to anyone reading, I’m seeking out any information on sites are very difficult to find information about, The Pigeon for example.
In an attempt to learn a little more about the web audio API, I created a mosquito from nothing!
This bite sized weekend project started out innocent enough, I wanted to mimic the noise of a mosquito using tech on the web.
The initial steps were easy. Listen to some mosquito videos on youtube (yes, they exist!). Create an oscillator to mimic the most annoying mosquito pitch possible. Then, get into the mind of the mosquito, to create the random pitch and volume variations that drive someone insane.
I had originally planned to build this out like an API, so people could add mosquitos to their website. Maybe hook it into the mouse movements, so you could “play” the mosquito so to speak, but the very act of creating it sent me insane.
A weekend project that took a a couple of weekends. Weird books & weird covers.
I’ve had this project in my brain for over a year, and was really waiting for a gap when I had the time and patience to complete it.
Always Judge a Book by its Cover is a collection of all the strangest book titles out there, as well as their amazon links, and a small parody-styled review of the book based on its cover.
The real time suck of this was finding all the books, writing all the reviews, collecting all the links, and then building the site itself.
There are some nice little touches that were fun to build on this project. The drippig effect was done with canvas (could probably be nicer with css houdini in the future.)
The 3d book effects were done with css transforms, and are hooked up to lazy load with the js intersection observer.
I’ve remade inspiring online, with a focus on a slightly longer format.
I’d first made inspiring online in late 2016, and had kept it fairly busy into 2018, and then dropped off completely.
I’ve decided to do a revival, with a little longer format of the posts. Partially because I’ve been putting a little more effort into writing, and trying to improve on it, and partially because I feel that I have the knowledge to give some fun insights into some of these things.
The refresh also has come with a fresh redesign, to accommodate the longer format of writing.
I’ve rebuilt the code from scratch, moving it from jekyll to hugo, which is a lot faster. And hosted it on Netlify, for quick and easy deployment.
A podcast about generative art, to go with the interactive tutorials!
Last year, Ruth reached out to me and proposed the idea of a generative art podcast!
We mulled over the idea for a few months, and then put together a format that we thought would be fun for us to create, as well as educational and inspiring for others.
We’ve got some great guests coming on.
As well as some short chats, where we kind of completely got off-topic and found the chat interesting enough to publish.
We’ve combined the podcast into the generative artistry site, so you can get all your tutorials and blog posts in the same place.
The podcast is available in all the cool places too!
A while ago, I stumbled onto this beautiful video. A music player that counted up with binary, playing notes on each particular 1, and being silent on each particular 0. In the video (which I do think everyone should listen to!) the creator has also added some background sounds, and is also using real piano notes, so it is definitely a lot more beautiful.
That said, it was still something that I wanted to replicate on the web, using Tone.JS.
I also went ahead and added the ability to customize the notes, and share the individual creations with others via url parameters.
There wasn’t really any need to use a framework (other than Tone.JS of course), so its all relatively vanilla JavaScript, so if you take a peek at the code, it shouldn’t be too insane.
Perhaps the most important quiz thats ever existed. Hear the ‘wow’ and name the movie.
With all these serious projects rolling through, it was time to get back on the joke train. This beauty was an idea I’d had with some friends back in Australia… it was one of those things you just can’t ignore. A friend of mine Tobias jumped in, and we made a quick weekend of it.
The idea is fairly simple, you hear Owen say “Wow”, and then you need to guess which movie it was from.
We got pretty good at it by the end, even scoring a perfect 10/10.
Although that said, having built it gives you a bit of an advantage. Check it out on the link below.
I’ve open sourced the magic behind the generative artistry website, aptly named tutorial markdown
Tutorial Markdown is a javascript library that reads onto a small extension of markdown syntax, allowing for self coding tutorials like these
Interactive blogging is something that had been on my mind for a long time, so it was great to finally get this out. It involved really picking apart the way that we write code, and finding a way we can explain it in terms that aren’t overwhelming at all.
I’ve added a lot of documentation in there as well, but of course am happy to help anyone getting started!
Generative Artistry is a small venture I’m making into blogging actual code! Including something I’ve been thinking a lot about, self coding tutorials.
I’m super excited about Generative Artistry, its going to be a great avenue for me to explore technical blogging, as well as an experimentation into how people learn to code. There’s been a ton of encouraging feedback, that is leading to my next release, which will be called Tutorial Markdown, a markdown style for interactive blogging.
The site itself is a simple blog, built on hugo, a static site build built with GO… its primary focus is speed.
The site provides a list of tutorials, simple as that.
The tutorials are where the magic really happens, as you scroll through the posts, the code is compiled together in a small editor (to the top left), and then executes in an iframe at the bottom left.
This means that as you’re reading the post, you can scroll back and forth between code examples and see the difference and steps. This helps build a much stronger understanding about the code thats heading into the editor, and can hopefully help to foster a better learning process.
Edit: Tutorial markdown is now open sourced, for those looking to build something similar
I’ve had a big swing into generative art lately, and this talk has been a big part of my research, discovery and exploration.
This video is from JSConf Australia, when I first gave this talk. Since then, I’ve given it in a lot of different formats, and from a lot of different angles, including workshops and lightning talks. Generative art is rich with avenue’s for exploration, inspiration and all round fun!
The Zen Zone is an exploration into what it takes to slow myself down, switch off, meditate.
The idea behind the Zen Zone has been sitting in my head for a year or so now… the thought that I sometimes get stuck focusing on a simple boring task, but when I’m supposed to be focusing on something, like work for example, I find myself wandering aimlessly.
After using Vue recently for the What Have You Made Today extension, I decided to rock back to React for this one. Honestly I feel that both of them are very similar when it comes down to designing and ideating while you create… so no harm dancing around a little bit.
I set out to build a few simple “games” that would keep me captivated, and went in search of inspiration outside of the regular web circles.
The Switches game is inspired by… well, every day switching on the lights. As well as that little satisfaction you can get when animating things nicely in code.
The Swirl game has been inspired by the Japanese zen gardens, of which monks would focus on to help clear the mind.
The Break game was inspired by the general nature and make-up of all things. Everything can be broken down into smaller and smaller pieces.
The games are stitched together in a way that makes me feel like I can expand upon these games easily, add more to the platform, and grow it out when I feel.
Having launched the project, there is a lot to be done straight off the cuff design and development wise. So lots do do still!
Had a blast at JSConf Asia! I’ve been talking about the journey of creation for a while now, and am always changing how I want to present it. This is one of my favorite renditions.
Honestly, JSConf Asia was really top notch this year, I met an incredible group of developers from all different backgrounds. Could barely sleep afterwards. I highly recommend it to anyone thinking of going!
Canvas JavaScript polyfill for the vital and pivotal S we all drew in school.
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.
Sadly, this received a takedown notice from monotype and their lawyers… so this is all that remains of the project
[Smelvetica] was 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”.
With the fonts completed, the remaining work was to wrap it all up with a nice web page, and some installation instructions.
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.
Edit: Sadly this was subject to a takedown notice, you can see the brief conversation in the github repository.
“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.
The talented Jag Talon and I talk life, frontend and just generally hang out!
Friends Talk Frontend is an delightful podcast of developers discussing how they got to where they are now, and what their day-to-day life. In general, its always a good time!
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.
EDIT: Sadly, Bumpers.fm shut down, and I ended the project with that. Was fun though!
Things you probably didn’t know about, in 5 minutes or less!
I recently “bumped” into bumpers.fm, a cool little app for recording small audio casts. I figured why not, and so “OK, Get This” was born.
The goal of this “podcast” is to highlight weird and wonderful events, happenings and coincidences in the world, and then talk about them for 5 minutes or less.
For example, The Emu Wars in Australia, or the history of tug-o-war fatalities, yikes!
The individual episodes are also embeddable, which is cool, and make for nice little sharable snippets.
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.
Sometimes you find a few hours free in your life, and try to fit a little project into that.
Console dot frog is perhaps my most important creation to date. No longer shall I debug with the simple monotony of regular logs… for now, there are frogs.
So, here is a simple explaination. I think its supreme utility speaks for itself.
// Here is you, logging some logsconsole.log("Boring.");
// And here is your output.
Boring.
And here is how console.frog can improve your life.
// Here is happy you, logging some logsconsole.frog("Amazing!");
// And here is your output.
_,-. ------------
,-. ,--' o ) -( Amazing! )
\(,' ' ,,-' ------------
,-.\-.__,\\_
\(`--' `\
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.
The Versioning Show discusses the industry of the web from development to design, with some of the people making it happen today, and planning where it’s headed in the next version.
The opening question of the versioning show ask which version of “myself” am I currently, which is an awesomely unique way of kicking off a podcast.
Its always great when a podcast just flows nice and easy, all credit to Tim and David there for being awesome hosts.
EDIT: Looks like the audio’s dropped off from this now… can still read the script though, if you’re a hyper fan!
Elevator music for when you press those “back to top” buttons.
Elevator.js strung out from a small hack-day experiment, while I was working at tumblr.
The library is fairly simple, but again was a fun learning experience. When you hit the “back to top” button, it plays music, as though it were an elevator scrolling to the top.
Technology wise, its all vanilla JavaScript, and a single MP4 audio file. The trickiest part of this was getting the scroll to act smoothly, for this we needed to incorporate some easing algorithms.
Naturally, I built a small web page to show it off as well… although you should probably visit the site to actually see it in action.
The library was built to be able to take in any music file, so its pretty malliable. In the time the library has been out, I’ve spotted it on a lot of websites, including one for Google IO.
EDIT: Woah, this got super popular. Now is my most popular open source project.
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.
EDIT 2: Chrome 58 has brought this back, woo!
EDIT 3: Chrome 60+ this was taken away again. RIP.
In light of how amazing web development tools have become, last week I got to thinking, what could I do to make development much much harder.
BlueScreenOfDeath.js is a small script you can add to your webpage, that will catch any error that its thrown, and more or less, make it impossible for you to debug what was wrong.
When the error is caught, the script strips the page of any elements it may have had (so we’re down to just an empty body tag). It will replace it with the classic Blue Screen of Death style.
It will also spam the crap out of your web console, effectively making it impossible to see what the error was in the first place.
And then, naturally, I couldn’t help myself but create a “bleu” version.
ZenPen is a simple text editor, that I built based off the medium editor back in 2013.
As it turns out, building things with the rich text editing api can be a super frustrating experience, but on the flipped side, building something on top of it is super rewarding.
ZenPen remains one of my most popular open source projects, it combines a lot of cool web APIs to bring the product together. It was also a explore designing something with a minimal interface.
Intense Images is a full screen modal built for high definition images.
The Intense Images library came out as part of the Aquatilis project. It allows you to click on images, and experience them within the full browser window, with little to no overhead.
You can see it active in the image above, but I really recommend checking out the live demo, to get the full experience.
In this talk, I journey through the badlands of CSS, digging through the strange nooks and crannies, and showing how the prankster plays..
For this talk, I made my own presentation framework, that more or less exploded into a big jokey system, complete with star wipes, x-ray mode and motivational queues.
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.
When I’m building websites, I like to put in easter eggs here and there. For the most part, I get personal enjoyment out of it, although I guess its a weird way of procrastination.
DOM animator animates a small ASCII image within the code of the page, which will be visible when someone is inspecting the source. Great for getting the attention of developers, or for overall fun.
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!
A website to collect and display all the wonderful filler text generators in the world.
Meet The Ipsums was built over a week or so, with the designs and direction coming from good friend, and awesome designer Claudio Guglieri.
I’ve always been a collector, this website showcases filler text. It turns out there’s alot of them… Cat ipsum, coffee ipsum, Ryan Gosling ipsum… the list goes on!
Its always a fun time building things with friends, but then also opening up the website for submissions via GitHub.
Giflinks is a jokey exploration into just how intense we can get hover interactions going.
Caused a bit of a stir when it came out, but for the most part, people realized it was a joke. Check if out for yourself if you are a fun happy person.
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.
Texter is a small experiment, where I moved a Flash project from a book, over to JavaScript… it really helped me focus on the language, rather than what I was making. Comparing how Flash rendered items, to how the JS canvas does it.
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.
A small experiment into hiding tweet and facebook buttons, until they’re truly needed.
I’ve never been too crazy about social media, but there’s no denying that having a Facebook or Twitter button on your site can be a nice little boost.
These buttons are the result of a small experimentation, checking to see if I could hide them discreetly, but still have them active and available on the page if someone wanted them.
The idea generally was to show a small icon, and then reveal the actual twitter button.
There are so many different ways this could be taken.
A small experiment in combining flocking algorithms with line art.
In this experiment, I combined some flocking algorithms I found online, with some open source “brushes”, borrowed from this cool drawing project
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.
Hi there! Thanks for checking everything out, if you have any questions (at all), please shoot me at ~ timothy [dot] w [dot] holman [at] gmail [dot] com
