Tags: Javascript

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'

Web Component Icons

pfe-icon { --pfe-icon--Color: var(--pbp-fg-color, white); } @media (min-width: 750px) { #TableOfContents { float: right; padding: 10px; /* margin: 10px; */ margin: 0 0 20px 20px; background-color: #242424; } } This is the story of <pfe-icon>…
thumbnail for 'Web Component Icons'

Open Jam Workshop

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…
thumbnail for 'Open Jam Workshop'

Popup Showdown

POPUP SHOWDOWN Close popups as fast as you can!█ Looks like popups are disabled! Please enable them for this URL, look ^^^ in the URL bar. CLO…
thumbnail for 'Popup Showdown'

Open Jam

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
thumbnail for 'Open Jam'

In Orange Light

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…
thumbnail for 'In Orange Light'

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

play

thumbnail for 'Pity About Earth...'

Meet SimPixel

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…
thumbnail for 'Meet SimPixel'

Fireflies

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…
thumbnail for 'Fireflies'

Tracer

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'

Kimotion at geekSPARK 2016

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 …
thumbnail for 'Kimotion at geekSPARK 2016'

Zorbio

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'

Lazyloading Web Components

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 …
thumbnail for 'Lazyloading Web Components'

Kimotion Modding 101

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…
thumbnail for 'Kimotion Modding 101'

Glow Rope

uniform float TIMER_MAX; attribute float alive; attribute float size; attribute vec3 endPosition; attribute float timer; varying float vAlive; varying vec3 vEndPosition; varying float vTimer; varying float vProgress; void main() { …
thumbnail for 'Glow Rope'

Visualizing Network Traffic with WebGL

“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…
thumbnail for 'Visualizing Network Traffic with WebGL'

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

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'

Make a Kimotion!

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…
thumbnail for 'Make a Kimotion!'

Ping

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'

WebAssembly is the Keystone

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…
thumbnail for 'WebAssembly is the Keystone'

Naming Names - Anonymity is Dead

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…
thumbnail for 'Naming Names - Anonymity is Dead'

DiMo: The Deconstruction of Falling Stars

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…
thumbnail for 'DiMo: The Deconstruction of Falling Stars'

Particles and π - DiMo Comes to Life

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…
thumbnail for 'Particles and π - DiMo Comes to Life'

RGB WebGL Color Cube

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…
thumbnail for 'RGB WebGL Color Cube'

Introducing Drop64, ezpz data URI generator

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 …
thumbnail for 'Introducing Drop64, ezpz data URI generator'

Drop64

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…
thumbnail for 'Drop64'

ColorPal CLI!

ColorPal CLI is a command-line version of ColorPal, my HTML5 color palette generator. # Demo! $ node cpal.js -f hex -s 8 MyImage.png #07070b #bac0c4 #d1bd66 #7e8899 #696964 #c4b441 #65683e #394434 # Get it! npm install -g canvas requirejs # install dependencies git clone git@…
thumbnail for 'ColorPal CLI!'

ColorPal Output Update

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 …
thumbnail for 'ColorPal Output Update'

Canvas Indexed Color

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…
thumbnail for 'Canvas Indexed Color'

ColorPal palettes improved!

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.…
thumbnail for 'ColorPal palettes improved!'

ColorPal Alpha

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…
thumbnail for 'ColorPal Alpha'

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 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 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'

AEJS

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…
thumbnail for 'AEJS'

Opcode patterns 70% finished

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,…
thumbnail for 'Opcode patterns 70% finished'

LUT

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…
thumbnail for 'LUT'

Introducing AEJS

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…
thumbnail for 'Introducing AEJS'

JSImage

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'

median-cut.js

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 …
thumbnail for 'median-cut.js'