Category: SectionD

Lanna Lang – Project 12 – Final Project Proposal

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.

Kristine Kim-Project 11-Landscape


sketch

//Kristine Kim
//Section D
//younsook@andrew.cmu.edu
//Project 11

var mountainspeed = 0.0005; //speed for mountains 
var mountaindetail = 0.005; //shape/detail for mountains

function setup() {
    createCanvas(480, 480); 
    frameRate(10);   //how fast the mountains are moving
}


function draw() {
    var color1 = color(67, 20, 125); //first color for the sunset
    var color2 = color(255, 102, 235); //second color for the sunset
    noStroke();
    sunsetbackground(0,0,width - 50,height - 50, color1, color2, "C");
    
    noStroke();
//calling all the functions
    moon();
    mountain1();
    mountain2();
    fence();
    bussetting(); 
 }
 //drawing the moon in the background behind everything
 function moon(){
    fill(255);
    ellipse(180,120,50,50);
 }
//drawing the lighter mountain in the back
 function mountain1(){
    fill(204, 162, 102);
    beginShape(); 
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * mountaindetail) + (millis() * mountainspeed);
        var y = map(noise(t), 0,0.8, 0, height);
        vertex(x, y); 
    }
    vertex(width,height);
    endShape();
}
//drwing the darker mountain in the front
function mountain2(){
    noStroke();
    fill(125, 91, 49);
    beginShape(); 
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * mountaindetail) + (millis() * mountainspeed);
        var y = map(noise(t), 0,0.5, 0, height -10);
        vertex(x, y); 
    }
    vertex(width,height);
    endShape();
}

//drawing all the static anchors/ drawing the window and handles
function bussetting(){
    noFill();
    stroke(230);
    strokeWeight(110);
    rect(0,0,450,450);
//bus window
    stroke(180);
    strokeWeight(40);
    rect(60,60,350,350,20);
    strokeWeight(20);
    line(80,200,400,200);
    line(233,200,233,400);

//window opener
    fill(0);
    noStroke();
    rect(80,300,10,30);
    rect(380,300,10,30);

//handle bar
    stroke(20);
    line(0,0,0,100);
    line(120,0,120,95);
    line(240,0,240,95);
    line(360,0,360,95);
    line(480,0,480,95);

//handle
    noFill();
    stroke(80);
    strokeWeight(10);
    triangle(-40,160,40,160,0,100);
    triangle(80,160,160,160,120,100);
    triangle(280,160,200,160,240,100);
    triangle(400,160,320,160,360,100);
    triangle(520,160,440,160,480,100);

}
//drawing the fence infront of the mountains in the landscape
function fence(){
    stroke(200);
    strokeWeight(5);
    line(80 ,350,400 ,350);
    line(80,365,400,365);
    line(80,380,400,380);

    line(125,350,125,400);
    line(140,350,140,400);
    line(300,350,300,400);
    line(315,350,315,400);

}

//drawing the sunset as the background
function sunsetbackground(x, y, w, h, color1, color2, axis) {   
    noFill();
    if (axis == "C") {  // Top to bottom gradient
        for (let i = y; i <= y + h; i++) {
        var inter = map(i, y, y + h, 0, 1);
        var color = lerpColor(color1, color2, inter);
        stroke(color);
        line(x, i, x + w, i);
        }
    }  
    
    }

The times where I most often gaze at landscapes or deeply look outside is when I’m on a bus or a vehicle that is why I decide to put this project in a bus setting. I drew the window and handles as static anchors. I went back and studied the terrain assignment we had and used the strategy on this project to create mountains. I also wanted to create a pretty sunset because the one thing I really enjoy about Pittsburgh is their sunset, it’s always vibrant and colorful which I really appreciate. The challenge I had with this project was the sunset and the mountains because even though I studied the code a lot, it still took me a while to figure out everything and get it to how I wanted it to look. 

Shannon Ha – Looking Outwards 11

Video taken from Nova’s website: https://www.novajiang.com/projects/ideogenetic-machine/

Nova Jiang: Ideogenetic Machine

