Final Project

The 'Net Web

The 'Net Web

As a designer, my main goal is facilitating communication. In order to do this well, I need to be concerned with how a user interacts with and experiences my designs. User experience, especially as related to interfaces, therefore, became the focus of this final project.

My project, The ‘Net Web, was inspired by Professor Souther’s word association web. Starting with a basic concept word—experience—I created an intricate association web, which allows the user to choose a word, see its connections to other words with one degree of separation, and then choose one of those words.

The project is incomplete, in large part because I have chosen to work with very basic HTML and CSS capabilities for this, the first iteration of this project. I would very much like to enhance the interaction—and the user experience—when refining this project in the future. It is also the first design in which I have deliberately sought ambiguity, rather than clarity, in the user experience.

Sources coming soon.

Expanding Ideas

At the beginning of this project my intentions were pretty simple, make a nifty program to help me learn processing. As I started looking into it more and more the idea of simulating life started to grab ahold of me. John Conway’s the game of life was one of the more major influences, but I felt as though could not just copy his experiment. Instead I decided to go in a different direction with a different set of rules, therefore simulating a different subsection of life. My program aims to show how cultures interact and spread ideas.

The rules were simple. One, the user would click a color and then 2 points thus creating a line. Then repeat this process to create another line of a different color. Once these lines are created the program will start cycling, on every other cycle all non-interrupted end points will generate 2 branches that will extend in a randomly generated direction, for a randomly generated length (somewhere between 1/3 and 1/2 the previous lines amount ). The new branches will also be lighter than the original

When a line runs into another line segment that line will influence the hit line; averaging the RGB values in the affected line. Additionally while the branches cannot affect the “parent” line they will propagate the new values to their children (i.e. averaging the values of the new parent color and the child color). Also once a line hits another, the initial line will stop spawning branches, but its color values are kept somewhat intact through its combination with the other line.

This embodies the spread of ideas and ideals through cultures, as each new generation spreads they keep an idea from the previous generation, but usually a bit less. What they do with this information is the interesting thing, striking into new and different areas, spreading their ideals and ideas. And when cultures meet there is always a big shift in those cultures, a combining  or spreading of ideas.

Citations:

“John Conway’s Game of Life” accessed April 10, 2012, http://www.bitstorm.org/gameoflife/

“John Conway Talks About the Game of Life” modified May 27, 2007, accessed April 10, 2012, http://thinkorthwim.com/2007/05/27/john-conway-talks-about-the-game-of-life/

“Proccessing” modified 2012, accessed March 21,2012, http://processing.org/copyright.html

Body, Art and Media

Art has been one of man’s medium for expressing who he is, where he’s been, his affiliations and his status in numerous cultures for centuries.  Just as the canvas is to the painter and the clay to the potter, the body is to the body artist.  In ancient civilizations the marking of the body has had different meanings from showing ownership by the Greek, Roman and Celts to being associated in some with magic.  In the 1600’s men would place self inflicted cosmological symbol tattoos at precise astrological moments to alter ones flesh and destiny.  Of course with the church being very prominent back in those times these body marking were not sanctioned by the Catholicism and Protestantism which made it more taboo than anything.

            In our times body modification, tattoos, piercing and body painting still have inherent meanings in some cultures but for the majority of Americans it’s more of a way to advertise one’s  fantasies, moral values or just a way to feel outlaw-ish if that’s even a word!  Marshall McLuhan put it best in saying “all advertising advertises advertising”, which to me relates to this topic in the way that body artist are merely advertising their thoughts through painting on bodies but they are advertising  their abilities through painting to advertise themselves as well. 

Citations

Clayson, Mark. "EzineArticles Submission - Submit Your Best Quality Original Articles For Massive Exposure, Ezine Publishers Get 25 Free Article Reprints." EzineArticles Submission - Submit Your Best Quality Original Articles For Massive Exposure, Ezine Publishers Get 25 Free Article Reprints. http://EzineArticles.com (accessed April 19, 2012).

Moody, Kate. "Center for Media Literacy." Center for Media Literacy. http://www.medialit.org (accessed April 19, 2012).

