You are on page 1of 78

The Digital Photo Recycler:

What Could We Be Doing With All This Data?

Joseph Evans

Master of Science (Design and Digital Media)


Edinburgh College of Art The University of Edinburgh 2011

Abstract This thesis, in conjunction with The Digital Photo Recycler1 , was created during the Summer of 2011 to highlight a growing problem in the digital age. To put it bluntly, we are creating too much data. Through a discussion of the various concepts and ideas ranging from: the recycling movement, what we do with unwanted data and what we could do with it, what counts as good and bad in art, the open source movement and crowd sourcing. It aims to provide, not a solution to a problem, but contextualise the creation of a new collaborative artistic tool aimed at raising awareness of it.

1 The live version of this website can be viewed at joepevans.com/recycler/recycler, a version is also included in the accompanying DVD

Contents
1 Description 6 9 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 11 12 13 13 14 14 15 16 17 17 18 19 19 21 24 26 27 28 29 29 31 31 33 35 37 38 39 39 42

2 Introduction 3 Impetus 3.1 Have I Got Too Much Data? . . . . . . . . . . . . . . . . . 3.1.1 More and More and More Data . . . . . . . . . . . 3.1.2 Personal Unwanted Data . . . . . . . . . . . . . . 3.1.3 How to Decide if Something is Worth Keeping? 3.2 Reduce, Reuse and Recycling the Digital . . . . . . . . . 3.3 Narrowing Down . . . . . . . . . . . . . . . . . . . . . . . . . 3.3.1 The Death and Life of net.art . . . . . . . . . . . . 3.4 What Can We Do With All This Data? . . . . . . . . . . 4 Conceptual Development 4.1 Original Concept . . . . . . . . . . . . . . 4.1.1 Problems With This Idea . . . . 4.2 Goodness and Badness . . . . . . . . . 4.2.1 Good and Bad Art, Beauty and 4.2.2 Good and Bad in Photography 4.3 Artistic Recycling . . . . . . . . . . . . . 4.4 Revised Concept . . . . . . . . . . . . . . 5 Creating The Digital Photo Recycler 5.1 Making the Recycler . . . . . . . . . . 5.1.1 Choosing Processing . . . . . 5.1.2 Filters . . . . . . . . . . . . . . . 5.2 The Wisdom of Crowds . . . . . . . . 5.3 Prototyping . . . . . . . . . . . . . . . . 5.3.1 Moving Forward . . . . . . . . 5.3.2 Release Early, Release Often 5.3.3 Removing Responsibility . . . 5.4 Results . . . . . . . . . . . . . . . . . . . 5.5 Average Use of the Site . . . . . . . . 5.6 The Recycler as a Tool . . . . . . . . 5.7 Taking It Further . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Aesthetics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

CONTENTS

CONTENTS

6 Conclusion A First A.1 A.2 A.3 Appendix: User Input Blog Comments . . . . . . . Recycler:Comments Page Other Feedback . . . . . . . A.3.1 From Facebook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

43 44 44 45 46 46 48 48 48 50 50 54 56 63 65 70

B Filters and Processing.js Code B.1 Introduction . . . . . . . . . . . . B.2 setup . . . . . . . . . . . . . . . . B.3 Filters . . . . . . . . . . . . . . . . B.3.1 Simple Processes . . . B.3.2 Alternation Processes . B.3.3 Colour Processes . . . . B.3.4 Rearranging Pixels . . . B.3.5 Rearranging the Image B.3.6 Artistic . . . . . . . . . . .

Last edited : August 18, 2011

List of Figures
3.1 4.1 4.2 4.3 4.4 4.5 4.6 4.7 4.8 4.9 5.1 5.2 5.3 5.4 5.5 5.6 5.7 5.8 5.9 5.10 5.11 5.12 B.1 B.2 B.3 B.4 B.5 B.6 B.7 B.8 B.9 B.10 B.11 B.12 Screenshot of http://wwwwwwwww.jodi.org/betalab/index.html (1996) . . . . . Ebbets, Charles C: Lunch atop a Skyscraper(1932) . . Da Vinci, Leonardo: The Mona Lisa (1503 to 1505) . . . Chilean Miners . . . . . . . . . . . . . . . . . . . . . . . . . . UnrealDiscords best photo of 2010 . . . . . . . . . . . . . The Pale Blue Dot . . . . . . . . . . . . . . . . . . . . . . . . An uploaded photo which I think is good. . . . . . . . . . Duchamp, Marcel: Fountain(1917) . . . . . . . . . . . . . . Mondrian, Piet: Composition with Yellow, Blue and Red B+: Cover Art for Entroducing by DJ Shadow (1996) Early Example of Filter Results . . . . The Digital Photo Recycler v0.0.3 . . . The Digital Photo Recycler v0.3.3 . . . Responses through blog, website and A bad generated image . . . . . . . . . Checker: Level 1 Variation . . . . . . . . Checker: Level 12 Variation . . . . . . . The Evolution of a Single Image . . . Generated Seascape . . . . . . . . . . . Concattonated Checks . . . . . . . . . . Reintegrated Image . . . . . . . . . . . . Splitting Text . . . . . . . . . . . . . . . . Inverted Photograph . . . . . Grayscale: Level 1 Variation Posterize: Level 12 Variation Blurred: Level 1 Variation . . Blurred: Level 12 Variation . Posterize: Level 1 Variation . Posterize: Level 12 Variation Added Photographs . . . . . . Checker: Level 1 Variation . . Checker: Level 12 Variation . Alternate: Level 1 Variation . Alternate: Level 12 Variation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Facebook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . for . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . (1937-42) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 17 18 21 21 22 23 24 24 26 30 32 36 37 38 39 39 40 41 41 41 41 51 51 51 52 52 52 52 53 54 54 55 55

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . the Digital Photo Recycler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

LIST OF FIGURES

LIST OF FIGURES

B.13 Flipped: Level 1 Variation . . . . . . . . . . B.14 Flipped: Level 12 Variation . . . . . . . . . B.15 Spit Colour 1: Level 1 Variation . . . . . . . B.16 Spit Colour 1: Level 12 Variation . . . . . . B.17 Spit Colour 2: Level 1 Variation . . . . . . B.18 Spit Colour 2: Level 12 Variation . . . . . . B.19 Spit Colour 3: Level 1 Variation . . . . . . B.20 Spit Colour 3: Level 12 Variation . . . . . . B.21 Spit Colour 4: Level 1 Variation . . . . . . B.22 Spit Colour 4: Level 12 Variation . . . . . . B.23 Filter By Red: Level 1 Variation . . . . . . B.24 Filter By Red: Level 12 Variation . . . . . . B.25 Filter By Green: Level 1 Variation . . . . . B.26 Filter By Green: Level 12 Variation . . . . B.27 Filter By Blue: Level 1 Variation . . . . . . B.28 Filter By Blue: Level 12 Variation . . . . . B.29 Random: Level 1 Variation . . . . . . . . . B.30 Random: Level 12 Variation . . . . . . . . . B.31 Sorted Photograph . . . . . . . . . . . . . . B.32 Rotate . . . . . . . . . . . . . . . . . . . . . . B.33 Random Section . . . . . . . . . . . . . . . . B.34 4 Way Kaleidoscope: Level 1 Variation . B.35 4 Way Kaleidoscope: Level 12 Variation B.36 8 Way Kaleidoscope: Level 1 Variation . B.37 8 Way Kaleidoscope: Level 12 Variation B.38 Mondrian . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . .

56 56 57 57 57 57 58 58 58 58 60 60 61 61 61 61 62 62 64 65 66 67 67 68 68 70

Last edited : August 18, 2011

LIST OF FIGURES

LIST OF FIGURES

Acknowledgements
This project would not have been possible without the help of a whole range of people, including: Mhairi Wilson: Who can keep me sane even when shes in another country. Paul Grapefruit McLelland: Chief Legal Adviser and Bug Checker; My supervisor: Jules Rawlinson; Miriam Evans: The top of the power distribution curve; Anyone who has ever posted on a PHP, MySQL or Processing Forum; FoodCare SP: Stimulating the way through our summer; Rebecca Black:Official day notifier; Ola Lvholm: Rebecca Blacks number 1 fan; Brendan F Doyle: DVD printer to the stars; The Whole Taking Over The Cavaedium crew; And most importantly anyone who posted comments, spoke to me in person or most importantly used The DIgital Photo Recycler. The below message is for you.

Last edited : August 18, 2011

Chapter 1

Project Contents
This submission consist of this essay and The Digital Photo Recycler1 : A collaborative web based manipulation photo tool in which unwanted bad photographs can be collected, shared, and adapted by other users, and then reintroduced back into the internet as good images. The DVD accompanying this essay contains: A full working version of the Digital Photo Recycler: This contains all of the code, photographs and images it contained at the time of submission. This is housed within a folder titled digital_photo_recycler_web in the root folder of the dvd. In this file, there is a file named joepevan_recycle.sql and two folders named MAMP and digital_photo_recycler_site. Below are instructions for setting up the website: Mac users with MAMP installed: If you already have MAMP installed on your computer, firstly copy the folder named digital_photo_recycler_site into the htdocs folder within your MAMP application. start window. Then launch MAMP and click open

Go to the phpMyadmin tab in the start window and imThe site should now be up and running. Go to

port joepevan_recycle.sql.

http://localhost:8888/digital_photo_recycler_site/ to test and use the site.


1 The

live version of this website can be viewed at joepevans.com/recycler/recycler

CHAPTER 1. DESCRIPTION

