secretrobotron is me

kidmograph: Landscape_poster01 (*WIP) Project i’m working on...

Tue, 23 Apr 2013 15:06:07 -0400

kidmograph:

Landscape_poster01 (*WIP)

Project i’m working on doing C4D Illustrations

thekhooll: Tilt By Romain Laurent

Thu, 04 Apr 2013 08:52:30 -0400

thekhooll:

Tilt

By Romain Laurent

A little bit of psytrance :) A Speck of Dust by Terrafractyl

Thu, 28 Mar 2013 16:03:03 -0400

A little bit of psytrance :) A Speck of Dust by Terrafractyl

Parallel Processing More great chiptune tracks hosted on...

Thu, 28 Mar 2013 11:44:49 -0400

Parallel Processing

More great chiptune tracks hosted on bandcamp.

Freeformers and Mozilla Jam

Mon, 11 Mar 2013 08:55:00 -0400

Recently, I spent a couple of days in the UK with some of the brightest members of Freeformers — Tom, Max, Josh, and Lewie . Our goal was to collaborate on an exploratory prototype tool that encompassed some Webmaker design and ideology, and helped Freeformers achieve higher learning efficacy in their “Tech Jams” — sessions designed for the curious and inexperienced to awaken the instantly-capable web hacker within. From Freeformers’ teaching experience, we identified a sore spot for many students of the programming art: data structures. Namely, JSON blobs. Pulling together our various expertise, we put together a fairly interesting demo: http://secretrobotron.github.com/d3/

JSON is commonly used to pass data to and from services on the web. For instance, let’s pretend we’re creating a web app that exists solely for hamburger enthusiasts. Users go to “burgerloversunite.com” (or similar) and are encouraged to sign in and post pictures of their favourite burgers, with obligatory facebook, twitter, and YouTube integration (not an exhaustive list). But how does any of that “integration” really work? If secretrobotron has videos of burgers to show off, how do we ask YouTube to tell us about them, their meta data, direct urls, preview images, etc.? One popular option is to send a message to YouTube in the form of a url, telling it that we expect it to return some data in a certain format, like so:

http://gdata.youtube.com/feeds/api/users/secretrobotron?v=2&alt=json

In other words, “computer, go to gdata.youtube.com, find the user ‘secretrobotron’, collect his video feed, and send it back as JSON.” Unfortunately, such a request sends back something like this:

