SectionC – Page 6 – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice

Taisei Manheim – Looking Outward – 12

The two projects I chose were Mirror Number 2 by Daniel Rozin and Milkdrop by Geisswerks. Mirror Number 2 is projected screens or kiosks connected to video cameras and computers. Daniel Rozin has done a number of mirror inspired pieces. When a viewer stands in front of one of these pieces, their image is reflected on the screen after it has been interpreted by the computer. The displays change rapidly yielding a smooth transition tightly linked to the movements of the viewer. For this particular piece, 6 different effects cycle for a minute each, totalling 6 minutes. In all 6 effects there are 1000 moving pixels on the screen. These pixels move around following a few rules, such as moving in circles or in random. As they move around they adopt the color makeup of the viewer standing in front of the piece, resulting in a rough approximation of the image of the viewer that resembles an impressionist painting. I chose this project because it is an interesting way to change an image of the user. When making our project, we could possibly change the image of the user in a similar manner.

Milkdrop is a music visualizer first written in 2001, but later updated in 2007 to include pixel shaders – flexible programs written to run on modern GPUs that can result in spectacular imagery and special effects. MilkDrop’s content is comprised of presets, which each have a certain look and feel. These presets are created by a dozen or so short pieces of computer code, as well as several dozen variables that can be tuned. Users can play with MilkDrop to create their own new presets, even writing new computer code on-screen, while they run the preset and see the effects of their changes. This has spawned a large community of people authoring many thousands of presets, creating new visuals and making it react to the music. I chose this project because it is an interesting way to visualize music. When creating a music player, this is one way to think about what is displayed while the music plays.

Visualization created based on music played in Milkdrop.

Taisei Manheim – Project 12 – Final Project Proposal

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.

Jasmine Lee – Looking Outwards – 11

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.

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.

SooA Kim: Looking Outwards – 11

http://untitled5.com/rock-scissors-paper-game-with-face-2014

I’mHyojung Seo is a media artist and an Associate Professor at Samsung Art and Design Institute. She creates interactive performance works through installations and various platforms of communication that allows human to seek media as the new sense, or sixth sense that goes beyond our five senses. The process and methods in the works are a crucial part of her creative practice. She has many interesting works, but I really admire this work called “rock scissors paper game with face” (2014). Using FaceOSC and ofxFaceTracker(byKyle Mcdonald) from Github, she figured out the data of getting user’s expression. Then she made a face version of Rock-Paper-Scissors game, where to represent Paper – you have to open your mouth big, for Scissors – wide lips, and for Rock – bigger face (meaning your face should be closer to the camera). Rock-Paper-Scissors game is known has a game of luck; but she advised that this game is more about the effort because you have to change your face intensely to make the right sign.

Austin Garcia – Project 11 – Generative Landscape

sketch

/*		Austin Garcia
		Section C
		aegarcia@andrew.cmu.edu
		Project 11
*/

var mushrooms = [];
var capColor
var terrainSpeed = 0.0005;
var terrainDetail = 0.005;

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

    capColor = color(random(100, 180),random(100, 180),random(100, 180))
    stemColor = color(random(20, 80),random(20, 80),random(20, 80))
    // create an initial collection of mushrooms
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        mushrooms[i] = makeMushroom(rx);
    }
    frameRate(10);
}


function draw() {
    background(200);

    updateAndDisplaymushrooms();
    removemushroomsThatHaveSlippedOutOfView();
    addNewmushroomsWithSomeRandomProbability();

    noFill();
    beginShape();
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height);
        vertex(x, y);
    }
    endShape();

    rect(0, 0, width - 1, height - 1);
    displayStatusString();
    displayHorizon();




}


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


function removemushroomsThatHaveSlippedOutOfView(){
    // If a Mushroom has dropped off the left edge,
    // remove it from the array.  This is quite tricky, but
    // we've seen something like this before with particles.
    // The easy part is scanning the array to find mushrooms
    // to remove. The tricky part is if we remove them
    // immediately, we'll alter the array, and our plan to
    // step through each item in the array might not work.
    //     Our solution is to just copy all the mushrooms
    // we want to keep into a new array.
    var mushroomsToKeep = [];
    for (var i = 0; i < mushrooms.length; i++){
        if (mushrooms[i].x + mushrooms[i].breadth > 0) {
            mushroomsToKeep.push(mushrooms[i]);
        }
    }
    mushrooms = mushroomsToKeep; // remember the surviving mushrooms
}


