Wednesday, June 21, 2017

google maps style customizer

https://mapstyle.withgoogle.com/ is kind of a "style roller" for Google Maps. I like the "retro" style especially, and it's the easiest way to, say, hide business names or what not if you don't want them cluttering the view you're making.

on mac modifier keys

"Hot Take" time!

Ok, not that hot.

With all its dandy ports I still think my Macbook Air is gonna remain my main personal machine for a while, but I was still daydreaming over at apple.com, and I noticed both the "Adorable" Macbook and the new Macbook Pro have much better iconography for the modifier keys- displaying the ^ over control and the weird broken equals sign for option, so that both of those join command key and its little clover in actually showing up on the physical keyboard the same way they do for the top of the screen menus.

 A definite improvement! But it raises the question, why are Apple's modifiers keys such a hot mess? Don't get me wrong, it's a pleasure to be back in a shell and have cmd-c copy and ctrl-c break, but really, fn, control, option, command (not to mention shift) - so often arbitrarily thrown together in strange combinations by various programs for random shortcuts.

Windows had a much more coherent strategy (despite its weird legacy of "alt-f4", and various exceptions in various software titles) - there's only three keys down there, really: the hubristic "windows" key, control and alt. And control keys usually are tied into commands meaning "do this now" and the alt key was tied into menu pulldown shortcuts.

I suppose this disdain for keyboard menu operations flows from the Mac history of relying on the mouse; remember, the first Mac lacked even arrow keys, and there's never been the same menu pulldowns via keyboard that Windows has enjoyed.  But it's weird they went from such minimalism to such a multi-key mess.

Tuesday, June 20, 2017

github note - ignore whitespace

When doing a Pull Request via github you can add a ?w=1 to the end of a url e.g.  https://YOURCOMPANYSITE/BRANCH/pull/1785/files?w=1

Monday, June 19, 2017

tribute to two meta-artists

I've always liked software that let the user make something - from Bill Budge's Pinball Construction Set to the make-a-game fun without programming Klik N' Play, there have been some great examples of that over the years.

I want to write briefly about two creators, Toshio Iwai and Takeo Igarashi both of who made original UIs letting users exercise their creativity. Each creator's work was then used in separate commercial products in the 90s and 00s, products that deserve more recognition than they get.

Toshio Iwai is a multimedia artist. He may be best known for Electroplankton, a fairly early but very limited release for the Nintendo DS- his name appears on the packaging for it, an unusual-for-Nintendo recognition of singular artistic creation.

Electroplankton is not quite a game, not quite an instrument... it consists of ten different interfaces for making music and sounds of various types...



This was not Iwai's first multi-part collaboration with Nintendo - that would be the 4-part Sound Fantasy. One of those parts was based on his earlier work Musical Insects. This concept, 4 musical bugs, each one playing a different instrument that sounded at various pitches as the bug waddled over different colored tiles laid out on a blank canvas, got parlayed by Maxis into a nifty package called SimTunes. I guess this trailer gives you the overview about as well as anything:


This program was a terrific and playful mini-sequencer and paint program. Kids and Adults could focus on the sound, the look, or both. Just out of college, I remember setting it up with versions of Groove is in the Heart and "Alphabetter", a replacement for the alphabet song that I hope catches on but I'm sure never will. I appreciated that it had different palettes - for example, limiting the painted notes to a specific scale or modality, such as my favorite "Blues Scale" and an aspiring kid or adult could easily apply music theory they had or learn something new.

