Cardboard Unity

I’m just getting started with creating Google Cardboard VR using Unity

It took a while but I eventually got Google’s demo scene to compile and run on my iPhone.

Demo Scene

Demo Scene

It involved taking the output from Unity and compiling it into an iPhone app with Xcode. The compiler warnings may give the impression that I know what’s going on…

Xcode screenshot

Xcode screenshot

And I’ve started adding new elements into the virtual world and editing Unity scripts to add behaviors.


I have an idea for a project. Stay tuned…


I have an idea that I’m interested to explore that uses maps and mapping data. So, the first step has been to get started.

There’s a lot of stuff out there. A few of the links I looked at: —  has some nice example maps

Because I’m less interested in making tweaks, but instead doing more radical reconstruction of the map, I decided to find ways to import map data into Processing where I could then build my own data structures and ways to render the data.

I’ve been able to get data from OpenStreetMap and then parse it in Processing. I’m not too far along, but just happy I’ve got something to start with. Here are a couple of images I’ve generated so far…

Screen Shot 2014-02-25 at 12.58.45 PM

Screen Shot 2014-02-25 at 3.46.08 PM

Screen Shot 2014-02-27 at 2.38.44 PM

Screen Shot 2014-02-28 at 11.27.22 AM

Stars and Snowflakes

Spending the holidays at our farmhouse in upstate New York, I’ve been doodling more with Processing. Maybe it’s being out in the country or watching too much snow fall, but I’ve had fun just exploring textures and patterns and how they can vary and loop.

Click here to launch the sketch. Clicking advances through a handful of different predefined patterns. Below are a couple images from it.




I could’ve spent more time refining or making it smarter or fancier or more interactive. But with new years coming up I thought I’d “theme” it a bit and make it into a new years mailing. And, with the benefit of a hard deadline, I couldn’t noodle forever. 😉

Click here for the new years doodle. And below are a couple images of it, too. The design uses the Emigre font Lo-Res 12 Narrow as the layout for the digits.



Processing Stars

I’ve spent the last couple days with Processing and it’s been a lot of fun. So easy to use, and very quick to try things out and get a sense of how the code works. Best of all, the Processing app gives useful error messages so I’m not spending time in the browser debugging things — something that was a bit frustrating when I was using Raphael.

(I tried using Sublime to edit code, but it doesn’t show the error messages that the Processing app gives. It’s probably something to investigate further. For now I decided to just stay within the Processing app.)

The best thing about Processing is how fast things rendered on the screen. I could create an animated display of over a thousand objects, each with their own sub-animations, and the display was fluid and fast. So I spend a lot of time enjoying the dynamic patterns that emerged from my code. Patterns, overlaps & transparency, synchronicity, color and transparency, density vs openness — and how it all shifts over time.  It was a lot of fun — even if what I did probably wasn’t super brilliant. I loved the repeating patterns. I was fascinated by how things would gradually re-sync and all came back together. Sometimes it was only partial. But when everything re-connected there’d be a kind-of flash. I still think it might be a bug. But it reminds me of when, in a song, all the instruments stop for a second — it’s like an extra heartbeat. An extra breath. A pause. I’d love to explore this more.

The only problem with these lots-of-objects sketches is that they don’t run as fast when they’re in a browser with Processing.js. So I need to think about if I want to 1) keep playing in the desktop application world or 2) optimize my Processing designs to work better in a browser, or 3) try something else. The article Web-Drawing Throwdown: Paper.js Vs. Processing.js Vs. Raphael gives a good summary of the tradeoffs of a couple different technologies. And got me interested to learn more about Paper.js.

Ok. Here are some screenshots from some of the Processing sketches I did. (They’re more interesting when they’re animating. But I don’t want to optimize for the browser yet, and don’t want to worry about how to include source and/or executables.)










Today I wanted to stay with JavaScript and explore other ways of doing graphics and animating them. I have a feeling that things would be easier in Processing, but I want to stay with JavaScript and the web object model of things, rather than hide from it in Processing’s more protected environment. (I realize that these descriptions are probably not very well articulated, or even correct, but that’s just because a lot of this is still new to me.)

