The process of glitching sections of images and linking them

Source image from google maps

st-patricks-cathedral-new-yorkOpen in photoshop and cut out section to be glitched

ex3Open cut out section in code editor and break the code.

EX2

Save it, then screen shot the preview (photoshop doesn’t open images with broken code) and open it in photoshop. Copy the layer into original image and place the broken image in the cut out section.

ex5

Open the image in developer.cdn.mozilla.net and select area that needs to be linked.

ex6

copy and paste the code into sublime page. Done.

Advertisements

Technical stuff

Changes with JavaScript

My original plan was to create a routing system through the website entirely through javascript (JS). I wanted to create multiple routes which were selected randomly (from a JS list) leading the user on a jouney through the city. Once the user has navigated through the marker, the javascript takes them back to the original map and the random journey started again.

I have changed this idea slightly. Instead of writing some JS to select random routes, I have given each route their own maps with different coordinates which often have multiple links that take the user in different directions. I have chosen to use this method because it allows the user to almost pick their own journey and navigate through the website themselves.

This is a link to my project in its current state

Glitching images

When you click a marker image, it takes you to a page where you view more images from around those coordinates. I have purposely designed some of these images to have selected areas that have been glitched and pasted back onto the original image. These areas are links to other images, and usually more glitched. This idea originated from my orange juice glitch idea and my idea with Ryan.

I’ve used image maps to select specific areas of the image to link. Example:

images mapz

With this code to make the images fullscreen:

12121212

I encountered a few problems image maps. I noticed when you change the size of the window the collaboration is off with the glitches and links. I tested out the project on other computers to my own and also found that the collaboration was even even in fullscreen mode. so I have used the following technique to make the image maps responsive with the window size:

http://www.coffeecup.com/help/articles/how-to-make-your-image-map-responsive/

Now the image maps seem to be fully functional with other computers and when the window size is changed.

Up to date assets + prototypes

My idea have evolved from a fake website (see previous posts) to a map based project with glitch aesthetics. What sparked this project was my interest in a journey through a website, and how Skrillex and Jodi use this idea effectively. Both of these examples use glitch aesthetics in a deliberate way. My vision for the project is to create what I’m calling a digital derive that takes you through a journey of your choice, depending on what link you click.

“A dérive is an unplanned journey through a landscape, usually urban, on which the subtle aesthetic contours of the surrounding architecture and geography subconsciously direct the travelers, with the ultimate goal of encountering an entirely new and authentic experience.” (source)

I want to apply this concept into a digital format. The user begins the journey on the animated map where popups of images and links can take you elsewhere around New York. Different links can take you into different areas of the city, or may take you further into the broken code of the city/images, allowing you to encounter “an entirely new and authentic experience.”

Antonio Roberts experimented with glitch art by printing glitches onto normal newspapers. He notes; ”In this way we see how glitches can alter our perception of already existing media”. This is where my original idea of cropping specific parts of photos and glitching them came from. this method is not a traditional glitch, but a deliberate one similar to my Skrillex and Jodi examples.

Below are my map prototypes with functioning java script and a potion of no images with broken code.

Here are the links to my current map prototypes:

Map with markers added: Map 1

Map with poly-line added: Map 2

Map with animated poly-line and pop up cafe marker: Map 3

Map with longer animated poly-line and 3 different popups: Map 4

Extras:

Ryan

Ryan gif

Javascript Jodi style picture route

images

I made this gif using the same process as my Big Ben example below. (If gif isn’t showing up click here)

finishedSOLgif

NY-gif-done

some of the the individual glitched photos that are combined to make the gif

                 bloke 7bloke 10bloke9hiempire-state-buildingSOL9

harrlem2harlem3harlem1
times square 1.1 times square 1 times square 2.2 times square 2 times square 3.1 times square 3

church1church2church3  times square 3 times square 4.1 times square 4
57 st central park 8 - Copy ny 5 ny 8 ny7 - Copy ny7