function addNewmushroomsWithSomeRandomProbability() {
    // With a very tiny probability, add a new Mushroom to the end.
    var newMushroomLikelihood = 0.007;
    if (random(0,1) < newMushroomLikelihood) {
        mushrooms.push(makeMushroom(width));
    }
}


// method to update position of Mushroom every frame
function MushroomMove() {
    this.x += this.speed;
}


// draw the Mushroom and some windows
function MushroomDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight;
    fill(255);
    strokeWeight(0);
    push();
    translate(this.x, height - 40);
    fill(stemColor);
    rect(0, -bHeight, this.breadth, bHeight);
    fill(capColor);
    arc(5, -bHeight, this.breadth + 100, bHeight / 2, 3.1, 6.2)

    /*for (var i = 0; i < this.nFloors; i++) {
        rect(5, -15 - (i * floorHeight), this.breadth - 10, 10);
    } */
    pop();
}


function makeMushroom(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: random(10, 20),
                speed: -1.0,
                nFloors: round(random(2,8)),
                move: MushroomMove,
                display: MushroomDisplay}
    return bldg;
}


function displayHorizon(){
    stroke(0);
    line (0,height-50, width, height-50);
}

/*
function displayStatusString(){
    noStroke();
    fill(0);
    var statusString = "# mushrooms = " + mushrooms.length;
    text(statusString, 5,20);
}
*/

Katrina Hu – Project 11 – Generative Landscape

sketch_project11

/*Katrina Hu
15104-C
kfh@andrew.cmu.edu
Project-11*/

var x1 = 100;
var x2 = 400;
var x3 = 30;
var luggage = [];

function setup() {
    createCanvas(480, 480);
    frameRate(60);
    background(191, 233, 255);

    //set an initial group of luggage
    for (var i = 0; i < 5; i++) {
    	var rx = random(width);
    	luggage[i] = makeLuggage(rx)
    }
}

function draw() {
	//drawing sun
	noStroke();
	fill(255, 252, 227);
	ellipse(80, 40, 80, 80);
	fill(255, 246, 179);
	ellipse(80, 40, 70, 70);
	fill(255, 238, 112);
	ellipse(80, 40, 50, 50);

	//drawing clouds
	drawCloud(x1);
	drawCloud(x2);
	drawCloud(x3);

	//drawing floor & window
	fill(100);
	rect(97, 0, 10, height);
	rect(377, 0, 10, height);
	rect(0, 67, width, 10);
	rect(0, 294, width, 180);
	fill(184);
	rect(0, 300, width, 180);
	rect(100, 0, 10, height);
	rect(380, 0, 10, height);
	rect(0, 70, width, 10);

	//drawing conveyor belt
	fill(50);
	rect(0, 372, width, 10);
	fill(110);
	rect(0, 380, width, 50)
	fill(200);
	rect(0, 390, width, 30)
	for(var dots = 0; dots < 9; dots ++) {
		fill(110);
		ellipse(dots * 70 + 20, 408, 10, 10);
		fill(250);
		ellipse(dots * 70 + 20, 403, 10, 10);
	}

	//drawing luggage
    updateLuggage();
    removeLuggageFromView();
    addLuggage();
}

function drawCloud(x) {
    push();
    noStroke();
    fill(240);
    ellipse(x, height / 5, 100, 100);
    ellipse(x + 10, height / 5 + 5, 100, 100);
    ellipse(x + 80, height / 5, 80, 70);
    ellipse(x + 10, height / 5 - 10, 80, 80);
    ellipse(x + 70, height / 4 - 55, 60, 50);
    pop();
}


function updateLuggage() {
    for (var i = 0; i < luggage.length; i++) {
        luggage[i].move();
        luggage[i].display();
    }
}