{“version”:”1.0”,”encoding”:”UTF-8”,”feed”:{“xmlns”:”http://www.w3.org/2005/Atom”,”xmlns$media”:”http://search.yahoo.com/mrss/”,”xmlns$openSearch”:”http://a9.com/-/spec/opensearch/1.1/”,”xmlns$gd”:”http://schemas.google.com/g/2005”,”xmlns$yt”:”http://gdata.youtube.com/schemas/2007”…

How do you navigate a wall of text like that? That’s not even the whole thing. It’s much, much longer, even for a fairly inactive user. Experienced developers tend to use tools provided by browsers or addons which help explore their data, but that can be cumbersome and difficult to understand at first.

Fortunately, however, JSON data is structured as a tree, and there are certain well-established techniques for visualizing that kind of data interactively. Enter the Tree Map.

Tree Maps are designed to display nested data. Regions have sub-regions, which, in turn, have further sub-regions, and so on.

Freeformers Josh and Max, remixed a D3 Tree Map demo to display and navigate through arbitrary JSON data. Their work provided a visceral experience of exploring a nested data set, using interactivity as the dimension through which depth and nesting are discovered.

Ignoring the timeline at the bottom for a minute, try out the demo: http://secretrobotron.github.com/d3/ . It’s a good start, illustrating the structure of JSON and implying that data structures aren’t scary, but can feel rather organic. However, the simple exploratory interactivity of the treemap is where the lesson about JSON structure ends.

Tom, web service API master hailing from the Netherlands, built a tiny, yet versatile library called gtty to gather data from the internet (currently, Facebook, YouTube, and SoundCloud) to flow into the D3 visualization. And, it’s impossible not to notice the Webmaker touch he added to the project. Paths through the structure marked by “[!]” lead to various external service applications, like SoundCloud and YouTube players, iframes, images, and links. Not only does this tool show that JSON has a useful, serializable structure, but that JSON is used as a communication medium for many of the services, apps and tools with which today’s web citizens are familiar.

With that ideology in mind, placing the Popcorn Maker timeline in the experience seemed natural. This version of the timeline is a further modified fork of the work I began with Atul on Webmaker Markup API. Events on the timeline represent pieces of the JSON data, and for each event, Popcorn will navigate the structure from root to destination. Clicking on the “Create Event” button will place an event in the timeline corresponding to the current JSON node (e.g. root.youtube.feed).

Freeformers’ newest member, Lewie, worked with us to get the D3 visualization and Popcorn Maker into his carefully crafted, Bootstrap-based design. Crowded around a single computer with minutes to spare at the end of our last day, we all pitched in and managed to get the project working as a cohesive experience.

Given another day or so, it would have been elegant closure to engineer the ability to drag items directly from the JSON visualization into the timeline. But, of course, that’s left as an exercise to the reader.

Hopefully, playing with the tool is a catalyst for learning about the growing ecosystem of public APIs on the web, and how, at a fundamental level, technologies are often meant to play nicely together. That’s the way the web is meant to be.

atavus: Hong Yi - Portrait of Aung San Suu Kyi, 2013 Read more...

Tue, 26 Feb 2013 17:54:48 -0500

atavus:

Hong Yi - Portrait of Aung San Suu Kyi, 2013

Read more at [My Modern Met]

Forward Thinking: Scriptable Webmaker Tools

Thu, 20 Dec 2012 17:32:00 -0500

Recently, Brett Gaylor wrote about the prospective future of Webmaker in 2013, discussing the topic of “Content Types”. Using a promotional video from the days of black-and-white GUIs, he drew an analogy between HyperCard and Webmaker ideology. The idea isn’t new — in fact, Ben Moskowitz had written previously about his own inspiration stemming from software like HyperCard and ResEdit. But Brett’s video really drove home the point for me.

While developing all-encompassing UI’s for tools is ideal, it’s also very hard. However, giving users the ability to script in the context of a tool alleviates much of the pain in designing the ultimate extensive UI. Moreover, it incrementally teaches the user the memes which stir around the tool and how to use them expressively to become super-users.

Naturally, I started hacking away at a prototype of this type of functionality in Popcorn Maker.

Originally, one of the goals of Popcorn Maker was to show the user the Popcorn code being built for them with the tool. At every turn, the user should be able to open the hood and look at how their project’s code changed to deliver what they see. Over the course of last year though, as Popcorn Maker really grew legs, that idea was supplanted by other inexorable demands more central to the comprehensive functionality of a web app — all the things usually neglected at the beginning of a fast-paced project born from a prototype, like dependency loaders, layout systems, build environments, sane architecture, bugs, bugs, and bugs.

Instead, Popcorn Maker boasts with a pretty versatile UI system. It’s not too hard on the eyes either. But, after a bit of regular usage, it’s easy to see where digging your hands into a script is sometimes preferable — especially for an experienced programmer.

For example, using the plugins that ship with Popcorn Maker, the timeline has exactly one control flow. In other words, there’s no way for decisions expressed by the user to affect the content of the presentation itself.

They can use the play/pause button, click on images and links, skip around the video, but the video still lacks the elegance of interactivity that can be attained with a bit of customization.

If I want to prepare a Popcorn Maker project that will show content contingent upon the number of prior visits by the user the project’s content needs to be somewhat intelligent. That sort of functionality could be built directly into the plugins, but it’s hard for plugin designers to define everything that should or should not be possible, and present some configuration options to help.

Still, using an expressive UI is favourable over writing everything out by hand, so meeting somewhere in the middle is best. And, of course, this idea has pervaded software even earlier than Hypercard. From Adobe’s creative product suite to modern game engines, there is a distinct and purposeful line between the parts of software architecture that are meant to be malleable, and the relatively steadfast parts that support them. Nobody wants to write NPC scripts in C++, nor is anybody looking to write pixel shaders with Haskell. Large projects provide several important vectors for contribution at different levels, and depending on the piece of the project or the type of work, a user or contributor must choose which is most appropriate (or is forced to through architectural decisions).

However, with the advent of intrinsically open, dynamic languages like JavaScript, there needn’t be such a stark divide between code that is meant to run the app itself and code that is meant to run inside of or with the app. Many other projects have similar thinking behind them, and while still being subject to a compilation process, even Processing.js sketches are almost JavaScript. A scripting interface for Popcorn Maker would be free of prior language restrictions though, so user-generated scripts that run inside of Popcorn Maker can simply be JavaScript! By extension, learning to script inside of Popcorn Maker will teach the user JavaScript. And scope restrictions are likely more helpful than not, giving the user a small box to think about, and forcing them to be creative when they want something more.

To test all of this thinking in a prototype, I created a branch of Popcorn Maker with a rudimentary scripting environment for the Text and Image plugins.

The Text and Image editors have a “Scripts” tab which exposes some opportunities for the user to add some extra customization or flexibility. For now, scripts are chained to specific events, like “onStart” and “onEnd” which are executed during the respective “start” function and the “end” functions of the plugins.

Now, if I want to add some programmatic difference to a specific track event without touching the plugin implementation, I can simply add some JavaScript to the provided CodeMirror textbox. Notice the mention of keywords like “event” and “popcorn”, which would not normally be accessible to globally-scoped scripts. These scripts are wrapped in a special scope providing convenient access to certain objects like Butter (butter), the current track event (event), and Popcorn (popcorn). Since this is just plain JavaScript that the browser is running, I can even use the DOM event system to attach an onclick listener to move the scrubber to 5 seconds when the user clicks on the track event’s target. (If you’re familiar with older versions of Macromedia Flash, this will seem natural.)

Scripting of this sort doesn’t only benefit Popcorn Maker’s users. Developers at all tiers often enjoy the opportunity to talk to the app at a higher level when implementing features. In the same branch, I made some potential improvements to the layout system by applying the idea of a mixin. In Popcorn Maker’s layout system mixins can be used to describe a piece of UI that the developer doesn’t need or want to know everything about. As an example, here’s the text editor rewritten with “buttermixin”s.

<buttermixin type=”editor” editor-classes=”default-editor”>
<h1>Text Editor</h1>
<buttermixin type=”editor-tabs”>
    <buttermixin type=”editor-tab-item” tab-classes=”basic-tab butter-active”>Basic</buttermixin>
    <buttermixin type=”editor-tab-item” tab-classes=”advanced-tab”>Advanced</buttermixin>
    <buttermixin type=”editor-tab-item” tab-classes=”scripts-tab”>Scripts</buttermixin>
</buttermixin>
<buttermixin type=”editor-body” body-classes=”butter-tabs-spacing”>
    <buttermixin type=”editor-body-content-container”></buttermixin>
    <buttermixin type=”editor-body-content-container” classes=”advanced-options display-off”></buttermixin>
    <buttermixin type=”editor-body-content-container” classes=”scripts display-off”></buttermixin>
</buttermixin>
</buttermixin>

When Popcorn Maker starts, this code is exploded into another piece of HTML incorporating predefined UI widgets. Instead of needing to know how to structure the DOM for an entire editor, one <buttermixin type=”editor”></buttermixin> will create most of the important parts that Popcorn Maker expects in order to display an editor correctly within the app. With features like this one, prototyping is far simpler because the time to look up specific CSS properties and DOM structure is reduced, and mistakes are mitigated since forgetful boilerplate syntax is inserted automatically.

The app needs advancements like these to continue to grow while maintaining easy access points for developers and designers. Using a real templating system may still be a better approach, but this was an interesting experiment in continuing to use as much native HTML and JavaScript as possible in Popcorn Maker.

I love being able to exploit flexible systems like the ones available through browser technology to implement architectural features. The benefits are often felt throughout the code base and its developers. I’ve only begun to carve away at the landscape of high-level scripting techniques available to web apps like Popcorn Maker. When I’ve got a more punchy example (perhaps a screencast) of these features, I’ll certainly put it up.

Webmaker in 2013: Collaborative Tools - Popcorn Maker

Wed, 19 Dec 2012 15:45:00 -0500

Yesterday, Jess Klein and I demonstrated the power of modern web technology as a medium for prototyping ideas with the result of a 48-hour design sprint on ideas for next year’s Mozilla Webmaker offering. After some discussions with Jess and Chris Appleton — following work Jess and Brett Gaylor had done previously — I spent Monday putting together a branch of Popcorn Maker which prototypes collaboration.

For a more complete overview of the project and the ideas behind it, head over to Jess’s blog. She’s written a good explanation of the potential workflow for Webmaker.

https://github.com/secretrobotron/butter/tree/webmaker is a branch of Popcorn Maker which uses WebSockets (via socket.io) to connect multiple participants to a Popcorn Maker session.

A session consists of a host and one or more collaborators, where collaborators are invited by the host from within Popcorn Maker. Perhaps the user would like a second opinion on text placement on the timeline, or simply needs help learning how the timeline works. They can invite a friend to their session accomplish what they need.

Once a friend has joined the session, a chat window is active, enabling session-specific banter to take place. With this feature present, Popcorn Maker passes the obligatory “chat functionality in a websocket app” test.

Chatting about a project is somewhat useful, but we sought to deliver a more visceral collaborative learning experience. The host should be able to ask collaborators to help them use the application directly — not just talk about it. So, what does it mean for collaborator to move a track event in Popcorn Maker? Does Popcorn Maker react as Google Drive (formerly Google Docs) does, letting any qualified user manipulate content without permission? Or, is there perhaps an opportunity to let the host learn something by showing them how a collaborator interacted with the software? I chose to implement a form of the latter.

If the host manipulates aspects of the project, collaborators in the session see the same results immediately.

However, if a collaborator makes a change, the host is notified.

Then, the host is able to choose from a list of potentials for the track event that the collaborator changed.

The actions in this example are simple and limited, but the concept it exemplifies and the subsequent ideas about high-level collaboration it offers are interesting.

All the video content in this post is captured from live demos, so there is working code to support collaboration in a branch Popcorn Maker. However, it took a considerable effort to coerce the app to do my bidding. David Humphrey and I have already begun to discuss how Popcorn Maker’s code-base could benefit from a Command design pattern, encapsulating important actions available to the user as atomic units of functionality (great for implementing redo/undo, which Scott Downe and Mohammed Buttu have already started). I imagine that we’ll have to invent a hybrid system to do exactly what we need, and likely employ a model in which the app’s user is an implementation of an “actor”, abstracting interactions with the app’s core. Then, commands can be carried out by an actor, and most of Popcorn Maker needn’t care whether that actor is being controlled by someone sitting right at the computer, a user at the other end of a network connection, or even a script that was designed to give a tutorial.

Lots of exciting work to do in 2013.

atavus: Sylvain Meyer - Land Art

Thu, 29 Nov 2012 10:29:13 -0500

atavus:

Sylvain Meyer - Land Art

It’s the kind of morning where your girlfriend explodes...

Sun, 14 Aug 2011 09:38:18 -0400

It’s the kind of morning where your girlfriend explodes her makeup all over the floor. On purpose.

Caffeine Monster Software blog: Nintendo's Portable Problem

Fri, 05 Aug 2011 15:13:14 -0400

Caffeine Monster Software blog: Nintendo's Portable Problem:

caffeinemonster:

Last week, Nintendo admitted that sales of the 3DS weren’t living up to their expectations, and outlined the steps they are taking to revitalize the platform. They plan to start with a price-cut later this month, and follow through with a strong lineup of games into the holiday season.

In a…

Learning how to use blender 2.5…

Tue, 19 Jul 2011 16:22:46 -0400

Learning how to use blender 2.5…

Welcoming Leucocoprinus birnbaumii to our garden! Saw fit to...

Sat, 09 Jul 2011 10:46:00 -0400

Welcoming Leucocoprinus birnbaumii to our garden! Saw fit to invite himself here…

I’d certainly never seen the pit of a mango before today,...

Tue, 28 Jun 2011 20:43:30 -0400

I’d certainly never seen the pit of a mango before today, and thought it was exciting enough to share. My secret: VERY SHARP KNIVES.

While there are some very obvious pitfalls, the CubicVR.js...

Tue, 07 Jun 2011 10:50:07 -0400

While there are some very obvious pitfalls, the CubicVR.js editor is coming along extremely well, as you can see. ccliffe added some great mouse movement features which let you edit on a unfixed axis.

It still needs a load/save/import/export feature, better object creation/editing details (like the ability to add children to an existing scene object, or add geometry to a mesh), and some more camera controls.

For now, enjoy the most standard (yet impressive) features of CubicVR.js which were most easily exploitable; gotta love those alpha layers and the bump textures on those cubes.

Sunday Hackin': CubicVR.js Scene Editor

Sun, 05 Jun 2011 19:29:00 -0400

Sunday is arguably the best day for catching up with your hobbies. I went out for a beautiful stroll down the quay, practiced some Japanese, and got a bunch of good hacking done. It’s amazing how being relaxed can make you so much more productive.

Anyway, to the topic: CubicVR.js. This 3D engine is growing features like branches on a tree on tree-steroids. Last week, I decided to start work on another that will, with the right amount of work, usurp Blender as the primary means by which one can easily develop scenes for CubicVR.js in a WYSIWYG fashion.

The work is rather rough at the moment, but it’s growing steadily, and I can already see where it needs some serious cleanup: https://github.com/cjcliffe/CubicVR.js/tree/editor

Right now, it’s got some sloppy keyboard/mouse bindings which Blender was gracious enough to let me borrow. So, if you’re brave, give it a shot and let me know what you think. More blogs to come.

monday: Steamed length to sleeves. Ends all mostly weaved in....

Thu, 12 May 2011 18:38:41 -0400

monday:

Steamed length to sleeves. Ends all mostly weaved in. Underarm gaps sewn shut. Blocking done. Center heart duplicate stitched to add depth.

Total time to knit: 10 days.

Now let us never speak of this again.

oxane: Fired YONIL.com

Mon, 02 May 2011 11:45:51 -0400

oxane:

Fired

YONIL.com

ordovicianfauna: Tube, by Ara Peterson, 2008 (laser cut birch...

Mon, 02 May 2011 11:45:16 -0400

ordovicianfauna:

Tube, by Ara Peterson, 2008 (laser cut birch wood and acrylic paint, mirror)

Finally: gphotofs. Fuse saves the day again.

Thu, 28 Apr 2011 21:07:00 -0400

I always wondered how GNOME just sort of finds my camera and automagically ‘mounts’ it. Now, I know how.

My girlfriend asked me to take some photos of her today (nothing scandalous) so that she can get a student photo ID. Obviously, I grab my DSLR and take some photos, but that’s really only 3% of the battle.

Unfortunately, the rest of the battle happens to be, unsurprisingly, dealing with linux. Isn’t that always the case? Usually, you slap in a a usb stick, SD card, or whathaveyou, dmesg it, and just find the device to mount. But, in the camera world, things are still somewhat archaic in that sense. Some piece of software has to read the USB device directly (e.g. gtkam, GIMP, etc.). This isn’t surprising, seeing as how device drivers work like this anyway, but I thought there was at least a more standard way to do it.

But, today, I was extra curious, and thought it impossible that there wasn’t a fuse package that would solve this situation for me. After all, I really just want to mount my camera, like I do everything else in linux. I don’t want to have to open some mess of GTK widgets.

Enter gphotofs. Hilariously, the Arch AUR package comes with literally no explanation (no man page), and the —help description is almost useless. A quick search on google lead me here: http://www.gphoto.org/doc/manual/using-gphotofs.html. As you can see, it’s very helpful:

FIXME: We need to write this section

gphotofs is a libgphoto2 frontend which acts as user space filesystem. It is based on FUSE, the Linux user space filesystem.

Thanks.

For whatever reason, the Ubuntu community has their act together, and the man page is online: http://manpages.ubuntu.com/manpages/hardy/man1/gphotofs.1.html

So, finally, I can simply plug my camera into my beautiful linux machine, enter eighty-four commands, et voila!

The outcome: cute images.