Tags: Web

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'

Shaking Off the Rust 2: Ray Tracing in WebAssembly

Rust. A ray tracer. The dream of WebAssembly. One dangerous idea that could ruin everything. This was the scene at the end of my last post, which covered creating a ray tracer in Rust using Peter Shirley’s outstanding Ray Tracing in One Weekend. In the wrap-up to that post, I…
thumbnail for 'Shaking Off the Rust 2: Ray Tracing in WebAssembly'

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'

Command Line Bash

# Summary .float-comp { shape-outside: url(ibm-5150.png); float: right; shape-margin: 16px; margin-right: -16%; max-width: 60%; } Command Line Bash is a game that challenges you to type in as many commands as you can in 60 seconds. Play now! My frequent co-conspir…
thumbnail for 'Command Line Bash'

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'

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'

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

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'

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'

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'

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'

How not to use CSS3

How to ruin a good thing by abusing CSS3 text shadows… CSS3! The code: // Random factors to determine x/y offsets for text shadows and amount of blur var x_factor = Math.floor(Math.random() * 20) - 10; var y_factor = Math.floor(Math.random() * 20) - 10; var blur_factor = Math.fl…
thumbnail for 'How not to use CSS3'

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'

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'