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?

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

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.