Mac users without MAMP installed: If you do not have MAMP installed on your computer, MAMP (Mac, Apache, mySql, PHP) is an environment which allows dynamic websites to be run directly on your computer without connection to the internet. To run this and view the website, first install MAMP by copying the MAMP folder to your applications folder. After going through MAMPs install procedures, everything should be set up to launch the website. Then launch MAMP and once lights have turned green, click open start window. Your browser should now open and you should see a webpage saying Welcome to MAMP If you can see this page, MAMP is installed on your Mac and everything is working. The site should now be up and running. Go to http://localhost:8888/digital_photo_recycler_site/ to test and use the site. PC users: If you are a PC user you should be able to follow a similar process using WAMP2 (Mac, Apache, mySql, PHP). Either download WAMP if you do not have it or copy the digital_photo_recycler_site folder into the WAMP www folder and import joepevan_recycle.sql into phpMyadmin. Go to http://localhost/digital_photo_recycler_site/ to test the site. A video titled walkthrough.mov. This video shows a screen capture displaying the basic functionality of the site and some of the ways in which it can be used. A very brief video titled images.mov. This is a quickly made visualisation of all the images created by the Digital Photo Recycler. It was originally planned to be included within the website, but an adequate place for it has not been found. It is intended as a quick visual way of showing the wealth of images passed through the recycler and a way of appreciating how images link to each other and change over time. Please be ware that this video is a series of flashing images and it is not advisable to watch if you are affected by strobe lighting. A pdf of this essay. This is titled digital_photo_recycler_j_evans_thesis.pdf and can be found in the root folder of the dvd.
2 http://www.wampserver.com/en/

Last edited : August 18, 2011

CHAPTER 1. DESCRIPTION

Before reading the document it would be advisable to spend a short amount of time exploring the website to get an idea of some of its key functions and to see some of the outcomes which have been produced with it. For best results and to be sure to see the site the way it is intended, please use Google Chrome. If you do not use Chrome, please use Safari or Firefox but beware some styling may not work properly. This document covers the thoughts, ideas and processes that led to the creation and development of The Digital Photo Recycler, explaining the incorporation of a multitude of influences ranging from artistic theory to the open source movement. It is not intended to be a technical document charting the specifications and minutea involved in creating a website of this sort, not a timeline of the events that led to it creation, instead a companion piece providing contextualisation for the site and expanding on a number of ideas which may only be hinted at in the site itself.. Some key technical aspects are mentioned but I have attempted to keep them brief and discuss such issues in broad terms. For those interested in the technical side of the project, more information has been included in The Appendix (6) and also on the website itself.

Last edited : August 18, 2011

Chapter 2

Introduction: The Digital Photo Recycler


Making Bad Photos Good

The Digital Photo Recycler, is A collaborative web based manipulation photo tool in which unwanted bad photographs can be collected, shared, and adapted by other users, and then reintroduced back into the internet as good images.It has been created as a way to find a creative use for out unwanted data. Built from a central premise that we store too much information on our computers, and much of it we no longer use for, the site has been created 9

CHAPTER 2. INTRODUCTION

as a way in which to pose the question: What should we be doing with all this data? This thesis provides a context for this work, looking into three major issues. Firstly in Chapter 3 the question is widened out to look at the amount of data being produced, internationally and at a personal level, along side the environmental issues surrounding data storage. Chapter 3.3 covers the reasons for an artistic reaction to this issue within a discussion on the changing state of art on the internet. Chapter 4 builds on the earlier ideas, looking at how the concept for The Digital Photo Recycler developed along with a key idea, what makes something Good and Bad and how we decide a piece of data should be deleted. Finally, Chapter 5 looks at how the site was developed and outcomes from it, along with ways that the previous concepts were implemented and incorporation of several key ideas of Open Source and Crowd Sourcing methodology taken from Clay Shirkeys Here Comes Everybody(Shirky, 2008) and Eric S Raymonds The Cathedral and the Bazaar(Raymond, 2001).

Last edited : August 18, 2011

Chapter 3

The impetus for digitally recycled art


3.1 Have I Got Too Much Data?

The idea for this project sprang from a simple and personal observation. I now have countless gigabytes of files and information, spread across multiple formats, pieces of hardware, and saved on various cloud services and social networks, often files are duplicated several times and often its not even something I want or need. As data storage becomes exponentially cheaper, I have almost no incentive whatsoever to get rid of any of it, or even save it in sensible ways so that I could find it if I needed to. So what should I do with this worthless or bad data, be it pointless copies of essays, songs I never want to hear again, or all my inane photographs from the past 78 years? This initial reflection on my own computer usage led to the following train of thought: We are creating lots of data, we do not necessarily need it but while keeping it is having an impact on the planet, getting rid of it is not a viable solution, therefore is there a way to reduce, reuse or recycle data.

11

3.1. HAVE I GOT TOO MUCH DATA?

CHAPTER 3. IMPETUS

3.1.1

More and More and More Data

Firstly to get a view of the problem of data creation divorced from my personal situation, I took a brief international perspective on the issue. According to the IDC Digital Universe report(Gantz and Reinsel, 2011), we are due to create 1.8 zetta bytes of data this year. So far 1,206,983,792,167,970,948,719 bytes of information have been created1 . This impossibly large number, 1.2 Zettabytes, or 1.2 trillion gigabytes, is difficult to even explain by relating it to real world objects. IDC have tried by telling us that 1.2 Zettabytes is equal to 75 billion fully-loaded 16 GB Apple iPads, which would fill the entire area of Wembley Stadium to the brim 41 times. (IDC, 2010) but even then this and other attempts to rationalise such huge numbers is almost impossible. But that is just for this year, the speed at which data is being created is also ever increasing even outrunning Moores Law itself(Moore, 1965) with total amount of data more than doubling every two years. The important fact to garner from this, and what we all know is that we keep making more data and keep needing somewhere to put it. The 400 kB that a 3.5 Inch floppy disk could hold seemed like a huge amount of data, and indeed it is or at least was. We can now set up a free account with a service like Gmail or Dropbox and get instant access to thousands of times more storage space2 . And somehow even with this ever increasing amounts of storage, we expand to fill the gap and then expand further. IDC are keen to point out that user generated content is around 10% of this data being created. The other 90% is composed of credit records, surveillance photos, analytics on behaviour, web-use histories, and so on.(Gantz and Reinsel, 2010) and also that much of it is only in existence for short amounts of time. It is impossible to ignore the surprising fact stated in last years Digital Universe Report that
10th August 2011, go to http://www.emc.com/leadership/programs/digital-universe.htm the time of writing, Gmail offers over 7.6 Gigabytes of storage and Dropbox offers an initial 2Gb for free with up to 8Gb available if you invite others to the service
2 At 1 Viewed

Last edited : August 18, 2011

3.1. HAVE I GOT TOO MUCH DATA?

CHAPTER 3. IMPETUS

IDC estimates that in 2009, if people had wanted to store every gigabyte of digital content created, they would have had a shortfall of around 35%. (Gantz and Reinsel, 2010) and this gap is ever widening. We cannot store all the data which is being created, so how do we decide what to keep and what we can lose?

3.1.2

Personal Unwanted Data

Even with most of this data being created and stored is outwith our control, our own personal levels of data storage are still impossibly large My own saved data puts me somewhere between 300 and 500 Gb. I can be reasonably sure that much of this data I will never need again: saved emails, old essays and almost every photograph I have taken in the past 7-8 years. Logic would say that the most prescient thing to do with these unwanted artefacts would be to delete them. But in a world where even mobile phones and music players having the capacity to hold thousands of photographs, it is barely worth the effort. This is compounded by a second shared experience: you spring clean your computer, deleting a whole host of files in the process; then later that day, week or month you remember a file you had with just the bit of information you need, and then on looking for it remember that it was deemed worthless in the past and has now been lost to you.

3.1.3

How to Decide if Something is Worth Keeping?

An early decision was taken to concentrate on an artistic basis for this project, concentrating specifically on digital photographs. As a result I decided to concentrate on a broadly aesthetic definition of what should or should not be kept: that of the simple, universal terms of good or bad, with the idea that good photographs are the ones we keep, share and use, while the bad photos are the ones which stay on our hard drive but are never put to any use. There is more discussion on this issue in section 4.2.

Last edited : August 18, 2011

3.2. REDUCE, REUSE AND RECYCLING THE DIGITAL

CHAPTER 3. IMPETUS

3.2

Reduce, Reuse and Recycling the Digital

In the physical world, the environmental movement, has gained much credence over the last 40 years, and one of its key tenets has been that of the waste hierarchy: that well known mantra of Reduce, Reuse, Recycle, popularised as long ago as the first World Earth Day in 1970(Cooper, 1998). This idea makes definite sense in the physical world where waste storage or destruction have a wide variety of environmental repercussions and a limited store of resources mean that as consumption and population continue to increase we must do what we can to limit the impact we each make on the world. In the digital world, these issues are less obvious but increasingly relevant. As mentioned above, we do not have space for all the data we are creating. Data farms are becoming an ever more common aspect of our landscape, these huge warehouses full of servers take up huge tracts of land, often with little or no consideration taken for the surrounding landscape, and using huge amounts of power. Political pressure and public opinion demands these facilities be built to maintain the growth and proliferation of internet access for all. Slowly an understanding of this is growing, for example Google, while creating multiple massive data centres around the world are keen to explain the efficiencies of their systems and the practices they are putting in to reduce their fuel useage(Google, 2011). With ever more data being created, and not enough space for it, so I was keen to work out some way of reducing the amount of data an individual is creating, reusing it or recycling it to create something new and of more worth.

3.3

Narrowing Down a Use for Unwanted Data

I decided that the best move forward was to take an artistic approach that took advantage of the digital nature of the problem. Again an aim of finding an artistic use for unwanted digital content sparked several more key thoughts: Last edited : August 18, 2011

3.3. NARROWING DOWN

CHAPTER 3. IMPETUS

3.3.1

The Death and Life of net.art

