Mapping Data.
Mapping global warming data using processing.org
This project uses processing.org to code and develop an interactive web app that shows the effect that global warming and rising sea levels will have on Irish coastal areas.
Challenge : Develop an interactive web app that visualises global warming
Potential concept & features
Water blobs could be placed onto the map and the sea water would rise 1 meter
Add an ice cube and water levels would decrease by 1 meter
Use elevation data to represent sea level and it rising and decreasing
(Easter egg) if you add too many ice cubes ireland will appear to be frozen over in an ice age
Achiveable concept
The initial concept was a little to develop to be achievable within a week. The ability to access data sets would require more time to represent them as a series of different variables. The app would now consist of a water blob that would be dragged and dropped over Ireland and would cause the sea level around Ireland to rise.
Map of Ireland with large urban populations below 10 meters in elevation indicated by circles. A water blob would hover at the top of the screen which could be dragged and dropped on the map to rise sea levels
If the water blob is dragged and dropped on Ireland then the water levels will rise and towns will be consumed by water
If a circle is clicked on further information will pop up telling the user what the location is and at what point water will consume the urban area
Sub dividing code & features
My process for develeoping the final interactive web app was to break up each section of code for each feature. By doing this I was only working with code that had to do with the given feature I was currently working on, this ultimately lead to less trouble shooting because each features code was separated into its own file and errors were easier to access.
Feature development
Each feature was developed individually at first and developed into an interactive web app. Each piece was troubleshot individually to find errors within the code. Once completed with no errors, each section was merged into one uniform piece of code, as seen below.
Dragging an image
I started by trying to get an image which represents the blob to be able to be dragged by the mouse
Motion blob : Water
The next stage was to create a motion blob which would represent the water I edited existing code to form the blob and make it look like water
Colission detection
I then tried the get that image to intersect another image which would represent Ireland
Blob / image interaction
Finally I switched out the images with the blob and an image of Ireland and got them to detect when they intersected. Once they intersected the image of Ireland would change to another image of Ireland where water would have consumed low lying lands
Outcome / Video
What I learned
I learned that trying to develop a fully interactive app in one go leads to a series of errors that are indistinguishable from each other. I learned because of this it is better to develop features individually in separate coding files and then merge them into a final solution.
I learned it's okay to think big when it comes to developing code, then failing and adapting to what is achievable. I learned as a designer, it is good to have an understanding of how to develop interactive features through code so as you can communicate and have an understanding when it comes to working with developers. However, it is not always achievable to develop an entire interactive interface by yourself in a reasonable time frame.