function removeLuggageFromView() {
    //remove luggage from array if it's out of sight
    var luggageToKeep = [];
    for (var i = 0; i < luggage.length; i++) {
        if (luggage[i].x + luggage[i].breadth > 0) {
            luggageToKeep.push(luggage[i]);
        }
    }
    luggage = luggageToKeep; //remember the surviving luggage
}

function addLuggage() {
    //with a very small probability, add a new luggage to the end
    var newLuggageProb = 0.005; 
    if (random(0,1) < newLuggageProb) {
        luggage.push(makeLuggage(width));
    }
}

function luggageDisplay() {
	var top = 375 + this.height;
	//draw luggage
	stroke(0);
    fill(this.r, this.g, this.b);
    rect(this.x, 380, this.breadth, this.height);
    //draw handle
    fill(50);
    rect(this.x + 20, top, this.breadth - 45, 4);
    rect(this.x + 20, top, 4, 10);
    rect(this.x + this.breadth - 25, top, 4, 10);



}

function luggageMove(){
    this.x += this.speed; 
}

function makeLuggage(startX){
    var myLuggage = {x: startX,
                speed: -1.0,        
                breadth: random(80, 120),
                height: -random(50, 80),
                r: random(100, 255),
                g: random(100, 255),
                b: random(100, 255),
                move: luggageMove,
                display: luggageDisplay}
    return myLuggage;
}

My project is of a luggage conveyor belt in an airport. I decided to choose this landscape because of the picture that was posted within the instructions, which showed luggage moving around the belt. Luggage size and color is randomly picked and drawn onto the conveyor belt. This was a very fun project to do, and it was a great opportunity for me to practice using objects. The part I struggled with the most was figuring out how to draw the luggage handles on top of the suitcases. But overall, I learned a lot and am very happy with how the project turned out.

Shariq M. Shah – Project 11 – Generative Landscape

shariqs-project-11

// Name: Shariq M. Shah
// Andrew ID: shariqs
// Section: C
// Project 11

//initializing objects as empty arrays
var boxes = [];
var balls = [];

var spikesSpeed = 0.0005;
var spikesDetail = 0.5;

function setup() {
    createCanvas(640, 240);
    // creating boxes
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        boxes[i] = makebox(rx);
    }
    frameRate(30);
}
function draw() {
    background(235, 183, 52);
    noFill();
    stroke(1);
    beginShape();
    for (var x = 0; x < width; x++) {
      var t = (x * spikesDetail * 2) + (millis() * 1.3 * spikesSpeed);
      var y = map(noise(t), 0, 1, 0, height);
      vertex(x, y);
      push();
      fill(0);
      ellipse(x, y, 5, 5);
      pop();
    }
    endShape();
    updateAndshowboxes();
    removeboxesThatHaveSlippedOutOfView();
    addNewboxesWithSomeRandomProbability();
    //text that moves in generative landscape
    text("//wishyouwerehere", constrain(mouseX, 50, width - 100), height/2 + 50, 5)
}
function updateAndshowboxes(){
    // Update the box's positions, and show them.
    for (var i = 0; i < boxes.length; i++){
        boxes[i].move();
        boxes[i].show();
    }
}
function removeboxesThatHaveSlippedOutOfView(){
    var boxesToKeep = [];
    for (var i = 0; i < boxes.length; i++){
        if (boxes[i].x + boxes[i].breadth > 0) {
            boxesToKeep.push(boxes[i]);
        }
    }
    boxes = boxesToKeep; // remember the surviving boxes
}
function addNewboxesWithSomeRandomProbability() {
    // With a very tiny probability, add a new box to the end.
    var newboxLikelihood = 0.007;
    if (random(0,1) < newboxLikelihood) {
        boxes.push(makebox(width));
    }
}
// method to update position of box every frame
function boxMove() {
    this.x += this.speed;
}
function boxshow() {
    var heightUp = 20;
    var bHeight = this.nFloors * heightUp;
    fill(0);
    stroke(5);
    push();
    translate(this.x, height - 40);
    noStroke();
    for (var i = 0; i < 50; i++) {
        rect(5, -15 - (i * heightUp), this.breadth - 5, 1 + i);
        ellipse(-20, -(i * 1.2 * 2 * heightUp), 5 + i, 5 + i);
    }
    pop();
}
function makebox(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(2,8)),
                move: boxMove,
                show: boxshow}
    return bldg;
}