Throughout the 1990s the burgeoning internet culture was the catalyst for the self proclaimed net.art movement but within 10 years it was the common belief that it was over almost before it had begun that conceptualism had given way to slick software tricks(Stallabrass, 2002, p126). With the perspective afforded by time, its possible to see that in the long run there has been an evolution of internet art rather than rather than a wholesale rejection of it. Internet Art of the 1990s commonly focused on the very nature of the internet itself, or purposefully confusing the user, purposefully ignoring the norms of the internet which had already been adopted.. A classic example of this approach is http://wwwwwwwww.jodi.org/ (figure 3.1) a website which forgoes the usability we expect in a website, with an indecipherable structure the user is forced to click randomly through a series of pages containing apparently graphics and unclear buttons. As we have moved from a world where the internet is a new, intriguing and unknown element to one where it is ubiquitous, and the internet has moved forward with new options and applications available to web developers, so the art being produced with it has moved forward. Many works now revolve around the rise of social networks on the internet, or the social implications of how ingrained the internet has become in every day life. For example The Cybraphon created by Edinburgh Band FOUND in reaction to the Myth of the Band That Was Signed Through Myspace (Found, 2009). Rhe Cybraphon is a robotic band created from a multitude of antique objects which creates music based on how much the internet is talking about it. Here the focus has moved away from fetishism of the structure of the internet itself Figure 3.1: Screenshot of

http://wwwwwwwww.jodi.org/betalab/index.html (1996)

Last edited : August 18, 2011

3.4. WHAT CAN WE DO WITH ALL THIS DATA?

CHAPTER 3. IMPETUS

towards the socialogical aspect of the internet, commenting on our increasing obsession with what the internet is saying about us along with an attempt to create a physical embodiment of the nonphysical essence of the internet.

3.4

What Can We Do With All This Data?

This range of ideas led to one major question:

What can we do with all this data? Can we use digital processes to recycle unwanted bad digital content and turn it into something good?

Last edited : August 18, 2011

Chapter 4

Conceptual Development
4.1 Original Concept

To narrow down the field from the idea of recycling bad digital content and making it into something good, several decisions and realisations were made very early on. Firstly to reduce the range of media to concentrate solely on finding something relating to images. As far as my own personal data storage is concerned images are one of the largest culprits, and also as a visual art enthusiast, with a range of skills in that area, it was an obvious avenue to take. The second was that there was a need to find an important incentive not just delete photos; as while one person may think a photograph is bad, others may find worth in it. Thirdly and most crucially was the decision to Figure 4.1: Ebbets, Charles C: Lunch atop a

Skyscraper(1932)

17

4.1. ORIGINAL CONCEPT

CHAPTER 4. CONCEPTUAL DEVELOPMENT

combine this idea with an interest in the ecological implications of our exponentially increasing data storage needs. As discussed in 3.2 I adopted the idea of Reduce, Reuse, Recycle and was going to try and find a way of enacting this philosophy in the digital realm. The original concept was to take the pixel data from unwanted bad photos and use them to recreate well known good photos such as The Mona Lisa (figure 4.2) or New York Construction Workers Lunching on a Crossbeam by Charles C. Ebbets (figure 4.1). This would in essence create a store of high quality images for which users would be encouraged to link directly to these images instead of uploading them multiple times across the web. One of the major ideas behind this was to take inspiration from the hyperlink, one of the key innovations in http, in that it means that any piece of data theoretically only needs to be on the internet in one place and can be linked to from other locations, in reality, much data and especially media is stored multiple times. Figure 4.2: Da Vinci, Leonardo: The Mona Lisa (1503 to 1505)

4.1.1

Problems With This Idea

With this idea, of turning a bad image into a copy of something good, it was quickly apparent there was a flaw with the planned project. All that this would be doing would be making one more version of a photo on the internet, contributing to rather than solving the problem.

Last edited : August 18, 2011

4.2. GOODNESS AND BADNESS

CHAPTER 4. CONCEPTUAL DEVELOPMENT

Instead I decided to find a way of making something genuinely new out of something old, which would provide far more options with which to take the project in new directions, and engage directly with the idea of Digital Recycling.

4.2

Goodness and Badness

On having decided that I wanted to find peoples unwanted photos, and trying to find a way of taking bad photos and making them good, it was prescient to research the nature of bad, and conversely of good, and what we mean by them.

4.2.1

Good and Bad Art, Beauty and Aesthetics

Without moving to far into the realm of philosophical ideas, its surprisingly difficult to find definitions of Good or Bad art, but there has been much written on what defines art, as well as concepts such as aestheticism and beauty. As a result I looked increasingly towards this end of criticism.

We have no formula, and indeed can have no formula, which will enable us to pick out artworks in the way we can pick the bagels out in a bakeshop: for if bagel had the logic of of artwork, a pumpkin pie could be a bagel. (Danto, 1981, p61) Danto makes this slightly point during a discussion of William Kennicks Does Traditional Aesthetics Rest On Mistake and it formed the key for my understanding of my key words of Good and Bad. In the modern age, what really constitutes a work of art is that someone declares that it is one. When writing of his selection process, Michael Frank, the current curator in chief of The Museum of Bad Art in Massachussetts, pithily misquotes1 Bad art is like pornography in that, while I finds it difficult to articulately define it, I knows it when I see it.(Frank, 2008) but as
1 from Justice Potter Stewarts statement during Jacobellis v. Ohio in 1974 I shall not today attempt further to define the kinds of material I understand to be embraced within that shorthand description(pornography); and perhaps I could never succeed in intelligibly doing so. But I know it when I see it (Gewirtz, 1996)

Last edited : August 18, 2011

4.2. GOODNESS AND BADNESS

CHAPTER 4. CONCEPTUAL DEVELOPMENT

with good art I think it is much more subjective and individual than this perhaps suggests. Art does not have an inbuilt beauty, nor is it automatically art, or good art, or bad art, but rather I would surmise that its up to the viewer. In the Theory of Beauty, written at the start of the Twentieth Century, E Carrit wrote:

When we say that the beauty of all things is one, it is not meant that if the unaesthetic elements of each were abstracted what was left in all would be indistinguishable; nor that they are all approximations to some ideal thing which alone is purely beautiful. (Carritt, 1931, p18) That Carrit can be read as saying that there is not a platonic beauty, in the same way that there is a platonic chair, is important. Beauty is not a universal which can be distilled, but changes from person to person, situation to situation, and time to time. Alain De Botton brings up a similar point in his discussion of beauty in architecture:

We could say that nothing in architecture is ever ugly in itself; it is merely in the wrong place or of the wrong size, while beauty is the child of the coherent relationship between the parts. (De Botton, 2006, p218) These distinctions became key to the ideology behind The Digital Photo Recycler. While the uploaded image may have been perceived as bad by whoever uploaded it, that does not mean that other users of the site may not find aesthetic quality in it. Later Carrit remarks the fact seems to remain that we do come too find beauty in things or visions of which we had long been aware.(Carritt, 1931, p287) which led to a second important understanding and importantly a counter argument to anyone who would say that they just delete photos that they dont like: what happens when you realise you actually liked it? By uploading unwanted photographs to The Digital Photo Recycler the user is performing two important acts with respect to their unwanted photographs, firstly allowing others to find beauty where they cant see it, and secondly backing up the photograph so that it can be retrieved at a later date in the off chance it is needed.

Last edited : August 18, 2011

4.2. GOODNESS AND BADNESS

CHAPTER 4. CONCEPTUAL DEVELOPMENT

4.2.2

Good and Bad in Photography

There are countless books, websites and courses where you can be taught about the rule of thirds, the golden ratio or important facts about the appropriate amount of headroom. For example the BBC advise Be aware of how people are framed in your shot and Always keep your horizons (any horizontal lines) level in your photographs, otherwise your shots will appear crooked. (Ang, 2005). Two things become abundantly clear if you look into examples of such advise: firstly there is no equivalent for bad photography, no handy how too on taking the ultimate bad photograph, and secondly that any rules that are shared on how to take a good photograph are not rules, they are guidelines, and they can definitely be broken. I asked the question of readers of the Digital Photo Recycler Blog What makes a photo rubbish? And even with only a few replies its easy to see that composition and blur/focus are high up on the list, while there are a number of acknowledgments that even if a photo is technically of poor quality it can have sentimental or aesthetic value(See Appendix A.1) As examples of this fact, I have selected a number of photographs from a variety of sources Figure 4.4: UnrealDiscords best photo of 2010 Figure 4.3: Chilean Miners

Last edited : August 18, 2011

4.2. GOODNESS AND BADNESS

CHAPTER 4. CONCEPTUAL DEVELOPMENT

which do not fit the acknowledged rules of Good Photography but which in a variety of ways could all be considered good photographs. Figure 4.3 is a low resolution image in which the subject is clouded by all sorts of noise and imperfections. But a good enough image to be selected by Time magazine as one of the 29 best photos of 2010 because it is one of the first photographs of the Chilean Miners who were trapped under ground. Figure 4.4 has been included in the Flickr group your best of 2010 by user UnrealDiscord. While it ignores almost every standard rule in portrait photography, it is enigmatic, fun and artistic and crucially tells us something about its author. It is easy to see why UnrealDiscord decided it was a good photo. Figure 4.5: The Pale Blue Dot The Pale Blue Dot (Figure 4.5) is a photograph taken by Voyager 1 at the request of Carl Sagan. This is the most distant photograph to have been taken of the earth and it fails in almost every rule of photography, its blurry, the subject is unclear and so on, yet it is an incredible photograph which tells us something unique about being human and our place in the universe. That does not prove the contributors to the blog wrong, and its reasonable to say that an in focus, well composed photograph has a higher chance of being good, but crucially we need to realise that a technically bad photograph is not bad for just this reason. What makes a photo bad has much more to do with what the viewer reads into it.

Last edited : August 18, 2011

4.2. GOODNESS AND BADNESS

CHAPTER 4. CONCEPTUAL DEVELOPMENT

As one contributor to the blog made this point in reference to wedding photographs:

Some of them are not best quality but capture tiny little vignettes from the day. Some are really good quality but dont mean much. Id rather have a slightly blurry picture of a great moment but thats for personal photos.(Appendix A.1) This question over what makes a photo good or bad, and that these labels are constantly used of art works but everyones opinion will be different became a constant influence on this project, from the website strapline of making bad photos good, to the rating system influence by hotornot.com style websites, where the criteria for rating really is left down to the user. Figure 4.6: An uploaded photo which I think is good.

By taking the universally understandable while ultimately undefinable and highly subjective terms, good and bad, much emphasis is put directly onto the contributors. I have tried as much as possible to keep my opinions to myself and instead let the contributor decide what makes an image qualify for the site. The closest I can come to a description of a photo that should be uploaded to the site is:

