ITP Blog

ICM - Week 7 & 8: DOM and Data

TITLE:  Weather Space

DATE:  October 2016

INSTRUCTORS:  Daniel Shiffman


TOOLKITS:  JavaScript + P5.js + openWeather API




This is Weather Space. Input a city and you will get the weather of 16 days and a perfect illusion of 3D time-space.

Different colors mean different weathers, and the red square ring shows the hover position of the mouse.

The frequency of wave will follow the change of the focus day of weather, which is selected by the mouse hover.

The faster the wave move, the worse the weather is. In this case, the snow weather has the fastest movement and the clear weather moves slowly and gently.



The basic idea of Weather Space is to create a 3D visual effect using 2D shapes and lines. The inspiration comes from an amazing video footage name The Cave on Vimeo.

I use Day as the Z axis of space, which is an extra dimension to 2D shapes. So the later the day is, the deeper the 3D illusion will be.

The color of the day is determined by the weather. I also create a graphic panel to show the meaning of color. Now, it contains clear, clouds and rain, and I plan to add more details to it.

I used the open weather API to get the weather information. The ENTER key is the initial part of the callback function, once the city is inputted into the text area and ENTER key is pressed, the canvas will show the 3D cave showing the weather of next 16 days.

The color pattern comes from the Coolers, one of my favourite color schemes generator.




It need cancel the security setting of https to work properly.

Here is the Github Page.



  • How can we make texts as objects and use an array to store them?
  • How to make random wave lines that related to each other?
  • Can we control the time we hover on some objects? like the hover effect and the moving speed in my project, I want the change caused by mouse hover last only 10s and back to the standard level. Can I do that?