Fooling the Machine_proposal

Through this seven-week course, I found myself really fascinated by the Convolutional Neural Network and its application in image recognition. It is hard to believe that a computer can recognize a dog from a 4*4 image with hundreds of layers. However, on the other hand, I also feel unreliable about the result given by machines.

In terms of the final project, I am struggling with two ideas, both start with a completely trained machine.

In the article Deceiving Artificial Intelligence, a research done by Google found that some minor alteration on a image, even unrecognizable for human eyes can cause a big problem for image recognition.

Screen Shot 2017-04-24 at 10.37.00 PM.png


In this paper, Christian Szegedy described the algorithm he used to fool a machine.

Pre -> start with a training on a CNN with the Caltech 256 Dataset and then store the trained weight

Project -> an interactive webpage that a user can upload a image belong to the 256 categories, the machine will hopefully give a correct answer. Then the user can decide how to alter the image and see what the machine thinks.

The second idea starts with me playing with the hand writing neural network example.

Screen Shot 2017-04-24 at 7.13.54 PMScreen Shot 2017-04-24 at 7.12.40 PM

It’s interesting to see how machine categorize a image into its trained categories even though the image has nothing to do with hand writing digits. The project is an art piece that makes a number k with all images that a machine thinks to be a hand writing number k using ImageNet Dataset

Pre -> Train a machine with MNIST dataset, store the trained weight

using ImageNet Dataset to categorize images to 0, 1, 2…9

Output -> 10 images of digits from 0 to 9 formed with images


The final project is available on Github


Genetic Algorithm on Image

I tried to apply genetic algorithm on image. The original photo is 300*450, which means if I want to generate the exact photo, I need to get 1 from 300*450*3*255 cases. That’s why I only took the red value and also made the image pixelated.

In order to have a better performance, I also changed the mutate function a little bit to avoid decreasing accuracy by only mutating the wrong genes.

Source code is available on Github

An Actual Tree

Yes, I did make a tree using the idea of a binary tree.


The whole tree is generated by building sub-branches recursively until the branch is too short. Based on what I did for NOC animation class, I added a noise variable to every node and change its value every frame so that the tree is moving gently.

Here is the code on Github

I have been thinking of how to make the branches getting thinner naturally instead of having a static light weight throughout a branch. Also, what would be a better way to add leaves?

Logo Project

For this logo project, I decided to design a logo for A to Z. A to Z is a design studio and innovation consultancy.

Final Logo

Through the variety of shape and saturation, this logo shows the spirit of AtoZ: creative, diversity and limitlessness.

A to Z, covers all letters in English. The 24 letters in addition to A and Z are represented with shapes in the logo. The sharpness, from great to gentle, shows the diversity.

The shapes are generated in Processing. Source Code is available at github


24 letter represented with squares and the letters A and Z

Making the t and o as the top view of a screw

Playing with some negative spaces

Even though A and Z are furthest from each other in alphabet order but they are actually right next to each other on key board

Where will this hyperlink bring us to?





Music Box?


[TIW] Music Box? from Ada Zhao on Vimeo.

Music Box? is a box but it doesn’t play any music. Instead, it controls how the music is played on your laptop with static states and actions.


Whenever the box is put on the table, the face facing up indicates the current state of the music. For example, the first photo shows that the music state is stop. The four states are play, speed up, stop and pause in order so that play is next to speed up and pause while oppose to stop. If the user want to skip a state, for example, stop the music directly while it is playing, he just needs to turn the box really fast because it takes half a second for the device to operate.

Skip back and skip ahead are two actions that can be achieved by lifting right or left side of the device. The pyramid-shape decorations on the side form two arrows pointing left or right on the side view that match the skip back and ahead actions.

Turning the Music Box? around for 360 degree to play a random song. I thought about the action for a long time in order to decide on one action that fits the feeling of randomness. I feel like turning around can be something interesting since you can never make two exactly the same turnings.

Circuit Diagram




Compared with the beginning of this class, I enjoy making enclosures much more now!

Assembling process:


Problems on the way

  1. Calibration: the default value is getting smaller because of the decreasing of battery power
  2. Serial Communication: Arduino Pro Micro uses USB communication so if I need to use Serial communication, I need to write Serial1 instead of Serial
  3. analogReference(EXTERNAL): connect accelerometer with REFE pin in Arduino to give it a voltage reference

Source Code

available on Github


Calibration code is credit to Adafruit

Future Implementation

add calibration procedure to the device. Make the threshold proportional to the calibration value instead of hard code value

tom also suggested to add a condition to read the accelerometer value. For example, only if the user touches a certain area, can the accelerometer be read by Arduino. Otherwise, the loop() function does nothing. In this way, it can avoid some random movements.

Wind Everywhere

Screen Shot 2017-03-06 at 8.36.23 PM

So, here is the final look of Wind Everywhere!

It is a visualization of the wind in the city you choose. You can change the city on the right bottom and feel the wind from there by looking how the objects on the canvas move.

Wind Everywhere from Ada Zhao on Vimeo.


When you think of real time data and user input, you will definitely choose web as the living environment of your project. Thus, I started with this project using p5.js but I only got this:

Screen Shot 2017-03-06 at 8.31.59 PM

I really hope that I can spend sometime figuring this out!

Tech Specification

I built a Node class to store the length and angle of a branch. A Tree class was built using Node class with recursion technic. Every frame, the program draws a tree recursively from the root node.

The ball and ballon come from the same class, Ball. Ball class makes object bumps back when it hits the ground or the building.

The textured flag is developed based on Dan’s example given in the class using Toxi physics library. The ballon string is built with the same Particle and Spring classes in the same physics world.

Wind data is from OpenWeather API and the text field is using the controlP5 library.


Textured flag by Daniel Shiffman

Future Development

Better looking tree.

Unevenly distributed wind force for each branch

3D wind force for ball, ballon and tree.


Source Code

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.