Tags: Canvas

Rippulous Pond

Gaze ye into the rippulous pond unto eternity. canvas { object-fit: contain; width: 100%; position: relative; image-rendering: -moz-crisp-edges; image-rendering: -webkit-crisp-edges; image-rendering: pixelated; image-rendering: crisp-edges; margi…
thumbnail for 'Rippulous Pond'

Pity About Earth…

Play now!

Humanity, listen up. This is the Universe. I am sick of you sticking your nose where it doesn’t belong. That’s why there’s a huge asteroid heading straight for your pitiful Earth, courtesy of yours truly. I see you’ve built a flimsy Barrier and a stockpile of Missiles, but it won’t help. Enjoy the end times! Bye-bye. Talk soon.

– The Universe


thumbnail for 'Pity About Earth...'


Play now! Tracer is a 3D connect-the-dots game that Jared and I created for Ludum Dare 37. Play now! We were very happy with the ratings Tracer received. In the Innovation category, we placed 5th out of 1,489 games. A more detailed blog post is available at the Scripta Games …
thumbnail for 'Tracer'


Zorbio is a free multiplayer eat-em-up game that you can play in your browser! Zorbio is brought to you by my good friend Jared Sprague and I, via our small game development company, Scripta, Inc. Follow Zorbio development on the Scripta blog, or on Facebook. Play now!
thumbnail for 'Zorbio'

Square Off

Square Off is a 1v1 airhockey-style game that Jared and I built in 72 hours for the Ludum Dare 35 game jam. And beacuse it’s web-based, you can… Play now! .sqoff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-gap: 10px; } …
thumbnail for 'Square Off'


Kimotion is a framework for building reactive art displays. Creating an interactive art exhibit with Kimotion is easy. Draw your ideas in either 2D or 3D. Kimotion will provide information about the scene, which you can use to influence your display. Learn more at kimotion.xyz, o…
thumbnail for 'Kimotion'


Check out Ping! I created it for my team’s booth at Red Hat Summit 2015 (Red Hat’s huge annual conference), to promote Access Labs. It’s a 1-4 player pong clone with special powers. It’s Web-based, so you can play it right this minute. Our booth had a quartet of USB gamepads, bu…
thumbnail for 'Ping'

Introducing Canvas Indexed Color

2018-08-29 update: This is an old post about how I created a thin indexed color API in front of HTML5 canvas. It wasn’t very usable or powerful, but it was a fun learning experience. Instead of reading the post, I recommend checking out Mark Ferrari’s breathtaking color cycling a…
thumbnail for 'Introducing Canvas Indexed Color'

Bouncey returns - more canvas physics

This is a slightly upgraded version of the physics demo I showed in my last post. It is still… “a buggy, rudimentary, just-for-fun javascript physics simulator.” This version has: pre-defined initial states gravity friction It still has the “clinging” bug. I know how to fix it,…
thumbnail for 'Bouncey returns - more canvas physics'

HTML5 canvas point operations

This is the last demo I made using JSImage. I created it some time around 2009-2010. At the time, I had checked out an imaging book from my university’s library at least ten times. Most of the exercises in that book I implemented in Python using PIL, but point operations were si…
thumbnail for 'HTML5 canvas point operations'

Bouncey - canvas physics

This is Bouncey. It’s a simple physics demo I wrote in early/mid 2011, with some contributions and bugfixes from my good friend Greg Gardner. The description for bouncey’s github repo is: “a buggy, rudimentary, just-for-fun javascript physics simulator.” It covers Newton’s laws o…
thumbnail for 'Bouncey - canvas physics'

HTML5 tool for creating color palettes from an image

For an HCI class project in Fall 2009, I pulled together some of my previous demos to make this integrated tool. It was just a prototype, and I haven’t taken the time to get the code set up and working on this blog. If anyone is interested, I can dig up the code and send it along…
thumbnail for 'HTML5 tool for creating color palettes from an image'

HTML5 Canvas eyedropper

canvas { margin : 0 auto; border-width : 36px; border-style : solid; border-radius : 16px; margin : 0 auto; display : block; cursor : crosshair; } $(function() { var c; var cnvs = d…
thumbnail for 'HTML5 Canvas eyedropper'

HTML5 canvas RGB histogram

This is yet another demo from around 2009. It’s simple enough. Click a button, draw an unbinned RGB histogram of the source image. It’s powered by an early version of an old JS toolkit I wrote called JSImage. The latest version is available at my JSImage github repo. Don’t be foo…
thumbnail for 'HTML5 canvas RGB histogram'

HTML5 canvas 3D pixel array

This is another demo from 2009-ish. When I started experimenting with canvas, I felt uncomfortable with the 1-dimensionality of CanvasPixelArray. I wrote this script to convert it into a more logical format: X by Y by RGBA. Let me rephrase that. By “more logical”, I mean “more lo…
thumbnail for 'HTML5 canvas 3D pixel array'

HTML5 canvas area selection averaging

This is a demo from late 2009. It’s an extension of the single-pixel eyedropper I wrote previously. It’s powered by an early version of an old JS toolkit I wrote called JSImage. The latest version is available at my JSImage github repo. Don’t be fooled by the 2011 commits, those…
thumbnail for 'HTML5 canvas area selection averaging'


JSImage was a basic, buggy, just-for-fun image processing library that I wrote in 2008/2009 when I first started seriously studying JavaScript. A stumbled across a book in my university library, and started implementing the algorithms on the newly available HTML5 canvas element. …
thumbnail for 'JSImage'