Author: Mbebo Mbebo

I took inspiration from Dan Shiffman’s coding challenge on ‘Mapping Earthquake Data’ to try and map COVID19 spread from 2020 t0 2022. Using mapbox’s api and csv file from CSSEGISanddata by John Hopkins University Center for System Science and Engineering, I mapped out the number of people infected with COVID19 in all countries as a circle.

As mentioned in Shiffman’s video, I used Web Mercator to convert the longitude and latitude of each country to x and y coordinates. I then mapped out the coordinates on static map imported from mapbox.

Shiffman’s video:

Coding Challenge: Mapping Earthquake Data

I struggled to get an actual mapping at first but eventually figured I have to change the constant provided by the Web Mercator to 256. I eventually ended up with this equation for the x and y coordintes.

After successfully mapping the coordinates the static map, I decided to draw a red circle over the coordinates with the radius as the amount of people infected by the covid19 over the past 3 years.

The embedded sketch:

This version of the assignment has less interactivity, I plan to add features that will enable to user get the number of people infected by covid19 in a particular country upon clicking on a circle. I’ll also make the map dynamic, changing the zoom as the user zooms in with the mouse.

In this assignment, my idea was to create a generative artwork that simulates rainfall and rainy clouds.  The inspiration was from the falling ball example in class. I asked myself if there was a way to add meaning to the falling balls and I immediately thought of rain and snow.

My implementation of the assignment uses shapes, sound, an image background, gravity, and  noise . I created a class for raindrops and clouds. The collection of raindrops produces the rain. At first I tried to make the cloud class inherit from the raindrop class. I tried this because I wanted each individual cloud to produce rain by itself. However my approach did not work as intended so I made the rain exclusive from the clouds while making the raindrops start at the y position of the clouds.

I also tried to include wind in the rain. I initially used the noise to simulate the wind but it became difficult to control the direction of the rainfall so I mapped the the y position of the mouse to an interval and added it to the raindrop coordinates. This way changing the mouse position will change the direction of fall thus creating the illusion of wind in a particular direction.

I tried to also add parallax to the raindrops but it didn’t work quite well so I played with the stroke weight of the raindrop to make some raindrops appear closer than others.

By clicking on the sketch you can make it rain or not.

The embedded code:

Conclusion:

Future improvements will focus on adding  an umbrella to the mouse’s movement and blocking off the raindrops from the area the umbrella occupies. Furthermore, lightening bolts and thunder sounds will be randomly added to make the simulation close to actual rain.

My idea was to create a spiraling pattern of mini-circles that change color when the user moves the mouse. This idea was motivated by the milky way galaxy that appears in a spiral form.

After thinking through several ways to color the patterns, I ended up changing the colors by random and at the same time with the movement of the mouse pointer. The code for the coloring is shown below:

The embedded sketch of the assignment:

Reflections:

It’s interesting how the frame rate changes the perception of the art. I will explore the different frame rates and how they affect my perception of the design. Also by changing the angle of the circles and the speed at which they change, the design changes in many different ways. I will most likely explore the different designs by changing the angle and speed.

The portrait makes use of simple shapes such as ellipse, triangle and lines, and coloring with the RGB color code. My idea was to code up a simple human face and the upper body on a cool background of the sky, clouds, sun, mountains and trees. The shapes are layered on each other which creates the illusion of perspective and depth.

I’m particular happy with the implementation of human hair and clouds which both make use of ellipse. After thinking through how to implement them, I simply decided to use ellipse and interlay them on each other to create my desired shape.

The code for the cloud is shown below:

The implementation of the assignment:

Reflection:

In future, I intend to explore ways to make the portrait more interactive and dynamic. I intend make the eyes move relative to the position of the mouse, the sun and clouds move across the sky and the face more animated.