Revised proposal and link to project

Here is a link to my project:

http://uwemedia.net/conor/project/finalprojectfolder/map1.html

IMPORTANT: I have noticed imaging mapping program sometimes doesn’t work in the way it is intended with Google chrome. This is out of my control. If the links aren’t working properly, use Firefox. It works perfectly for me on this browser.

Also: I have chosen not to design the map with Mapbox’s Mapbox Studio feature because they charge an expensive subscription fee and I am poor.

In a sentence:

My project is based on a journey through New York City with implied glitches.

In a paragraph:

My project is based on a journey through New York City with implied glitches. Once entering the site, you are displayed a full screen map with a single marker. Within this marker is an image of this area which also acts as a link that takes to you to other areas of that location. Once you have clicked through all the images from that location, you are directed back to the map which takes you on a different route around New York, which again, stops at a marker and the process begins again.

In a page:

My project this term is an attempt to create a somewhat random journey through a map with implied glitch aesthetics. I have taken images from google maps and broken their code, and have used the results in various attempts to create glitched artefacts in real terrains and I have also used them to the behaviour of the pure glitch. The journey can be comparable to a derive through a digital terrain. I have purposely designed the map to have multiple links on each page that take you to different locations.

The picture below is an example of links that take you to different locations. If you click on the cab on the right, you are taken to central park. Click on the cab on the left, and you are taken to Bryant Park, and so on.

cabs Here is a picture of the total markers:

mlocats

From my readings, I have conceptualised the glitch in a different sense to what I did originally did. Prior to my research, I narrowly understood the glitch to simply be a random mess of corruption with no purposely designed form. Although this can be true, Moradi’s (2004) term of the ‘glitch-alike’ effected the design choices within my project. Moradi (2004) divides the glitch into two categories. First, the “pure glitch”, a genuine malfunction of computer systems, and the “glitch-alike”, a purposely produced glitch. After my understanding of the glitch-alike, I decided to be more creative with my images. Instead of only glitching images as a whole, I selected specific sections, like the Statue of Liberty for example, while leaving the rest of the image intact.

Glitch theorists such as Iman Moradi and Rosa Menkman describe the glitch to have a distinct medium like quality in which they both exist within other media as a sub layer. A medium that becomes uncovered when a glitch surfaces. The way in which I have designed the glitches within my project are a result of this theory. I have made the design choices I have in an attempt to explore the sub layers in various ways. The majority of my images start with one specific section which is glitched, which derived from my understanding of Moradi’s glitch-alike. These areas act as a link to the other layers that lie underneath the intended image. Clicking on these specifically glitched areas takes you to another ‘sub layer’ of that area. Other images that lies under the intended.

To conclude, my project is an attempt to expose the medium of the glitch. To explore the sub layers underneath the images of New York, through the creative forming of glitch-alikes.

References

  • Moradi, I. (2004) Gtlch aesthetics. [online]. [Accessed 03 May 2015].
  • Menkman, R. (2010) Glitch Studios Manifesto.[online]. [Accessed 10 May 2015].
Advertisements

Real glitches

This ornament is a real physical object created by  Ferruccio Laviani. I really like the way Laviani makes this this cabnet look like it is a digital glitch, but in fact is real. This inspired me to create the picture below. This is my attempt to glitch one object from google maps in the same style of Laviani.

dezeen_good-vibrations-by-ferruccio-laviani-for-fratelli-boffi_1
sick

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.

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.