{{site_title_here}}

Tag: tech-foolishness

  • Creative Coding Domestika Course

    Instagram has been nudging me to take a programming course for a couple of months. Not that I frequently act on Instagram ads…. though there is this silly keyboard that I use, worthless earplugs, fake liquor, fake cocktails, a gaudy puzzle that we’ve yet to start…. OK… I’m a sucker, but I like excuses to make pretty pictures. I signed up for Making Visuals with JavaScript when Domestika offered it on sale for $10.

    Domestika offers arty courses, presumably for less-technically inclined people. The course looks to be aimed at less-experienced programmers, but I am interested in low-barrier projects to experiment with visually.

    Here are some notes from my first afternoon listening to the first course unit and messing around on my iPad.

    Writing Code on an iPad

    The rap on iPads that they are difficult to create new product certainly seems well-deserved, at least for writing code. To start, Chrome for iPad seems brain-dead in comparison to the desktop, and even Android version; the relevant complaint here is that there is no “Developer Tools” pane to inspect the console, inspect or edit document elements, or to experiment with code…. I’ll save the rest of my Chrome-for-iPad rant for later.

    The text-editor iPad app genre seems to be barren. Maybe there’s less motivation to use a text editor when it’s difficult to aim a browser at a local file or directory even. The experimentation cost, like most iPad apps, is substantial, with the dearth of free apps at the App Store.

    I did end up finding a workable solution in JavaScript Anywhere, which bundles a stripped-down text editor, a browser suitable for previewing your work, and a web server– mostly for use to copy your work to another machine. The side-bar ads are annoying and the syntax highlighting and auto indent don’t work, but it’s an OK solution if you’re just looking to experiment. One nice feature is the starter templates, which, for example, create file stubs to quickly bundle your mark-up, code, and style files.

    For further coursework, I will move on to the desktop.

    JavaScript Canvas

    The course begins by using the JavaScript Canvas as motivation to use variables, arrays, and loops. The presentation is a little breezy with respect to explaining how to access the browser document and the difference between declaring a function and assigning a closure to a variable, but it’s enough to get a motivated student hacking.

    Below are some quick demonstrations for drawing an arc and filling a rectangle. The basic pattern seems to be:

    • Get the graphic context from the document canvas. (Only use one canvas in a div, unless you know what you’re doing.)
    • Set your fill style, line width, etc.
    • Issue context beginPath().
    • Draw your shape using the context object methods.
    • Issue context stroke().

    More-programmatic Drawing

    The course concludes with practices to parameterize your image to allow for experimentation and dynamic fitting. One tool, not demonstrated here, is canvas-sketch, which sets up a web server to watch your files and update active browsers, as well as handling dimensions.

    Below I’ve messed around with the lecture demo by adding jitter to the square placement and looping painting to better demonstrate the probabilistic layout.

  • Flash Cards with Anki

    Pat from the Keegan’s Learners’ Session periodically sends out practice tips, and this week’s encouragement referenced Tom Lockney’s slides from a presentation at the O’Flaherty Irish Music Retreat in Midlothian, Texas. The slides promote active, directed practice and cite Josh Turknett’s Brainjo practice tips.

    Much of the material was review/encouragement of techniques I try/have tried before, but something new to me was the label “spaced repetition,” basically using flash cards to recall or reinforce an idea before you forget it. I’ve tried an failed to keep flash cards for language and musical practice — I whine about keeping physical artifacts, or just maintenance of the cards. Tom’s slides suggest using Anki, an open-source desktop flash-card management program with free Android and paid iOS clients. The Anki apps are supported by a free service to store and sync your card decks.

    Searching around the web for how incorporate Anki into my practice routine, I found

    Anki Card Hacks

    I didn’t find much documentation on how to embed audio or music notation into an Anki deck, though Ankiweb has an example Practique deck with both audio and notation. Furthermore there are lots of r/Anki posts directing users to embed Latex and Lilypond into cards. So what follow are some hacks I tripped over.

    Embed Audio Content

    The flash cards are just HTML documents, and Anki allows you to edit the HTML directly. Furthermore, the DOM engine is pretty liberal in giving the author permission to fiddle. Here’s a simple trick to add an audio player. Open the HTML editor for either side of the card and enter.

    <audio controls="controls" preload="none" style="width: 100%;">
  <source src="https://www.natunelist.net/wp-content/uploads/2014/06/Midnight-on-the-water.mp3?_=1" type="audio/mpeg">
  <a href="https://www.natunelist.net/wp-content/uploads/2014/06/Midnight-on-the-water.mp3">
    [audio src="https://www.natunelist.net/wp-content/uploads/2014/06/Midnight-on-the-water.mp3" /]
  </a>
</audio>

    You’ll get the following widget.

    Javascript!

    The Anki DOM renderer is general-purpose. You can, gulp, even enter Javascript code into a card via the HTML editor, between the <script> tags just like you would expect.

    Referencing an external library is a little more complicated. Libraries read with <script src=”…” type=”text/javascript”> tags are read only when the card is being edited. As far as I can tell, your page can only edit those libraries when you edit, which seems only useful for rendering static content… like musical notation.

    You can reference remote javascript, or download a library and save it prefixed with an underscore to the collection.media directory for reference. The directory is a little tricky to find, but CheCheDaWaff posted a trick on Reddit to locate it.

    Abcjs

    So, the reason why you might want to use Javascript to render static content might be to render SVG musical notation using abcjs. The trick here is to edit your flash card twice — once to render the notation and encode the SVG into the HTML document, and a second time with the render() command commented out before you save it. Alternatively, you can wrap the render() command in a try/catch block.

    The whole point is to avoid a null-reference error from preventing Anki from rendering the the card. While the Anki DOM is pretty liberal in letting you muck around, it’s not as forgiving as most browsers in handling Javascript errors.

    So here’s the example:

    <script src="_abcjs_midi_5.8.0-min.js" type="text/javascript"></script>
<div id="my-tune"></div>
<script>
  var myTune = `T:My Tune
M:2/4
L:1/8
K:D
|: DE FG | AB cd :|`;
  try { ABCJS.renderAbc('my-tune', myTune); } catch (_) {}
</script>

  • Garballed Attractors

    Waiting for a flight home, I stumbled across a Medium blog post on attractors. The example system seemed simple enough and I had some spare time coming up, so I thought I’d try to ape a demo.

    Below is my flawed reconstruction. It’s not an attractor, but similar to a spirograph.