lily – 15104 & 60212 • COMPUTATION for CREATIVE PRACTICES

lfulop_Final-Project

For my final project, I created an interactive environment that responds to scrolling. I paired my own art and collage elements with Pixies lyrics, to create a disorienting, surreal experience.

Skills that I used in this project include creating objects, manipulating images, storing information in arrays, and enabling interactivity via the mouseWheel (scrolling) function.

In order to view my project, please refer to the zipped file on Autolab. It contains the index, sketch, and a folder called “assets” that contains all of my images. Once you have that, run a local server so that the images will be able to load quickly.

Here’s a video capture of it in action:

Javascript Project Screen Capture from Lily Fulop on Vimeo.

It seems a bit jerky, but that’s just because of the way my trackpad lets me scroll. With an actual mouse, it would probably be better!

lfulop_Looking_Outwards_11

These two websites are excellent examples of animations which respond to scrolling. I appreciate how both of them use imagery in whimsical ways. The layering of elements which move at different speeds really creates a sense of depth which makes the experience more dynamic.

The first website is an advertisement for Michelberger Booze. In this Alice-in-Wonderland-like experience, the user virtually drinks the liquor, puts on masks, and goes to new worlds. My favorite part is when the things on the table start to spin and then everything falls away.

http://michelbergerbooze.com/

This next website is for the design firm Guts & Glory. In it, there are “book chapters” which cover everything from their design intent and business values to tips for branding. They use vintage illustrations and modern graphics together to create a really cool experience.

http://gutsgloryand.us/#vol1

lfulop_Final Project Proposal

I want to create an animation that responds to scroll events. I’ve seen this effect used in really fresh/exciting ways on websites, and it’s especially interesting when it’s used to create page transitions. But it doesn’t have to be elements moving linearly through a website — It could cause things to rotate, change color, or change opacity. I think using the scroll response is better than having something respond to mouse position, because it’s slower and gives you more a sense of time. It’s also more constrained (there are only two directions you can scroll in) so you can focus more on whats unfolding in the animation.

I’m planning on creating some illustrations and saving them as images with transparencies that I can load into my canvas. I’ll create sprite sheets to make the animation. My current idea is to create a sky with clouds that move at different speed to create depth, and then have a girl appear with “her head in the clouds.” Her expression may change, or different things in the sky may change. I’m not totally set on this concept though, so I might end up doing something a bit more abstract that could incorporate words/shapes/colors in a less literal scene.

lfulop_Project_10_Creature

For this project I created an emotionally needy crab which responds to mouse movement. The crab has attachment issues– he likes to be close to you, so when you move away from him, he chases you. The farther away you are, the faster he’ll move towards you. He is sad when he’s far away from you, and happy when he’s close to you.

I’m aware that this project is pretty simple, and I wish I could have done a bit more with it, but I’m still confused about how to implement springs. Besides the simplicity, though, I think the final product is fun and I’m happy with the visual aesthetic.

sketch

lfulop-LookingOutwards-10

Claudia Hart is an experimental 3D artist. She began her career as an architect, and then a fine artist, before studying 3D animation at New York University’s Center for Advanced Digital Applications. Hart uses Maya 3D animation software in her work, which is a feminist critique on the male dominated world of technology. She adapts the technology that is usually used to create 3D shooter games and hyper-erotic representations of woman like Lara Croft to respond to this violence and objectification. She aims to challenge the narrow man-made representations of women by representing them in a way that can be sensual but not pornographic.

In her work “Recumulations” (2011), she explores the connection between gender and media by rendering a real woman dancing into a virtual space. Hart writes that the piece “expresses the fluidities of time and space and the possibility of the transmigration of gender: all significant qualities of the digital realm. Recumulations presents an uneasy realism particularly relevant in our present day culture where the boundary between a representation and reality, and generally between the real and the artificial – is being daily renegotiated.”

lfulop_Project_09_TurtleGraphics

I think the spirals that the turtle can make are fascinating, so in this project I decided to play with that, and explore how I can create smooth transitions with gradient colors. The spirals that I ended up creating remind me of time travel, vortexes, and black holes. Once you enter into one, a new one appears.

I had wanted to have a single spiral that actually spins in response to the mouse position, but I had difficulty executing that because the spiral takes quite a while to build. At one point, I built the spiral inside of a for loop which had to repeat 700 times. When I tried to make rotational adjustments, my computer couldn’t handle it and the whole thing would break. I’m not sure if I was going about it in the wrong way, but I couldn’t seem to get anywhere, so I settled on an animation which draws in time. While I do wish it was interactive, I’m pretty happy with the result.