Schildkrout, Enid. "Inscribing the Body." Annual Review of Anthropology 33 (2004): 319-344.

For my project I choose to use animation. The topic of my project is Justice. Everyone deserves justice so I thought animated images with the Black and White flashing background which represents justice. Images from Trayvon Martin marches represents and shows the affection people have towards getting justice. I change the levels in the opacity to change the color tone for the figure that looks like the liberty scale. In first image I played around and thought I messed up to get object to move.

Gascard, Lorettann Devlin

“Motion Painting: 'Abstract' Animation as an Art Form”

Leonardo , Vol. 16, No. 4 (Autumn, 1983), pp. 293-297

Kriesberg, Irving

“Animation as a Form of Expression: An Artist's Reflections on a Personal Mode of Film Making”

Leonardo , Vol. 7, No. 2 (Spring, 1974), pp. 105-110

Vanarsky, Jack

“Animated Sculptures: Figuration and Movement”

Leonardo , Vol. 15, No. 4 (Autumn, 1982), pp. 306-309

Generative Art with Shapes

For the final assignment, I decided to do a program in Processing that would have different shapes floating around and they would interact with each other.  My initial idea was to have the different shapes have some human characteristics such as creating offspring if the shapes were of the same form.  However, I was not able to bring this idea to life as I had hoped.  I wrote the program, but for some odd reason it did not behave the way I wanted it to.  After several hours of debugging the code, I decided to go a different route with the project and decided to have it focus in the generative art the shapes can produce.  Therefore, I decided to show in the program the different locations the shapes have been in.  In one of the programs, called BoundaryProject.exe, I allowed the different locations to fade, thus giving the illusion that it has been a lot of time since this object has gone to this location just how one's footprint fades over time if it is not stepped over again.  In this way, I was still able to give human characteristics to the objects even though it was not a human characteristic I had initially planned.  I also allowed the user to interact with the program a little.  If the user clicked anywhere in the program screen, it would create another shape in that location.  However, there is a limit to the number of shapes one can create.  In my case, the maximum is 40 objects, but you will see that after having a certain number of objects created, the objects will begin to lag.  The only problem this program had, was that the art the shapes were producing was very dull.  So I edited the program so that one could still see the locations the shape has been to, but this time they did not fade.  Thus, giving a more vibrant image.  I called this program BoundaryProjectVibrant.exe.  Note that it has the same functionality as BoundaryProjet.exe except the colors are seen better.  For Assignment 4, I also included the program that I had created that allowed shapes to create offspring when  they touched each other so that you can see what problem I was encountering.  The program is called AddingClone.exe.  A characteristic the shapes in all of these programs share is that when the shapes touch, they bounce against each other.  The following links are to the different programs and they were exported so that the programs can run in different operating systems.  Included in the folders is the source code to the different programs.  The code is not the neatest code, but the main focus of the assignment is the end product which are the executable programs.  I have included the source code mainly for educational purposes.

AddingClone

BoundaryProject

BoundaryProjectVibrant

Sources:

Fry, Ben, and Casey Reas. "Processing.org." Processing. http://processing.org/ (accessed April 23, 2012).


Berchek, Chad. "Elastic Collisions Using Vectors instead of Trigonometry." Vobarian Software Home. http://www.vobarian.com/collisions/ (accessed April 23, 2012)

Greenberg, Ira. Processing: Creative Coding and Computational Art. Berkeley, California: Apress, 2007.

Shiffman, Daniel. Learning Processing. Burlington, MA: Morgan Kaufmann Publishers, 2008.

Aware of the Viewer

Direct Link Resource Files

Direct Link Resource Files

Direct Link Resource Files

After making my first cinemagraph, which is of me continuously scrolling through an iPad, I had this strange feeling watching myself in an endless loop. Even when I was not on viewing the page, there is a possibility that someone could be, and the mere fact that it is out on the internet means that it could be on any website and being viewed by anyone at this very moment. A gif of me sitting on a couch captured in this moment of time for the world to see. Like I already said, being aware of this can only be described as strange. With this feeling in mind I wanted other people to experience it, however I could not very well make a gif of everyone that was interested or even everyone in the class. So I came up with the idea that the subject would become aware of the viewer. When the viewer first glances, these images just look like still photographs, but when the image is scrolled over the subject becomes aware that someone is watching and looks at them. Then when the viewer clicks their mouse, they can interact with the subject. This might be a simple blink of the eyes or a drag of a cigarette. Once the viewer is done and scrolls off the image, the subject returns to it initial position. The result of this is a mesmerizing experience with the subject. A connection as if the viewer is looking face-to-face with the subject, and the subject is aware of the viewer presence.