Whenever you take photos, there are always a number which forever reason you wont use, or print, or upload to a social network or photo sharing website, the ones that you quickly flick past when showing them to friends or colleagues. These are the sort of photo you should be uploading to The Digital Photo Recycler. As to what makes a photo good, I am entirely without a definition. All that I can say is that photos one person may put squarely into the above bad category, another would concede is actually good. As it stands, there are many photos (such as figure 4.6) which have been uploaded to the recycler which I like and have all sorts of positive attributes.

Last edited : August 18, 2011

4.3. ARTISTIC RECYCLING

CHAPTER 4. CONCEPTUAL DEVELOPMENT

4.3

Artistic Recycling

There is a strong history in modern artistic history of finding beauty in things which may previously have been seen as without artistic merit. There are a huge number of antecedents to what I was trying to achieve with unwanted digital photographs. In other words, in the development of this project I took to heart the famous misquotation of Picasso that Good Artists Borrow, Great Artists Steal2 and here are some of the people I have borrowed ideas from.

Figure 4.7: Duchamp, Marcel: Fountain(1917)

Figure 4.8: Mondrian, Piet: Composition with Yellow, Blue and Red (1937-42)

2 its a quote more accurately attributed to TS Elliot as Good Poets Borrow, Great Poets Steal itself a misquote of One of the surest tests [of the superiority or inferiority of a poet] is the way in which a poet borrows. Immature poets imitate; mature poets steal; bad poets deface what they take, and good poets make it into something better, or at least something different. The good poet welds his theft into a whole of feeling which is unique, utterly different than that from which it is torn; the bad poet throws it into something which has no cohesion. A good poet will usually borrow from authors remote in time, or alien in language, or diverse in interest.(Eliot, 1997) for much more information on this story see(Prager, 2007)

Last edited : August 18, 2011

4.3. ARTISTIC RECYCLING

CHAPTER 4. CONCEPTUAL DEVELOPMENT

Duchamps Readymades These took every day discarded items and turned them into art, essentially by declaring them as art.(see figure 4.7) That what one person may consider just a functional item, like a coat rack of urinal, another can see as a piece of art, can be seen as a key influence on the idea within the site that while one person may think an image is bad, others may see it in another light.

Mondrians Neoplasticism In these works Mondrian made nonrepresentational images that represented specific ideas, similarly a number of the filters in The Digital Photo Recycler will turn an image into something quite unrecognisable while still keeping some essence of the image (see figure 4.8). For example, the sort by filters which reorganise the order of pixels in an image by colour, giving a new perspective on the image.

William Burroughs Cut-up technique and its descendants in Poetry and Music The idea of chopping up and combining words, had a great influence on a number of filters such as Checkers and Alternate, but also the execution of the Mondrian filter.

The use of Sampling in Popular Music The idea of cutting up, reorganising and reappropriating parts of songs could be seen almost as a follow on from aspects of the cut up technique, yet with more ordering. Of specific interest was artists DJ Shadow (see figure 4.9), Mr Scruff and Lemon Jelly who in the 1990s started to move away from traditional sources of samples such as Funk and Soul and started looking in less conventional places to find more interesting or unused sounds. These ideas of collating and combining images to create something new, perhaps similar to the original, perhaps greatly changed were all key influences on The Digital Photo Recycler. Last edited : August 18, 2011

4.4. REVISED CONCEPT

CHAPTER 4. CONCEPTUAL DEVELOPMENT

Figure 4.9: B+: Cover Art for Entroducing by DJ Shadow (1996)

4.4

Revised Concept

This wide range of disparate ideas discussed so far coalesced into the final concept for the project:

A collaborative digital photography tool in which unwanted bad photographs can be collected, shared, and adapted by other users, and then reintroduced back into the internet as good images. As with when we put a bottle in a bottle bank for their reuse, I planned to create a website where by giving up control and ownership of their photos, users would be unleashing the photos potential to become good photos.

Last edited : August 18, 2011

Chapter 5

Creating The Digital Photo Recycler

It is inappropriate to use the computer to address artistic issues that are better addressed using other technologies (Malina, 1990, p34) In making The Digital Photo Recycler, there was a keen movement away from traditional photographic processes, and to embrace the opportunities afforded by digital media. As it has been inspired by the wealth of digital content we now possess, and finding new uses for it, this project is inextricably intertwined with the digital world and throughout its development a number of key digital areas where explored. By making it a website and declaring it as a collaborative tool, a few key facts were implied which needed to be understood and acted upon. I needed a way to easily alter photographs in a variety of ways, I needed to build a website to host the project and I needed to make it of significant worth that people would want to use it. Over the coming pages, we will look at two key aspects of this work which would have been extremely difficult, if not impossible, to achieve without a digital context. Firstly looking at the use of Processing, a programming environment developed specifically for visual art,

27

5.1. MAKING THE RECYCLER

CHAPTER 5. CREATING THE DIGITAL PHOTO RECYCLER

and secondly looking into the utilisation of a user base across the web, both through use of the website and in the development of the site itself.

5.1

Making the Recycler

In the world of digital photography, the killer app is undoubtedly AdobePhotoshop, a hugely powerful tool which enables the user to take photographic images and combine, edit and fix them in a huge variety of ways. It has been followed by a variety of imitators such as The GIMP, one of the first open source applications (Raymond, 2001, p93), online photo editors like pixlr.comand picnik.com along with a multitude of mobile apps and other tools.

The development of computer graphics appears to run modernism in reverseAdvanced computer graphics tend to be as obsessively naturalistic and fussy as nineteenth-century history painting. (Stallabrass, 2002, p34) Stallabrass is talking here about developments in 3D Graphics, it can be seen that there is a similar impetus in digital photography. While there is a wide range of further functionality available in such programmes, the primary focus of programmes like these is based in traditional photographic processes. The aim is to clean up and fine tune photographs, removing imperfections or fixing unintended inclusions or what is normally meant when people refer to Photoshopping1 . There have been several examples of programmes created in reaction to this, trying to create alternatives to this style of image manipulation. Most notably Signwaves Autoshop: an explorative parody of professional bitmap graphic manipulation software(Signwave, 1999). With this programme control was taken away from the user and put in the hands of the programme itself which could impose its own creative agendas upon the user. While taking inspiration from this, my key aim was in finding ways to simply and easily adjust and combine photos. I wanted to find ways to manipulate an image which moved away from
1 Please note that this terminology is incorrect and that Adobediscourage the use of Photoshop as a verb, so we should say The image was enhanced using AdobePhotoshopsoftware(Adobe, 2009)

Last edited : August 18, 2011

5.1. MAKING THE RECYCLER

CHAPTER 5. CREATING THE DIGITAL PHOTO RECYCLER

