Mr Speaker

mrspeaker's head in a monitor You find yourself at the entrance to the Hompage of Mr Speaker. In a darkened corner sits a trunk containing HTML5 games and some JavaScript tidbits. Next to it you spy a mastodon account. Exits are North, East, and .

ES6 (ES2017+) module support

It's been a long time coming, and we're still on shaky ground - but native module support is close. Not "burn your build tools!" close, but "burn your build tools for personal projects!" close... like arrow function syntax in 2013. If you have Firefox Nightly, or Safari Tech Preview (or Edge, I believe!) - you can give Babel a nice kick in the guts, and get back to some plain ol' JavaScript + HTML + CSS.

Read on for more »

Comments (0)

Building geometry with fraggles

My last experiment got out of hand and now the cubes have become self aware. See for yourself!

3d fraggles

The earlier "lil cube" example worked by creating individual box meshes and adding them to the scene. This is not a very scalable approach if we want a lot of boxes! Creating a single chunk of 16 x 16 x 32 blocks would take about 20ms to create: More than a single frame at 60 fps, and way too long to do anything dynamic.

Then next thing I tried was to merge the boxes into a parent geometry, rather than adding each mesh individually. This did indeed give a performance boost, with each chunk only taking 5 to 10ms to create. Good, but still pretty slow.

Finally, I went all in for building the geometry myself. Using Three.js's BoxBufferedGeometry as a base, I wrote a function that would create the entire geometry for a single chunk. Each plane is added to a BufferGeometry - excluding any planes that would be obscured by a neigbouring box.

To work with Multi Materials (so you can have a different texture for each side of a cube) I had to split the creation into faces: rendering all the "top" faces first, then all the "front" faces and so on.

The result is a ~1ms render for most chunks on my machine: getting up higher with very complex and hole-y chunks.

Comments (0)

THIS IS WHERE YOUR DEMO GOES

THIS IS WHERE YOUR DEMO GOES is my aborted attempt for this year's js1k competition. It uses the browser's speechSynthesis capabilities along with some Web Audio API drones to make a lovely bedtime song...

I don't think I'll get it squashed to < 1k in the next few days though, so plopping it up here for posterity. The source is buried in the middle of the js1k shim somewhere. Just search for "THIS IS WHERE YOUR DEMO GOES".

Comments (0)

The elusive Pinterest App Link handler

App Links seem like a perdy good idea: trying to bring back a bit of the web to walled garden-ed applications. Of course, the issue is it's up to the individual app developers to support them. And it seems that the big social sites are quite fond of not making things more open. Also, they like to break stuff that was working before.

The tl;dr is the old Pinterest protocol handler for opening the app was pinit12, now it's pinterestsdk.v1. Previously, to create a pin you'd use pinit12://pin/create/bookmarklet/ now you use pinterestsdk.v1://pinit/. I haven't tested it out completely, because I got really bored of the limitless hell that is "sharing to social networks" - but it opens up the app and looks like it works (I added the info.plist settings from the SDK docs - though they probably shouldn't be necessary).

I found the handler thanks to an error message that popped-up in a stack trace. It eventually lead me to PDKPin.m which contained the following lumps of gold:

static NSString * const kPDKPinterestAppPinItURLString = @"pinterestsdk.v1://pinit/";
...
NSURL *pinitURL = [NSURL URLWithString:[NSString stringWithFormat:@"%@?%@", kPDKPinterestAppPinItURLString, [params _PDK_queryStringValue]]];
    if ([[UIApplication sharedApplication] canOpenURL:pinitURL]) {
        [[UIApplication sharedApplication] openURL:pinitURL];
    } else {
        //open web pinit url
        NSDictionary *webParams = @{@"url": [sourceURL absoluteString],
                                    @"media": [imageURL absoluteString],
                                    @"description": pinDescription};
        NSURL *pinitWebURL = [NSURL URLWithString:[NSString stringWithFormat:@"%@?%@", kPDKPinterestWebPinItURLString, [webParams _PDK_queryStringValue]]];
        [[UIApplication sharedApplication] openURL:pinitWebURL];
    }


Hopefully this is useful to fellow tired and weary social-sharing-integration souls wandering the wastelands of terrible SDKs and out-of-date documentation (including, most likely, this blog post). God speed.

Comments (0)

Code-golfing the BASICs

Moments of genius: they strike me once ever 9 years, apparently. The last one happened when I realised how to correct distribute beers - this one happened when I figured out how to shave 4 bytes off the perennial BASIC classic...

10 PRINT"MR SPEAKER RULEZ!!!!!"
20 GOTO 10
RUN

Applying my Mr Speaker's Stroke-of-genius 2015:

10 PRINT"MR SPEAKER RULEZ!!!!!"
20 RUN
RUN

I deserve a correctly-distributed beer for that one.

Comments (0)

British Pathé random video viewer

British Pathé recently released 90,000 videos on to YouTube (though I could only find 82058 of them) - I wanted to make some kind of mashup art with it, but was not creative enough to think of anything interesting. So, instead I present: Random video player! Randomly (and pretty-much-endlessly) play through the collection, marveling at the wonders of the not-so distant past.

If you want to play with the code, check out the repo... it's an ES6 React app, that uses RxJS to create and consume a stream of video ids based on button clicks & pop state events.

Comments (1)