Work Cited
http://www.youtube.com/watch?v=mAf6zKRb1wI
http://www.eai.org/title.htm?id=1957
http://content.photojojo.com/tutorials/how-to-make-cinemagraphs-photos-that-move/
http://www.reddit.com/r/cinemagraphs/
http://tumultco.com/hype/

Vectorized Imaging

Dot Matix Illustration: Simple design made using the Dot Matrix Method

The Grunge or Splatter Method: Used for backgrounds and texture imaging 

Line Tracing: I wanted to try to keep this image as life like as possible. This is made from too photographs, one for the fish, and one for the background.  This image is scalable to almost any size and almost looks like a real raster image

Line Tracing: Silhouette Method. Made from three images.  Shows one of my passions (hunting). I like how this one is hard to decipher at a distance.

Painting Text Method: I wanted to see how to make text follow a path.  In this picture I turned text into a symbol into Illustrator and I could place a serious of text on any drawn path.

Glitches I found using Picasa Photo Viewer:

Same Grunge image above seen in Picasa Photo Viewer

Same Silhouette image above seen in Picasa Photo Viewer

I have a great interest in vector graphics and animation.  I like vector graphics because they are useful in projects where re-scaling is a must. I wanted to find different ways to express images using only vector methods.  I chose using photographs, text, and shapes within Adobe Illustrator to create five different images. Each image is expressive in it's own way.  

I am an amateur of using programs like Adobe Illustrator, so this project was more of a learning exercise than anything for me. Each is a different method of creating graphics in Illustrator. Only the line tracing images have photographs, and the other three are created with just the tools within Illustrator. All these images can easily be rescaled to a variety of sizes without loss in quality.

I think each one represents a new learning event for me using vector graphics, and focuses on McLuhan's quote, "We become what we behold, we shape our tools, and then our tools shape us." My images for now are limited by my knowledge of Adobe Illustrator, but each is also unique created with the same tool.

Bibliography:

Designmodo, "35 Excellent Adobe Illustrator Tutorials." Last modified Octob 31, 2011. Accessed April 20, 2012. http://designmodo.com/adobe-illustrator-tutorials/.


Wikipedia, "Vector Graphics." Accessed April 20, 2012. http://en.wikipedia.org/wiki/Vector_art.


Hamm, Michael. Adobe, "Painting Text." Last modified May 21, 2012. Accessed April 20, 2012. http://www.adobe.com/cfusion/exchange/index.cfm?


Harris, Jack, and Steven Withrow. Vector Graphics and Illustration: A Master Class in Digital Image-Making. RotoVision, 2008.


McLuhan, Marshall. The Medium is the Massage. Toronto: Simon & Schuster, 1989.

Psychedelic Surrealism

For this project I wanted to focus on psychedelic artwork. I used images from photos from music festivals across the country because these places are most often associated with this type of artwork.  The images I created focus on altered perceptions of these locations.  It is a blend of realistic and surreal images that shows the world as slightly altered instead of completely psychedelic.

The psychedelic imagery was created using a print-making technique called marbling which is made using watercolors.  The watercolors are swirled with a tool to create a pattern in a tub of water.  A piece of paper is then put onto the top of the water where it picks up all the paint.  I took pictures of the marbling that I did, then added more color and filters in Photoshop to create a more psychedelic looking image.  Then I combined those images with the photos from different festivals.

Psychedelic surrealism: Art, design & photography. in Red Bubble [database online]. 2012 [cited April, 20 2012]. Available from http://www.redbubble.com/explore/psychedelic+surrealism.

Psychodelic art - PsychedelicArtist.org. 2012 [cited April 20 2012]. Available from http://www.psychedelicartists.org/.

