This project will be done by Carly Sacco, Jai Sawker and I. Our project proposal is a smart phone and on the screen there would be different apps. You could click on the apps and they would each do different things. One of the apps would resemble snapchat and allow users to put a few filters on a picture of themselves (using the computer camera). Another app would resemble spotify and allow user to choose different songs to play. There would also be an app that would resemble instagram and allow users to scroll through images and like certain photos. The last app would be the clock app which would allow users to see the time.
For my final project I would like to do a motion/animated comic for a poem (perhaps the one below?) or some short story. The illustrations will be drawn by me and imported into the program from imgur. The viewer interacts with the comic by clicking.
For my final project, I want to create an interactive create your own spirograph! Spirographs change and look different based on two circle radii, so I want to let the user choose the different sizes of the circles to create different spirographs. I also plan on including other types of math equations that create cool looking designs. This way the user can have the choice of what math equation and then also be able to set the size of certain aspects to change the design. I will have buttons and key presses for the user to be able to choose what he/she wants. I also plan on letting them chose the color. I am interested in experimenting with shapes as the lines.
I would like to be able to have two different “screens.” One to show the user the size of the circles to help them visualize the choices they’re making, and the second one is actually drawing the design.
I know that I want to create something that generates drawings using a turtle. Therefore, I looked into computer-generated arts online.
This first artist is called Bogdan Soban, and he has been creating generative art for over 20 years. He uses a computer to combine and complete a work of art. Soban notes that there are four phases of the generative art method: idea, code creation, process, and final selection. The first and last are within the domain of humans, but the second and third are based on a code time machine. Therefore, it is the complication of code that differentiates the image of A and B.
Sample works of Soban
I also wanted to create something that is interactive, so I looked into an interactive computer-generated installation. The example that I found is Nike’s interactive installation during Milan Design Week. This computer-generated work reacts to the viewer’s location and motion, creating an image based on the way a person interacts it.
Nike’s Super Natural Motion
For my final project, I would like to combine computer-generated art and interactive art together, creating interactive computer-generated art.
For my final project, I wanted to look into two computational artists Erwin Hoogerwood and Chihiro Sakoda. Above are two javascript projects that utilize various forms in geometry and nature to create beautifully animated forms. In both projects, there’s a sense of orchestrated randomness that’s really intriguing to observe. The one above by Hoogerwood is definitely much more systematic and geometric while the one below by Sakoda uses random participles to create something that seems more free flowing.
I would love to see how these artists might be able to make their respective art projects interactive. That would be really fascinating to interact with because it gives us as the user a new sense of agency. I think without this form of interactivity, these beautiful projects remain as cool animations with not as much depth as there could be.
// CJ Walsh
// Section D
// cjwalsh@andrew.cmu.edu
// Project 11
// establishing variables for movement of environment
var oceanFloor = 0.002;
var oceanFloorSpeed = 0.0001;
var surface = 0.0008;
var surfaceSpeed = 0.0006;
var seaweed = 1;
var seaweedSpeed = 0.0005;
var coral = 0.06;
var coralSpeed = 0.0003;
var fish = [];
var fishNum = 20;
function setup() {
createCanvas(480, 480);
background(220);
for (i=0; i<fishNum; i++) {
f = makeFish(width+random(10, 100));
fish.push(f);
}
}
function draw() {
background('#A5F9F5');
drawNoise();
drawFishy();
updateFish();
}
// remove old fish and add new fish
function updateFish() {
keepFish = [];
for (i=0; i<fishNum; i++) {
f = fish[i];
if (f.x > 0-f.bodyW) {
keepFish.push(f);
}
else {
keepFish.push(makeFish(width+50));
}
}
fish = keepFish;
}
// draw the fish
function drawFishy() {
for (i=0; i<fishNum; i++) {
fish[i].move();
fish[i].display();
}
}
// drawing environment
function drawNoise() {
// Surface
beginShape();
fill('#516FCE');
noStroke();
vertex(0, height);
for (var x = 0; x < width; x++) {
var t = (x * surface) + (millis() * surfaceSpeed);
var y = map(noise(t * 0.5), 0, 1, 0, 100);
vertex(x, y);
}
vertex(width, height);
endShape();
// coral
beginShape();
fill('#425689');
noStroke();
vertex(0, height);
for (var x = 0; x < width; x++) {
var t = (x * coral) + (millis() * coralSpeed);
var y = map(noise(t * 0.5), 0, 1, 250, 300);
vertex(x, y);
}
vertex(width, height);
endShape();
// Seaweed
beginShape();
fill('#3E7C6A');
noStroke();
vertex(0, height);
for (var x = 0; x < width; x++) {
var t = (x * seaweed) + (millis() * seaweedSpeed);
var y = map(noise(t * 0.5), 0, 1, 250, 480);
vertex(x, y);
}
vertex(width, height);
endShape();
// ocean floor
beginShape();
fill('#E5D9A8');
noStroke();
vertex(0, height);
for (var x = 0; x < width; x++) {
var t = (x * oceanFloor) + (millis() * oceanFloorSpeed);
var y = map(noise(t * 0.5), 0, 1, 350, 480);
vertex(x, y);
}
vertex(width, height);
endShape();
}
// creating an object for the fish
function makeFish(fishlx) {
var fsh = {x: fishlx,
y: random(height-350, height-50),
bodyW: random(30, 50),
bodyH: random(15, 40),
speed: random(-2, -0.5),
tail: random(15, 20),
fColor: [random(0,255), random(0,255), random(0,255)],
move: fishMove,
display: fishDisplay
}
return fsh;
}
// displaying the fish
function fishDisplay() {
fill(this.fColor);
noStroke();
tx = this.x + this.bodyW/3;
// drawing fish tail
triangle(tx, this.y, tx+this.tail, this.y+this.tail/2,
tx+this.tail, this.y-this.tail/2);
// drawing fish body
ellipse(this.x, this.y, this.bodyW, this.bodyH);
// drawing fish eye
fill(0);
ellipse(this.x-this.bodyW/4, this.y-this.bodyH/4, 4, 4);
}
// moving the fish across canvas
function fishMove() {
this.x += this.speed;
}
This project was super fun to make. The idea I started out with was wanting to create an underwater scene with fish and seaweed. Using noise, I was able to create the forms for the waterline, the ocean floor, seaweed and a coral/sea mountain background. After playing with the amount of noise and speed, I was able to create really cool movements with both the water and the seaweed. The surface looks like it undulates in waves like the ocean and the seaweed has a fun flowing motion. I then created the fish and randomized their size and color to create some fun forms. Im really happy with how it came together.
Katie Rice and Luke Cormican // Skadi Comic // 2008 – 2018
This project was a comic that has its own website and many storylines created over the years. I found out about this project after researching online for projects that were similar to my final project idea, but I could barely find any. This one stood out to me because this comic has a choose-your-own-adventure storyline, which most comic stories that are out there are not. Readers can click on the poll choices that are given below the comic page, or sometimes the readers can click on a sign in the comic itself that will help direct the story plot. I appreciate this project because of this interactive idea that not many comics do, however, for my project, I definitely want to step out of the illustration genre and more into animation or graphics.
My screen recording of me interacting with “Skadi Comic”.
I believe movies, music, games, etc. are all works of art and are long-term projects made by artists, so I’m including Bandersnatch in my Looking Outwards because it is the main influence for my final project. Black Mirror: Bandersnatch is a movie that transformed into a live-action interactive environment with a choose-you-own-adventure style. I am highly inspired by this movie because of how complex the work became; the storyline, character development, etc.
Although I know my final project will obviously not be able to reach this capacity, I want to strive to have this level of thought behind the process and the plot in order to create an interesting enough concept behind my own project. I will draw inspiration from “Skadi Comic” and its classic comic book style layout combined with the choose-your-own-adventure theme, and Bandersnatch’s creativity on its complex plot and its artistic direction.
Example of how Bandersnatch uses the choose-your-own-adventure style in the movie
When I first saw Patatap by Jono Brandel, I was in love with it – from the aesthetic visualizations to the jingle-like sounds. In my larger body of artwork, I discuss the topic of climate change and the environment numerously, so I wanted to find a way to combine the Patatap project with climate change. As I was researching climate crisis visualizations and graphs, the one I have attached below really caught my eye because of the way the map was created and how unique and creative it was. I want to take this aesthetic and use it to inspire the visualizations of my version of Patatap.
Connect4Climate’s Visualizing a Warmer World
How it will work is that first, the user will press the “enter” key to start, and then the user can press any arrow key to shift through different imagery. Every time the user presses the “enter” key after the first time, the color palette will change gradually from a very cool blue/purple/green scheme to a very warm magenta/red/orange/yellow theme to symbolize the global warming, and it will also change the “set” of sounds that the arrow keys will make (just the same as Patatap) except my set of sounds will gradually change from nature sounds (birds chirping, leaves rustling, etc) to industrial sounds and destruction of nature (factory sounds, technology sounds like trains whistling or cars honking, cracking of icebergs, etc). This project will utilize color, arrays and objects, keyboard interaction, sound, and maybe some mouse interaction too. I want the graphics that will display to also show some representation towards nature life or climate change-related, but not so blatant (as you can see in my sketch), so they still possess the Patatap’s graphic design aesthetic, but contains symbolism that nods toward the environment. How the graphics will interact with the gradual procession towards a “warmer world” is that for example, the seaweed-like graphic shown in my sketch will at first draw from bottom-up of the canvas, but when the background color becomes a warm tone, the seaweed will start to draw from the top-down to symbolize the corals shrinking and destroyed reefs.
My sketch of just some example graphics I will most likely use.
Caroline Record is an artist and software developer with a strong background in the fields of fine arts, user-centered design, and programming. Her project, Light Clock, was installed at the Carnegie Museum of Art. Every five minutes, the camera within the clock captures a 360-degree view of the museum plaza. It does this 24/7. These images are then sent inside to an exhibit in the museum lobby, allowing visitors to spin to control their point of view of the photographs.
A photograph of the museum exhibit.
Record’s exhibit allows visitors to experience the perspective of another time, from another point of view. It can be interesting to see how the view outside is compounded by experiencing the same view inside.
Caroline Record has had fellowships in the past with Carnegie Mellon University, the Brewhouse Association, and Yale University Norfolk. She has had exhibitions at the Carnegie Science Center, Space Gallery, Miller Gallery, and the Brewhouse Association. She now works as part of the innovation team at the Carnegie Museum of Art. I admire her work because her pieces seem to be about turning mundane things into something that inspires curiosity and wonder. In other projects, Section of Mystery, and She, Record makes use of simply a door and text messages. I appreciate the art of her creating worlds within the world we live in.
Because I know I want my final project to relate to generative sound, I wanted to hone in on pieces and artists who worked with such medias in this last Looking Outwards post.
The first project I decided to look at is by April Aliermo. She focuses on installations and performances that are immersive experiences and are representative (in sonic form) of her values. Working with Kristina Guison and Kat Estacio, together they created an interactive installation called Dahan, Dahan Slowly, Carefully.
This piece involves disks of ice that melt and those drops go to hit the metal sculptures in different ways in order to induce percussive sounds which change as time goes on and the ice continues to melt. With each water droplet, there are generative visuals that respond and change accordingly. This is a intended to be meditative sculpture installation for the Long Stone, Gladwell Hotel in 2019
I admire the interactive element in the installation and the way it uses typical objects in everyday life, metal and ice, and suddenly amplifies the way we can use such materials by having them interact with each other and furthermore, I especially appreciate how the interaction will change at different stages of time based on how fast/slow the ice is melting and the acknowledgement of this change with the generated visuals that respond to the water drops.
In my opinion, I wish they had explored even further with different materials that the water drops hit, more so that just metal, in order to go more into depth as to how different materials affect the sound of water and therefore, how different materials can affect the accompanied generative visuals. Furthermore, I also wish they had explored the different factors that can make water melt faster or slower. I think that would have been very interesting in terms of a next step of this project. They have explored how free and how much expression can go into this piece and now to reverse the meaning and try to restrain water, an element that is not so easily controlled, would be interesting.
The second piece I chose to look at is by Helen Alexandra. She created a Prototype for a Multi-Species Architectural Element which is an interactive window installation with the purpose of attempting to create a connection between humans and the natural world.
Using sensors and motors, she created a piece that responds to the needs of specifically living moss and humans. In a window unit, there are automated apertures that change based on whether or not a human is detected about 10 feet from the window, in which the aperture will shift to accommodate the amount of sunlight that the human wants. When there is no human detected, the aperture shifts in accordance to what the living moss needs.
Prototype for a Multi-Species Architectural Element by Helen Alexander
I admire this project because of the end purpose that Alexandra wanted, which was to foster some sort of connection between humanity and nature which I think is important because humans take the natural world for granted most of the time.
I think to further this project, I would want to see Alexandra expanding this idea to not only the window, but perhaps different parts of the home/life in general in order to further deepen humanity’s appreciation for nature by seeing how nature fits in our daily life in many different places and different aspects.
Comparing these two installations together, I see the similarities in that the artists are trying to take advantage of natural elements of the world, such as water and earth. I think both of them are making a statement of the importance of these elements and are also trying to teach viewers and users how to interact with such elements and how many different ways there are to do so.
![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