Nova Jiang is a Chinese installation artist who grew up in New Zealand and is currently based in Los Angeles. She holds an MFA in media art from UCLA and has exhibited her work in numerous museums and biennales around the world. Her work encourages tactile and creative engagement between visitors and her artwork. One project that I found particularly interesting was her Ideogenetic Machine, a machine that incorporates portraits of participants captured with a camera and a database of drawings made by Jiang about current news and events. Visitors are prompted to respond to the storyline by adding their own performance and expressions in order to personalize the comic strip. The layout and configuration of images from which new narratives continuously form never repeats. The software also adds blank speech bubbles into the composition which participants can fill with their own dialogue.

What I really admire about this piece, in particular, is that it gives the audience something to take away from the whole experience. Nova allows her art to be used as an ‘open source’ so that everyone can experience it to their own liking and add their own narratives to an incomplete story. This interactive experience not only highlights her own artistic style but also promotes collaboration between people, suggesting that the audience themselves are also artists that hold creative agency in this process of creating.

Jacky Tian’s Project 11

sketch

// Project 11
//Yinjie Tian
//yinjiet@andrew.cmu.edu
//Section D

var terrainSpeed = -0.0005;
var terrainDetail = 0.005;
var aSol = [];
var starMove = 0;
function preload(){
  var filenames = [];
  filenames[0] = "https://i.imgur.com/KK7jv48.png";
  filenames[1] = "https://i.imgur.com/pEsBfR6.png";
  for (var i = 0; i < filenames.length; i++) {
    aSol.push(loadImage(filenames[i]));
  }
}

function setup(){
    createCanvas (480,480);
    frameRate(10);
}

function draw() {
    background(0);
    //stars
    for(var x = starMove; x < width + starMove; x+=10){
        var y1 = random(0, height);
        var y2 = random(0, height/2);
        var y3 = random(0, height/3);
        var y4 = random(0, height/4);
        stroke(255);
        point(x-starMove, y1);
        point(x-starMove, y2);
        point(x-starMove, y3);
        point(x-starMove, y4);
    }
    starMove += 10;
    //sun
    sun();
    //mountain
    mount();
    //aurelion sol
    push();
    image(aSol[frameCount % 2], width/5, height / 3);
    pop();
}
//draw sun
function sun(){
    noStroke();
    fill("yellow");
    ellipse(width/3*2, height/3, 200,200);
    fill("orange");
    ellipse(width/3*2, height/3, 150,150);

    
}
//draw mountain
function mount(){
    noStroke();
    beginShape();
    fill("brown");
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 0.5, 100, 350);
        vertex(x, y);
    }
    vertex(width, height);
    endShape();

}

Initial Sketch

For this project, I used images of one of the character in League of legend called “Aurelion Sol” and made her fly over randomized mountain. Moreover, randomized stars are in the background and move to the left of the canvas to create the sense of “Aurelion Sol” flying forwards. The “sun” is actually one of the character’s skills.

Shannon Ha – Project 11 – Generative Landscape

sketch

//Shannon Ha
//Section D
//sha2@andrew.cmu.edu
//Project 11 Generative Landscape

var terrainSpeed = 0.0001;
var terrainDetail = 0.006;
var martians = [];

function setup() {
    createCanvas(480, 300);

    for (var i = 0; i < 4; i++){ //create initial collection of martians displayed on screen.
        var rx = random(width);
        martians[i] = makeMartian(rx);
    }
    
    for (var i = 0; i < stars; i++) { //randomly generates star size and position.
    sX.push(random(0, width)); // x position of star
    sY.push(random(0, height / 3)); // y position of star
    starSize.push(random(0.1, 1)); // star size
    }
    frameRate(15);
}

function draw() { // calls all the objects
    background(43, 14, 7);
    drawStars();
    drawMountain();
    drawMountainB();

    //calls martian objects
    updateAndDisplayMartians();
    removeMartians();
    addMartians();

    // draw distant planet A
    fill(130, 67, 52);
    noStroke();
    ellipse(400, 20, 30, 30);
    // draw distant planet B
    fill(176, 91, 70);
    ellipse(350, 15, 10, 10);
}
var stars = 300; //number of star points
var sX = []; //x position array
var sY = []; //y position array
var starSize = [];// star size array

function drawStars() {
    noStroke();
    for (var i = 0; i < stars; i++) { // draws the stars
        stroke(random(100, 255)); // randomize grayscale for stroke to give the twinkle effect
        strokeWeight(starSize[i]);
        point(sX[i], sY[i], 10, 10);
    }
}