Spraygraphic community | projects | psychedelic-surrealism. in Spray Graphic [database online]. 2012 [cited April 20 2012]. Available from http://www.spraygraphic.com/ViewProject/756/normal.html. 

Self reflection is important.  Looking back through time to see what things mattered and how well those things/goals were accomplished is something I set out to do with this series.  Background colors taken from important pictures from life.  A faded snapshot of mom and daughter comes more to life in full opacity to depict arrival, or at least almost arrival to where I'd like to be.  Funny how over time, some things gain more importance and some things remain the same.  Not entirely sure this is a happy or sad self reflection, but time keeps moving on.

Demystifying Technology

My final project was inspired by the idea of demystifying technology. In this class, we have learned to use several different pieces of software. Something that interests me in addition to becoming a proficient user of technology is studying how this software works and interacts with the computer hardware to create a finished work for the user. Unfortunately, visualizing how a piece of software such as Premiere or Photoshop works is not that simple and would therefore be a bad example to display how technology can be demystified. A great example of demystifying technology was when we did our circuit bending experiments. We were not expected to know how exactly these toys worked, but the instant the plastic cases were opened, we learned at least something about the function of the circuitry for that toy and became that much closer to understanding how it works. Neuroscience is another example of demystifying one of the most complicated technologies that exists, the human brain. By studying how the brain works and demystifying it, these scientists are gathering more and more information that could open doors to build technology in the future such as computers that may operate in ways modeled after our brains. Another technology I believe most people take for granted is what lies behind the screens we use every day to be productive while using computers or to consume media through as well. I thought it was interesting to create an animation that seems to magnify and go behind the screen to show a diagram I found online. It is a simplified representation of how the liquid crystals are controlled by electrons in order to filter a backlight which produces the colors and light intensity we see on our modern screens.

Sources:

"Circuit bending." Wikipedia. http://en.wikipedia.org/wiki/Circuit_bending (accessed April 23, 2012).

"Human Brain Region Functions Like Digital Computer." Science Daily. http://www.sciencedaily.com/releases/2006/10/061005222628.htm (accessed April 23, 2012).

Tyson, Jeff, and Carmen Carmack. "How Computer Monitors Work." HowStuffWorks. http://computer.howstuffworks.com/monitor5.htm (accessed April 23, 2012).

Final Project

For my final project, I already knew that I wanted to work with Data Visualizations but I was having a really hard time coming up with what topic to explore. When Eric showed us the brainstorm map that helped me a lot. I started with the general idea of Time and eventually came to how people look at the passage of time in their lives. I think for everyone it is different because we all have led very different lives and view things differently. After I had my idea, I looked through pages and pages of data visualizations to kind of get some inspiration and ideas.

For me, the number of houses I've lived in stands out because I have moved so many times but it never seemed weird to me until I met someone who had lived in the same house his ENTIRE life. Concerts are another important life marker in my life.The color and size of the cubes represent how long I lived at a certain place. The larger the block/darker the color, the longer I lived there.




 



I sometimes figure out when something happened in my life around when it happened in reference to a concert. When did I dye my hair red? Oh well it was definitely after the Coheed and Cambria concert but before the Them Crooked Vultures concert.I used pictures I took myself as much as possible and if I didn't have a picture from the concert I used a picture of the venue.In doing this project I realized I want to take more pictures. I have the memories of the events which are very important to me but I wish I had the physical pictures to show and share with my children someday.

This last one was kind of just for fun. I saw a data visualization on a specific species of fish (click here) and I thought it would be interesting to see what a similar visualization would look like for me.


Here are the resources I used:

Friedman, Vitaly. “Data Visualization: Modern Approaches.” 2 August 2007. 19 April 2012.
          http://www.smashingmagazine.com/2007/08/02/data-visualization- modern-approaches/

“How to Draw Circle in with No Fill in Photoshop.” YouTube. 23 April 2012.
          http://www.youtube.com/watch?v=EK07W73lm7Y

“Totoaba.” Visual.ly. 19 April 2012. http://visual.ly/tototaba

Evolution

Process from K Wilson on Vimeo.

