The East Coast Game Conference was a lot of fun! Jared and I gave a 6-hour hands-on workshop where led the audience through building a game with entirely open-source gamedev tools.
#
Abstract
Join us for a workshop on game jams and open-source game development tools.
Open-sourc…
Open Jam is an open-source themed game jam run by Jared and myself, with a lot of help from opensource.com. Check it out at openjam.io.
Open Jam 2018
Open Jam 2017
Play now!
Three years ago, surrounded by monitors in a dark, blue-hued room, a particular screen caught my eye. My girlfriend’s (now wife’s) eye was caught by the same screen, and we crossed the room to investigate.
We were visiting the Indie Game Revolution exhibit at EMP i…
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.
I have someone I’d like you to meet. SimPixel, meet everyone. Everyone,
SimPixel.
#
SimPixel, introduce yourself
SimPixel is a WebGL visualizer for LED displays, very much like the ones Adam
and Dan build over at Maniacal Labs.
#mlabs {
height: 50vh !important;
}
@media sc…
Fireflies is a WebGL demo in which a friendly flock of fireflies forms shapes
for your entertainment. Here are some live demo links, and a video.
Watch the original
Watch the geekSPARK edition
Thanks to Loren Schmidt for agreeing to let me use the awesome
pixel-per…
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 …
Just a few short days months ago, Kimotion was on
display at SPARKcon. SPARKcon is a large art festival in Raleigh, and we
occupy a small slice of it called geekSPARK.
#
Kimotion Levels Up
Last year’s tech had a rudimentary and finicky hand tracking system. It
was workable, but …
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!
They say good developers are lazy. A tedious process is no match for a
lazy developer. Below is an experiment in laziness. It’s a proof of concept
for using Web Components without having to manually import each one.
I’m not sure exactly what to call it. It grazes the definitions …
Kimotion is a simple framework for creating interactive art exhibits in 2D or
3D and supports both Kinect and Leap Motion for viewer input.
This tutorial will focus on the Leap, so to proceed with the tutorial you’ll
need to set up your Leap.
Once the leap service is running, you…
“Finally,” I thought, “an excuse to play with WebGL at work!”
This year, I had the good fortune of contributing to a keynote presentation at
Red Hat Summit. During the keynote, an audience of 5,000 played a
mobile web game created by our team. The game was backed by several
micro…
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;
}
…
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…
A year ago, I had the joy of working on Digital Motion, an interactive
art exhibit for Raleigh’s annual art festival, SPARKcon.
The month leading up to SPARKcon 2014 was a mad dash of perfecting the graphics
and physics equations of my DiMo: Particles display. After a
wonderful w…
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…
Within the last two days, WebAssembly (wasm) has graced the eyeballs of many JavaScript developers. If WebAssembly is new to you, the articles linked at the end of this post fully describe what WebAssembly is. In short, it offers a way to run native code in a Web browser.
I’d li…
There are only two hard problems in computer science: cache invalidation,
naming things, and off-by-one errors.
Phil Karlton, but I can't find a name for the original source...
Contriving names for things is so commonpla…
Imagine a solitary blue dot.
Unless you let your imagination run away with itself, this is going to be a
pretty boring dot. Now, imagine a second, larger dot (you can pick the color).
Red, nice choice! The scene is now slightly more interesting, since now you’ve
got two dots to…
A player walks up Fayetteville St in Raleigh, North Carolina.
SPARKcon has begun, and dozens of artists are strewn along the
street, hard at work creating elaborate chalk art on the asphalt. A light rain
is falling, and some artists are holding umbrellas over their work, some hav…
I spent a bit of time this weekend building an RGB color cube for
ColorPal, using Three.js. Drag and drop any image, and you’ll see a
cube with all the pixels of your image mapped into 3D space.
Launch live demo! and view the
code.
Your web browser must support WebGL, which at t…
A few weeks ago, a coworker of mine ran into some font issues. Firefox
doesn’t allow cross-origin requests for web fonts, and he was using a tool
called Font Squirrel to generate fonts, including data URIs.
Embedding a data URI for a font (or image) inside a CSS file is a common
…
Drop64 is an easy drag-and-drop tool for generating Data URIs from any
file.
Check it out at drop64.com.
Here’s a demo recording of how easy it is.
Some benefits of Data URIs are:
Fewer HTTP requests means faster page loads
avoid cross-origin resource loading issues (fonts in F…
Hi pals.
This is a speedy post about a speedy update I made today to
ColorPal, an HTML5 tool I wrote that automatically
generates color palettes from a photograph.
Previously, ColorPal provided hex codes for each color extracted from the
image. Eight individual <input>s at …
What have we here? It’s a limited demonstration of indexed color within the HTML5 canvas element.
.color_palette {
list-style: none;
}
.panel-body {
background-color: #1f1f1f;
}
.palette-panel-body a.btn {
margin: 6px;
}
.color_palette li {
float: left;
disp…
In my last post on the subject, I introduced
ColorPal, my HTML5 color palette generation tool. It didn’t perform well with
certain types of images, so I fixed it. :)
Color palettes will now match the image even better. Especially for images
with infrequent but important colors.…
Introducing ColorPal!
I’ve been toying with color palette generation for years. My photography website has always had some form of dynamic palette, so the theme of each page matches the photo. You can see the current iteration here:
I owe the idea of photo-matching website pale…
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,…
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…
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…
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…
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…
AEJS was an experimental Amiga 500 emulator written in JavaScript. The name
stands for Amiga Emulator JavaScript and is pronounced “aegis”.
My motivation to build AEJS came from these sources:
The HTML5 era introduced new APIs which finally made it possible:
Typed arrays, W…
genlut.py is really filling out. It generates the LUT for all 68k opcodes (68000 only), and I’m about 70% done. 77 down, 34 to go.
The OPCODES dict defines the first two bytes of each opcode, both static bits and operands. The operand strings act as keys into the PATTERNS struct,…
Decoding is easy. Decoding requires a lot of typing. (I am starting to believe this is true of ever aspect of interpreted emulation…)
For the AEJS decoder, I am creating a look-up table with every possible pattern for each instruction. It was my first idea, but I initially discar…
Introducing AEJS, an Amiga emulator written in JavaScript. Wait, wording it like that makes it sound like it’s finished. It isn’t. It won’t be for a long time. AEJS is just a hobby, and will never hold a candle to UAE.
Why the Amiga? Given that this is my first emulator, it would…
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.
…
The unfortunately-named median-cut.js is the library that powers
ColorPal’s palette generation.
I say it’s unfortunately named because it doesn’t implement a pure median-cut
algorithm. It’s identical, except that instead of cutting boxes at their
median, they are instead cut at …