function drawMountain(){ //background terrain
    push();
    fill(79, 16, 0);
    noStroke();
    beginShape();
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);// adjusts flatness of terrain
        var y = map(noise(t), 0,1, height/2.5, height * 0.2);
        vertex(x, y);
    }
    vertex(width, height);
    endShape();
    pop();
}

function drawMountainB(){ //terrain in the front
    push();
    fill(138, 31, 4);
    noStroke();
    beginShape();
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed * 2);
        var y = map(noise(t), 0,1, height , height * 0.1);
        vertex(x, y);
    }
    vertex(width, height);
    endShape();
    pop();
}

function updateAndDisplayMartians(){
    // Update the martians' positions, and display them
    for (var i = 0; i < martians.length; i++){
        martians[i].move();
        martians[i].display();
    }
}

function removeMartians(){ // removes all martians that go off the canvas.
    var martiansToKeep = [];
    for (var i = 0; i < martians.length; i++){
        if (martians[i].x + martians[i].breadth > 0) {
            martiansToKeep.push(martians[i]);
        }
    }
    martians = martiansToKeep; // remembers the remaining martians on canvas.
}

function addMartians(){ // adds new martians onto canvas
    var newMartiansLikelihood = 0.017;
if (random(0,1) < newMartiansLikelihood) {
    martians.push(makeMartian(0));
}
}

function martianMove() { // allows the martians to glide across screen
    this.x += this.speed;
}

function displayMartian() { //draws the martian.
    fill(12, 63, 117);
    noStroke();
    push();
    translate(this.x, height - 60);
    // body
    ellipse(20, 30, this.breadth, this.height);
    // white part of eye
    fill(255);
    ellipse(20, 20, this.breadth / 2, this.breadth / 2);
    //blue part of eye
    fill(105, 160, 219);
    ellipse(20, 20, 10, 10);
    //antennas
    stroke(105, 160, 219);
    strokeWeight(4);
    line(10, 10, 5, 5);
    line(30, 10, 35, 5);
    //ends of antenna
    fill(random(255), random(100), random(200));
    noStroke();
    ellipse(5, 5, 10, 10);
    ellipse(35, 5, 10, 10);

    pop();
}

function makeMartian(birthLocationX){ // martian characteristics
    var alien = {x: birthLocationX,
                breadth: 30,
                height: 50,
                speed: random(3, 7),
                move: martianMove,
                display: displayMartian};
    return alien;
}

Rough sketch.
Screenshot of the music video I took inspiration from.

For this project, I wanted to create a fictional landscape of Mars, so I took a bit of inspiration from the iconic Britney Spears’ Oops I did it again Music Video (I wanted to add an astronaut but I didn’t know how to remove the background of a picture I found online) and added my own twist by putting in blue aliens that greet you with their antennas as you pass glance over the Martian landscape. I had a lot of fun making this project as it helped me understand the use of objects and characteristics better!

Raymond Pai – Project 11 – Generative Landscapes

I wanted to be a moon rover, so I sketched an illustration of being on the moon. The ground is grey and you slowly move across the moon’s surface.

sketch

///RAYMOND PAI
///SECTION D
///RPAI@ANDREW.CMU.EDU
///PROJECT 11

var stars = [];
var sX = 0;
var sY = 0;
var moonSpeed = 0.00009;
var moonDetail = 0.005;

function setup(){
    createCanvas(480, 300);
    //initialize stars
    for(var i = 0; i < 30; i++){
        sX = random(width);
        sY = random(height);
        stars[i] = makeS(sX, sY);
    }
}

function draw() {
    background(0);
    //draw earth
    noStroke();
    fill(90, 90, 255);
    ellipse(130, 80, 70, 70);
    fill(0, 255, 0);
    rect(130, 80, 30, 20);
    fill(0, 255, 0);
    rect(100, 60, 20, 10);
    //moon ground
    drawMoon();
    //stars
    drawS();
}

function drawS(min, max, moise) {
    noStroke();
    fill(255, 255, 0);
    push();
    translate(this.x, this.y);
    ellipse(10, 10, 5, 5);
    pop();
}