traditional processes to create more abstract forms but which could be clearly understood by the user. The other key shift in The Digital Photo Recycler is that the user his never creating a finished product. in the long term their actions are just a step in a process which can be built upon by future users (this idea is expanded upon further in Section 5.2.

5.1.1

Choosing Processing

Having made the decisions above, the first step was to find a way to make an online photo editor. The two avenues I investigated were MaxMSP/Jitter and Processing. Each had advantages and disadvantages, but with little programming experience to fall back on the decision was based primarily on the ease of incorporating the programme into a website, and the ease of learning the system. I therefore chose to use Processing which describes itself as a programming language, development environment, and online community that since 2001 has promoted software literacy within the visual arts (Fry and Reas, 2011). As the idea itself is a little obtuse, I aimed to make this site as simple and easy to use as possible by utilising Processing.js, which converts Processings java based code into javasript enabling it to be rendered within the HTML5 Canvas Element.

5.1.2

Filters

On settling upon using Processing, the first task was to find out what options could be created for users to manipulate photographs. Figure 5.1 shows some early results from these processes, all of which have been developed over the intervening weeks and along with other filters incorporated into the website.. 24 filters have been created which will achieve a multitude of effects ranging from turning an image to black and white, to moving every pixel to another point on the image, to spitting colour values of two images and transposing them over the top of each other. In Appendix B I have included all the relevant code used to create these with some explanation of the Last edited : August 18, 2011

5.1. MAKING THE RECYCLER

CHAPTER 5. CREATING THE DIGITAL PHOTO RECYCLER

Figure 5.1: Early Example of Filter Results technical idiosyncrasies involved in their execution, to go into this in too much more detail here would be reductive and would divert from the aims of this essay.

Last edited : August 18, 2011

5.2. THE WISDOM OF CROWDS

CHAPTER 5. CREATING THE DIGITAL PHOTO RECYCLER

5.2

The Wisdom of Crowds

The primary effect of creative interaction within computer networks is to render obsolete the distinction in absolute terms between the artist and viewer as producer and consumer, respectively. (Ascott, 1988) Throughout the development of the internet, there has been a growing move towards the use of crowds, and crowd sourcing, as chronicled in works such as Eric S. Raymonds The Cathedral and The Bazaar(Raymond, 2001) and also Clay Shirkys Here Comes Everybody(Shirky, 2008). User interaction was encouraged not only through getting people to use the site to find beauty in unwanted photos, and create new images, but also the development of the site and interface itself. To this end I adopted Eric S. Raymonds mantra of Release early, release often and took particular notice of the less quoted second half of this rule And listen to your customers(Raymond, 2001) (see 5.3.2 for more on this). In the first month after the websites release, 10 specific versions were released, with a multitude of incremental increases inbetween. By constantly publicising the website and encouraging feedback from a range of users, both with relevant technical knowledge and without, I was able to not only find and fix bugs quicker but also to change planned progress on the site, and introduced new features based on user feedback2 .

5.3

Prototyping: v0.0.1 v0.0.3

The first version of the recycler was released on 24th June, with two versions following very swiftly3 . These versions were released very much as test cases, only allowing the user to manipulate a select group of 12 photographs. There was a severe lack of core functionality with no options for uploading images or saving those created. What this allowed for though
2 feedback came from a variety of sources during this project. These included the project blog digitalphotorecycler.wordpress.com/ and a comments page added to the website on 20th July, these were supplemented through conversations and interactions undertaken with users through Facebook. 3 version 0.0.3 can still be viewed at http://people.ace.ed.ac.uk.uk/students/s1061294/recycler/index.html

Last edited : August 18, 2011

5.3. PROTOTYPING

CHAPTER 5. CREATING THE DIGITAL PHOTO RECYCLER

Figure 5.2: The Digital Photo Recycler v0.0.3

Last edited : August 18, 2011

5.3. PROTOTYPING

CHAPTER 5. CREATING THE DIGITAL PHOTO RECYCLER

was a chance to get a version of it out into the open and to begin the process of gaining user feedback and adapting to it. But as Raymond suggests, users will forgive early buggy versions of a programme, if their suggestions are taken on board and new versions are published swiftly (Raymond, 2001).

5.3.1

Moving Forward

The key feedback at this time was, as could be expected, that users wanted to be able to upload their own unwanted photographs. Not only were these options integral to the stated aim of the project, but also reflects common practices in websites today. Interaction and user generated content is key in the current internet age, and to the success of this tool. This proved more difficult than first expected. While setting up an upload system was relatively easy, two aspects of this leap forward in development where more complicated and both rose out of an earlier decision: choosing to use Processing.js to realize the project. I shall discuss these two issues in some depth, as examples of the sort of issues encountered throughout the development of this project.

Recycle Bank The first issue, was due to an idiosyncrasy of the Processing.js system, because of its use of javascript. Images have to be preloaded at the top of the page, outside of the normal processing code and therefore variables cannot be passed to it. While there was going to be an ever changing, ever expanding store of images available it was clear that having all the images available was going to be impractical at best. As a result, I developed a metaphor based upon an idea from the recycling movement, that of the recycle bank. The Recycle Bank is currently limited to 20 images, taken from recently uploaded images and images created through the recycler. While this solved a problem from a user point of view, there was still the issue of how to generate a dynamic list of photographs.

Last edited : August 18, 2011

5.3. PROTOTYPING

CHAPTER 5. CREATING THE DIGITAL PHOTO RECYCLER

The first solution I found was by saving a second copy of any image added to The Digital Photo Recycler, saved with a file name of between 1 and 20, and then naming these images in the preload section of the processing file. This had several problems, relating to the speed at which pages reloaded, and if images were recycled in quick succession often incorrect meta data was stored, also any errors with this system caused the Recycle function to stop working. Surprisingly a search of relevant websites and forums did not yield any solution to the problem but a second, more elegant solution was realised through trial and error. By changing the processing file to a .php file and then putting an include to an external file within the preload section, I was then able to dynamically create a list of images based on a database query. This small background change would have been almost perceivable to the user but created a system which worked more efficiently, had less errors and most importantly meant that the system was far less likely to break.4

Canvas to Image As discussed above, Processing.js renders its results within the canvas object, which is not an image but a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly(Community, 2011) and cannot therefor be saved, this caused me one further problem: I needed to be able to save the images.. This was then compounded by a need to save variables and other meta data with the image, and to do it in as few clicks as possible. This was eventually achieved through a selection of tools from PHP, AJAX and MySQL working in sequence. A key piece of code was taken from an online tutorials to create this, HTML5: Saving Canvas Image Data Using PHP And Ajax onpermadi.org (Permadi, 2010)5 This was further developed and combined with some further javascript functions to make sure that all the correct data was uploaded as asynchronously as possible. The code used to produce this is included in Appendix B.
4 This

was implemented in v0.2.1 on 20th July.

5 http://www.permadi.com/blog/2010/10/html5-saving-canvas-image-data-using-php-and-ajax/

Last edited : August 18, 2011

5.3. PROTOTYPING

CHAPTER 5. CREATING THE DIGITAL PHOTO RECYCLER

5.3.2

Release Early, Release Often

The realisation of this core functionality, moved the site from just being a declaration of intent to a working tool was included in version 0.1.0, released on 5th July, less than 2 weeks after the original site was launched. From this point, further work on the site has revolved around refinement and reaction to user feedback to increase the user experience. Also from this point I was able to log user input and start to see photos being recycled, merged and evolving. Important changes made from user suggestion included: The kaleidoscope filters A.3.1 Javascript pop-ups to advise of uploaded A.2 Thumbnails for images in the recycler A.2 Descriptions of filters A.2 These comments, along with a multitude of discussions and informal testing by friends and family were key to the fluid programming like approach I was aiming for in the development of this tool and an example of a Release Early, Release Often mentality. By targeting a wide range of users during this stage, not only casual users, but people with a range of programming, web development and design knowledge, I was able to enact another of Raymonds aphorisms: Treating your users as co-developers is your least-hassle route to rapid code improvement and effective debugging. While this project was not being developed in a truly open source fashion and I was the only one developing the code, being able to take suggestions, not only for features in the tool but also in certain finer points of technical detail, bug checking, or sources of more information on given fixes was often invaluable. In Figure 5.3 the implementation of several of these features can be seen.

Power Distribution Even on this very small scale of user responses, by charting comments made by various users to the development of The Digital Photo Recycler its easy to see evidence of something close

Last edited : August 18, 2011

5.3. PROTOTYPING

CHAPTER 5. CREATING THE DIGITAL PHOTO RECYCLER

Figure 5.3: The Digital Photo Recycler v0.3.3

Last edited : August 18, 2011

5.3. PROTOTYPING

CHAPTER 5. CREATING THE DIGITAL PHOTO RECYCLER

Figure 5.4: Responses through blog, website and Facebook for the Digital Photo Recycler to the power distribution curve as discussed in Clay shirkys Here Comes Everybody (Shirky, 2008). While it is not quite reaching the 80/20 ratio he discusses6 , the fall off from the most active participants is swift and the long tail of users only providing one interaction is definitely apparent. As there is no way of tracking users on the site itself is more tricky but anecdotaly I believe that this distribution is also apparent.

5.3.3

Removing Responsibility

In 4.4 I stated that I wanted to create a website where by giving up control and ownership of their photos, users would be unleashing the photos potential to become good photos. I have resisted the urge to give the user the opportunity to claim responsibility for a given photo on the site. As the web has become more and more social, there has been an increasing
6 20%

of the users do 80% of the work.

Last edited : August 18, 2011

5.4. RESULTS

CHAPTER 5. CREATING THE DIGITAL PHOTO RECYCLER

imperative for web developers to provide users ways to claim little bits of a site as their own for others to see. Like the work of 1990s Internet artists reacting to the norms of the Internet in their day, this could be seen as my own little reaction to the norms of today. But more importantly it allowed for another implicit example if the fact that users are acting as agents or catalysts for the development of an image, rather than the creator of a specific image.

5.4

Results

Figure 5.5: A bad generated image The work created through the Digital Photo Recycler so far is mixed to say the least. One critic of the site remarked on the website Its really just making ok photos worse?(Appendix: A.2) and indeed, I would count a large number of images such as 5.5 created on the site as bad. However there are quite a number of images, which do have some form of aesthetic quality too them. What is interesting to note is that they come from a variety of points in the process, some are 1st or second generation images, some are 7 or 8 generations in, some look very like the original images, and some have become entirely abstract. Equally while some filters and selections of filters have a distinctly web 1.0 look about them, some look much closer to traditional photographic processes and artistic works. 5.8 shows that even from one rather dull image The Digital Photo Recycler can create a wide and unexpected variety of results. Last edited : August 18, 2011

5.5. AVERAGE USE OF THE SITE CHAPTER 5. CREATING THE DIGITAL PHOTO RECYCLER

Figure 5.6: Checker: Level 1 Variation

Figure 5.7: Checker: Level 12 Variation

5.5

Average Use of the Site

One key observation of use of the site, is that users are not using the site as intended. It appears that often users upload one or two unwanted photographs and then use one or two filters on those images, rather than as was intended, playing with and developing previously uploaded photographs, which personally had always been a key interest in the site. Whether this is really a problem which should be fixed, or an issue with the site is up for debate. There are a number of hypothesis I have as to why this is the case. It could be that as a result of the user based paradigm of the Internet discussed in section 5.3.3, users are just unused to being able to so freely able to alter content of others, or expect that any image manipulation tool must in some way relate to the way we are used to using AdobePhotoshop. Equally it could be a more mundane issue relating to the user interface and how the concept on the site is explained.

5.6

The Digital Photo Recycler as a Tool

A further interesting and unexpected result of the site, which manifested itself throughout its development, was that it became in its own way a functional image manipulation tool

Last edited : August 18, 2011

5.6. THE RECYCLER AS A TOOL CHAPTER 5. CREATING THE DIGITAL PHOTO RECYCLER

Figure 5.8: The Evolution of a Single Image

Last edited : August 18, 2011

5.6. THE RECYCLER AS A TOOL CHAPTER 5. CREATING THE DIGITAL PHOTO RECYCLER

Figure 5.9: Generated Seascape

Figure 5.10: Concattonated Checks

Figure 5.11: Reintegrated Image

Figure 5.12: Splitting Text

as an individual user. This may seem an odd statement, but the filters where developed so as to provide alternatives to traditional processes. What quickly became apparent though was that with only a little practice you can start to learn the sorts of results a given filter is likely to create and then learn sequences of processes that will result in pleasing or specific results. For example images that look like seascapes such as figure 5.9 will almost always appear as the result of a sort filter followed by a blur. An interesting effect that can be created by repeatedly using the checkers filter with increasing square sizes such as in figure 5.10. Similarly there are often interesting results to be had by combining two images with a single parent such as in figure 5.11 or by using split colour 3 or 4 with photos with text in, where often

Last edited : August 18, 2011

5.7. TAKING IT FURTHER

CHAPTER 5. CREATING THE DIGITAL PHOTO RECYCLER

the text will be isolated and can be combined with another image such as figure 5.12.

5.7

Taking It Further

There are a number of key ways that this site could be taken forward, mainly regrading improvements to filters or adding more filters and also with regards to the user interface. The number of possibilities as to specific filters is almost limitless: I would be especially interested more mathmatically based filters, for example developing a fractal based filter; or filters which worked by extracting data from an image and displaying that instead of the original photographic representation. As time has gone on I have tried to increase options for varying filters, with only 8 filters having no variable parameters. Some of these would be hard to implement as to finding an easy way to vary them (such as invert) while some have been left due to time constraints such as rotate. But I am wary to move beyond the simple parameter currently in place. While it could be interesting to make it closer to a standard photographic tool, or try to develop new styles of manipulation, the limited nature of the control, continue to add to the effect of taking the user out of a role of creator: one can only be so creative in a single use of the recycler. A key way to improve the site would also be to develop functionality for it to work across other platforms, especially on mobile phones. As it stands it is possible to access some functionality on some mobile phones, but support varies. Development of a mobile site or Apps specifically tailored to mobile phones would greatly improve the usability of the site. Also the development of the gallery section could be greatly improved, to find more ways of searching and uses for images, including embed and share options for each image or providing functionality to export the image in a variety of formats.

Last edited : August 18, 2011

Chapter 6

Conclusion
Through this thesis, and through the development of The Digital Photo Recycler I have attempted to if not answer, at least to pose the question: What should we be doing with all this data? Despite ever the reducing cost and size of data storage, the speed that we are creating data is increasing even faster. The Digital Photo Recycler is not (nor is it meant to be) a realistic solution to the problem, instead it can be seen as a way of further raising this question. Along side this it asks important questions a to what we are keeping and why. I believe that what I have created is at the very least a model for the sort of ways in which data could be recycled upon the internet, if not actually a practical solution to problems with the oncoming storage drought. One question that it does answer though is that if one person does not want a piece of data, this does not mean that others will not find a use for it. It has however proved that definitely possible to find ways to take bad photos and make them good (or at the very least a little more interesting).

43

Appendix A

First Appendix: User Input


Throughout the development of The Digital Photo Recycler, I have actively encouraged input from a wide selection of users. This section contains a variety of comments from users which have either specifically informed certain aspects of the site or which are representational of common comments..

A.1

Blog Comments

what really makes a good photo Gillian on June 14, 2011 at 7:13 am said: A really good photo is one that catches a brilliant moment brilliantly. I love sports photos in newspapers even though Im not a sports fan, because they capture fantastic snapshots of contorted bodies at crucially tense moments in sports games. Similarly, having just got married, Ive been sorting wedding photos. Some of them are not best quality but capture tiny little vignettes from the day. Some are really good quality but dont mean much. Id rather have a slightly blurry picture of a great moment but thats for personal photos. The ones that fit both categories are rocking, of course. what makes a photo rubbish Henry on May 20,2011 at 11:13 am said: I only keep bad photos

44

A.2. RECYCLER:COMMENTS PAGE

APPENDIX A. FIRST APPENDIX: USER INPUT

if theyre amusing for some reasonbut generally I delete them if any of the following are true: Bad focus/blurry Bad angle Bad composition Near identical duplicate of another photo Amazingly obvious shot Bad colour/light

A.2

Recycler:Comments Page

(July 22, 2011) Jung In said: So I think it is brilliant tool but as Joe said it is bit difficult understand especially someone like me who has never trained graphic stuff. It would be much better to have a brief description for each effect on the side. (July 21, 2011) mim said: I like how the photo recycling all happens on one page now. It doesnt take too long on my computer, but the internet has made my attention span very small and my impatience very big!Maybe a wee rotating circle to show it is doing something would sooth my impatience. Also - I imagine this is something that you are working on at the moment - I cant upload images at all. I select them, then they do not preview. In general though, I think it is really getting there! (July 21, 2011) Lenka said: Joe, its cool :) I know that it is a work in progress but it might be nice to have css for the gallery and the recyclebank so that it is nicer visually :D Also, when I was choosing the pictures for recycling it was a bit annoying to try all the numbers to see which one is which one. You could have thumbnails next to each number if it is possible... or just something so that you know which number is which picture. (July 20, 2011) Emma said: Its really fun and I really genuinely like some of the results. It runs

