Ghost Hack

Hi friends, I recently gave a talk at “Future Innovation Technology Creativity” in Toronto. The city was really cool, I loved the tech and design vibe, and the weed shop on Queen St.

I wish I had more pictures of the event. The whole time I was suppressing a back pain; must have pulled something at the airport. Which also unfortunately made this the most anti-social conference visits of mine, if I missed talking to you, apologies!

My talk was titled Creative Coding with THREE.js and I chronicle my year-long experience working with it, and why I think it’s an important piece of software and contribution to the web. You can >download my slides here<, though admittedly there’s plenty of omissions in the slides since most of my talk was spent looking at the interactive pieces and walking through how they were made and what they meant to myself and others.

For good measure, I’ll drop the link to THREE.js here. As always, credit goes to Mr. Doob and all the git contributors for making the library what itis to day: an excellent tool for creating visually awesome work on the web.

I really enjoyed Kyle Mcdonald’s talk on giving things away. When I saw the slide of his room, it reminded myself of my own barren mattress of a housing situation. He really is living the New York hacker lifestyle to the max.

I also enjoyed Matt Fisher’s talk on 3D-printing assault rifles. I guess when the playing field is even, maybe we can laser-cut some kevlar vests?

And finally, Daito Manabe is some sort of kefka-esque mad genius. Between the terrible (and often hilarious) translation from Japanese to English, and the insane things he does to himself in his projects… it was well worth the trip alone. Stay brilliant and weird, Mister Tokyo.

In Day 1 we went over how to set up a THREE.js scene and how to create and add geometries to the scene. We also looked at the THREE.js api, and messed around with a Pong clone after watching this awesome talk called “Juice it or lose it” by some fellow indie game devs. Highly recommended watch, it’s entertaining, and pure awesomeness.

Then I shared this Pong clone I coded in THREE.js.

Download the pong clone code here. 

View it online.

You were then asked to “juice up” this example as described in the above video, by adding particles, screen shake, color, whatever you want.

This example will show you how to actually do something with THREE, like a simple game. Let’s walk through the code real quick.

Read More

You may want to dynamically load things like OBJs, other code, or HTML to your projects. In this case you usually need to have a web server to do this.

While you could load your project onto say, ftp or dropbox, it’s much easier to dev locally.

First you need Python. If you are running OSX, you should already have it and don’t need to do anything extra. If you are on Windows, you need to download and install the Python Windows Installer.

Now, go to your command prompt or terminal (in OSX you can just use Spotlight to find Terminal, in Windows you use windows->run>cmd and hit enter), and browse to your project location.

Enter this command

python -m SimpleHTTPServer

If you point your browser to localhost:8000 now, you will see your project files or its index.html, hosted as if it’s on a web host. 

Hi! This post will serve as your guide through the GAFFTA Introduction to WebGL with THREE.js workshop. This post is intended to be your companion for the workshop, in case you get lost on your experiments you can always refer back to this page for help.

In case you’ve landed on this page somehow and are not taking the workshop, you can also follow along. 

THREE.js is a powerful open source javascript library started by Mr. Doob and contributed to by many amazing creative coders.

To get started with this workshop, you can follow along one of two ways:

Method A. This will get you good solid setup for any future experimentation you would want to do. I recommend this method first.

Download Google Chrome or Firefox, or any WebGL supported browser.

Download a good text editor so you can write code. For example, SublimeText. 

Then download the example sketch. You can also view this sketch online. The example sketch contains all the files you need, such as a main.js where the code lives, and a copy of three.js in the same folder.

Once you have the sketch downloaded, you can open index.html in the sketch with your browser. That’s it! You should then see a rotating cube.

Method B. This method is totally experimental and it’s entirely possible to lose your work, but it’s really good for just trying something out. Give it a shot anyway!

Go to http://mrdoob.com/projects/code-editor/ Mr. Doob wrote a snazzy in-page code editor for the lazy. It’s still early in development and there are always issues with such things, so please keep that in mind.

You can go ahead and edit right in that window and update the code as needed.

Some handy links to have open when you’re working with three.js

The source repository so you can look at what each object expects as arguments.

The three.js wiki. This page might answer a lot of your questions.

Read More

A few months ago I was asked to make some visuals for Google IO , something I’ve done in the past with these procedural circuit-board diagrams. I spent a good few weeks experimenting with a ton of different things, in both THREE.JS and Processing, and slowly gravitated towards one concept.

This post will be image heavy, so I’ll skip on the failed experiments and get right to it.

Generative Machines

The idea of a procedural exploding view diagram was very attractive to me. It had all the right elements: a bunch of techy looking mechanical shapes, diagrammatic, and all of these lines criss crossing everywhere as if to suggest motion of a kind that automatically assembles.

It wasn’t enough that I simply had rivets and slots coming together, I also wanted to make an overall structure that looked as if, when assembled, became a machine that forms a whole that was more than the sum of its parts. 

Read More

*edit* This post was created a few days ago but had to be taken down. Should be okay now that It’s up on Google’s official blog.

—-

I work for Data Arts Team at Google and we get a lot of cool oddball projects here and there, more of which I might write about in the future, permissions pending.

Here’s something that is just wrapping up.

Arms Trade Visualization (best viewed on Chrome on full-screen).

A few weeks ago I was introduced to Dr. Robert Muggah, principle of SecDev Group who was giving a talk at INFO summit (Illicit Networks Forces in Opposition), a conference about how information technologies can expose shitty things happening in the world (slave trade, illegal arms dealing, bad actors network). Somehow our team was asked to make a data viz on data, and the project fell on my lap.

Read More

When I ask attendees what their favorite talk was — most pointed to Robert (Flight404) Hodgin’s presentation. It was a real delight watching his new simulations presented and packaged up so neatly, lens-flare, lipsticks and all. I remember someone telling me off-hand that perhaps, of all speakers, Robert prepared the most of anyone. It really shows. I’m eagerly waiting for the EyeO video archives to be placed online so that you too can see his latest stuff.

Read More