sketch

Here are the various states of the animation:

And here are some process shots of different things I did along the way:

lfulop_Project_08_ComputationalPortrait

This project was interesting for me, because I didn’t have a specific end goal in mind. Instead, I experimented with small adjustments to see what could happen. For example, in one iteration I ended up with an interesting grid pattern (see 5th image), but it seemed to be the result of some kind of glitch that would disappear if I changed it at all. It took way too long to draw the grid, so I had to move on to something else.

I ended up using lerp to create some surprising ellipse behavior — the ellipses draw in a somewhat random “spraypaint” pattern, but they respond to changes in mouse speed. When you move your mouse slower, the ellipses cluster closer to the mouse. When you move your mouse quickly, they disperse across the canvas. Because the behavior of the ellipses isn’t completely intuitive, I decided to draw a line underneath them so the user can actually see the relationship between the path of their mouse and the way the ellipses are drawn.

sketch

lfulop_LookingOutwards_08

When I was looking through blog posts, I came across one by Ashley Chen that caught my eye, because I had previously written about another project by the same computational artist, Mark Wheeler. It was interesting to see the differences between the two projects, and to get a broader idea of who Wheeler is as an artist.

In “This City,” the project Ashley looked at, Wheeler creates interdependent music and imagery to represent a fantasy world of traffic. The visuals respond to the sounds he creates, and vice versa. As Wheeler puts it, “the soundtrack controls the world” and “the world influences its soundtrack.” In the previous project I had looked at, the sound determined the visuals, but the visuals did not influence the sound, so it’s cool to see this added component.

Ashley remarked on the “human factor” of this project, but I was actually struck by the opposite. This world that Wheeler has created is completely artificial and controlled by computers— the traffic visuals mimic real life, but the “drivers” are not in control— they are at the whim of the music and the computer. About halfway through, gravity seems to stop working, and all the cars fly off, which is a bit apocalyptic. The cars definitely end up doing some “non human” things.

Ashley’s Post
“This City” by Mark Wheeler

lfulop_Project_07_Generative Landscape

For my landscape I decided to create an ocean scene. The fish generate randomly and swim at different speeds. To make their movement more interesting, I decided to use noise to make them waver in the currents. To add some different scale, I have sail boats passing by, and every so often an orca whale (or two!) will join the fish. (If you don’t want to wait to see the orca, I included a screenshot of him at the bottom). I was able to use one basic object framework for these three different types of objects, with tweaks to make them unique.

sketch

lfulop_LookingOutwards_07

Eyeo 2015 – Giorgia Lupi and Stefanie Posavec from Eyeo Festival // INSTINT on Vimeo.

Eyeo 2014 The Shape of My Thoughts

Eyeo 2013 Data I Paint With

Giorgia’s Personal Website

Giorgia Lupi is an Italian information designer and data visualizer. She focuses on humans, and telling their stories— for her, data should be personal and revealing. She values drawing and analog methods, especially in her process. She uses sketches to explore how visual elements can be a linguistic system for compositions and express data with a human touch. She works in digital and print forms, but her process is always rooted in drawing. Lupi studied architecture at Ferrara University but decided she wanted to design informational systems rather than buildings. She co-founded Accurat, a “data-driven research, design and innovation firm based in Milan and New York,” which creates visual narratives and analytical tools for data.

In 2013 she gave a talk at Eyeo called “Data I Paint With” and discussed how she draws inspiration for data visualization from art, architecture, poetry, music, and the natural world. In 2014 she gave another talk called “The Shape of My Thoughts” which was about the role of drawing in her work; she also spoke in 2015 with Stefanie Posavec about their collaborative project, “Dear Data” — This is the video which I decided to watch in full, because I had heard of the project before in another class, and was excited to learn more about it. In this project, the two designers decided to get to know each other by exchanging weekly data visualizations about a certain aspect of their lives through the mail. I absolutely love the concept of this project, and the idea that you can get to know yourself/someone else better through data. Data can be boring, impersonal, and uninteresting, but these two women create and present data in an engaging and intimate way. The artifacts that they produce are beautiful, even without the context of what the visualizations symbolize. I really appreciate how Lupi uses her aesthetic to elevate data to something that can be appreciated on an artistic level, in addition to an informative one. I also admire how detail-orientated she is, while being able to retain a playful attitude in her work.