Last edited : August 18, 2011

A.3. OTHER FEEDBACK

APPENDIX A. FIRST APPENDIX: USER INPUT

stupidly slowly on my computer (and makes everything else run slowly too) but Im guessing maybe that cant be helped. The only other thing Id suggest is that when youre uploading and after youve pressed preview, if you decide to click Add to Recycler (or whatever it actually says) the bit of text that says something like your photo has been added to the recycler isnt obvious unless you know to look for it - i.e. the first time I uploaded I wasnt sure if it was still processing or if it hadnt worked or what. Perhaps a popup box like in the recycler section might be better or just a more obvious text message on the page. (July 30, 2011) Fiona said: Its really just making ok photos worse?

A.3
A.3.1

Other Feedback
From Facebook

Jonathan Knox was working well until it stopped! Hope I havent broken it? Oh kaleidescope effect and do we get to see the original images? June 24 at 6:24pm http://www.facebook.com/joepevans/posts/198351546884320 Fiona McKinlay I could give you many many opinions on this. With When youre uploading photos, or choosing ones to include in a piece of work, or to show to your mum, I could sometimes choose different photos for all three of these. A good photo to my mum is a completely different thing to a good photo to my arty friends... A good photo to upload to Flickr might not be a good photo to submit to a magazine... Criteria would include, with varied weighting depending on audience/purpose, composition, colours, focus, sharpness, whether the people in the picture are good looking or not (sorry, it does apply in some cases), whether the person in the photo is the lead singer or just some session guitarist, uniqueness, inability to replicate the photo, empty space or lack thereof, orientation... I have a bad habit of taking better portrait shots than landscape ones, but finding landscape ones to generally be more useful... May 27 at 5:03pm http://www.facebook.com/joepevans/posts/176758489045450

Last edited : August 18, 2011

A.3. OTHER FEEDBACK

APPENDIX A. FIRST APPENDIX: USER INPUT

Shaun Murphy parameters could have sine, triangle and square etc oscillator options, June 27 at 10.40am http://www.facebook.com/joepevans/posts/10150241484927993

Last edited : August 18, 2011

Appendix B

Filters and Processing.js Code


B.1 Introduction

The various filters used in the Digital Photo Recycler were the heart of this work and provided not only much of the learning, but also the most engaging part of the website. They were developed with Processing, an open source programming language and environment for people who want to create images, animations, and interactions.(Fry and Reas, 2011) and then realised within the website using Processing.js (Resig) a port of processing which converts the original java code into javascript, making it possible to render within the HTML5 canvas tag (See Dive Into HTML5 (Mark) for more on this). Over the coming pages there is a brief descriptions of the various pieces of code used to make this work along with the relevant code.

B.2

setup

All the filters for the digital photo recycler are housed within one file, with the relevant parts of the code selected based on the parameters chosen by the user.

48

B.2. SETUP

APPENDIX B. FILTERS AND PROCESSING.JS CODE

One of the few differences between Processing and Processing.js is the requirement to preload images in a javascript command at the top of the page. As I required a dynamic set of photographs available for recycling, this was loaded through a separate php file which in turn queried the database to find out which images to preload.

/* @pjs preload= <?php include test.php; ?> images/2ness.png; */ /*@pjs isTransparent=true;*/

PImage one,two; color [] colors;

//s brings through first image url, t brings through second image url and u brings the filter. In setup this is not currently required but has been kept in place so that in future releases photos can be better resized based on which filters are chosen. void setup(string s, string t, int q) { int i = 0; String im=images/+s; String im2=images/+t; background (255,252,247,0); one = loadImage(im); two = loadImage(im2); colors =new color[one.width*one.height]; size(one.width,one.height); }

Last edited : August 18, 2011

B.3. FILTERS

APPENDIX B. FILTERS AND PROCESSING.JS CODE

B.3

Filters

With the selection of a filter, two variables are passed to this file, the filter value and variation (which is not always required) The first chooses a filter based on user selection (and appears as s in the code), and the second affects a variety of parameters dependent on filter.
1

The

filters could roughly be split into 5 groups: simple, alternation, colour, reorganising pixels and rearranging the image. There was also a 6th group of artistic filters planned, but at the time of writing only one has been implemented.

B.3.1

Simple Processes

The first five filters created were based on built in functions of Processing and were taken from examples in Processing: A Programming Handbook for Visual Designers and Artists(Reas, 2007) and for three filters I have added in some control based on the level of variation selected. These comprise the most familiar and least experimental features of The Digital Photo Recycler, with filters such as Grayscale and Blur, and should all be familiar to users of photo editing programmes. These were developed as proof of concept and to check that aspects of the programme would work as intended but have been left in to provide some familiarity for the user and also as they can still provide interesting results, especially posterize and blur which experience has taught me can be used to provide satisfying results as one generation in a series of iterations of an image.

image(one,0,0); filter(INVERT);

Invert This literally inverts the colour values of an image, making a negative of the image.
1 The variation level was defined as q, but for a variety of reasons had to be converted to other values, and appears variously as q, vari and k throughout this code.

Last edited : August 18, 2011

B.3. FILTERS

APPENDIX B. FILTERS AND PROCESSING.JS CODE

Figure B.1: Inverted Photograph

Figure B.2: Grayscale: Level 1 Variation Grayscale

Figure B.3: Posterize: Level 12 Variation

colorMode(RGB,12); int gry = 16-q; tint(gry); image(one,0,0); filter(GRAY);

Last edited : August 18, 2011

B.3. FILTERS

APPENDIX B. FILTERS AND PROCESSING.JS CODE

The grayscale filter, makes images black and white using the inbuilt GRAY filter. It has been modified with the use of a rudimentary contrast command based on the tint feature.

Figure B.4: Blurred: Level 1 Variation

Figure B.5: Blurred: Level 12 Variation

Blur

image(one,0,0); filter(BLUR, vari);

Figure B.6: Posterize: Level 1 Variation

Figure B.7: Posterize: Level 12 Variation

Last edited : August 18, 2011

B.3. FILTERS

APPENDIX B. FILTERS AND PROCESSING.JS CODE

