Sep 16, 2015
From the desk of Darius Kazemi
Hack your EO1
Dear EO1 Enthusiast,
A brief word of warning: this is all very experimental and can cause your EO1 to go wonky. Use this stuff at your own risk. There is no factory reset on the EO1 right now (as of May 23, 2016) but I hear there is one forthcoming.
About a month ago, Electric Objects got in touch with us. They're the makers of the Electric Objects EO1, and they thought we could help them convey both what the EO1 is and what it has the potential to be. If you're not familiar with the EO1, it's a device that brings net art into your home. It looks like this:
...well okay, it only looks like that if you're a model who likes to read Thomas Pynchon (so... me). In reality it looks like this:
It's still a very attractive piece of hardware. (That's Jenny Odell's Conquerors and Inhabitants on our EO1, btw.)
We ended up doing a two-part project for Electric Objects. For one part, Feel Train member Courtney Stanton curated and organized an event we ended up calling the Electric Objects Salon, a popup art gallery held at the 2015 XOXO Festival here in Portland.
For the other part of the project, I worked on a new piece of art for the show. I had aesthetic and technical goals for the piece:
- It should push the technical boundaries of the EO1 and do something nobody's seen on the device.
- It should work primarily as an ambient piece, so it needs to be interesting enough to have on your wall for days at a time, but not be super annoying.
- It should be connected to the live internet, and this connectivity should be immediately obvious to anyone who casually glances at it.
Before we get around to the technical stuff, I think it's important to lay out the current capabilities of the EO1.
What the EO1 can do today
The EO1 is a computer that mounts on your wall or stands up on a surface. Unlike most computers, it has an exceptionally beautiful matte display. Also unlike most computers, it has no visible input peripherals: no keyboard, no mouse, no touchscreen, no microphone, no motion sensor.
The way you interact with the EO1 is over Bluetooth and Wi-Fi. You do this through the Electric Objects app for iOS or Android. On Android it looks something like this:
You browse through curated collections (the Art Club), then browse within the collection to pick a piece of art, then press a button to display the art on your device. You can also display art that's in your Library, which is stuff you've collected from around the web.
You can also display an arbitrary URL on the device's built in Chromium browser. I'll come back to this later.
The art that the EO1 "natively" supports right now is still images, animated GIFs, and mp4 videos. This is super cool, but also somewhat confusing to the consumer. A lot of people see this functionality and think that the EO1 is an expensive digital picture frame. This couldn't be further from the truth.
What IS the EO1?
The EO1 is a fully fledged computer. It can generate text, animate shapes, run simulations, and even render 3D scenes. This is the kind of art that I like to make, and it's the kind of art I want to make for the EO1.
More specifically, the EO1 is an Android device running a version of the 4.4.2 Kit-Kat Android operating system. It has a 1080x1920 display with an excellent viewing angle, oriented to portrait mode. Imagine a very large Android tablet except with no touch screen.
This means that, roughly speaking, anything that works on Android will technically work on an EO1.
So let's say we want to get some computational art running on this Android-on-our-wall that has no input devices. How do we do this?
Let's make art with the built-in browser
Earlier I said that the EO1 will display any URL on its screen. You do this by logging in to your Electric Objects account and going to this special URL. Here's what the EO1 looks like displaying the Feel Train website:
Great! We've got a browser! It's a Chromium build! Let's give this a shot! Here is an extremely simple website:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<canvas style="background-color: #999;" width="1080" height="1920">
</body>
</html>
We should see a gray canvas that (roughly) fills the screen. If we put it on the EO1, we get...
Err, okay. It turns out that since this is a mobile browser, it displays things via a viewport where it does things like zoom out as far as possible on the page when you render it. This is nice if you're displaying a non-mobile website and you want the user to zoom in and out, but we want to tightly control the drawing area on the EO1. Fortunately, this is easy to do by setting the viewport properties in a meta tag. We change the head tag to look like this:
<head>
<meta charset="utf-8">
<meta name="viewport" content="height = 1920, width = 1080">
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
What we're doing here is resetting the default margins to zero and defining a viewport of exactly 1080x1920 pixels. You would never do this for a normal website since you can't be sure of the size of the device screen, but for an EO1 we know exactly what we're targeting.
Now our canvas looks like this:
Exciting! Now here's some code to fill the top half of the screen with a red rectangle:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="height = 1920, width = 1080">
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<canvas id="canvas" style="background-color: #999;" width="1080" height="1920">
<script type="text/javascript">
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(0, 0, 1080, 1920/2);
</script>
</body>
</html>
Now that's what I call art:
Let's put in a very simple canvas animation. Let's make a blue square that moves diagonally across the page. We create a square object and use a call to window.requestAnimationFrame to loop the animation as fast as the browser will render it.
var ctx = document.getElementById('canvas').getContext('2d');
var square = {
x: 100,
y: 100,
w: 40,
h: 40,
color: 'rgb(0,0,200)',
step: function() {
// calculate next position
this.x += 1;
this.y += 1;
//draw it
ctx.fillStyle = this.color;
ctx.fillRect(this.x-this.w/2, this.y-this.w/2, this.w, this.h);
}
};
function draw() {
ctx.clearRect(0, 0, 1080, 1920);
ctx.fillStyle = 'rgb(200,0,0)';
ctx.fillRect(0, 0, 1080, 1920/2);
square.step();
}
(function loop() {
window.requestAnimationFrame(loop);
draw();
})();
We expect an animation this simple to run on a web browser at close to 60 fps (frames per second), and indeed we see that on a desktop browser. But if we run this on the EO1, we get...
Ooof. Maybe it's hard to tell from the video, but I ran some measurements and as of September 2015 when I write this, the EO1 browser renders canvas animation at about 13 fps, which is way too slow for most animation applications.
We also see similar performance with DOM animation. As you'd expect, P5.js sketches run slowly in this environment too.
But you can still use the browser for procedural art! One of the pieces we showed at our Electric Objects Salon was Moth Generator by Katie Rose Pipkin and Loren Schmidt. Every 30 seconds it generates a beautiful random moth using naturalistic algorithms:
It's gorgeous and it all happens in HTML/JS/Canvas. It just isn't animating (or rather, it animates at 0.033 fps, one frame every 30 seconds).
"This is an Android. I know Android."
I wanted smooth, fast, live-rendered animation on my EO1, but the browser wouldn't cut it. But the EO1 is an Android device. Androids are generally pretty friendly and hackable! But how do you hack a device with no inputs?
My first thought was to pair a bluetooth keyboard with the device, but unfortunately I was unable to get any bluetooth keyboards or mice working on the EO1.
Fortunately it turns out there's a micro USB input on the back of the EO1, just like on any regular Android device. There's a device called a USB To Go cable that lets you plug in a regular USB device to a micro USB port. Here's mine:
I ended up plugging the USB cable into the EO1, and then a USB hub into the cable, like so:
Now I have multiple USB ports. You can see there that I have a dongle for a wireless keyboard/mouse combo plugged into the hub.
Now that I have a keyboard and mouse hooked up, I can exit from the default Electric Objects app and go to the home screen!
...except there is no home screen on the EO1 Android build. There's nowhere explicitly to launch apps from, since the device was designed to simply boot up and start the Electric Objects app.
There's also no Google Play store. There's no app store we can install applications from.
Lucky for us, Android has built-in keyboard shortcuts for opening certain critical apps. If we press mod+B (on a Windows keyboard this is the "windows" key), the stock web browser launches!
This browser is not the Chromium build that the EO1 uses by default. It's the stock Android web browser. But it has a URL bar and tabs and menus and all the things you're used to since it isn't running in kiosk mode.
With the browser available to us, we can now install any arbitrary application. All we have to do is download the app's APK file and then manually install it from the "just downloaded" notification in the notifications tray. (The device is already in developer mode so we don't need to turn that on.)
Processing for Android
Did you know that William Smith of Calsign Labs ported Processing.org to Android? Like, the whole IDE and everything? You can go the the Google Play store and download APDE and it comes with the familiar Processing IDE and conveniently compiles APK files that you can then install and run, right on your Android device.
It's incredible. Thanks, William.
But since there's no Google Play store, we need to download the raw APK file. One way to do this is to build the APK file yourself from the APDE source code. If you don't want to build it, here's a prebuilt APK file I made that you can just download on your EO1 by opening its web browser (mod+B on your keyboard) and then entering the URL for the APK.
When you go to that URL in your browser, you'll notice a little "downloading" arrow in the upper left hand corner of your notification tray. "Swipe down" on the notification tray with your mouse (yeah it sucks, oh well), and then you'll be able to see the download progress:
Once that's done, you can click on the apde.apk file and it'll ask if you want to install the app. Say yes, then install and open it. After a little bit you'll see this:
Hey, it's Processing on the EO1!
If you tap the logo in the upper left a menu will pull out and you can select from a bunch of example sketches. Some of these will work and some of these won't. I like to load up Examples/Demos/Graphics/RotatingArcs by Marius Watz. Press "play" in the upper right to compile the sketch. This creates an APK file for the Processing sketch that is then installed through the normal app installation prompts. Once you open it, you'll get this:
Beautiful smooth 3D animation right there on your EO1.
At this point, you can play around with APDE. On the EO1 it has some limitations you'll run into: some draw modes from regular Processing don't work, and on the EO1 there are weird issues with Z-buffering that I haven't quite figured out. The EO1 also has relatively limited memory on its GPU so hardware-accelerated font drawing is fast but can't store extremely large font rasters.
Also, sometimes, it'll crash. But you're living on the edge. It's expected.
One last thing...
Since there's no home page to launch applications, if you reboot your EO1 you're not going to be able to manually open APDE again. What I did to get around this was install a program called Startup Manager (the free edition). Once installed, the app always runs on startup and you can select it from the notification tray in the upper left and pick which apps you want to launch on startup. I've mirrored the APK file here which you can download and install just like you did with APDE above.
Live computational art on the EO1
The EO1 is a computer for art. Right now it shows images and loops, but as I've shown here it's completely capable of running complex computational visual art at a smooth frame rate. In a future post I'll write about Broadside, the piece I built for the Electric Objects Salon, including my development workflow and how I took the unique aesthetic affordances of the EO1 into consideration.
I'm grateful to Electric Objects for giving us the opportunity to play with this really interesting piece of hardware and publish our results. And I'd love to hear about any hacking you've done with the EO1 as well. Feel free to reach out to me at darius@feeltrain.com!