Here’s a little piece that Kyle and I put together last year, as a response to Wafaa Bilal’s 3rdi project.

The Rob/Mug Box tracks a target’s geolocation data: when the box is within range of that person, “mug” lights up; and when the box is near that person’s home, “rob” lights up. This is the first in a series of boxes designed to provide binary feedback about our complicated world.

As our first target, we chose Wafaa Bilal. In December 2010 Wafaa Bilal started a year long performance called “The 3rd I” where he broadcast one photo every minute from a camera on the back of his head. 3rdi.me/ Each photo is geotagged, so we scraped this data and fed it to the Rob/Mug Box. In this video, recorded summer 2011, our agent tracked down Wafaa in a local cafe and followed him home.

The source code is of course on Github.

I developed StickyMan (source here ), a quickie game idea during the Baltimore Hackathon a few months ago. The question I wanted to answer was, “What if Lode Runner got stuck in an Escher painting?”. The idea is that gravity is relative, and every time you hit a wall, that wall becomes the ground. I had fun fudging with the transforms until it more or less functioned. If I had more time, the plan was to make it so that you had to use gravity to indirectly manipulate different colored boxes into different holes, as if you were in charge of the shipping department for MC Escher.

More explanation after the break.

I’ve often longed for and dreamed of the chance to walk through one of Eschers grand halls and stairways, most notably those in Relativity:

Since I haven’t come up with a great way to realize this physically, the next best idea was to make it into a game. Using the JBox2D library made the implementation fairly straightforward- just set up gravity in the right direction, then change it as needed. Player controls were a little more difficult, since they needed to change direction depending on where the gravity vector was- I ended up multiplying the gravity force by a sine or cosine to rotate it to the correct direction for left and right. Jumping works similarly, except that there is a bug in how landing is detected, so you can jump up and up through a pile of boxes.

Some games that include similar concepts:
* Echochrome, a PS 3 game where you manipulate the 3D camera perspective of a game to change the 2D reality that a character experiences- it’s mind blowing if you haven’t seen it before:

* And yet it moves, a very similar platformer, where the player has direct control of gravity, and needs to use it to manipulate the world around him

* Neverball, a game where you tilt the floor of a maze in order to manipulate a marble to collect coins and reach end gates.

It turns out there are a bunch of other games that also explore this mechanic, but this one is mine! Enjoy.

I’ve been working on a display project using Processing, and wanted to add some linear gradients and fuzzed edges to make the display look a bit nicer. The example linear and radial gradient functions work ok, but are somewhat processor intensive, so I wanted to find a better way to achieve the same effect.

Someone on the processing forum suggested using opengl shapes to achieve this. The idea is that you can make a gradient by drawing a polygon (or triangle) shape, and specifying a different color for each vertex of the shape. This causes the gpu to do all the heavy lifting of actually drawing the gradient. Here is an example of how to draw a simple linear gradient using this method:

import processing.opengl.*;
 
void setup() {
  size(550, 400, OPENGL);
  noStroke();
}
 
void draw() {  
  color leftColor = color(255,0,255);
  color rightColor = color(255,255,255);
 
  beginShape(POLYGON);
    fill(leftColor);
      vertex(0, 0);
    fill(rightColor);
      vertex(width, 0);
    fill(rightColor);
      vertex(width, height);
    fill(leftColor);
      vertex(0, height);
  endShape(CLOSE);
}

I played around with this for a while, and eventually achieved the effects i wanted- linear gradients near the edges of the window to (hopefully) subtly draw attention to the center of the screen, and a function to draw fuzzy rectangles by repeating the gradient technique around the edges of a regular rectangle. Here’s the source code, which draws the aforementioned background, as well as a fuzzy rectangle that changes size and fuzziness as you move the mouse cursor around:

import processing.opengl.*;
 
void setup() {
  size(550, 400, OPENGL);
  noStroke();
}
 
// Draw a rectangle which can have differently colored edges
// @param x X coordinate of the top-left corner of the rectangle (pixels)
// @param y X coordinate of the top-left corner of the rectangle (pixels)
// @param widt Width of the rectangle (pixels)
// @param heigh Height of the rectangle (pixels)
// @param tlcolor Color of the top-left rectangle corner
// @param trcolor Color of the top-right rectangle corner
// @param brcolor Color of the bottom-right rectangle corner
// @param blcolor Color of the bottom-left rectangle corner
// 
void makeRectangle(int x, int y, int widh, int heigh,
                   color tlcolor, color trcolor,
                   color brcolor, color blcolor) {
  beginShape(POLYGON);
    fill(tlcolor);
      vertex(x, y);
    fill(trcolor);
      vertex(x+widh, y);
    fill(brcolor);
      vertex(x+widh, y+heigh);
    fill(blcolor);
      vertex(x, y+heigh);
  endShape(CLOSE);
}
 
// Draw a gradient corner by making triangles
// TODO: do this directly somehow; a shader?
// @param x X coordinate of the center of the semicircle (pixels)
// @param y Y coordinate of the center of the semicircle (pixels)
// @param rad Radius of the semicircle (pixels)
// @param divisions Number of triangle divisions to make (more=smoother)
// @param quadrant Which quadrant to draw in 
// @param insideColor Color to use for the center of the semicircle
// @param outsideColor Color to use for the outside of the semicircle
void makeGradientCorner(int x, int y, int rad,
                int divisions, int quadrant,
                color insideColor, color outsideColor) {
  beginShape(TRIANGLES); 
    for(float angle = quadrant*PI/2;
        angle < (quadrant + 1)*PI/2 - .001;
        angle += PI/divisions/2) {
      fill(insideColor);
        vertex(x, y);
      fill(outsideColor);
        vertex(x+cos(angle)*rad,                y-sin(angle)*rad);
        vertex(x+cos(angle+PI/divisions/2)*rad, y-sin(angle+PI/divisions/2)*rad);
    }
  endShape(CLOSE);
}
 