So… graphics. First I tried using svg.js without much success. Then I thought that I should be working with html’s canvas element instead and spent a little time with this tutorial to get a couple shapes up on the screen. But it took much longer than I’d expected to get it working. After a bit of reading on SVG vs canvas and I decided to go back to SVG and try Raphaël. Again, frustration because of limited documentation, examples that didn’t actually work, and a lot of searching to get things going. And as I search I often get deeper into answers that distract or confuse me. I used this tutorial a bit – but the question of SVG vs canvas is unanswered. There’s a lot of territory here to understand.

Eventually I got something running. At some point I included paths (from this cool collection of Raphael icons) but it slowed things down a lot. To animate things I’m using window.setInterval() and my own event loop rather than Raphael’s transitions because it seemed more natural to me. But I might be trying to use inappropriate design patterns.

In the end what I’m posting is stripped down a lot and pretty basic. Really it’s not much at all. Below is a pic. Here’s a link. But it’s a start.


Next things to do: get a good reference book on JavaScript, understand how to work with multiple files, and have some fun.


As I started this project I thought that I should focus on web-based ways to code and sketch. So things like Processing, OpenFrameworks, and Cinder — which, as I understand them, are designed to run as applications on computers, seemed less relevant. But I then stumbled upon processing.js which looks like a way to put Processing code into a webpage without requiring any plug-ins (ie. Java).

To get things set up I downloaded the latest version of Processing. I also found that you can use Sublime to edit Processing code with the Processing Bundle for Sublime Text 2 (even if I’m using Sublime Text 3).

So a little distraction to get it all set up. No code yet. And a reminder to myself that it’s very easy to get caught up in the geeky details – rather than in the act of coding or creating.


Ok – so thanks to some pointers from Jeff, I got started today with D3 and some JavaScript basics. The real big help was Scott Murray’s book Interactive Data Visualization for the Web. I read through most of the free online version and it was a great overview of JavaScript basics and the power of what the D3 libraries offer — basically a set of functions to parse and visualize data sets. What was really nice, for me, was that there were no surprises… the fundamentals of JavaScript were super familiar, and I could reference them easily to code that I’d known before.

I downloaded and installed Sublime Text for editing text and MAMP to serve pages. I think I added the JSHint plugin to verify my code, but I have a feeling it’s not installed correctly, because nothing happens in the editor if I type bad code. I’ll have to investigate this later.

As a first project I took the text from a txt chat. I copied the text from Apple’s Messages, pasted it into Sublime, and did a couple find/replaces to get it into a csv formatted file. Then a bit of noodling around with code and I ended up with a visualization. Nothing too fancy – but it works. And there’s a little html interactivity that triggers subtle D3-based animated transitions. Below is a screenshot. And here is an interactive version (although I put in fake text because I don’t want to share the real txt conversation here).


The visuals are with JavaScript SVG shapes — which seem pretty basic. Next things to explore: ways to do richer visuals, and more with motion.


Hello world

I’ve coded in Pascal, C, Lisp, Fortran, Basic and Lingo, and played with a handful of other languages. But over the years, as I’ve moved into design strategy, concept, and management, I’ve coded less and less. Really, it’s been a while since I’ve gotten my hands dirty in code. And I recently realized that I miss the creativity that can be expressed by coding.

When I first started, the idea of creative coding was new and unnamed. I’ve always really strongly believed in the need for creative people to get involved in coding — in part from my education at the early days of the MIT Media Lab. But trying to push that idea was always hard and there wasn’t a very large community of like-mined people. When I talked about “sketching in code” I’d usually get responses that that was only something for rocket scientists.

It’s amazing how creative coding has gone mainstream. The tools, languages, libraries, and resources are so much broader and richer than when was starting. And while I have a passing familiarly with them, I don’t know enough to feel up-to-date.

I also want to get back to noodling around with code –a mix of learning and being creative. And so I’m starting this site to hold my sketches and experiments and notes.

Stay tuned. It’s going to be messy.

It’s a coincidence, but today is also the first day of Hour of Code — an effort to get people to spend time learning programming, and understand its value.

Getting dirty again.