function makeS(stX, stY){
    var makeStar = {x: stX,
                y: stY,
                speed: -3,
                move: moveS,
                draw: drawS}
    return makeStar;
}

function moveS(){
    this.x += this.speed;
    if(this.x <= -5){
        this.x += width;
    }
}

function displayS(){
    for(var i = 0; i < 50; i++){
        stars[i].move();
        stars[i].draw();
    }
}

function drawMoon(min, max, moise) {
    fill(150);
    beginShape();
    //makes ground of the moon surface
    for (var x = 0; x < width; x++) {
        var t = (x * moonDetail) + (millis() * moonSpeed);
        var y = map(noise(t), 0, 1, 0, 400, 400);
        vertex(x, y);
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

Lauren Park – Project 11 – Landscape

sketch

//Lauren Park
//Section D
//ljpark@andrew.cmu.edu
//Project 11

var palms = [];

function setup() {
  createCanvas(480, 480);
  frameRate(10);
  //for loop to randomize
  for(i=0;i <10;i++) {
    var palmX = random(width);
    var palmY = random(20, 40);
    palms[i] = makePalm(palmX, palmY);
  }
}

function draw() {
  background("#00266E");
  //moon
  fill("#F7E979");
  ellipse(360, 80, 65, 65);
  noStroke();
  fill("#00266E");
  ellipse(340, 70, 45, 45);
  
  //beach
  fill("#AD9C5E");
  ellipse(240, 275, 580, 100);
  //ocean
  fill("#2D84BA");
  rect(0, 280, 480, 200);
  //ocean ripples
  noStroke(); 
  fill(103,202,221, 150); 
	for(var i = 0; i < 3; i ++){
		var wavex = random(-240, 250); 
		var wavey = random(8, 250); 
		var w = random(30, 60); 
		var h = random(3, 5); 

ellipse(width*0.7 + wavex, height * 0.7 + wavey, w, h);
  }
  
  fill(117, 223, 215, 150);
    for(var k = 0; k < 2; k ++){
		var w2x = random(-270, 170); 
		var w2y = random(-8, 170); 
		var w2 = random(30, 60); 
		var h2 = random(3, 5); 
ellipse(width*0.7+ w2x, height *0.7 +w2y, w2, h2);
  }
  
  updatePalm();
}

function updatePalm() {
  for(j=0;j<palms.length;j++){
    palms[j].move();
    palms[j].draw();
    
  }
}

function movePalm() {
  this.x += this.speed;
   if(this.x < -130) {
        this.x += width
  }
}

function drawPalm() {

  push();
  translate(this.x, this.y);
  stroke("#694000");
  fill("#884400"); 
  rect(150, 160, 13, 68);
  stroke("#3C5E00");
  fill("green");
  ellipse(150, 155, 40, 13);
  ellipse(140, 150, 43, 13);
  ellipse(170, 150, 43, 13);
  ellipse(140, 160, 43, 13);
  ellipse(170, 160, 43, 13);
  pop();
}

function makePalm(plocationX, plocationY) {
  var palmtree = {x:plocationX,
                  y:plocationY,
                  breadth:10, 
                  palmW:random(50, 80),
                  palmH: random(10, 15), 
                  speed:-15, 
                  move: movePalm,
                  draw: drawPalm}
  return palmtree;
}

I wows inspired by where I grew up, which is in California and thought of creating a landscape that displays palm trees, the beach, and ocean within a night scene. It was very challenging for me to properly randomize some of the objects at first, that made the whole scene flow when it was running. However, I did enjoy putting thought and colors into creating a new environment that allowed me to express something personal.

Stefanie Suk – Project 11- Landscape

sketch

//Stefanie Suk
//15-104 D
//ssuk@andrew.cmu.edu
//Project-11-Landscape

let car = [];
let num = 10; //number of cars

function setup() {
  createCanvas(400, 400);

  for (let i = 0; i < num; i++) {
    car[i] = new Car(random(height),
      random(width),
      color(random(255), random(255), random(255)), //color of car
      random(1, 7), //car speed
      random(10, 100) //car size
    );
    print(car[i]);
  }

}

function draw() {
  background(0, 41, 58);

  fill(241, 244, 15);
  ellipse(300, 50, 5, 5);
  ellipse(270, 74, 5, 5);
  ellipse(130, 50, 5, 5);
  ellipse(20, 80, 5, 5);
  ellipse(360, 100, 5, 5);
  ellipse(70, 160, 5, 5);
  ellipse(230, 140, 5, 5);
  ellipse(330, 170, 5, 5);
  ellipse(180, 230, 5, 5); //stars 

  fill(200);
  rect(0, 300, 400, 30);
  fill(200);
  rect(0, 290, 400, 3);
  fill(200);
  rect(80, 70, 30, 330);
  fill(200);
  rect(320, 70, 30, 330);
  stroke(200);
  strokeWeight(5);
  line(95, 90, 215, 315)
  stroke(200);
  strokeWeight(5);
  line(95, 90, 0, 275)
  stroke(200);
  strokeWeight(5);
  line(335, 90, 215, 315);
  stroke(200);
  strokeWeight(5);
  line(335, 90, 400, 220); //bridge


  for (let i = 0; i < 10; i++) {
    car[i].move();
    car[i].display(); //making cars show
  }
}



class Car {
  constructor(x, y, z, s, l) {
    this.x = x;
    this.y = y;
    this.z = z; //color of car
    this.l = l; //length of car
    this.speed = s; //speed
  }
  
  move() {
    this.x = this.speed + this.x; //making cars move
    if (this.x > width) {
      this.x = 0; //where the cars come out
    }
  }

  display() {
    noStroke();
    fill(this.z);
    rect(this.x, 270, this.l, 30, 20); //position of cars moving, adjusting shape of cars 
  }
}

Recently, I went outside with my friends to see the night view of Pittsburgh near downtown. I wanted to create what I saw that day by creating what I think is the most symbolic landscape of Pittsburgh, the yellow bridge. I created an illustration of the yellow bridge and the night sky, and made the cars in different lengths and colors move across the bridge. The yellow bridge and the night sky with stars are static because I wanted to emphasize the movement of the vehicles. The cars are coded to move from left to right in different speeds, lengths, and colors to represent the diversity of vehicles I saw the day I went out.

Sketch on Paper
Sketch on Illustrator

Stefanie Suk – Looking Outwards – 11

Notes And Folds, Amor Munoz 2019

Amor Munoz, born in Mexico City, studied Law at the UNAM and at the New Orleans Academy of Fine arts. Notes and folds by Amor Munoz in 2019 is an interactive installation that is built to create  a connection between sound and form, using programming and handcraft. There are three cylindrical sculptures that emits sound, which made out of pleated textiles with three different textures. These textures of each cylinder are unique depending on the musical patterns of each sound. This sculptures are activated when people approach their hands to the fabric, creating the cylinder to rotate at different speeds and sounds as they are programmed. I admire this installation by its complex programming and interesting interpretation of sound. Currently a member of the National System of Art Creators, Amor Munoz usually combines performance and experimental electronics with traditional media, which really shows in this work. There is performance (public approaching sculpture to activate) and experimental electronics with traditional media (using textile and sculpture with sound to rotate). I am amazed at how Amor Munoz interpreted and combined sound with technology into an interaction installation, only making it activate when the public reach out.

Notes and Folds Video

Lauren Park – Looking Outwards – 11

Camille Utterback’s “Abundance” is a commissioned artwork by ZER01 that was publicly installed in San Jose. This piece involves a setup video camera that takes the images and movements of people at the plaza, in order to translate these images and display it by projecting an animation. This animation shows silhouettes in color, of those walking in the plaza. These silhouettes are colored in cool tones unless if people are walking in groups, where then the silhouettes would be warm colored. I really admire how the artist aimed to create a piece that was ongoing and constantly changing by taking the whole environment of the plaza and transforming it into a digital piece. Different colored silhouettes seem to be highly significant, in how the public can easily view how many of those in the plaza came by themselves. Because of this, this project overall seems to create a conversation between strangers in a way. 

The artist Camille Utterback studied at Williams College and got her masters from NYU’s Tisch School Of The Arts. She currently works as an assistant professor of Art Practice at Stanford University. She is interested in creating interactions between technology and people, and so she continues to create digital artworks that connect computational softwares and human behavior.

Abundance
“Abundance”(2007) by Camille Utterback