// Draw a fuzzy rectangle at the specified position
// @param x X coordinate of the top-left corner of the rectangle (pixels)
// @param y X coordinate of the top-left corner of the rectangle (pixels)
// @param widt Width of the rectangle (pixels)
// @param heigh Height of the rectangle (pixels)
// @param radius Radius of the fuzzing (pixels)
// @param fgcolor color of the rectangle
void drawFuzzyRectangle(int x, int y, int widt, int heigh,
                        int rad, color fgcolor) {
  // Handle the case where the radius is too big, by clipping it to 1/2 the max height or width.
  int max_rad = int(min(widt/2, heigh/2));
  rad = min(rad, max_rad);
 
  // Uncomment this to see how the gradients are being drawn
  //stroke(0);
 
  color bgcolor = color(255,255,255,0);
  makeRectangle(x+rad, y+rad,        widt-2*rad, heigh-2*rad, fgcolor, fgcolor, fgcolor, fgcolor);
  makeRectangle(x+rad, y,            widt-2*rad, rad,   bgcolor, bgcolor, fgcolor, fgcolor);
  makeRectangle(x, y+rad,            rad, heigh-2*rad,  bgcolor, fgcolor, fgcolor, bgcolor);
  makeRectangle(x+rad, y+rad+heigh-2*rad,  widt-2*rad, rad,   fgcolor, fgcolor, bgcolor, bgcolor);
  makeRectangle(x+widt-rad, y+rad,   rad, heigh-2*rad,  fgcolor, bgcolor, bgcolor, fgcolor);
  makeGradientCorner(x+widt-rad, y+rad,       rad, 8,  0,   fgcolor, bgcolor);
  makeGradientCorner(x+rad, y+rad,            rad, 8,  1,   fgcolor, bgcolor);
  makeGradientCorner(x+rad, y+heigh-rad,      rad, 8,  2,   fgcolor, bgcolor);
  makeGradientCorner(x+widt-rad, y+heigh-rad, rad, 8,  3,   fgcolor, bgcolor);
}
 
void draw() {  
  // Fill the background with a gradient
  color edgeColor = color(220);
  color centerColor = color(255);
  background(centerColor);
  makeRectangle(0, 0, width/4, height,  edgeColor, centerColor, centerColor, edgeColor);
  makeRectangle(width*3/4, 0, width/4, height,  centerColor, edgeColor, edgeColor, centerColor);
 
  // Draw a fuzzy rectangle
  color rectColor = color(80,80,140);
  int widt = 100 + int(map(mouseY,0,width,0,200));
  int heigh = 80 + int(map(mouseY,0,width,0,200));
  int rad = int(map(mouseX,0,width,0,50));
 
  drawFuzzyRectangle(mouseX, mouseY, widt, heigh, rad, rectColor);
}

In a quest to earn a fine bottle of scotch (and help my friend Marty out with a project), I modified the Chumby web browser to be a full-screen kiosk. To make it work, just grab this file, unzip the contents into a usb stick or SD card, place the card in your Insignia, and reboot. You can change the URL that it loads by modifying the file debugchumby (use your desktop computer, the Chumby doesn’t seem to like writing to USB).

This can be used to make nice interfaces for the Chumby without having to learn flash or compile anything. Simply make a nice whiz-bang HTML page, and you should be good to go!

Source code for this super simple browser is here. Note that this is for the 8″ Insignia Infocast branded machine. You can probably get it to work with the other Chumbys, but will need to recompile. Have fun!

Gareth just finished a Make: Projects version of the one-hour coasterbot build that I created for a contest last year. Thanks, Gareth!

Lem Fugitt from Robots Dreams stopped by the Botcave and interviewed me. We also talked about MakerBot:

Thanks, Lem!

I’m working on a three part, printable model (top, bottom, actuator arm) that can be made into a little electronic puppet by adding a cheap servo and snapping it together. It’s an adaptation of DesignGlut’s Salt and Pepper Shakers. Model files coming when I get back to my other computer.

Keepon came to visit the Botcave last week, so I made him a hat that looks like his own head.

Yesterday I made this progress meter attachment for the 3d printer that I have at work, that rotates to show me how far along my print is:

Love 3d printing with your Thing-o-Matic, but wish there were a better way to see how your print is progressing? Well, today is your lucky day- if you’ve got a spare hobby servo (the one in the Unicorn works great), then you can make your very own progress gauge!

Source code and directions on Thingiverse.

Today I designed a toilet paper roll holder:

Tired of having to hunt for that roll of soft tissue every time you do your business? If only there were a fashionable hook upon which you could place this precious velvet!

Fortunately for you, oh bachelor or bachelorette, Science has heard your cries and has an answer! What you are seeking is called a toilet paper roll holder, and they are none to difficult to acquire! Sensible people would go to the store and buy a nice wooden or metal one to match their decor, but who are we kidding? You’re either desperate or have no sense of taste, so join the club and print yourself one now!

This design is inspired by Charles Pax’s filament spool holder. You’ll need a Thingomatic with a slightly taller than average (116mm+) build height in order to construct it.