Wind Everywhere_proposal

Wind that bears off the dead leaves with a quick raid
and deflects the pulsing arrows of the birds.

Wind that topples her in a wave without spray
and substance without weight, and leaning fires.

— Pablo Neruda

I always think that wind is the most beautiful thing that the nature creates. It changes constantly, creating movements and interactions for other objects.

Wind Everywhere will lead you to any city you want, giving you a visual feeling of the wind in that city. I would like to put several objects onto the canvas, pull real-time data from openweather API, and make the objects react according to the wind. Subject to change but the objects include a ballon, a tree, a falling leave, a ball and a flag.

There is only a ball on the canvas because I was working on the API. Link to sketch. For the first week, I successfully pulled data from openWeather, gave users ability to change city, and  outlined Bobs and Springs classes. Link to code



link to some examples Dan showed last class

should i try 3d? if not, what would be a good way to implement wind degree


Music Playback Controller

This time, the assignment is to make a device that controls the playback of some pre-recorded music on a web page. The required functions are play, pause, stop, fast forward, skip ahead, skip back and random.


When I saw the requirement, I took play, pause, stop and fast forward as states of the music; skip and random song as actions towards the music. Thus, I came up with the idea of a little device that can sit on the desk in four different ways (has four faces) that map to four states and has three corners that triggers the three actions when facing down. It was hard to came up with a 3D shape satisfying all the requirements but I  finally decided on a cube with sharp side faces. Shaking the device “violently” in y axis will random the song.


In terms of the hardware, I used accelerometer to track the state. Since the cable from Arduino to computer is troublesome when you move the device



I used a lot of time tracking and state checking in the code. Wondering a better way to code a program like this.

Source Code

Circuit Diagram




Since the device was designed for users to roll it back and forth, I tried to reduce the hard edge of the cube on the side by adding some diamond shaped structure between surfaces to create a smoother transition. The center was cut out to indicate which state the device is in, depends on which surface is facing up.


The left and right faces should have been more curved so that the device couldn’t stay still on those surfaces because the left and right are not designed as a stable state but an action. In order to do so, I also tried converting a 3D model into a laser cut file using 123D Design but it is so limited to a few of ways and it is hard to customize, so I just used multiple lays and glue them together.

Before assembling:


Further Development

Left and right faces: a sphere-like end so that users know the left and right are just actions and that the device shouldn’t been put on the table with either left or right side facing down.


The bluetooth was set up with help from adafruit learning system

Accelerometer was set up with help from adafruit learning system

web page p5 sketch is credit to Tom

Last but not the least, great thanks to Stephanie Koltun

Box & Incline

It is like back to the high school physics nightmare 😥

If you move your mouse on the right side of the canvas, the incline will move with it. The box will move according to the incline and friction.

What I haven’t figured out yet:

  1. How does Vector.rotate work in DEGREE angleMode…
  2. As you can see for now, every time you move the mouse, the velocity will change to (0, 0) directly because I couldn’t figure out how to project a vector on another

I also played with polar roses with the particle system I built last week: having one attractor moving along the polar roses. And here is what I came up with.



Light Controller

When I saw this assignment, I thought about HSV color mode instead of RGB, especially this assignment requires fading. HSV represents hue, saturation and value respectively. The value can be associated with on and off switch. What left are hue and saturation, which is a 2D circle. Thus, I though we can have a dot on this circle which position is controlled by a joystick. Where it lands gives the hue in terms of degree, and saturation, in terms of its distance to the origin.


With the push button in the joystick, we are able to turn on and off the color picker. However, there was not a indicator of whether it is on or off. That was why I added a small red LED on the side.


While making the enclosure, I wanted to integrate the light with the controller: you play with the lamp but also you change the light, so I rounded the neopixels along with the joystick.

Circuit diagram:


System diagram:


Source Code

I used a HSV to RGB converter from

Game Controller

This is a game controller to play Atari’s Lunar Lander game in a browser

However, my initial idea was something different. From left to the right, it is consist of: a potentiometer (a, d) with a laser cut lunar lander on top of it. The orientation of this lander should match with the one in the game. Two buttons that represent increasing power (w) and decreasing power respectively. A larger button that matches with the space bar. A joystick that enables the mouse movement and click.



I really want to make the potentiometer work so I tested that if I pressed the left arrow nine times, the lander will be on its left end, the same for right side. Thus, I created 18 states for the lander and then mapped the value to 0-18, like the illustration in the middle of my sketch below. However, it is really hard to achieve that same effect that the keyboard gives with what Arduino gives. This design ended up with a crazy keyboard either does nothing or prints tons of ‘a’ and ‘d’ in my text editor.


I decided to just use five buttons. During the process, I was totally confused by Keyboard.write() and The device worked very well as a typewriter but it doesn’t work as a game controller in the game. My solution was to use and use Keyboard.releaseAll() when the user releases the button but I still don’t understand it.

Here is the enclosure design. I tried using standoffs. The part on the right was for the five buttons. It appears to be a supporter for all the five buttons. With this design, I ended up with no using hot glue at all 🙂screen-shot-2017-01-30-at-8-52-30-pm

Link to the code