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


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: