Repeat after me: /E@A:SIU½DRJNFCKTZLWHYPQOBG"MXV£
In a counterfactual past, perhaps the term “bug” was never adopted in the 1800s. And perhaps this pesky bug was never captured and never became famous. And in this alternate history, perhaps a different name would have been given to the tools we now call “debuggers”. Nearly any other name would have been preferable since de-bugging is something debuggers do not do. They’re fantastically helpful…
Quiz time! Behold, a command-line program named foo . It’s got clap for arg parsing. It’s got toml for config parsing. It’s got tracing for logging. Your job: add c o l o r s to foo ’s terminal output. Consider the dependencies for a moment and choose a crate for colorizing terminal output. [package] name = "foo" version = "0.1.0" edition = "2024" [dependencies] clap = "4.5.51" toml = "0.9.8"…
Nothing about keyboards has appeared on this blog, because while I enjoy using nice keyboards (and building them!), I don’t have anything to say about them that’s worth reading. Besides, there’s plenty already written elsewhere. Nothing about AI has been written here, because in the years since GitHub Copilot launched in 2021 and ChatGPT in 2022, the shock of these technologies has worn off, but…
# Debugging is a first resort. That’s the prime requirement in my search for an ideal debugging workflow. Running my programs through a debugger shouldn’t be a last resort when I’m at the end of my wits. It should be the first and only way I run the program while I’m working on it. Even when there’s not a bug, if only to step through my freshly fallen code to understand it more intimately. Even…
At the theater some years ago, a preview played for Oppenheimer. I’d not heard of the movie before, and nothing about the popular culture suggested to me that a movie like that could be a success. By the end of the preview and for the rest of the feature film (which I’ve forgotten), I wondered whether Oppenhheimer: The Movie would be a trustworthy teller of the real story. To brush up on the…
Here are my notes from 🦀 RustConf 2023 🦀. With no ado: # Talks All RustConf talks were 30 minutes, with no live Q&A. Instead, a channel on the Discord server was opened for each talk where the speaker and curious attendees would go to ask and answer questions. It had the same character as the in-person circle that sometimes forms around a speaker after a talk. At only 30 minutes, the talks flew…
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; margin-top: 3em; margin-bottom: 3em; } const…
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 expressed an interest in creating a WebAssembly build of the ray tracer, and that project is what follows. The process of…
Two classes stand out as my favorites from computer science at NCSU: x86 assembly, taught by Dana Lasher, and computer graphics, taught by Stuart Heinrich. In the graphics course, we wrote a rasterizer and a ray tracer (which I never finished 😅). In the 16 years since, I’ve been working happily in web development, but I’ve started to lament losing touch with lower-level, near-metal (🤘)…
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> . I set out to build a web component which loads icons on demand, displays them with customizable colors, avoids CORS issues, and is compatible with…
It’s a tale as old as time. A nice laptop. A nearby cold beverage. A sickening splash. Thanks to the solid seals on the Carbon , there was no permanent damage, just a very sticky, nearly unusable keyboard. Rather than clean or replace the keyboard, our support desk opted to issue a new laptop. That’s how I found myself with two identical laptops, one whose SSD had a fully configured OS, and the…
# 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-conspirator Jared Sprague and I created Command Line Bash, along with tremendous help from the Command Line Heroes podcast team, open source…
My first experience with PiTiVi , eight years ago, was discouraging. Until my dad rediscovered it a few days ago, I hadn’t thought of giving it a second chance. I’m glad I did. I’ve been extremely impressed with the improvements. PiTiVi’s formerly rough edges have been sanded down, and what remains is an approachable, capable video editor perfectly suited to hobbyist uses. One of the few remaining…
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-source tools have been lovingly crafted that cover every medium of game development. Through a series of hands-on labs, we will…
The Minimic is great. I just received mine last week, and I’m loving the ability to join video calls with nice, comfy headphones . It’s much better than switching back and forth between headphones and a headset. The only problem is that, since the minimic is just a wire , it doesn’t have any noise or echo cancellation. And since Fedora doesn’t come with that feature enabled by default, the mic was…
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. CLOSED: 0 / 45 TIME: s PLAY! MAKE IT STOP! You closed N /45 popups! You are the POPUP BLOCKER! Congratulations, you win! The 1990s called; they want their popups back. You didn't close enough popups to win. :( Built by mwcz during Open Jam . View…
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
geekSPARK is a showcase of creative use of technology, taking place each year during the SPARKcon art festival. What lies below is a summary of the festivities at geekSPARK 2017. # RC Speedway The RC Speedway was an incredibly fun creation by maker extraordinaire Bill Culverhouse from SplatSpace . Bill mounted cameras on the RC cars which fed wirelessly into first-person displays. The cars were…
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 in Seattle, and what we found on that screen was Scene I, Act I of Kentucky Route Zero . It took me three years, but I finally…
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
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 screen and (min-width: 660px) { #mlabs { float: right; margin-left: 20px; } } Very much alike. In fact, it’s probably so much…
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-person avatar. View source , if you’re into that kind of thing.
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 blog . View source
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 a lot of visitors had trouble using it, especially kids. This year, I added Leap Motion support, which was a huge… jump…
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 of lazyloading, autoloading, and dependency injection, so I went with the laziest term. Let’s set the scene, and find…
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 can set up Kimotion! # Get the code git clone git@github.com:mwcz/Kimotion.git cd Kimotion If you don’t know how…
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() { vAlive = alive; vEndPosition = endPosition; vTimer = timer; vProgress = 1.0 - vTimer / TIMER_MAX; vec3 newPosition = mix( position, endPosition, vProgress ); vec4…
“ 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 microservices which we modified on stage while the audience played. My contribution was to display, in a visual and…
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; } We were both very happy with how the game turned out, especially since this was our first game jam. Our fellow game creators were nice…
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 , or if you want to see it in action… Launch live demo! Video clips These images, when played in rapid succession, create…
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 weekend of watching visitors enjoy the weird things we made, a lesson began congealing itself in my mind. Creating…
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, but your keyboard works just as well. Enjoy stomping the AI (instead of your fellow humans). Play now! Even as a lifelong…
In the midst of this beastly summer we’ve just entered, nothing seems farther away than the lung-clenching air of winter. When things are this hot, and pools and popsicles fail to cool, there’s one foolproof way to get into the spirit of winter: The Lurking Horror. … you practically froze to death slogging over here from the dorm. Not to mention jumping at every shadow, what with all the recent…
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 like to try to relate WebAssembly to a change Tim Berners-Lee made to the first Web browser… Meanwhile, I took one quick…
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 commonplace for computer programmers that we may be thinking up names more often than any other profession. Every day, usually dozens of times, I find myself trying to imagine the…
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 think about. You can ponder their positions, and relative sizes. No motion though; still pretty boring! Pretty soon, your…
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 have draped tarps over themselves and their sketches, but most don’t seem to care, as if creating their art is more…
Pale Blue Pixel is this blog. I write technical posts about web development image processing amateur graphics and generally celebrating the art and craft of programming. The name Pale Blue Pixel is a meek tribute to Carl Sagan’s Pale Blue Dot . It’s currently powered by: Python - a large and powerful snake Pelican - an awkwardly-shaped sea bird CSS Grid - framework-free CSS thanks to grid and…
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 this point in history means a fairly recent Firefox or Chrome. In case your web browser doesn’t support WebGL, here’s a…
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 technique for reducing the number of HTTP requests. In this case, it also negates the need for a cross-domain request…
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 Firefox, for example) you can paste the Data URI directly into your web browser URL bar to view the file (occasionally…
Ever been here? I want to double the size of this image open calculator type in current width * 2 type in current height * 2 paste results back into the Create New Image dialog I’ve done that countless times. As I was about to do the same thing once more, I thought “Hmm, wouldn’t it be nice if we could do simple math inside the New Image dialog? Well, I tried it and it worked. The feature was…
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@github.com:mwcz/colorpal-cli.git cd colorpal-cli # Use it! To display the help text, simply run the command without…