faith – 15104 & 60212 • COMPUTATION for CREATIVE PRACTICES

fkaufman- Final Project

When viewing the project, please make sure that you’re web browser page is at the “Actual Size” and fully expanded so that words will not be cut off.

sketch

After submitting my final proposal, I was inspired to try a different idea. I wanted to experiment with illustrating within Javascript, particles systems, and creatures. Additionally, I wanted the user’s interactions with the code to have some sort of consequence on the program. Most of all, my project, is an interactive way of conveying information.

For my final project, the user clicks to feed the pelican.

With each fish coded as an object it soars from the bucket into the pelican’s mouth and then disappears.

After 15 clicks, the game ends and though it was fun to feed the pelican (as it is in real life), the user is prompted with statistics that make them think again about whether or not it is something that they should do.

Creating this project allowed me to find a way to convey information to the user in a way that hits at their “What’s in it for me?” by putting them in the role of the man feeding the bird. I kept the style in which I drew him generic because I wanted people to remember a time that they have fed a bird while playing this game. I created a threshold of 15 clicks because though it is fun and a great experience to interact with birds by feeding them, people should realize that it should be done in limitation. I tried to convey this idea in my project.

Faith Kaufman- Final Project Proposal

Concept/Storyboarding

For my project, I was inspired by the interactive data visualization of the Internet of Things on the Information is Beautiful site (http://www.informationisbeautiful.net/visualizations/the-internet-of-things-a-primer/) and by the quantified-self data visualizations by Nicholas Feltron(feltron.com).

I am going to be creating a data visualization that quantifies myself and tells who I am right now through statistics about myself. I want the viewer to be able to flip through the different pages and interact with them.

This project gives me a chance to experiment with different techniques of data visualization, interaction, and also with topics we covered in class that I’m not as comfortable with, such as springs.

I still need to work on colors, but for now, I based it off of my self-portrait from the first project in 15-104 since I liked the aesthetic of that illustration and thought I might want to play off of it for this project. I have also decided to include that image instead of a photograph for this project.

Wireframe/Storyboard

Page 1: Overview

The project begins with the illustation of me. The type and line draw on the page with the help of turtle graphics. Users click the arrow to get to the next page. The x coordinates (or maybe y?) become negative in order to make it feel like the page is turning.

Page 2: Timeline

The image of me fades away and the line becomes a timeline. The circle is used as a canvas to illustrate with icons times in my life.

Turtle graphics draw lines to different areas on the timeline. Descriptions show up in the circle.

The final image looks something like this (but with facts about me). Users click the arrow to continue and this moves away.

Page 3: Studies

A spring-powered object similar to this appears that shows the areas that I’m studying. I could probably involve any of my extracurriculars here, as well, but I’m not sure yet.

By clicking on the circles, more information comes out about the topics. These can be toggled in and out. There’s an additional feature that allows for packing and unpacking everything.

Page 4: Interests

The final page shows my miscellaneous interests and gives the user the ability to zoom in and out on them.

Screen Shot 2015-11-23 at 9.59.48 PM

Slight transparency differences inside the circlei indicate to the user that there’s more information to be seen.

Screen Shot 2015-11-23 at 9.59.59 PM

(The zooming in feature… things become clear).

But instead of circles, there will be random statistics to quantify my interests with data.

That’s the project. And users can navigate back and forth through the pages.

Looking Outwards 11 – Data Visualization Inspiration for Final Project

Information is Beautiful by David McCandless

http://www.informationisbeautiful.net/visualizations/the-internet-of-things-a-primer/

This summer, I bought Information is Beautiful, a book by David McCandless. I love the way he makes it fun to find out more information. Even if the information is somewhat trivial sometimes, you feel more informed as you read his visuals.

So, I went to the website for the book and found a really cool interactive visualization about the Internet of Things. I really like how there are different pages that you can navigate between and then that you can hover and click on things to change them and find out more. It also feels like the perfect amount of data and details for interactive project, not too much or little information. If I could change anything though, I don’t like how the way of navigating between pages is through what resembles a nav bar at the top of the project canvas. I feel like since this project is meant to be viewed within a browser window, it shouldn’t have features that resemble a typical browser. I wonder if there are different ways to navigate within pages in an interactive visualization. I see potential in maybe clicking on a timeline or shapes. Perhaps switching the way that information is organized could help with this.

(2010) Annual Report(s) by Nicholas Feltron
http://feltron.com/FAR10.html

[Edit 11/21: More interested in this one of his annual reports now: http://feltron.com/FAR05.html]

I had heard of Nicholas Feltron before from design friends, and decided to investigate him further when I saw him as a suggested source of data visualization inspiration on the Deliverables page. What I like about him is how he creates annual reports, in which he attempts to quantify himself through data, when people typically describe themselves qualitatively.

I chose to look at the 2010 Annual Report because I liked the colors and the way that he is describing himself by looking at his lineage (in this case, his father’s life). It made me think about how who I am is determined by many things that I didn’t have control over – not just the basic “where I live” and “where and what I studied” kind of stuff. I thought the way he showed locations with lines and points created beautiful shapes. However, I feel like it’s confusing to get a feel for the location since it’s not placed within the environment of a map, or similar device. I love how in this project (and his others), the data is beautiful by itself but also that the pages all look cohesive and beautiful as a system.

At times, when I look at his work, I feel overwhelmed because he is presenting SO much information and in an aesthetic that all feels so similar. Therefore, nothing feels like important or distinct information. I feel like this is a missed opportunity since not all information is equal in value.

Comparing These Two Sources

I like the simplicity and clarity of Information is Beautiful and how fun it is to explore. In Feltron’s work, it’s less fun to explore. It feels more like something to look at and not read since it’s not interactive and since the information is so compacted. This teaches me that the information is my visualization should be more spread out with and able to be played with so that it is an effective tool for people to learn something from.

I like how Feltron’s work is work that relates to his life directly and feels more human and relatable than the Internet of Things information presented by Information is Beautiful. Because of this, I want to quantify myself with data for my project.

I like how both include the concept of pages and layers, and being able to zoom in and out on information.

Project 10 – Creature

Interact with the sketch by clicking anywhere on the canvas and watching the turtle be caught into the current.

sketch

Process

After I read the prompt, I was scared to try to use physics and the springs. My original concept involved turtle graphics that make a puffer fish swim away from the mouse/predator, as you can see in my initial sketches. Eventually though, I decided to explore using the springs, and found I really liked the way that changing the variables could have such an impressive effect and decided to make a new design based off of this experimentation.

I also used old concepts covered in class such as Push and Pop and Perlin Noise as a refresher.

Inspired by the turtles moving in the current in Finding Nemo, I have made it so that the turtle responds to the mouse click and is swept into the current. Expressive qualities of the turtle are his path and his peaceful eyes as he swims.

Looking Outwards-10

Link by Mimi Son

How it was made:

The Installation:

Mimi Son is a designer, storyteller, professor, curator, and artistic director. She lives in Seoul Korea and studied Digital Media Art & Design and Interaction Design. As a co-founder of Kimchi and Chips, she creates installations that “aim to to depict an intersection of art and technology, material and immaterial, real and virtual, presence and absence.” She tries to articulate space and time from various perspectives.

Her project, Link (2010), is an interactive installation where people record stories into a cityscape of cardboard boxes. It was created for Design Korea as an interpretation of the theme, “Convergence.” They used low, everyday materials to communicate the convergence of complex, fast-moving technologies. The project works by having viewers come up to a kiosk to record memories.

What initially attracted me to the project was the concept. Even before I knew it was based off of the idea of convergence, I liked the way that it showed the individuals that compose a city. I liked the way it is a convergence of micro and macro in this way. Additionally, I admire the patterns and animations generated for the project. Since the project is created through projection mapping, they use light as a key aspect of the installation. Therefore, the patterns which are bright colors pop against the dark background.

Citation: http://www.kimchiandchips.com/works.html#link

Faith Kaufman – Project 9 – Turtle Experimentation

sketch

Project 9

For this project, I wanted to make a pattern that builds itself. To do this, I worked off of the second assignment, where we got the Golden Angle, yet added in motion. I played around with placement and how it presents itself through the for loop. Through using the tan(i), I was able to get the turtle to draw the pattern in a more interesting way. Additionally, I turned down the transparency dramatically to add a subtlety to the movement that is occurring. The change is not directly noticeable until you think about what it used to look like. The final screenshot I included takes a minute or 2 to create.

Faith Kaufman-Project 08- Portrait

I began by altering the code that was provided to us to make it appear as though the photo was pixelated in a glitchy way. My original concept was to build off of this idea through warping the photo. That was WAY too hard, but as Michelle helped me try to do it, I was able to review concepts such as pushing objects into an array, creating a temporary variable, and trying to incorporate similar code to Assignment 08-A to get the pixels to move where I would click.

So I changed my idea to something I believed to be simpler- the dots and the spray methods that we reviewed in class. But, I actually like how it looks more than my original idea. It actually seems more glitchy.

My favorite aspect about it is that the mouse allows you to clarify the image by adding more pixels. When I showed my piece to friends to test it, they seemed to really enjoy interacting with it and scrubbing the mouse around.

sketch

Looking Outwards-08

We Need Nothing to Collide

We Need Nothing to Collide from Mark Wheeler on Vimeo.

What I like about this project is the way that the artist was able to use sound and music to transform a suburban landscape. Likewise to Lily, I found each still of the video to be incredibly beautiful. As someone from the suburbs, I felt each scene was something I could identify with. The light juxtaposed on the scenes feels very modern and reflective of the digital age. Therefore, I feel like the project breathes new life into a traditional, and usually not noteworthy, canvas.

Going off of when Lily was mentioning the eerie quality that exists as a result of the colliding digital and physical worlds, I feel that the addition of light overwhelmed the physical setting. The scenes now appear very artificial. I wish the artist had been able to achieve a better middle-ground between the digital and physical worlds.

I also really enjoyed watching the music experimentation process work. I’d like to be able to create something like that.

Citations

The Original Work

Lily’s Post

Faith Kaufman-Project 07-Landscape

Landscape Project
sketch

Beginning this project, I knew that I wanted to show a UFO centered on the page with the landscape moving to imitate the way that when the camera is moving at the same speed as the object, only the landscape appears to move.

To do this, I learned how to make several different functions and objects work in unison. I used the codes suggested in the Deliverables but had to explore them thoroughly in order to get them to work when I changed things. I also used the Jitterbug object code that we studied in class and in the assignments because I wanted to get more experience with that.

My final product shows a UFO hovering over planets in space.

Looking Outwards-07-Sara Hendren Lecture

Sara Hendren is a self-defined “artist, design researcher, and professor based in Cambridge, Massachusetts.” She attended Wheaton College, UCLA, and Harvard and has studied Studio Art, European History, and Design Studies. In her lecture, she also noted that she is a “public amateur” in Tech Journalism, Graphic Design, and Urban Planning. She teaches design concepts but within the setting of an Engineering course. She likes to compare herself to Lygia Clark, a woman disheartened by her unresolved relationship to her work separated by boundary lines between the disciplines she worked within. Unlike Clark, Sara Hendren prefers to keep the lines blurred between the disciplines.

I really liked the way that she presented her work during the lecture. She started at the end of her story (iii. A House Undivided) and and worked her way to how her journey began (i. The Big Slow). She believes that speaking chronologically hides the fact that real truth is not tidy. For example, she dropped out of a PHD program at UCLA. In the end, she ended up taking a “Get Your Sh*t Together Class” to discover her path in life. I found it captivating that she broke the trend of telling stories chronologically, and instead worked back to her initial reasons for designing for people with disabilities.

What I admire about her work is how she noticed the disparity within the realm of adaptive and assistive technologies. People feel that by creating prosthetics they are reviving peoples identities by helping them fit back into what culture defines as a body. She instead aims to design inclusively for people with disabilities by creating a different type of prosthetics that adjusts the world to fit these peoples’ needs and not vice versa.

I found this lecture incredibly inspiring. I hope to create designs that address concerns in the style that Sara Hendren does.

Eyeo 2015 – Sara Hendren from Eyeo Festival // INSTINT on Vimeo.

Citation
Link To Her Site