In this project, I used objects to generate an abstract and dynamic landscape that interacts with the rectangular geometry objects in the background. The arrays and dynamic objects generate a constantly moving and energetic field.

Carly Sacco-Project 11-Generative Landscape

sketch

//Carly Sacco
//Section C
//csacco@andrew.cmu.edu
//Project 11: Generative Landscape

//creates the components on the water
var waterSpeed = 0.00008;
var waterDetail = 0.0005;

//creates the components for the icebergs
var iceSpeed = 0.0005;
var iceDetail = .05;

//snow array
var snow = [];

function setup() {
    createCanvas(480, 280);
	
	//initial collection of snow
	for (var i = 0; i < 100; i += 1) {
		var flake = random(width);
		snow[i] = drawSnow(flake);
	}
	frameRate(10);

	}


function draw() {
	//sky
    background(176, 203, 245);
	
	//icebergs
	noFill();
	beginShape();
	stroke(255);
    for (var x = 0; x < width; x += 1) {
        var t = (x * iceDetail) + (millis() * iceSpeed);
        var y = map(noise(t), 0,1, height/7, height);
        vertex(0, 900)
		vertex(width, 800)
		vertex(x, y);
    }
	endShape();
	
	//calls the function to make water
	makeWater();
	
	//penguin body
	fill('black');
	noStroke();
	ellipse(280, 220, 35, 40);
	ellipse(280, 195, 25, 25);
	
	//penguin stomach
	fill('white');
	ellipse(280, 225, 25, 45);
	ellipse(280, 195, 15, 15);
	
	//penguin eyes
	fill('black');
	ellipse(276, 191, 3, 3);
	ellipse(284, 191, 3, 3);
	
	//penguin body
	fill('orange');
	triangle(276, 195, 284, 195, 280, 200);
	
	//boat
	push();
	noStroke();
	translate(60, 30);
	fill('red')
	quad(40, 200, 250, 200, 230, 260, 60, 260);
	fill('white');
	rect(100, 150, 80, 50);
	
	fill('black')
	ellipse(110, 165, 15, 15);
	ellipse(140, 165, 15, 15);
	ellipse(170, 165, 15, 15);
	pop();
	
	//calling the functions to make the snow
	snowFall();
	drawSnow();	
	addSnow();
	
}
//makes the water
function makeWater() {
	noFill();
    beginShape();
	stroke(66, 114, 189);
    for (var x = 0; x < width; x++) {
        var t = (x * waterDetail) + (millis() * waterSpeed);
        var y = map(noise(t), 0,1, height/2, height);
        vertex(0, 800)
		vertex(width, 800)
		vertex(x, y);
    }
    endShape();
}

//continues to add snow that appears
function addSnow() {
	var moreSnow = 5;
	if(1 < moreSnow) {
		snow.push(drawSnow(height));
	}
}

//calls for the snow to appear and move
function snowFall() {
	for (i = 0; i < snow.length; i +=1) {
		snow[i].displaySnow();
		snow[i].moveSnow();
	}
}

//actually drawing what the snow looks like
function drawSnow(width) {
	var sno = {
		x: random(0, 480),
		y: 0,
		radius: random(5, 10),
		speed: 1,
		moveSnow: function() {
			this.y += this.speed;
		},
		displaySnow: function() {
			noStroke();
			fill(255);
			ellipse(this.x, this.y, this.radius, this.radius);
		},
	}
	return sno;
}

For my project I had decided I wanted to do a winter themed one since it has started to get very cold here. Therefore, instead of mountains I chose to do icebergs and did that by making the sharp edges seem to be floating by the boat. After I added the snow for my objects and boat to fit the theme I thought it would be cute to add the penguin.

my sketch of my project

Carly Sacco-Looking Outwards- 11

“What If”

~using one grace day~

Tina Frank is a designer, artist, and professor at the University of Art and Design Linz. She is the head of the Department of Visual Communication at the Institute for Media. Tina Frank lives is Austrian, but does audio – visual performances and installations all over the world.

