November 2017 – Page 15 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

sijings-lookingoutwards-12Project Priors and Precursors

The two project I chose for this week is both down by Fernanda Viégas, namely the “Wind Map” and “The Shape of Song (2001)”. I was interested to do things related to data visualization. However, I want to create the visual part with more interesting and attractive elements and Viégas’ projects is a much more complicated version of what I intended to accomplish. Although both projects are about data visualization, one source came from the environmental concern of how wind travels, and the other one is about visualizing a song. The first one is about visualizing an invisible, ancient source of energy surrounds us—energy that powered the first explorations of the world, and that may be a key to the future.

Images from Hurricane Isaac (September 2012)

Images (whole shot) from Hurricane Isaac (September 2012)

For the second project, the wind map shows the delicate tracery of wind flowing over the US. The Shape of Song began as a quest to “see” musical form. He created a visualization method called an arc diagram that highlighted repeated sections of music–or of any sequence–with translucent arcs. The overall distribution of pattern gives me inspiration for making my possible work looks like. Similar to “Wind Map”, I also want to get inspirations from natural data which describes some changes.

Overall, I liked both projects. The only suggestion I have for the second project is to have the sound placed eithere side by side to the project or played as a background music. It is really cool to see the visual element, but I will even appreciate more if I am able to hear some corresponding music.

Here are the links to the projects:

The link of the “windMap” project

The link of the “The Shape of Song” project

Bettina-FinalProjectProposal-SectionC

proof of concept

Classmate Hae Wan Park and I will be collaborating on making generative greeting cards with a focus on using the techniques learned in this class to create typefaces. We will split up the work by having each of us create two approaches (so the work would be split vertically instead of horizontally). Some approaches I am considering include:

Using turtles to trace images in a pattern, similar to my project last week
Having the user draw curves with a mouse and use those stored curve objects to generate random patterns (see below and attached proof of concept video)
Create a grid system that would place typefaces in certain colors and sizes across the canvas

We will need assistance creating a simple interface/home page so the user can navigate to each of the 4 approaches; upon quick research, the p5 libary p5.gui might be helpful.

kyungak-final-project-proposal

For the final Project, I will be collaborating with Sharon Lee from section E. Together, we will be using p5js to create a Pac-man inspired interactive game which will be divided into 3 stages. The basic components of the game include a main character in which users are able to control with keys, enemies of the main character, and the “foods” the character feeds on to either get larger or smaller. From stage 1 to 3, the stages get harder with more frequencies of “enemies” appearing on the screen. In order to progress to the next stage, the users need to reach certain points. Users gain points by the number of enemies they defeat..? We are still working on the structure of the game, but I hope this give a general idea of what our game will be like. In terms of diving up workload, we will be working together to create the basic structure of the program. Sharon will focus on the visual materials, and code stage 1 (moving the characters and imbedding the animation). I will follow up with her code and add 2 more stages to the code. I will add attraction and repel code to the characters and the enemies.

dayoungl Final Project Proposal

