Nature of code Simulation

For this weeks assignment I wanted to create a typhoon simulation. I had some doubt whether to use p5 or processing, but decided to go with p5 to test it out.

The idea was to take a radar image like the one beneath and turn the image into 3d by using the color values to determine the z-axis position.

For this to work I split the image into cols and rows and took the pixel values for each column and each row. I created an object taking the a x,y,z position where x and y would be based on position in image, whereas z location would be based on the amount of red in a pixel. However doing this did not provide major changes to the 3d image, because many of the colors in the image contained a good amount of red.

In order to get a better simulation of a typhoon – I had to create my own image. I found that if I wanted a smooth transition creating an inverted “cone” structure based on the color red I would need to create an image gradually going from red to blue.

I therefore created a for loop of 200 circles. Each circle had a decrease in red and an increase in blue – giving me exactly the shape I wanted.

When this was done I had an “inverted cone-like structure” created of points. These points were all objects in an array that I wanted to connect with a beginShape/endShape function to give it a fill so that the shape would no longer be transparent.

This however was a difficult task because creating enough connections between the points for them to be “closed” would render the sketch very slowly. Instead I made some grid lines that would add to the visuals of the outer shape.


To avoid the grid lines from covering the entire shape (I wanted the shape to be hollow) I had to make a function that would only draw lines to the next circle in the array if their distance was close. That way I would avoid having lines covering the top and keeping the “hurricane” hollow. This is what I looked like when applying the grid:

Next challenge was to make the “Hurricane” spin. This proved to be very difficult. In p5 WEBGL all shapes are drawn in the center of the screen. In order to move a shape around you have to translate its’ location. This meant that my point object class had translation in it – which would have to be accounted for in the actual sketch : basically I was translating in the real sketch and in the class. This made it hard. Using ellipses and trial and error I managed to locate and translate a rotation point to the middle of the “Hurricane” which applied a somewhat real effect to the hurricane.



Leave a Reply

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