Experimenting with 360 Viewers

While researching the Native American sites for illustrations, I was doing for Gregory Little’s new book, Native American Mounds in Alabama: An Illustrated Guide to Public Sites, it occurred to me it would be fun to create an interactive 360 view for the web. Gregory Little’s The Illustrated Encyclopedia of Native American Indian Mounds & Earthworks was a good resource, showing earthworks and Native American sites throughout the United States. The idea for the 360 view happened when I was using Google Maps and Google Earth to get a better idea of the locations and surrounding geography.

Graphic for the 360 View

My graphic is based on the Buttahatchee River Mounds near Hamilton, Alabama. When using Google Maps, I saw photos posted under Chickasaw Indian mounds of people enjoying a swim in the river. It brought the site to life.

The 360 media viewers I found have a 2:1 proportion. Mine was 20 inches wide and 10 inches tall. I divided it up into 5 sections. After a few rough thumbnails, I produced a layout with Adobe Illustrator.

layout

  • A. The mounds in the distance
  • B. Close up of a figure drinking from a shell cup
  • C. View to the north of the river
  • D. The other side of the river
  • E. View south of the river with a dugout canoe

The next step was drawing the line work with Pigma Micron pens on Bristol board. The ink drawings were scanned and opened in Photoshop along with scans of parchment and other textured papers. I tried several different gradients for the water, added hints of color to the landscape, and used a custom brush created in Photoshop for the sky. I later added the mythological characters in the water and sky. While researching the mounds, I read The Southeastern Indians by Charles Hudson from University of Tennessee Press. He calls the Uktena (in the sky) and water panther "anomalous" creatures. I took a little liberty. Mr. Hudson described the water panther as having a fish tail. I could not find a resource for the tail so drew my own. These images were adapted from shell artifacts. The Mississippian Native Americans of the Southeast created elegant shell drinking cups and gorgets (objects that were worn around the throat for ceremonial purposes). They also used shells to temper clay for pottery.

360 Media Viewers

The challenge with any web project is finding a solution that works with all browsers and smartphones. I tried four different free solutions. Here is my experience with each and links to samples.

  1. Google Web Designer: Beta this is a free app you can download once you sign up with Google. I used the prebuilt 360 Gallery under the Galleries tab. The user swipes the image or you can set it to automatically move through the images. Once you publish, you get a .zip file that compresses the javascript and other code files to one page. Google Web Designer works with IE10 but not with IE9 or IE8. It did not work on the iPhone. It is only in Beta and there may be a work-around, but this solution didn’t give the results I wanted. I would like to try it for other projects, however.
    Example [Google Web Designer, image by Carol Hicks]
  2. 360player.io: I signed up for a free membership and was able to upload my image. The site really helped work out the bugs in my graphic. I liked that I could hide various versions from the public. The site generated an iframe embed code I could use to add to my website and then publish on their site. It works well on the iPhone but didn’t load in Internet Explorer 11.
    Example [360player.io, image by Carol Hicks]
  3. Marzipano.net: You can use the Marizpano Tool without joining or creating a login. After uploading my image and publishing, I was able to download a zip file that contained the javascript and vendor files. It is a stand-alone viewer that also edited my image to create many tiles instead of the one large image I uploaded.
    Example [Marzipano, image by Carol Hicks]
  4. Roundme.com – This was my favorite for the current project. The site’s focus is on creating tours. You sign up for a basic or free account that allows you 15 uploads a week and unlimited storage. This program has options like setting the amount the viewer can enlarge the scene and pinpointing the location on a map. It’s a social platform, so you can easily share with Facebook or LinkedIn. Once you publish, your "tour" can be viewed on the site and an iframe embed code is available.
    Example [Roundme, image by Carol Hicks]

Conclusion

Now I am curious about how other images or abstract art would work in 360 degrees. I am sure there are other products and ways to get these results. The Mississippian Native Americans of the Southeast have been overlooked by history. I hope more research can be done to learn about these people and how they adapted to their environment.


Other Articles

SVG and CSS3 Snowflake

CSS3- Web Animations and Modal Windows