stewdio

Upon each completion of the song, a list of keyboard engagements will be displayed under “Receipt.” This includes both the activations scripted for the animation as well as your own keystrokes and pointer interactions. (You are part of the artwork.) Here is some sample output:

     .     .   .         .     .   .       <OPTION>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .   w h a t w i l l g r o w c r o o k e d y o u c a n t m a k e s t r a i g h t i t s t h e p r i c e t h a t y o u g o t t a p a y   <OPTION>   <OPTION> .     .   .   d o y o u r s e l f a f a v o u r a n d p a c k y o u r b a g s b u y a t i c k e t a n d g e t o n t h e t r a i n   <OPTION>   <OPTION> .     .   b u y a t i c k e t a n d g e t o n t h e t a r s d f t g y h u j i k o 5 l p 6 7 8 
 9 0 t ⌫ y u i o p 5 6 7 8 9 0 ⌫ t y u i o p 5 6 7 8 9 0 t ⌫ y u i o p 5 6 7 8 9 0 ⌫ t y u i o p a s d f g h j k l 
 n   <OPTION> µ . <SHIFT>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .     F U C K E D P U   <OPTION>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .     F U C K E D P U   <OPTION>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .     <SHIFT> P e o p l e g e t c r u s h e d l i k e b i s c u i t c r u m b s a n d l a i d d o w n i n t h e b i t u m e n   <OPTION>   <OPTION> .     .   .     <SHIFT> Y o u h a v e t r i e d y o u r b e s t t o p l e a s e e v e r y o n e <SHIFT> B u t i t j u s t i s n t h a p p e n i n g   <OPTION>   <OPTION> .     .   <SHIFT> N o i t j u s t i s n t h a p e n i n g   <OPTION>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .     F   U C   K . E   D   P .   .       U   .     .   .       <OPTION>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .     F   U C   K . E   D   P .   .       U   .     .   .       <OPTION>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .         .     .   .         .     .   .       <OPTION>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .     O B V I O U S   <OPTION>   <OPTION> .     .   .       <OPTION>   <OPTION> .     .   .     n o i t i s n t b u t i t i s n t b u t i t i s n t

This is a fan-made music video for Thom Yorke’s “Black Swan” (2006). This birthday well-wishing is composed of #HTML #CSS #JavaScript for fellow October chaps Thom and Stanley Donwood whom I’ve never met, but have long enjoyed their work. (With a bit of Saul Bass inspiration sprinkled on.) It’s best viewed on a laptop / desktop; may melt phones.

Here’s the “video”: https://stewartsmith.io/blackswan/

Here’s the source code: https://github.com/stewdio/blackswan/

And here’s the repo: https://github.com/stewdio/handy.js

Simple, heavily commented, and built on Three.js. Go forth and build fun hand-input-based things!

Thank you for the kind words. As I’m writing it I just keep thinking “How would I want to be taught this?” As another parallel rule of thumb I pretend that I’m writing to someone who is smarter than I’ll ever be but,

1. Doesn’t know anything about this particular subject yet.

2. Is probably very tired from whatever it is they’ve been doing. (Day job, raising kids, just general anxiety keeping them awake all night, etc.)

3. Might be drunk.

So I try to be plain in my language choices, calming when facing something with an aura of complexity (eg. “this thing that you heard is complex is really just a fancy name for these two simple elements combined”), consistent, and to present actual examples instead of everything just being an impenetrable brick of text.

(And then occasionally I break all my rules by throwing in hyperlinks to random tangents / hiding Missy Elliott lyrics in the code / whatevs.)

Woa—this is really beautiful! I need to give this some serious thought since I’ve gone heavy on the idea of not having dependencies, not using modules, not requiring Node, etc. You’ve definitely given me something to mull over here. Well done :)

For reference, here’s some of my original reasoning: https://quantumjavascript.app/contributing.html#JavaScript_s...

Good question! There’s a subtle underlying issue I need to address in order to get those working correctly: https://github.com/stewdio/q.js/issues/18

I have an idea of how to solve it while still keeping gate creation simple—I just need to find some downtime to investigate further :)

I entirely forgot to mention that TODAY is Q.js’ first birthday. And here’s a write-up of how I got started with it:

https://medium.com/@stew_rtsmith/quantum-javascript-d1effb84...

Wow—I didn’t even recognize my own code there with all the whitespace changed and semicolons inserted ;)

And yes—not having any dependencies or anything to install was one of my goals to help anyone get up and running with minimal fuss. I have more to say about that here: https://quantumjavascript.app/contributing.html#JavaScript_s...

You’re asking a really good question—I should probably write page on this to make it more clear; it definitely was NOT clear to me at first either! The short answer is “no.” What you’re seeing there is the Q.Circuit.prototype.try$ function which forces a circuit to choose one of its probable outcomes. I mostly added this in so users could write a simple coin-flip demo and get an actual heads or tails result—you know; feel good about making their first superposition and then collapsing it to a conclusion: Q`H`.try$() ? 'tails' : 'heads'