The process of art can be art in its own right. If the goal of art is to create an experience or an emotion, that must also apply to the experience and emotion that is involved in getting from the idea to the final work. My goal with this project was to demonstrate the micro patterns, lines, and tone which evolve to become the larger work. The experience of evolution can speak louder than the final product.

DiMattia, Nicco. "Speed Paintings by Nico Di Mattia." Accessed April 24, 2012. http://www.youtube.com/playlist?list=PL513FEC4F07BB8C5D&feature=plcp.

Massachusetts Museum of Contemporary Art. "Sol LeWitt: A Wall Drawing Retrospective." Accessed April 24, 2012. http://www.massmoca.org/lewitt/.

Solomon R. Guggenheim Foundation. "Process Art." Accessed April 24, 2012. http://www.guggenheim.org/new-york/collections/collection-online/show-full/movement/?search=Process%20art.

I310 Final Project Submission: Objectivity/Subjectivity Storyboard

Sources that inspired the work I've created:

Bode, B.H. "Realism and Objectivity"Journal of Philosophy, Inc.

4, number 10 (May 9, 1907): 259-263.

            Bode, B.H.. "The Problem of Objectivity" Journal of Philosophy, Inc.

5, No 6 (Mar 12, 1908): 150-157.

Marks, Alexandra. “New Media Alliances Test Press Objectivity”, The Christian Science

Monitor 88 no 152 (July 2, 1997): 4p

Artistic Statement Summary: 

 

 This set of storyboard images and text was constructed on belief that mere images may not be enough to illustrate potential differences between objectivity and subjectivity, being the abstract concepts that they are. I wanted to give examples of black, white and gray areas on what people could consider as objective or subjective, based on cultural understandings I've gathered from courses within the Sociology discipline, thus for me, both images and text were what I felt would do the job best. Furthermore, I would add, the centerpiece of the image is not as much the example comparisons of objectivity/subjectivity within the image as it would be the portion that challenges users to understand for themselves their perceptions of objectivity and subjectivity. They are concepts in the eye of the beholder, thus the reason I felt this creation will be a boon to the understanding of such eyes. 

NOTE: You may need to zoom in to see the content of the image in detail.

 

Code Cube (only works in chrome, firefox and safari)