Posterize

image(one,0,0); filter(POSTERIZE,vari/3+2);

BLUR and POSTERIZE are quite self explanatory.

Figure B.8: Added Photographs

Add

one.blend(two,k,k,one.width,one.height,0,0,\\one.width,one.height,ADD); image(one,0,0);

Add is one of a number of blending options available in Processing, this one adds the colour values of two photos together.

Last edited : August 18, 2011

B.3. FILTERS

APPENDIX B. FILTERS AND PROCESSING.JS CODE

B.3.2

Alternation Processes

These all work in similar ways, taking sections of two images and displaying them alternately (flips does this with one image reflected on itself.) These were developed with an aim to combine two photographs, while conserving individual areas of image data. Creating regular patterns between the two images. While these could in theory be created through a variety of traditional or digital photographic processes, with the repetitive and exact nature of the sections, they are ideally suited to a programming based environment.

Figure B.9: Checker: Level 1 Variation

Figure B.10: Checker: Level 12 Variation

Checker

int k = ((vari*2)-1)*10; for(int i=0; i<=one.width; i=i+k) { for(int j=0; j<=one.height; j=j+k){ if((i+j)\%20==0) { copy(two,i,j,k,k,i,j,k,k); } else {

copy(one,i,j,k,k,i,j,k,k); } }

Last edited : August 18, 2011

B.3. FILTERS

APPENDIX B. FILTERS AND PROCESSING.JS CODE

}
This creates a checkerboard pattern between two images, the variation is increased to increase the size of the squares.

Figure B.11: Alternate: Level 1 Variation

Figure B.12: Alternate: Level 12 Variation

Alternate

int k = vari*vari; for(int i=0; i<=one.width; i=i+k) { if(i\%(k*2)==0) { copy(two,i,0,k,two.height,i,0,k,two.height); } else {

copy(one,i,0,k,one.height,i,0,k,one.height); } }
This switches between 2 images across the x axis, the level of variation affects the thickness of each vertical strip by the square of the variation amount.

Last edited : August 18, 2011

B.3. FILTERS

APPENDIX B. FILTERS AND PROCESSING.JS CODE

Figure B.13: Flipped: Level 1 Variation Flip

Figure B.14: Flipped: Level 12 Variation

int k = vari*vari; pushMatrix(); scale(-1,1); image(one,-width,0,width,height); popMatrix(); for(int i=0; i<=one.width; i=i+k) { if(i%(k*2)==0) { copy(one,i,0,k,one.height,i,0,k,one.height); } }
This uses a similar process to the alternate filter, but with one image mirrored on itself, and again the thickness varied by the square of the variation.

B.3.3

Colour Processes

There are 7 filters based on the fact that Processing can spit up the red green and blue colour values of a given image. The first four move split the values either along x or y axis and the

Last edited : August 18, 2011

B.3. FILTERS

APPENDIX B. FILTERS AND PROCESSING.JS CODE

last three isolate a given colour.

Split colours 1 to 4

Figure B.15: Spit Colour 1: Level 1 Variation

Figure B.16: Spit Colour 1: Level 12 Variation

Figure B.17: Spit Colour 2: Level 1 Variation

Figure B.18: Spit Colour 2: Level 12 Variation

int k = vari*5; for (int y = 0; y < one.height; y++) { for (int x = 0; x < one.width; x++) {

color c1 = one.get(x+k, y); float r1 = red (c1); float b1 = blue (c1);


Last edited : August 18, 2011

B.3. FILTERS

APPENDIX B. FILTERS AND PROCESSING.JS CODE

Figure B.19: Spit Colour 3: Level 1 Variation

Figure B.20: Spit Colour 3: Level 12 Variation

Figure B.21: Spit Colour 4: Level 1 Variation

Figure B.22: Spit Colour 4: Level 12 Variation

color c2 = one.get(x-k, y ); float g2 = green (c2);

color c3 = one.get(x, y); float r3 = red (c3); float b3 = blue (c3);

color c4 = two.get(x, y-q); float r4 = red (c4);

Last edited : August 18, 2011

B.3. FILTERS

APPENDIX B. FILTERS AND PROCESSING.JS CODE

float g4 = green (c4);

color c5 = two.get(y+q,one.width-x); float b5 = blue (c5);

color c6 = one.get(x, y+k); float r6 = red (c6);

color c7 = one.get(x, y-k ); float g7 = green (c7);

color c8 = one.get(x, y); float b8 = blue (c8); //split colour 1 if(s==9){ color c = color(r1,g2,b3); //split colour 2 }else if(s==10){ color c = color(r6,g7,b8); //split colour 3 }else if(s==11){ color c = color(r3,g4,b1); //split colour 4 }else if(s==22){ color c = color(r4,g2,b5); } stroke(c); point(x,y) } }
Last edited : August 18, 2011

B.3. FILTERS

APPENDIX B. FILTERS AND PROCESSING.JS CODE

Colours c1, c2, c3 offset colour values along the x axis, this is primarily used in split colour 1 and then the variation parameter is used to change the amount of offset. colours c5,c6, and c7 act in a similar way but with the y axis and are used for split colour 2. Split colours 3 and 4 are used to combine colour values from two images and use colours c4 and c5 which offset the second image in more interesting ways, especially c5 which squashes and repeats an image down one side of the page. This is what creates the blue bar in many images. With further development of the project I would like to increase the options for these features so that the used has far more options and control as to how the colours split.

Figure B.23: Filter By Red: Level 1 Variation

Figure B.24: Filter By Red: Level 12 Variation

Filter by

//by normalizing colour values from 255 to 12, we can easily use the variation value to affect colour values. colorMode(RGB,12); for (int y = 0; y < one.height; y++) { for (int x = 0; x < one.width; x++) { color c1 = one.get(x, y);
Last edited : August 18, 2011

B.3. FILTERS

APPENDIX B. FILTERS AND PROCESSING.JS CODE

Figure B.25: Filter By Green: Level 1 Variation

Figure B.26: Filter By Green: Level 12 Variation

Figure B.27: Filter By Blue: Level 1 Variation

Figure B.28: Filter By Blue: Level 12 Variation

if(s==19){ float r1 = red (c1); color c = color(r1,vari,vari); }else if(s==20){ float r1 = green (c1); color c = color(vari,r1,vari); }else if(s==21){ float r1 = blue (c1); color c = color(vari,vari,r1); }
Last edited : August 18, 2011

B.3. FILTERS

APPENDIX B. FILTERS AND PROCESSING.JS CODE

stroke(c); point(x,y); } }

Originally this filter did not include the variation options. instead only one colour value was selected and the rest were set to 0. This, unsurprisingly led to rather dark images being produced. In an attempt to make it possible to vary it so that the other colour values were on a range from black to white, I tried this solution. While it did not have the intended result as I hadnt taken into consideration that all three colours need to be the same value to get a black, white or grey image, I have kept the filter as is because the results are now far more interesting. These are the filters which most drastically alter an image. While with most other filters its possible to see where they have been from, almost always making the image unrecognisable by redistributing the pixels around the image. In this they have taken direct influence from nonrepresentational art, however they have a firm base in the images they are based on. But by reordering the pixels either by their colour values or at random we get a sense of the data content of the image as opposed to its figurative content.

Figure B.29: Random: Level 1 Variation

Figure B.30: Random: Level 12 Variation

Last edited : August 18, 2011

B.3. FILTERS

APPENDIX B. FILTERS AND PROCESSING.JS CODE

B.3.4

Rearranging Pixels

randomizing pixels

boo=new boolean[one.width*one.height];

for (int y = 0; y <one.height; y++) { for (int x = 0; x <one.width; x++) { int i = y*one.width+x; if (boo[i]==false){ color c = one.get(int(random(one.width)),int(random(one.height))); stroke(c); point(x,y); boo[i]=true; } } }
This filter, takes each pixel and places it in a new position on the canvas. I had planned to make sure that each pixel only gets redistributed once, however as it stands this is not the case. Through use of the boo array, I ensure that each space on the image only gets one pixel drawn to it but cannot ensure that the same pixel doesnt get redistributed twice.

Sort Pixels By R,G and B

//sorts an image by red colour values if(s==16){ for (int y = 0; y <one.height; y++) { for (int x = 0; x < one.width; x++) { color c= one.get(x,y);

colors[y*width+x]=c;
Last edited : August 18, 2011

B.3. FILTERS

APPENDIX B. FILTERS AND PROCESSING.JS CODE

Figure B.31: Sorted Photograph

} } //this calls sortRed (see below) colors = sortRed(colors) for (int l = 0; l <one.width; l++) { for (int m = 0; m < one.height; m++) { stroke(colors[m*width+l]); point(l,m); } }

color[] sortRed(color[] colors) { color[] sorted = new color[colors.length]; int num = 0; for (int i = 0; i < 255; i++){ for(int j =0; j < colors.length; j++){ if (int(red(colors[j])) == i) { sorted[num] = colors[j]; num++;

Last edited : August 18, 2011

B.3. FILTERS

APPENDIX B. FILTERS AND PROCESSING.JS CODE

} } } return sorted; }
Above is the code for the sorts by red filter, sorts by green and blue work identically apart from that references to red are changed to green and blue.

B.3.5

Rearranging the Image

One of the bigger issues that became apparent during developing of the site, was that vey few of the filters moved content around the image. By changing the point of view for the image, or taking a section of it, emphasis can be moved from the original focus of the image. The kaleidoscope filters also provide for the creating of geometric patterns, which often creates resting and unexpected results. They were also developed as a direct result of a user suggestion, see Appendix A.3.1. (a key aspect of the development of the website discussed fully in section5.2)

Figure B.32: Rotate

Last edited : August 18, 2011

B.3. FILTERS

APPENDIX B. FILTERS AND PROCESSING.JS CODE

rotate

translate(width,height); rotate(PI); image(one,0,0,width,height);

This filter rotates an image through 180 degrees, if the project was developed furtther I would increase the options for rotation.

Figure B.33: Random Section

Random Section

