Category: design

I’ve been following the cycling-influenced illustration work of Dave Walker for a while now. When he posted this recent compendium of bells and whistles I wanted to respond creatively. It was a chance to explore how to make sound both interactive and visual. It was also a lot of fun interpreting the depths of Dave’s subtle humor. Make sure you have your sound on and enjoy it here:

https://omundy.github.io/bells-and-whistles/

As of today, the textbook I wrote with xtine burrough is now available! Published by the MIT Press, “Critical Web Design” is an innovative, learn-by-doing textbook that teaches how to design for the web while engaging a critical lens on the technoculture that sustains it.” A very warm thank you to xtine for the collaboration, all the creative folks who are represented in the book, and Joelle and Sophia for your patience throughout. Read more about the book and supporting materials here: owenmundy.com/site/critical-web-design

One of the first items on my sabbatical to do list last year was to convert the Camp La Jolla Military Park website to a static Jamstack site hosted at Github Pages. This post documents that process.

I originally created the site as a research tool using PHP and a MySQL database for data entry, to record, organize, and ultimately publish research about the military history of UCSD. Moving the project to Github Pages would simplify maintenance and hosting costs, but was no small task. Technically it didn’t cost me extra to host, but the domain was $20/year, which adds up. Further, maintaining a PHP/MySQL website with a custom admin tool requires a bit of overhead for security and updates. Additionally, I wanted to continue having the benefit of using template engines or some way to include files (like PHP’s require()) to save time coding the site.

There are a plethora of tools available to publish a database-driven site on a static host. They mostly can be categorized as follows (ordered by most to least dynamic data sources):

• Move the database to a remote service like Firebase, Atlas, et al. — ⚠️ Ultimately creates vendor lock-in, potential hidden costs, and probably more maintenance issues in the future.
• Create a static version of the database by converting MySQL to flat files (JSON, CSV, etc.), which still allows for querying using one of various tools — 🤔 This method is interesting, because it still decouples the data from the presentation and allows for potentially more options later, including a remote database. I am already using this in various forms but worry again about maintenance, or issues with the client’s ability to manipulate the data as needed.
• Generate a static version of the site, including all its pages which contain the data formerly dynamically inserted from MySQL. — 🤔 I like this concept, and have been using it to auto-publish my class lectures and tutorials using Markdown and Grunt with Marp. Plus, there are many site generators to choose from, which I explore below.
• Scrape the site and save pages as static files. After all, everything is static once the HTML is rendered on the frontend. — ⚠️ While fast, this requires the site be built first and would make updates difficult.

Essential Concepts

Here I outline some concepts on rendering. See SSR vs CSR vs ISR vs SSG for a more in-depth look:

• Client-Side Rendering (CSR) (e.g. Single-Page Application (SPA)) – JS renders pages in client’s browser with empty HTML files + raw data from the server. (e.g. React, Vue, Angular)
• Server-Side Rendering (SSR) (e.g. Fullstack) – Generates pages on server with dynamic data before delivering to client. Improves SEO and loading, decreases server performance. (e.g. EJS, PHP, or Next.js)
• Static Site Generation (SSG) (e.g. JAMStack) – Pre-renders all pages as static HTML during build process. Fast loading times, enhanced security, and dynamic content can still be achieved via “islands”.
• Incremental Static Regeneration (ISR) – Combines SSR and SSG to pre-render static pages during build time while periodically regenerating specific pages with updated data.
• Edge-Side Rendering (ESR) – Rendering process is pushed to the CDN’s edge servers which handles requests and generates HTML. Requires Nitro engine.

Requirements

Requirements for most of the projects I mention above.

1. Javascript-based
2. The data will be static, but editable using Git
3. The data should be searchable using a tool like chosen
4. The site design will be simple, but I should have creative control
5. The site will be public, and be presented mostly using the same design as the original site
6. HTML/CSS validation + Accessibility checks
7. Convert from Google Maps to Leaflet
8. Host the site on Github Pages

While planning the project I also wanted to select a method I could use for other potential static (or nearly static) sites like:

1. A new site documenting the hundreds of examples and overlapping categories of Critical Web Design and internet art I’ve been collecting for an upcoming book. Update: I built it with SvelteKit
2. Converting tallysavestheinternet.com to a static site (currently SSR) and unlinking the extension from the server to use local data only
3. Moving away from WordPress more generally (and its security problems) and blogging with Markdown instead, starting with this blog (NO MORE TYPING IN A WEB FORM!!)

It’s nice to learn new tools. I already have some experiences with React, Next.js, and Vue.js, but wouldn’t say I’m confident in any. I found that publishing apps using React Native is very frustrating and unreliable, and my general distrust of Facebook makes me lean towards Vue. Still, I went in with an open attitude.

Tool Comparison

A breakdown of some tools I considered. Some of the icons are clickable…

Next

My experience with Next.js SSG was painful.

• Constantly running into subtle changes in syntax across versions
• Adding an image is ridiculously difficult.
• Exporting the SSG ultimately created dead links, packaged up in Next code that was hard to understand.
• So much automation to make a static site in the end you can’t do anything unless you have the exact right code, in the right version, in the right paths.
• Error messages are rarely helpful or pinpoint the line number causing the issue in the stack.
• I followed so many tutorials that ultimately ended in dead-ends, incorrect versions, or that completely didn’t work.

Astro

I ended up choosing Astro for the final project, which can be seen here https://omundy.github.io/camplajolla/. While they appear to have many similarities, I found Astro soooooo much easier than Next.js. It’s fairly simple to install, even using a starter theme, and it didn’t take long torip out tailwind to add bootstrap.

I’m doing a workshop / lecture as part of the ongoing Digital Scholars digital humanities discussion group here at Florida State University. Workshop is free and open to the public.

Wednesday, March 25, 2:00-3:30 pm
Fine Arts Building (FAB) 320A [530 W. Call St. map]

“I Know Where Your Cat Lives”: The Process of Mapping Big Data for Inconspicuous Trends

Big Data culture has its supporters and its skeptics, but it can have critical or aesthetic value even for those who are ambivalent. How is it possible, for example, to consider data as more than information — as the performance of particular behaviors, the practice of communal ideals, and the ethic motivating new media displays? Professor Owen Mundy from FSU’s College of Fine Arts invites us to take up these questions in a guided exploration of works of art that will highlight what he calls “inconspicuous trends.” Using the “I Know Where Your Cat Lives” project as a starting point, Professor Mundy will introduce us to the technical and design process for mapping big data in projects such as this one, showing us the various APIs (Application Program Interfaces) that are constructed to support them and considering the various ways we might want to visualize their results.

This session offers a hands-on demonstration and is designed with a low barrier of entry in mind. For those completely unfamiliar with APIs, this session will serve as a useful introduction, as Professor Mundy will walk us through the process of connecting to and retrieving live social media data from the Instagram API and rendering it using the Google Maps API. Participants should not worry if they do not have expertise in big data projects or are still learning the associated vocabulary. We come together to learn together, and all levels of skill will be accommodated, as will all attitudes and leanings. Desktop computers are installed in FAB 320A, but participants are welcome to bring their own laptops and wireless devices.

Participants are encouraged to read the following in advance of the meeting:

• Sepandar D. Kamvar and Jonathan Harris. “We Feel Fine and Searching the Emotional Web.” WSDM’11 (Web Search and Data Mining 2011) Feb. 9-12, 2011, Hong Kong, China. [http://wefeelfine.org/wefeelfine.pdf]
• Mitchell Whitelaw. “Art Against Information: Case Studies in Data Practice.” The Fibreculture Journal 11 (2008). [http://eleven.fibreculturejournal.org/fcj-067-art-against-information-case-studies-in-data-practice/]
• Owen Mundy. “The Unconscious Performance of Identity: A Review of Johannes P. Osterhoff’s ‘Google’.” Rhizome.org (Aug. 2012). [http://rhizome.org/editorial/2012/aug/22/unconscious-performance-identity-review-johannes-p/]

and to browse the following resources for press on Mundy’s project:

• “The Navy’s Acoustic Warfare, Anti-Surveillance Camouflage, And Erasing Your Metadata.” NHPR.org (Aug. 2014). Interview as part of New Hampshire Public Radio’s Word of Mouth (starts at 6:35) [http://nhpr.org/post/80514-navys-acoustic-warfare-anti-surveillance-camouflage-and-erasing-your-metadata]
• “This Guy Is Cyberstalking the World’s Cats in the Name of Privacy.”Motherboard/Vice Magazine (Jul. 2014). [http://motherboard.vice.com/read/this-guy-is-cyberstalking-the-worlds-cats-in-the-name-of-privacy]
• “What the Internet Can See From Your Cat Pictures.” The New York Times(22 Jul. 2014). [http://www.nytimes.com/2014/07/23/upshot/what-the-internet-can-see-from-your-cat-pictures.html?_r=0&abt=0002&abg=0]

For further (future) reading:

• Mark Tribe and Reena Jana. “Introduction” to wikibook New Media Art(Taschen, 2006-2012). [https://wiki.brown.edu/confluence/display/MarkTribe/New+Media+Art#NewMediaArt-Introduction]

I just launched a new ongoing project this week. Here’s the text, a video and some screenshots. I’ll post more about how I made it soon.

Welcome to the today’s internet—you can buy anything, every website is tracking your every move, and anywhere you look you find videos and images of cats. Currently, there are 15 million images tagged with the word “cat” on public image hosting sites, and daily thousands more are uploaded from unlimited positions on the globe.

“I Know Where Your Cat Lives” iknowwhereyourcatlives.com is a data experiment that visualizes a sample of 1 million public pics of cats on a world map, locating them by the latitude and longitude coordinates embedded in their metadata. The cats were accessed via publicly available APIs provided by popular photo sharing websites. The photos were then run through various clustering algorithms using a supercomputer at Florida State University in order to represent the enormity of the data source.

This project explores two uses of the internet: the sociable and humorous appreciation of domesticated felines, and the status quo of personal data usage by startups and international megacorps who are riding the wave of decreased privacy for all. This website doesn’t visualize all of the cats on the net, only the ones that allow you to track where their owners have been.

Folks can also contribute to a kickstarter to help with hosting costs.

I made a small app to compare the number of search results for two phrases from the Digital Public Library of America for a hackathon / workshop here at Florida State next week.

https://omundy.github.io/term-vs-term/

Digital Humanities Hackathon II – Digital Public Library of America

Monday, April 21, 2:00-3:30 p.m.
Strozier Library, Scholars Commons Instructional Classroom [MAP]

The Digital Scholars Reading and Discussion Group will simulate its second “hackathon” on April 21, allowing participants to learn more about the back-end structure of the Digital Public Library of America. With its April 2013 launch, the DPLA became the first all-digital library that aggregates metadata from collections across the country, making them available from a single point of access. The DPLA describes itself as a freely available, web-based platform for digitized cultural heritage projects as well as a portal that connects students, teachers, scholars, and the public to library resources occurring on other platforms.

From a critical point of view, the DPLA simultaneously relies on and disrupts the principles of location and containment, making its infrastructure somewhat interesting to observe.

In this session, we will visit the DPLA’s Application Programming Interface (API) codex to observe some of the standards that contributed to its construction. We will consider how APIs function, how and why to use them, and who might access their metadata and for what purposes. For those completely unfamiliar with APIs, this session will serve as a useful introduction, as well as a demonstration of why a digital library might also want to serve as an online portal. For those more familiar with APIs, this session will serve as an opportunity to try on different tasks using the metadata that the DPLA aggregates from collections across the country.

At this particular session, we are pleased to be joined by Owen Mundy from FSU Department of Art and Richard Urban from FSU College of Communication and Information, who have considered different aspects of working with APIs for projects such as the DPLA, including visualization and graphics scripting, and developing collections dashboards.

As before, the session is designed with a low barrier of entry in mind, so participants should not worry if they do not have programming expertise or are still learning the vocabulary associated with open-source projects. We come together to learn together, and all levels of skill are accommodated, as are all attitudes and leanings.

Participants are encouraged to explore the Digital Public Library of America site prior to our meeting and to familiarize themselves with the history of the project. Laptops will be available for checkout, but attendees are encouraged to bring their own.

Joelle Dietrick and I embarked on a new body of work this summer called “Packet Switching.” Inspired by her Sherwin Series images and wall paintings, and my work deconstructing and re-visualizing source code and other data, we’ve created two new software projects, as well as a series of limited edition prints, large photo installations, wall-sized paintings, and animations.

The full statement explains our process and intent clearly:

Packet Switching is an ongoing body of work by Joelle Dietrick and Owen Mundy that visualizes architecture as fragments affected by economic and communications systems.

The title of the series references how contemporary communications systems break digital files into smaller manageable blocks of data called packets. Each packet is then sent through a network, taking the quickest route possible, and reassembled once they reach their destination. One JPG image, for example, might be broken into several packets, each of which may travel a different path through the net, even through different cities, before being recompiled into a copy of the original file.

To reference this common process used in networked systems, we wrote custom software that deconstructs a 3D model’s source code and produces unique fragments. We further remixed these fragments using an original application created in Processing. The resulting images become limited edition prints, large photo installations, wall-sized paintings, and animations.

Our process underscores how incidental fragmentation and automation can streamline markets, but also make them vulnerable to systems failure. The use of architecture specifically points to recent real estate market volatility and considers how communication technology-enabled pursuits of profit margins alters our most basic needs.

The first software, that “deconstructs a 3D model’s source code and produces unique fragments,” is open source and available on Github. Essentially, the PHP software, parses a 3D COLLADA file and exports a set number of geometries, that can then be further broken down and used in an artwork or design.

The second software, which we will release soon, remixes these fragments using Processing. The video below shows an example of the whole process.

Wall painting at “Temporary Home” in Kassel, Germany

While artists-in-residence at Temporary Home, in Kassel, Germany, which coincided with Documenta13, Joelle Dietrick and I completed a wall-sized temporary painting based on the architecture from the Bauhaus School at Dessau and 2012 American color forecasts.

Commission at Weimer Hall at the University of Florida

Joelle and I have also received a commission to complete Packet Switching (Weimer Hall) at the University of Florida College of Journalism and Communications this fall. This will be inkjet on adhesive polyester on a large wall (approx. 177.5 ft. x 20.2 ft.). More details soon.

I’ve been working on a lot of projects this summer using various color palettes. Since my work involves writing programs to use these palettes in different visual outcomes, I keep wishing for an easy way to view and negotiate the lists of colors. So today I wrote a simple app to visualize a list of hexadecimal values and sort them by hue, saturation, and value (HSV). The app can be used here, and the code is open under the MIT License.

Thanks to Alexei Kourbatov for the color format exchange functions.

I am happy to announce the launch of the new website for Drain: Journal of Contemporary Art and Culture and the corresponding release of issue #11 POWER, which I co-organized with Avantika Bawa.

POWER, issue #11

This issue of Drain attempts to expose the cultural faciality of power, as well as manifestations of power as simulacra which obfuscate traditional inquiries into its construction. If power connects the virtual and the actual, how does cultural creativity channel or destabilize this connectivity? The corporate-academic-entertainment-military-industrial complex and its front-end, the global information machine floods us with images and images of images, to cause sensory overload, and yet, at the same time, acute sensory deprivation. Most of all, power entrenches a visual literacy that allows us to see only its style, leaving us unable to access other ways of seeing and becoming. How can we parody this visual literacy, and the speed, cadence and grammar of this power and its affects?

Necropolis by Roi Kuper

If the simulation of power is necessary and absolute, can creative acts and molecular politics slip through the surveillance and desensitizing of territorializing systems?

GWOTEM by J.M. Badoud

This issue of Drain presents artworks, essays, and other creative works to actualize answers to these questions and re-channel them into different connectivities, ways of becoming and conceptual production.

The Gift of Giving by Oscar Perez

We are pleased to present Ian Buchanan and Roi Kuper as our feature writer and featured artist. This issue also includes essays by Emma Cocker and Chris Revelle, as well as interviews by Alexander Stewart with artist Andy Roache and Bertha Husband with Blazo Kovacevic. In our Creative Writing section, we present works by Camille Meyer, BT Shaw & Elizabeth Lopeman, Vanessa Norton, Emma Cocker and Morgan Campbell. Art projects works by Jamie Badoud, Diana Heise, Cyrico Lopes, Bob Paris and Oscar Perez.

Past issues

I recently completed a redesign of United Faculty of Florida – Florida State University (UFF-FSU) union website at uff-fsu.org with colleague, Phil Steinberg. This site runs on WordPress CMS with an altered Twenty Eleven theme. Here are some screenshots:

One of my visualizations on the front. More info

Facebook’s “Privacy Settings” always seem to be a work in progress. One thing they do consistently is default to less privacy overall, thus more sharing of your information on their site. For a website that depends on user-generated content the motivation to encourage sharing is clear enough. Still, why do they use the word “privacy” if they’re not actually embracing the idea?

For example, a recent update introduces a table with degrees of privacy from less to more (left to right). Types of data are listed in rows, while access is shown in the columns, with Everyone to Friends Only, again left to right.

Curious about what Facebook “Recommended” settings were, I clicked and am sharing the screenshot below. I am not surprised to see that they wish me to open-up all content I generate; status messages, posts, images, etc. and discourage allowing anyone I don’t know to comment on posts (probably as spam prevention).

I have been thinking about privacy quite a bit this week, developing ideas for what next to do with Give Me My Data, and providing an interview about social media for Naked on Pluto (along with the likes of Marc Garrett and Geert Lovink). Plus I went to see the “geek hero story” The Social Network at the Babylon Cinema last night.

Anyway, after all this thinking about Facebook’s past, I’m curious about its future, and how it will continue to try to hold on to the #1 social networking website position that Friendster and MySpace lost so quickly. The API, games, etc could be expected, but the Facebook Connect tools that are so prevalent now, even on Yelp, a site I figured could make it without schlepping, were a surprise.

Facebook Connect, a jquery “widget” that allows you to login to other websites using your Facebook ID, is clever and eerie at once. It allows Facebook to track you when you are not even on their site, and make sure you stay loyal. If that sounds sinister, well it is. What other purpose could there be for making available a service with the single purpose of mediating every interaction or bit of content you add to the web? It seems at first like OpenID, and it is, except that its run by a multi-billion dollar social media corporation.

This lovely website has posted instructions in German for using Give Me My Data. Vielen Dank! English version

Howdy, it’s been awhile since I last shared news about recent and ongoing projects. Here goes.

1. You Never Close Your Eyes Anymore

You Never Close Your Eyes Anymore is an installation that projects moving US Geological Survey (USGS) satellite images using handmade kinetic projection devices.

Each device hangs from the ceiling and uses electronic components to rotate strips of satellite images on transparency in front of an LED light source. They are constructed with found materials like camera lenses and consumer by-products and mimic remote sensing devices, bomb sights, and cameras in Unmanned Aerial Vehicles.

The installation includes altered images from various forms of lens-based analysis on a micro and macro scale; land masses, ice sheets, and images of retinas, printed on reflective silver film.

On display now until July 31 at AC Institute 547 W. 27th St, 5th Floor
Hours: Wed., Fri. & Sat.: 1-6pm, Thurs.: 1-8pm

New video by Asa Gauen and images
http://owenmundy.com/site/close_your_eyes

2. Images and video documentation of You Never Close Your Eyes Anymore will also be included in an upcoming Routledge publication and website:

Reframing Photography: Theory and Practice
by Rebekah Modrak, Bill Anthes
ISBN: 978-0-415-77920-3
Publish Date: November 16th 2010
http://www.routledge.com/books/details/9780415779203/

3. Give Me My Data launch

Give Me My Data is a Facebook application designed to give users the ability to export their data out of Facebook for any purpose they see fit. This could include making artwork, archiving and deleting your account, or circumventing the interface Facebook provides. Data can be exported in CSV, XML, and other common formats. Give Me My Data is currently in public-beta.

Website
http://givememydata.com/

Facebook application
http://apps.facebook.com/give_me_my_data/

4. Give Me My Data was also covered recently by the New York Times, BBC, TechCrunch, and others:

Facebook App Brings Back Data by Riva Richmond, New York Times, May 1, 2010
http://gadgetwise.blogs.nytimes.com/2010/05/01/facebook-app-brings-back-data/

5. yourarthere.net launch

A major server and website upgrade to the yourarthere.net web-hosting co-op for artists and creatives. The new site allows members of the community to create profiles and post images, tags, biography, and events. In addition to the community aspect, yourarthere.net is still the best deal going for hosting your artist website.

Website
http://yourarthere.net

More images
http://owenmundy.com/site/design_yourarthere_net

6. The Americans

The Americans is currently on view at the Northwest Florida State College in Niceville, FL. It features a new work with the same title.

More images
http://owenmundy.com/site/the-americans

7. Your Art Here billboard hanger

I recently designed a new billboard hanging device and installed it in downtown Bloomington, IN with the help of my brother Reed, and wife Joelle Dietrick.

Stay tuned here for news about Your Art Here and the new billboard by Joelle Dietrick.
http://www.facebook.com/pages/Your-Art-Here/112561318756736

8. Finally, moving to Berlin for a year on a DAAD fellowship to work on some ongoing projects, including Automata.

More images
https://owenmundy.com/blog/2010/07/new-automata-sitemaps/

I’ll be giving a paper about Automata at the upcoming ISEA2010 conference in Ruhr, Germany.
http://www.isea2010ruhr.org/conference/tuesday-24-august-2010-dortmund

Many thanks to Chris Csikszentmihályi, Director of the Center for Future Civic Media http://civic.mit.edu/ , for inviting me to the MIT Media Lab last August to discuss the project with his Computing Culture Group: http://compcult.wordpress.com/

Katherine Sweetman, has just posted a great video documenting the Lucent project we did at the University of California, San Diego.

A deconstruction of defense contractor website data structures.

BBC News reports on Give Me My Data. Their website and video player is pretty clunky, and while they avoid crediting the developer, its still a nice plug to wake up to.
http://news.bbc.co.uk/2/hi/programmes/click_online/8744514.stm

“Open sourcing” the schematic for the electronic components for You Never Close Your Eyes Anymore.

Products:

RBBB boards (Arduino clone)
custom-designed circuits
– female headers
– TIP31 transistor
– 6-wire Unipolar Stepper motor (48 step Nippon Electric Pulse Motor)
– ULN2803A Darlington Array
– hook-up wire
– various resistors
– LEDs
used camera lenses
aluminum “flat bar”
hose clamps
rubber wine corks
various mounting hardware

Preparing for show at AC Institute in New York.

Give Me My Data (fb_friends_20100128_white)

Give Me My Data (fb_mutualfriends_20091114_black)

Give Me My Data (fb_mutualfriends_20100430_dark3)

Give Me My Data (fb_profile_xml_20100430)

Give Me My Data is a Facebook application that helps you reclaim and reuse your facebook data. It is currently in-development but starting to receive an amazing amount of traffic from Facebook users. Apparently the developers at Facebook made a change to the interface this week leaving many users unable to find or display specific information they had added to their pages. Give Me My Data helps users circumvent the problems they are having with the interface by giving them another way to access their data.

Due to the amount of questions I have received about the application I decided to launch a new website to share information about it here: givememydata.com

Facebook application interface

Visitors from this week (via statcounter)

The application profile page
Use the application

Today I launched the public alpha version of my Facebook application Give Me My Data for testing and feedback. This app helps you reclaim and reuse your Facebook data.

Feel free to test it and let me know what you think!

The FSU Art Review System is live.

More images online here.