Out of Bounds - Custom Map
“Out of Bounds” is a public art piece that composes of seven, ten foot tall soccer ball sculptures that are scattered throughout Avery Park. I shot panoramic photos of each ball, and wanted to create a map as a means to navigate to the other structures, but doing so in an intuitive manner that follows your progress and shows which balls you have visited. I thought this would be a great project to track, and show how the finish product was made.
Thinking about the map, I came up with several key features I wanted it to have.
Those features include -
Showing which stops you have already visited
Showing which stop you are currently at
Having some kind of blinking so that you can easily see all of the map points
Overall being legible and coherent in its environment
Keeping this in mind, I started on the map. I was fortunate enough to find a satellite image of the park online, and used that as my takeoff point. The image needed some work, and so I edited out the markers that were placed, and then used a photo enhancing software to sharpen my image. Looking at them side by side, it is easy to see the difference. This is the image I will be using as my map, and I now have to create the markers that indicate the balls’ positions.
I started with the function of the map marker before designing its style. The marker will take you to the panorama you select and close the map, but also sets a variable so that you cannot click on the same spot you are currently occupying.
Then I worked on a way for the colors to change according to if they had been visited or not. Using a logic block, I was able to make the changes to the color of the marker
The order of the triggers in this instance do matter and if out of order can cause for unwanted results. A background was added so that it appears when the map is open. With these results, I was now ready to work on the style of the marker.
I went with a design that is a circular destination icon that grows when you mouse over it, and also has a white glow behind it with a breathing effect. The effect was achieved by using timers that cause the glow to expand and contract based off a variable. After plugging everything in, I had my final product that was ready to be integrated with the other user interface elements.
I chose to add it to my previously made user interface to show how buttons can be swapped in the interface, but I could have also created an independent button from the interface. Overall I am very happy with how the map and the project turned out, and I hope this guide has been insightful to help you create your own.