More recently Iwai collaborated with Yamaha to make the Tenori-On, a sequencer grid of lights. (I was almost ashamed at using a ThinkGeek knock off called the Bliptronic 5000, 'til I realized it was about 1/10 the price... and about 1/10 the functionality, but still.) I also found this overview of his art installations.

Takeo Igarashi seems to be more of a computer scientist than an artist, but his UI implementations are at least as impressive.  His academic homepage is of the ancient variety, and sadly most of his demos are a serious pain to get running in this day and age where Java on the desktop is all but forgotten. Still, his Smooth Teddy interface is remarkable; the user draws basic 2D shapes that then get rendered into 3D shapes.

The most straight forward descendent of the "Smooth Teddy" family is MagicalSketch 3D for iOS, a somewhat pricey (by app standards) tool, but one that promises to be an easy path to modeling for 3D print. (I haven't played much with Microsoft's "Paint 3D" but I think they would be well-served licensing out the core model.)

The finest rendition of this concept, however, is Magic Pengel: The Quest for Color for the Playstation 2. I feel it's a shame it didn't go by a more direct translation of its Japanese name, "Doodle Kingdom", because this project (a joint production with some collaboration from Studio Ghibli (of "My Neighbor Tortoro" and "Spirited Away" fame) deserves more attention than it ever got. (A "Pengel" is a Pen-Angel, I think a little helper sprite in the game. I'm not sure to whom they were trying to market with a name like that.)

Because not only can you doodle in 3D - your creations come to surprisingly charming life. Here's a Let's Play of it:

The editor works by letting you indicate what you're drawing (body, arm, wing, etc) - this knowledge is then incorporated to inform various animations (Walk, Tackle, Jump, Dance, etc) and the effect can be stunning- here's what a talented artist can make with its editor:


It's so delightful to sketch something out and then have it frolic around the "practice field".

Unfortunately, the game is horribly marred by ... well, too much game-ness. In some ways the body you construct doesn't do much to determine how your creation interacts with its virtual physical universe, it's just raw numeric material for a probability based monster battler ala Pokemon, with Rock-Paper-Scissors type strengths and weaknesses. Also, they limit the amount of "ink" you have to draw lines with, and then make the game about fighting monsters so you can get more ink to make your own creations that much more powerful, rather than creative.

There was a semi-sequel for the Game Cube called Amazing Island and one for the PS2 called Graffiti Kingdom. I remember getting absolutely stuck early on in Amazing Island and some utterly crap minigame, and if memory serves, Graffiti Kingdom tried to codify its editor too much, and lost much of the organic charm of the original.

Finally, I'd like to make one honorable mention for a game with a kind of brilliant editor built-in (though I don't believe there's a singular artistic vision behind it) - Banjo-Kazooie: Nuts + Bolts:



 This is by far the best "game" of everything I've talked about here - it starts with a gorgeous Mario 64-esque hub (looking like someone said "what if we ran all those pretty colors of the N64 into the kind of engine we can make today?)  with all these delightful themed subworlds, but each as if you can see the gears behind the walls work. Each subworld has multiple challenges that you build various vehicles to beat: cars, of course, but also boats and planes and flying balloons and sumo-karts etc. At first I thought all the creations were ugly and orthogonal-looking (VERY reminiscent of the old Capsela toys) but then the delight of making a car where the design really matters in a cartoon-physics kind of way takes over (and you can put on enough bolt-y bits to improve the look quite a lot.) And as you get more parts (there's that game-ness) you can go back and try for higher "medals", but the challenge level is generally well done, and the level of backtracking needed is negligible.

(And a small group of super-hard-core fans have really stretched the editor system to the limit, making these absurdly heavy jet-powered walking mechs in a game that was never meant to have any such thing...a joy to behold.)

Anyway, I love stuff like this, making a easy enough for a beginner but rich and engrossing enough to reward continued play (rather than a quick doodle and a "meh") is a tremendous feat. (Though I did once get a few people digging my own online Jack-O-Lantern maker) Both of these people and their works (and Banjo-Kazooie) deserve much admiration.

Tuesday, June 13, 2017

quick css throb effect with vanilla js

For a long time, I've been meaning to get back to the 30 Day Vanilla JS Coding Challenge. I learned a lot from the very first lesson even, which is a nifty little drum kit. Here's a kind of "throb" effect I picked up and modified from it, uss CSS transitions and transforms for scale: click the blue div to see it work...

 
0


Here's the code for that, most relevant bits bolded:
<style>
  #css_throb_button {
    background-color:blue;
    color:white;
    padding:4px 20px;
    transition: all .1s ease;
  }
  .throbbed {
    transform: scale(2);
  }
</style>
<div id="css_throb_button" onclick="css_throb_test(event);">0</div>
<script>
  var css_throb_count = 0;
  function css_throb_test(e){
    var panel = e.target;
    panel.classList.add('throbbed');
    panel.innerHTML = ++css_throb_count;
  }
  function css_throb_removethrob(e){
    if (e.propertyName !== 'transform') return;
    e.target.classList.remove('throbbed');

  }
  document.getElementById("css_throb_button").addEventListener('transitionend', css_throb_removethrob);  
</script>

So a couple notes:

  • there are a few ways of removing the class. You could also use setTimeout, but this is nice because it keeps you from having to confirm the timing (as set in the transition) in two places.
  • the scale transform doesn't work on inline elements - so when I started with a "span", I couldn't see the transform effect until I changed it to display:inline-block...
  • also to keep things simple I'm not doing anything special for making sure the document is ready, so I had to put the script tag after the div element in the page so the getElementById() would work
I like how it zooms in place. There are ways of tweaking the timing, size, and easing, but this seems like an easy way of getting attention to the element.






Friday, June 2, 2017

Thursday, June 1, 2017

whack-whack

A sysadmin-y friend of mine has helped me use Lets Encrypt to get my https mojo working on my virtual server.

One problem is that a page loaded on https referencing external scripts over http break.

One flexible fix for that is, with most of these URLs, the protocol can be left out, so instead of changing http:// to https:// I sometimes change it to // -- what we used to call wak-wak a few jobs alone. In effect your saying "load this with whatever protocol this is loaded". I guess it will break if the underlying site hasn't gotten around to offering https though...

brutalist

from Pierre Buttin's Brutalist UI Redesigns:

I kind of love some of these. It reminds me of the same problem I have quantifying what exactly makes an old website look old.