For the final Project, I will be collaborating with Kate Ko from section B. Together, we will be using p5js to create a Pac-man inspired interactive game which will be divided into 3 stages. The basic components of the game include a main character in which users are able to control with keys, enemies of the main character, and the “foods” the character feeds on to either get larger or smaller. From stage 1 to 3, the stages get harder with more frequencies of “enemies” appearing on the screen. In order to progress to the next stage, the users need to reach certain points. Users gain points by the number of enemies they defeat..? We are still working on the structure of the game, but I hope this give a general idea of what our game will be like. In terms of diving up workload, we will be working together to create the basic structure of the program (the ; I will be focusing mainly on the visual components and integrating them into the code and Kate will be focusing on the coding that’s needed afterwards, mostly working on interactive element of the code.

daphnel-Project 12-Proposal

I want to this game that involves having a ping pong like ball that shoots up and hits the blocks. The block locations will be randomly generated. The game will start off with the blocks all being the same color. Once the ball hits the block, the block should disappear. When all the blocks are hit, the game restarts with a new set of blocks, this time with one additional color. So for example, level one had grey blocks, but level two had grey and red blocks. The added color will need two hits to make the block disappear. When you hit the red block once, it should turn lighter in color to signify it has been hit before. I will try to make a legend somewhere containing the information on how many hits each color block needs for it to disappear. The ball should be able to bounce off from all corners of the walls except for the bottom border. The ping pong paddle is used to control where the ball goes. I am planning on making the blocks slowly move downwards using the seconds function when the game progresses a bit farther. Each normal one hit block is one point and two hit blocks are two points and so on. I have yet to fully decide on the colors but this is the general idea that I want for my game. I based this idea off of one of my favorite games when I was a kid, though I don’t remember the name of that game clearly.

daphnel-Looking Outwards-12

Curious Vase is a project made by Mianne de Vries and consists of a group of vases within each other. You need to break through the outer vase in order to see the second layer of the vase beneath and so forth. Each vase has up to 3 vases hidden inside. I like the concept of this vase in how you need to break through the outer layer in order to reach the second type of vase beneath because it started giving me the idea for my game. I wanted to create a game in which blocks were used and destroyed based on the movement of a ball. At first, I wasn’t sure how to make this game work, but then I realized, I could just use this breaking system to increase the difficulty of my game, which I will talk about more in my proposal.

The second project I found was the Surface Tension Lamp, created by Front.I found this project very intriguing in how it used bubbles. Bubbles change colors all the time due to the fact that it catches light and reflects the room or area like a multi colored structure. This bubble gave me the idea of changing the colors of my blocks on my game depending on the difficulty. As you continuously hit the block, the color fades and it will disappear just like how a bubble does. This project made by Front looks relatively simple but I like the simplicity and meaning behind the creation of this work.

Final-Project-Proposal

For the final project, I will be collaborating with Ethan Ye (ziningy1). As design students, we are inspired by the motion graphic videos created by the Time, Motion and Communication design class taught by Dan Boyarski. The class focuses on designing and presenting time-based graphics on screen. Although the class uses tools like After Effects or Illustrator, after watching some examples of student work, we found that the graphics could potentially be created through coding as well. We’re interested in exploring the interaction of words, images, sounds, and motion. An example video of student work from the class:

To create the 30 -40 sec video, we intend on using coding techniques from 15-104 like turtle graphics, creating a server and implementing sound and images, objects, etc. We might also create some graphics in Illustrator or Photoshop to storyboard/visualize our project. Our video will use simple geometric shapes and changing scale, color, position to create interesting visuals.

Bettina-LookingOutwards-SectionC

For the final project, Hae Wan and I plan on collaborating on making generative graphic design. We have access to a domain name, so we plan on making this generative design program a web experience people can use. Specifically, we are interested in the generative designs to be used as greeting cards, which the user can print out or send the digital interactive version. The latter may give us opportunity to use sound. Design studio Muir Mcneil and School of Design alumnae Rachel Cheng have both worked with generative graphic design pieces.

Rachel’s following project builds a set grid system that varies based on pre-determined parameters. I think her logic behind the program system is quite robust, and we have an opportunity to improve upon it by adding randomness with various random and noise functions.

Above: examples of generative posters from her system

Above: her parameter system for generating posters

Muir Mcneil emphasizes geometry and patterns in their work, with the use of repeated lines and circles similar to past projects Hae Wan and I have done with turtles and pixels recognition. At a glance, their work has a certain tone to it that may not fit “greeting cards”, so we have room to explore how varying color, lines, or even mimicking real life shapes would have a clearer theme.

Above: screenshot of sample work from their portfolio website

mjanco – Looking Outwards 12 – Section B

In this week’s Looking Outwards I looked at Camille Utterback’s piece Untitled 5, an installation from 2004, and Adrien M and Claire B’s piece XYZT from 2015.

I was very interested in how Utterback’s piece is so fluid and organic while still being based in algorithms. Her installation sets up animated mark making that is influenced by the movements of the viewer. A viewer can move and have the visuals respond but not in an extremely direct way, there is a slight mystery to the connection between the viewer’s movements and the resulting marks. I think it’s interesting to try to create a visual that contrasts with the aesthetic associated with computers. I like the thought process of how to program a visual that appears as if it came from the human hand, or a physical event of the natural world. Utterback’s piece accomplishes this exceptionally well, and it inspires me to create a similar aesthetic result.

XYZT is a similar installation, as it is an interactive piece that allows viewers to interact within a space to produce visuals around them. The concept is this piece is that digital light landscapes are produced across 4 different dimensions: horizontal(X), vertical(Y), depth(Z), and time(T). I thought this was a great concept, as Adrien and Claire take the immersive qualities of their piece and stretch it farther than most, creating a next-level immersive experience. Again, I love the organic quality of the white light aesthetic in this piece, and the human interaction adds a level of fluidity that contrasts with the algorithmic nature of programmed art.

http://camilleutterback.com/projects/untitled-5/

https://creators.vice.com/en_au/article/3d5e39/xyzt-axis-interactive-light-art-installation

ghou-lookingoutwards-12

The Mylar Topology

This is an audio-visual piece intended for panoramic projection and spatial sound. This a piece in the form of visual music. It generates shapes based on the audio data interpreted by an algorithm. The artist, Paul Prudence, likes to do live performances because the visual produced in each performance is different each time due to how it is computed.

Paul Prudence has performed his work internationally and exhibited ways in which sound, space, and form can create intriguing cinematic experiences.

For the second project I will be looking at the interactive phone piano app Magic Piano by Smule. It is a relaxing app that contains several songs to play. Music notes are queued and prompted by little beams of light and the user must tap on them to play them that composes into a certain song. A user could also control which notes to play and the rhythm and speed.

I think the first project I looked at, the Mylar Typology, would be more immersive if the audience could also interact physically with the project. I think these two projects are great precedents to study for my final project, I would like to make a system that generates visuals from sounds generated by the user.