In one of her recent pieces of work, What If, Frank and Alexandra Murray-Leslie worked together to question political considerations. They looked at environments people inhabit, patriarchal structures, and feminism.

“What If “, an immersive audio-visual installation.

Nawon Choi— Project 11 Landscape

sketch

// Nawon Choi
// Section C
// nawonc@andrew.cmu.edu
// Project-11 Landscape

// var buildings = [];
var trainCars = [];
var shapes = [];
// canvas height - 50
var yHorizon = 200 - 50;

function setup() {
    createCanvas(480, 200); 
    
    // create an initial train car
    var rw = random(100, 150);
    trainCars.push(makeTrainCar(-50, rw));
        
        
    frameRate(10);
}


function draw() {
    background("#A1C6EA");

    displayHorizon();

    updateAndDisplayTrainCars();
    removeTrainCarsThatHaveSlippedOutOfView();
    addNewCars();

    // railroad sign
    stroke(0);
    strokeWeight(2);
    line(width - 50, height / 3, width - 50, yHorizon);
    fill("yellow");
    ellipse(width - 50, height / 3, 40, 40);
    fill(0);
    textSize(40);
    text("X", width - 62, height / 2.5);

}


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


function removeTrainCarsThatHaveSlippedOutOfView(){
    // If a building has dropped off the left edge,
    // remove it from the array.  This is quite tricky, but
    // we've seen something like this before with particles.
    // The easy part is scanning the array to find buildings
    // to remove. The tricky part is if we remove them
    // immediately, we'll alter the array, and our plan to
    // step through each item in the array might not work.
    //     Our solution is to just copy all the buildings
    // we want to keep into a new array.
    var carsToKeep = [];
    for (var i = 0; i < trainCars.length; i++){
        if (trainCars[i].x + trainCars[i].w > 0) {
            carsToKeep.push(trainCars[i]);
        }
    }
    trainCars = carsToKeep; // remember the surviving buildings
}

function addNewCars() {
    var l = trainCars.length - 1;
    var newW = floor(random(100, 150));
    var newX = 0 - newW;
    // only add a new car after the last one is completely revealed
    if (trainCars[l].x >= 0) {
        trainCars.push(makeTrainCar(newX, newW));
    }
}


// method to update position of the car every frame
function carMove() {
    this.x += 3;
}
    
function carDisplay() {    
    // draw car body
    fill(this.cr, this.cg, this.cb);
    rect(this.x, yHorizon - (this.h + 3), this.w, this.h);

    // draw wheels
    fill("#6b6e6a");
    if (this.nWheels >= 2) {
        ellipse(this.x + 5, yHorizon, 10, 10);
        ellipse(this.x + this.w - 5, yHorizon, 10, 10);
        if (this.nWheels == 4) {
            ellipse(this.x + 15, yHorizon, 10, 10);
            ellipse(this.x + this.w - 15, yHorizon, 10, 10);
        } else if (this.nWheels == 3) {
            ellipse(this.x + (this.w / 2), yHorizon, 10, 10);
        }
    } 

}

function makeTrainCar(birthLocationX, carWidth) {
    var car = {x: birthLocationX,
                w: carWidth,
                h: floor(random(50, 70)),
                nWindows: floor(random(0, 3)),
                nWheels: floor(random(2, 5)), 
                cr: floor(random(0, 255)),
                cg: floor(random(0, 255)),
                cb: floor(random(0, 255)),
                move: carMove,
                display: carDisplay}
    return car;

}

function displayHorizon(){
    noStroke();
    // grass 
    fill("#3a6933");
    rect(0, yHorizon, width, 50); 

    // train track
    fill("#35524A");
    rect (0, yHorizon, width, 5); 
}

For this project, I tried to create a moving landscape in which the subject was moving, but the viewer was still. I depicted a railroad crossing of train cars with varying widths, heights, colors, and wheel numbers. It was interesting to play with random vs fixed variables. For instance, the train cars had to generate right after the last car, instead of at a random frequency. I also tried to create more visual interest by adding a railroad crossing sign in the foreground. I think if I had more time, I would have added interesting patterns to each car, such as windows or texture to the cars.