ICM- I’m Only Happy When it Rains…

… ok not true, but that Garbage song got stuck in my head when looking at weather data.

After watching all the tutorial videos, I had an idea of what I wanted to do. The question was whether I could do it or not. I wanted to map the movement of an object  on the canvas, to the current speed of the wind in New York, using openweathermap.org. This wasn’t inspired by anything specifically, and more of an exercise to improve my animations.

I signed up at openweathermap.org and got my key. I learned that this is a security precaution so they can track what you’re using the data for. I’m using mine to make a circle move for a grad school class, so I think I’m gonna be a-ok!

Since I’m a visual learner, I worked off of this weather sketch as a reference point, and to work through the logic.

I found the data I wanted to call on the site (wind.speed), but each time I tried looking up New York’s current data I got an error message:

I wondered if I’d signed up too recently to access the data. Either way, I set up my code using a png of a leaf that the wind data could “blow” across the canvas.

Ok, I figured it out with some help! It was just adding the security “http” in front of the API url.  I knew this, I should’ve known this sooner! I got the New York data to work in my browser:

Tbh, I struggle with the logic and hit many a wall. I get my code set up the best I can and then seek out a resident. Jen was unbelievably helpful. She helped me ask the console to log the data and it worked!

Once we wrote the code to call the data from the site, it began to come through on the console. Very exciting!

The problem we kept running into was the leaf was blowing (!!!), but it would blow off the screen and into infinity. *Cue dramatic movie “nooooooooo!”

I feel like it was a visual manifestation of my coding frustrations: “Wait, no come back, don’t do that!”

I hit another wall and sought another opinion. Another resident helped me- this was his logic, which he helped explain:

We just needed to add 2 more parameters: “xdirection” and “ydirection”. Then it worked, I still can’t believe it! Here is my live, New York wind-powered leaf animation:

Here is the sketch in action on a windy day with the windspeed at 10.3 m/s:

Here it is again the next day (much calmer) at 1.5 m/s:





Leave a Reply

Your email address will not be published. Required fields are marked *