But it’s the management and redistribution of probabilities during the course of a circuit’s operation that is the real quantum magic—not choosing a series of random outcomes. In fact if you search the entire repo for “Math.random” you’ll see that this try$ function is the only “semi-meaningful” use of randomness. (The other calls to Math.random are either part of some included THREE.js bits for the Bloch Sphere visualizer, or for randomly tilting the click-and-draggable gate tiles in circuit palettes, or for choosing random color + animal names. Yes... Random color + animal names!) Q.getRandomName$()

The way we manage probabilities in a simulator is by representing qubits as a pair of numbers. This should give you a better idea of how that works—and what “superposition” means in this context: https://quantumjavascript.app/Q-Qubit.html

But the weirdest part for me to wrap my head around was that there is no answer until you’ve computed the ENTIRE answer. In a regular computer you can ask what the value of a particular bit is at anytime and that doesn’t effect any other piece of the circuit. But with quantum simulation like this you are mixing all of the ingredients together and it is impossible to pull one out, point to it and say “this particular qubit has this particular value!” Instead you can only know the total state of the system.

You’ve given me a lot to think about in terms of adding more content to Q :)

I need another coffee now...

Certainly :) You can add as many CNOT gates as you’d like.

There are a few ways to do this in code, so you can pick the style that feels right for you / your particular case: https://quantumjavascript.app/#Quantum_JavaScript

But it’s also easy to make CNOTs in the visual editor. Here’s an animated GIF demonstrating it: https://quantumjavascript.app/tutorials.html#Create_controll...

And for further clarity, here’s a description of the relevant steps in that animated GIF: 1. Drag an Identity gate (the circle) onto your circuit board. 2. Drag a Pauli X gate (the X) onto the same moment (column) of your circuit board. 3. Select both (by tapping on them). 4. Tap on the "C" button to join them into a controlled gate.

I’ve begun to put together useful resources for learning more here: https://quantumjavascript.app/resources.html

I’d like to really flesh out that page; I’ve now come across so many folks that are amazing at explaining this stuff... It’s just a time crunch to juggle all this as you might imagine ;)

These two videos in particular helped me get started:

1. What is a physical quantum computer? https://www.youtube.com/watch?v=OWJCfOvochA

2. How might one compute using it? https://www.youtube.com/watch?v=F_Riqjdh2oM

Hi. Last year I launched Space Rocks, a WebXR demo that re-imagines Atari’s Asteroids as an immersive, Web-based, virtual reality experience. Alongside the site’s launch I also released my source code used to create it. This technical deep dive explains how I built this WebXR game—and how you can make one too: https://medium.com/@stew_rtsmith/space-rocks-technical-deep-...

Space Rocks demo (Requires a WebXR-capable browser and a 6DoF VR device): https://spacerocks.moar.io

Space Rocks source code repo: https://github.com/moar-tech/spacerocks

I’m working on a series of tiny WebVR experiences for kids that run on the HTC Vive. (Personal project.) It’s a work in progress, but thought I’d share this first one now that it’s functional; to prompt other WebVR enthusiast to share what they’re playing with, compare notes and so on.

I wrote a little more about Day & Night here, including links to downloads and instructions for getting WebVR for the Vive up and running: https://medium.com/@stew_rtsmith/day-and-night-f5f2a56112ea#...

Some of the ingredients in the kitchen: WebVR, THREE.js, WebGL, binary data in JS, CSS animation, SVG sprites ... And just beginning to sprinkle in some ES6 goodies.

Anyone else making ’lil WebVR experiments?

Jon McLoone really seems to be approaching this topic from a place of frustration—rather than from an overwhelming sense of beauty. I think both mathies and visual designers can agree that 12 is a very beautiful number. In fact the ONLY single thing that makes sense about the imperial system is the division of feet into 12 inches, something mirrored by picas and points in typography: https://en.wikipedia.org/wiki/Pica_(typography)

This beautiful number is evenly divisible by 1, 2, 3, 4, 6, and itself—a very high percentage (50%!) of the positive integers leading up to and including itself. (To be sure 60 is also a beautiful number but its ratio of factors to non-factors is of course lesser.) I can see you gearing up to argue that 6 is more beautiful, and I get that. I really do. But the ability to evenly divide into quarters is just so ... pleasant :)

Does the ability to divide evenly in several ways serve as a soapbox from which to argue that it is mathematically important to memorize the first 12 numbers of which 12 is a factor? I suppose not. But could we simply do 12 the honor of learning these two extra columns of the multiplication table because it is beautiful? (And really you’re just learning ONE extra column because 11 is such a simpleton. Silly 11.)

Of course dividing things into 12 units can SOUND pleasant as well. Western music is founded on dividing an octave into 12 units—though the exact method of division can take many forms. Here’s just a sample: https://github.com/stewdio/beep.js/blob/master/beep/Beep.Not...

So I love 12. Join me in loving 12. Together we can praise 12.