rx= int(random(one.width)); ry= int(random(one.height)); copy(one,rx,ry,one.width,one.height,0,0,one.width,one.height);


This filter chooses a rectangular shaped section of the photo and stretches it to fill the entire space. Allowing for either details of a photo to emerge or more abstract patterns.

Last edited : August 18, 2011

B.3. FILTERS

APPENDIX B. FILTERS AND PROCESSING.JS CODE

Figure B.34: 4 Way Kaleidoscope: Level 1 Variation 4 Way Kaleidoscope

Figure B.35: 4 Way Kaleidoscope: Level 12 Variation

int widdy = one.width/12; int wid=q*5; int hei=q*5;

for (int y = 0; y < one.height; y++) { for (int x = wid; x < one.width; x++) { if((x<=(one.width/2)+wid)&&(y<=(one.height/2)+hei)){ color c = one.get(x, y); stroke( c); point(x-wid,y-hei); point((one.width-x)+wid,y-hei); point(x-wid,(one.height-y)+hei); point((one.width-x)+wid,(one.height-y)+hei); } } }

Last edited : August 18, 2011

B.3. FILTERS

APPENDIX B. FILTERS AND PROCESSING.JS CODE

This Filter and the next, were taken from a user suggestion, and have proven rather popular filters. They are a quick and easy way to turn a photograph and make a more abstract pattern. If I were to develop it further I would be keen to try and get it to select different sections of the photograph. At the moment it only selects from the top left portion of an image.

Figure B.36: 8 Way Kaleidoscope: Level 1 Variation

Figure B.37: 8 Way Kaleidoscope: Level 12 Variation

8 Way Kaleidoscope

int f=(q*5)-4; for (int y = 0; y < one.height; y++) { for (int x=0; x < one.width; x++) { if(x>=y*(one.width/one.height)&&(x<=one.width/2)&&(y<=one.height/2)){ colors[y*one.height+x]= one.get(x+f, y+f); stroke(colors[y*one.height+x]); point(x,y); point(one.width-x,y); point(x,one.height-y); point(one.width-x,one.height-y);

Last edited : August 18, 2011

B.3. FILTERS

APPENDIX B. FILTERS AND PROCESSING.JS CODE

point(y*(one.width/one.height),x/(one.width/one.height)); point((y*(one.width/one.height))+1,(x/(one.width/one.height))-1); point(one.width-(y*(one.width/one.height)),x/(one.width/one.height)); point(one.width-(y*(one.width/one.height))-1, (x/(one.width/one.height))-1);

point(y*(one.width/one.height)+1, one.height-(x/(one.width/one.height))); point((y*(one.width/one.height)), one.height-((x/(one.width/one.height))+1)); point(one.width-(y*(one.width/one.height))+1, one.height-(x/(one.width/one.height))); point(one.width-(y*(one.width/one.height)), one.height-((x/(one.width/one.height))-1)); } } }


For this filter I took a slightly different approach, and the execution was slightly more complex, as I was trying to take a triangular section of an image. The if statement following the for loop at the start finds all the colour values within a triangular section. Each colour value is then placed into the corresponding spaces in each of 8 sections. There was an issue with having to stretch images to fit triangular sections as I could not assume they would have equal height and widths, The current fix for his is to duplicate each point on the x axis(which is the points where we can see the +1 values. This filter has several vaults, relating to the mirroring solution discussed above, it creats a slightly striped effect and there are a several points in an image where pixels are missed from the process. I have yet to find a solution to this.

Last edited : August 18, 2011

B.3. FILTERS

APPENDIX B. FILTERS AND PROCESSING.JS CODE

B.3.6

Artistic

As inspiration was taken from a variety of artistic movements in the production of the program, it seemed sensible plan to create some filters which copy some artistic styles. So far only one (Mondrian) has been implemented, which was created to combine a selection of the tools already developed regarding colour values and image coordinates.

Figure B.38: Mondrian

Mondrian

background(int(random(230,250))); int xr =int(random(10,two.width-100)); int yr =int(random(10,two.height/5)); color c2 = two.get (xr,yr); fill(c2); stroke(c2); rect(xr,yr, two.width-xr,two.height-yr*3); color c = one.get (xr,yr); fill(c); stroke(c);

Last edited : August 18, 2011

B.3. FILTERS

APPENDIX B. FILTERS AND PROCESSING.JS CODE

rect(xr,two.height-yr*2, two.width-xr,yr*3);

for (int x = 0; x < xr; x++) { for (int y = 0; y < yr; y++) { color c1 = one.get(x, y); float r1 = red (c1); color c3 = color(r1,0,0); stroke(c3); point(x,y); } } for (int x2 = xr; x2 < two.width; x2++) { for (int y2 = 0; y2 < yr; y2++) { color c1 = two.get(x2, y2); float g1 = green (c1); color c3 = color(0,g1,0); stroke(c3); point(x2,y2); } } for (int x3 = 0; x3 < xr; x3++) { for (int y3 = two.height-yr*2; y3 < height; y3++) { color c4 = two.get(x3, y3); float b4 = blue (c4); color c5 = color(0,0,b4); stroke(c5); point(x3,y3); } } for (int x4 = xr; x4 < two.width; x4++) {
Last edited : August 18, 2011

B.3. FILTERS

APPENDIX B. FILTERS AND PROCESSING.JS CODE

for (int y4 = yr; y4 < yr*3; y4++) { color c6 = one.get(x4, y4); float r6 = blue (c6); color c7 = color(r6,0,0); stroke(c7); point(x4,y4); } } stroke(0); strokeWeight(4); line(xr,0,xr,two.height); line(0,yr,two.width,yr); line(0,two.height-yr*2,two.width,two.height-yr*2);
This filter is inspired by the Neoplasticism works of Piet Mondrian. A non-representational style is key to the idea of the photorecycler. With so many processes creating abstract images, this was a key jumping off pint. Although this is very much my interpretation of Mondrians style as opposed to his actual practices with a freer use of colour and incorporating details from the photos themselves.

Last edited : August 18, 2011

Bibliography
Adobe 2009. Proper use of the photoshop trademark (online). Available at: http://www.adobe. com/misc/trade.html#section-4. Ang, T. 2005. Bbc - a digital picture of britain - how to take good photos (online). Available at: http://www.bbc.co.uk/arts/apictureofbritain/how_to/. Ascott, R. 1988. Art and education in the telematic culture. Leonardo. Supplemental Issue, 1:711. Available at: http://www.jstor.org/stable/1557902. Carritt, E. 1931. The theory of beauty, 4th ed. edition. London: Methuen & Co Ltd. Community, W. 2011. 4.8.11 the canvas element html standard (online). Available at: http://www.whatwg. org/specs/web-apps/current-work/multipage/the-canvas-element.html. Cooper, M. H. 1998. The economics of recycling. CQ Researcher, 8(12):265288. Danto, A. 1981. The transfiguration of the commonplace: a philosophy of art. Cambridge (Mass.) ;London: Harvard university press.

73

BIBLIOGRAPHY

BIBLIOGRAPHY

De Botton, A. 2006. The architecture of happiness. London: Hamish Hamilton. Eliot, T. 1997. The sacred wood : essays on poetry and criticism. London: Faber and Faber. Found 2009. Cybraphon (online). Available at: http://cybraphon.com/ (Accessed 11/08/11). Frank, M. 2008. Museum of Bad Art : masterworks. Berkeley: Ten Speed Press. Fry, B. and C. Reas 2011. Processing (online). Available at: http://processing.org/ (Accessed 05/08/11). Gantz, J. and D. Reinsel 2010. The digital universe decade are you ready? (online). Available at: http://www.emc. com/collateral/analyst-reports/idc-digital-universe-are-you-ready.pdf. Gantz, J. and D. Reinsel 2011. Extracting value from chaos. Available at: http://www.emc.com/collateral/

analyst-reports/idc-extracting-value-from-chaos-ar.pdf. Gewirtz, P. 1996. On i know it when i see it. The Yale Law Journal, 105(4):10231047. Available at: http://www.jstor.org/stable/797245. Google 2011. Google data centers (online). Available at: http://www.google.com/corporate/

datacenter/index.html. IDC 2010. Press release: Study projects nearly 45-fold annual data growth by 2020 (online). Available at: http://www.emc.com/about/news/press/2010/20100504-01.htm. Malina, R. F. 1990. Digital image: Digital cinema: The work of art in the age of Post-Mechanical reproLast edited : August 18, 2011

BIBLIOGRAPHY

BIBLIOGRAPHY

duction. Leonardo. Supplemental Issue, 3:3338. ArticleType: research-article / Issue Title: Digital Image, Digital Cinema: SIGGRAPH 90 Art Show Catalog / Full publication date: 1990 / Copyright 1990 Leonardo. Available at: http://www.jstor.org/stable/1557892. Mark, P. . Dive into html5 (online). Available at: http://diveintohtml5.org/. Moore, G. E. 1965. Cramming more components onto integrated circuits. Electronics, 38(8). Permadi, F. 2010. permadi (online). Available at: http://www.permadi.com/blog/2010/10/

html5-saving-canvas-image-data-using-php-and-ajax/. Prager, N. 2007. Good poets borrow, great poets steal | protect | and | leverage (online). Available at: http://nancyprager.wordpress.com/2007/05/08/good-poets-borrow-great-poets-steal/. Raymond, E. 2001. The cathedral and the bazaar : musings on Linux and open source by an accidental revolutionary. Sebastopol Calif.: OReilly. Reas, C. 2007. Processing : a programming handbook for visual designers and artists. Cambridge Mass.: MIT Press. Resig, J. . Processing.js (online). Available at: http://processingjs.org/. Shirky, C. 2008. Here comes everybody : the power of organisation without organisations. [London]: Allen Lane. Signwave 1999. Autoshop (online). Available at: http://www.signwave.co.uk/go/products/autoshop. Stallabrass, J. Last edited : August 18, 2011

BIBLIOGRAPHY

BIBLIOGRAPHY

2002. Internet Art : The Online Clash of Culture and Commerce. United States: TATE GALLERY.

Last edited : August 18, 2011