.face {color:#ffffff;overflow:hidden;position:absolute; width:200px;height:200px;}@-moz-keyframes scroll {0% {top:-800px;} 100% {top:0px;}}@-webkit-keyframes scroll {0% {top:-800px;}100% {top:0px;}}.scroller {font-size:1.2em;-moz-animation: scroll 25s; -moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear; -webkit-animation: scroll 25s;-webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;position:absolute;}.cube1 {z-index:1;position:absolute;top:0px;left:35px;}.top {top:0;left:89px; background: #ababbc;opacity:0.7;-moz-transform: rotate(-45deg) skew(15deg, 15deg); -webkit-transform: rotate(-45deg) skew(15deg, 15deg);}.left {top: 155px; left: 0;background: #454456;opacity:0.7;-moz-transform: rotate(15deg) skew(15deg, 15deg); -webkit-transform: rotate(15deg) skew(15deg, 15deg);}.right {top: 155px; left: 178px;background: #787789;opacity:0.7;-moz-transform: rotate(-15deg) skew(-15deg, -15deg); -webkit-transform: rotate(-15deg) skew(-15deg, -15deg);}

.face {color:#ffffff;overflow:hidden;position:absolute; width:200px;height:200px;}@-moz-keyframes scroll {0% {top:-800px;} 100% {top:0px;}}@-webkit-keyframes scroll {0% {top:-800px;}100% {top:0px;}}.scroller {font-size:1.2em;-moz-animation: scroll 25s; -moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear; -webkit-animation: scroll 25s;-webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;position:absolute;}.cube1 {z-index:1;position:absolute;top:0px;left:35px;}.top {top:0;left:89px; background: #ababbc;opacity:0.7;-moz-transform: rotate(-45deg) skew(15deg, 15deg); -webkit-transform: rotate(-45deg) skew(15deg, 15deg);}.left {top: 155px; left: 0;background: #454456;opacity:0.7;-moz-transform: rotate(15deg) skew(15deg, 15deg); -webkit-transform: rotate(15deg) skew(15deg, 15deg);}.right {top: 155px; left: 178px;background: #787789;opacity:0.7;-moz-transform: rotate(-15deg) skew(-15deg, -15deg); -webkit-transform: rotate(-15deg) skew(-15deg, -15deg);}

.face {color:#ffffff;overflow:hidden;position:absolute; width:200px;height:200px;}@-moz-keyframes scroll {0% {top:-800px;} 100% {top:0px;}}@-webkit-keyframes scroll {0% {top:-800px;}100% {top:0px;}}.scroller {font-size:1.2em;-moz-animation: scroll 25s; -moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear; -webkit-animation: scroll 25s;-webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear;position:absolute;}.cube1 {z-index:1;position:absolute;top:0px;left:35px;}.top {top:0;left:89px; background: #ababbc;opacity:0.7;-moz-transform: rotate(-45deg) skew(15deg, 15deg); -webkit-transform: rotate(-45deg) skew(15deg, 15deg);}.left {top: 155px; left: 0;background: #454456;opacity:0.7;-moz-transform: rotate(15deg) skew(15deg, 15deg); -webkit-transform: rotate(15deg) skew(15deg, 15deg);}.right {top: 155px; left: 178px;background: #787789;opacity:0.7;-moz-transform: rotate(-15deg) skew(-15deg, -15deg); -webkit-transform: rotate(-15deg) skew(-15deg, -15deg);}

When I saw cool animations done using CSS3, I was amazed by how it worked. It looked like magic to me and like any magic trick, I wanted to reveal the secrets behind it. My goal is to create something so mystifying that it will have the viewer guessing how it works. I want to give the viewer the feeling of wanting to demystify something. Web designers and experts don't like revealing their magic tricks, so when I went to find out how this works, I was only finding bits and pieces of sample code. It was as if I was searching through a dark room with a flashlight and every now and then I could catch a glimpse of what I was looking for. The code cube reflects my experience of discovery. Written on the sides are samples of the code, but not all of it. The code cube was constructed using pure CSS3 with HTML div tags. That means no JavaScript was used to animate the cube.

1. Daniel Albas, Cheryl Albas, "Modern Magic: The Case of Examination", The Sociological Quarterly, Vol. 30, No. 4 (Winter, 1989), pp. 603-613

2. Richard P. Gabriel, Kevin J. Sullivan, "Better Science Through Art", Dream Songs. January 6, 2012. <http://dreamsongs.com/Files/BetterScienceThroughArt.pdf> (04/18/12): pp. 7-9

3. Adam Sheridan, "Demystifying HTML5 & CSS3," Specialmoves Labs. April 2, 2012. <http://specialmoves.com/labs/demystifying-html5-css3> (04/18/12)

Repurpose/Reuse

Recycle



Reuse tree as Mulch


Reuse Bucket


 
Reuse Jar for nails

The starting point of my project was the idea of “repurpose”.  From that point I branched off to many different points, before deciding on the idea of recycle/reuse.  I had already decided on the medium of stereoscopic gifs, so from all the ideas I came up with, I needed to find one that I could make into 3D gifs.  The process of making the Gifs was a little harder than I anticipated.  One of the hardest parts was keeping my camera level and in the same spot to line the object up in.  Even with a tripod, I had to take numerous photos of each object and trash the majority of them.  Once there were enough photos, I had to take them into photoshop and line up the focal object and do a lot of cropping and maneuvering to get it to look somewhat right.  The hardest part of the project was to keep the background relatively unchanged.  The day I was taking the photos was very windy, so I had to be patient till there was a lull.

1.      “Animated 3D Stereo Photography”  2012

http://www.cambridgeincolour.com/tutorials/animated-3d-stereo-photography.htm

2.      “Wiggle 3D: How to Make Animated 3D Images”  Updated 8/17/2009 By David Fitsimmons

http://www.adorama.com/alc/article/11780

3.      “Wiggle Stereoscopic GIF in Photoshop Tutorial” By UltimateDevice on 8/22/2011

http://www.youtube.com/watch?v=z0EIHFtdlvo