Full disclosure, I have been known to previously adore the number 12. On December 12, 2012 I proposed this “Cleaner Grid of Time” beginning with the months in a year: http://stewd.io/b/2012/12/12/twelve

I was just looking at Beep’s inbound traffic and saw this HN post in the list. Made me smile. Cheers, Trax.

To make better sense of what was going on I gave it a go myself: http://stewd.io/airborne

I left a lot of code commentary for anyone else trying to wrap their heads around this stuff: https://github.com/stewdio/airborne

Why did you change the link to the plain single-page version? The pacing and design of the original was very intentional. This is how it was meant to be experienced: http://www.internetisshit.org/

Also, for fun you ought to WHOIS the domain name. Here’s a sampling:

  Registrant Name: alain a-dale 
  Registrant Organization: iis 
  Registrant Street: Sherwood 
  Registrant Street: Forest 
  Registrant City: Nottingham 
  Registrant State/Province: State 
  Registrant Postal Code: 111111 
  Registrant Country: US

Built from the same Cuber framework. http://stewd.io/w/rubikscube ;)

If you’re into JavaScript pop open the browser console on this guy: http://iamthecu.be :)

Works best in Chrome / Safari / Opera.

(Also... Works best in Chrome, Safari, Opera. Less so in Firefox.)

Pop open the JavaScript console and have a look. I had a lot of fun.

That’s a shame because selfishly I want everyone to see the second slide which is of the Racer game we unveiled at last year’s I/O. Was a proud moment for us code-play folk ;) http://www.chrome.com/racer

Wasn’t this an episode of Black Mirror? In particular this season 2 episode titled “Be right back”: http://www.youtube.com/watch?v=S-iZTSC9Ml8

And if you’re not familiar with the series, you really ought to give it a go! http://en.wikipedia.org/wiki/Black_Mirror_(TV_series)

For an article titled “The decline of BlackBerry in one chart” you’d think that it’d be a well-designed intuitive chart that emphasizes the decline of Blackberry. Instead what’s presented is accurate but unintuitive and could easily be titled “The decline of Palm in one chart” or “The decline of Windows Mobile in one chart” or even Symbian. There’s no visual hierarchy—the main idea isn’t leaping out of this graph. (And sometimes design is as much about what you don’t show.) And if you’re really bent on showing all the big players at once there are more compelling ways to do it than this. I normally wouldn’t feel compelled to comment on something so small but it’s... It’s the TITLE OF THE ARTICLE!

Looking forward to time tourism. Would be great fun to go back to 1993 and chat about On Lisp, get in touch with Chris Carter about his upcoming series, and catch the In Utero tour. (Among other things.)

I feel compelled to point out that all of Browser Pong’s sounds were composed specifically for it by a Mr. Dominic Matar who is not only a multi-talented musician, earnest with feedback, and strikingly handsome—he’s also a breeze to collaborate with. So if you’re looking for that sort of person for a project do check out his stuff and drop him a line: http://dominicmatar.com

There are sites out there that attempt to offer a service that protects your privacy by fetching websites for you through their servers and then pass you the content afterward—so your IP isn’t part of the request chain. That sounds like a nice service. Unfortunately I found there were 3 problems with a particular company offering this service:

1. From what I’ve read these guys just pass your info on to interested agencies anyway, entirely defeating the purpose. 2. In order to offer the service for free they insert adverts into the content—I assume to cover their operational costs. 3. This particular agency was able to get a pretty high search engine result—rivaling my own URLs—by just copying my stuff, Browser Pong being a prime example.

At the time this meant if someone liked what I did and searched for it there was a good chance they’d end up visiting a boxed in version of Pong with adverts on it. Aside from some tongue-in-cheek exceptions I’ve been firm about not putting ads on my sites. (And for the most part this doesn’t matter because they don’t get a ton of hits, but when something blows up like Pong or Jed there’s you know ... like maybe a whole $29.95 to be made there.) I made these things for the enjoyment of it and didn’t want to dilute them with ”a word from our [randomly selected] sponsor.” So I started experimenting and figured out how this company was parsing the HTML, CSS, and JavaScript to patch the links so everything would go through their servers. The code snippet you pointed out was just a quick way to hide the URL from their parser and get them out of my hair.

I don’t have anything against ad-based models or referencing someone else’s work (obviously). But in this particular case I felt it crossed a line so I pulled the trigger. I hope that answers your question ;)

What you’re saying is fair enough, but in this specific case if you compare what the two are saying it is obvious these are not “separate angles” but one is the original composition and the other is a watered-down version of the exact same angle. And the result is perhaps not Courtney’s fault—when my peers say something interesting I love to quote them on it. Just here it seems to have been done without the credit.

See above comment by @pashields. These are Steve Albini’s conclusions that Courtney is merely riding on—and continuing to get credit for it seems. I think Albini’s original-original was actually printed in The Baffler before it was printed in Maximum Rock 'N Roll.