Month: November 2017

mmiller5-Project-10

Don’t (or maybe do) get hit by the barrels!  Press any key to jump.

sketch

var clouds = [];
var barrels = [];
var ground = 320;
var character;
var spaceship = [];
var drop = [];
var gravity = .5;
var count = 0; //keeps track of time since last barrel was made
var ouch = 0; //opacity for Ouch! text

function setup() {
    createCanvas(480, 480);
    frameRate(48);
    strokeWeight(0);
    character = makeCharacter();
    textAlign(CENTER);
    initialClouds();
}

function draw() {
    makeCharacter()
    background(0, 100, 200);
    //cloud stuff
    stepClouds();
    removeClouds();
    addClouds();
    //ground
    midground();
    //spaceship barrel drop stuff
    stepDrop();
    removeDrop();
    //more ground
    closerMidground();
    fill(50, 35, 35);
    rect(0, ground, width, height - ground);
    //character stuff
    stepCharacter();
     //barrel stuff
    stepBarrels();
    removeBarrels();
    addBarrels();
    //spaceship stuff
    stepSpaceship();
    removeSpaceship();
    addSpaceship();
    //extra stuff
    hit();
    count += 1;
}

//cloudy-related stuff
function makeCloud() {
    var cloud = {x: width + 50,
		 y: 80 + random(-50, 50),
		 scale: random(.8, 1.5),
		 tufts: floor(random(1, 7)),//chooses how many parts in cloud
		 tuftX: [random(-15, 15), random(-15, 15), random(-15, 15),
			 random(-15, 15), random(-15, 15), random(-15, 15),
			 random(-15, 15)], //parts in cloud have random location  
		 tuftY: [random(-15, 15), random(-15, 15), random(-15, 15),
			 random(-15, 15), random(-15, 15), random(-15, 15),
			 random(-15, 15)],
		 speed: -.2,
		 move: cloudMove,
		 appearance: cloudAppearance}
    return cloud;
}

function initialClouds() { //make clouds when script starts
    for (var i = 0; i < random(5, 12); i ++) {
	clouds.push(makeCloud());
	clouds[i].x = random(width);
    }
}

function cloudMove() {
    this.x += this.speed * this.scale;
}

function cloudAppearance() {
    fill(240, 100);
    strokeWeight(0);
    for(var i = 0; i < this.tufts; i ++) {
	rect(this.x + this.tuftX[i], this.y + this.tuftY[i],
	     40 * this.scale, 20 * this.scale, 5 * this.scale);
    }
}

function stepClouds() { //updates the cloud features to redraw them
    for (var i = 0; i < clouds.length; i ++) {
	clouds[i].move();
	clouds[i].appearance();
    }
}

function addClouds() { //spawns new clouds randomly
    if (clouds.length <= 15 & random(0, 1) < .01) {
	clouds.push(makeCloud());
    }
}

function removeClouds() { //gets rid of clouds when off screen
    var cloudsToKeep = [];
    for (var i = 0; i < clouds.length; i ++) {
	if (clouds[i].x + (40 * clouds[i].scale) + 15 > 0) {
	    cloudsToKeep.push(clouds[i]);
	}
    }
    clouds = cloudsToKeep;
}

//character stuff
function makeCharacter() {
    var character = {x: 50,
		     y: ground - 10,
		     yf: 0,
		     width: 10,
		     height: 10,
		     color: color(0),
		     jump: false,
		     move: characterJump,
		     appearance: characterAppearance,
		     collision: collision}
    return character;
}

function characterJump() { //makes character move up and down when a key is pressed
    if (this.jump == true) {
	this.yf += gravity;
    }
    this.y += this.yf;
    this.y = min(this.y, ground - this.height);
    if (this.y == ground - this.height) {
	this.jump = false;
    }
    if (keyIsPressed == true & this.jump == false) {
	this.jump = true;
	this.yf -= 10;
    }
}

function characterAppearance() {
    fill(this.color);
    strokeWeight(1);
    stroke(0, 150);
    rect(this.x, this.y, this.width, this.height);
}

function stepCharacter() {
    character.move();
    character.appearance();
    character.collision();
}

function collision() { //when character hits a barrel, change color and say Ouch!
    for (var i = 0; i < barrels.length; i ++) {
	if (dist(this.x, this.y,
		 barrels[i].x, barrels[i].y) <= barrels[i].radius ||
	    dist(this.x + this.width, this.y,
		 barrels[i].x, barrels[i].y) <= barrels[i].radius ||
	    dist(this.x, this.y + this.height,
		 barrels[i].x, barrels[i].y) <= barrels[i].radius ||
	    dist(this.x + this.width, this.y + this.height,
		 barrels[i].x, barrels[i].y) <= barrels[i].radius) {
	    this.color = barrels[i].color;
	    barrelHit(i);
	    
	}	    
    }
}

//barrel stuff
function makeBarrel() {
    var barrel = {x: width + 50,
		  y: ground - random(50, 150),
		  ySpeed: 0,
		  xSpeed: -3,
		  radius: 10,
		  color: color(random(0, 150), random(0, 150), random(0, 150)),
		  move: barrelMove,
		  appearance: barrelAppearance}
    return barrel;
}

function barrelMove() {
    this.x += this.xSpeed;
    this.y += this.ySpeed;
    this.y = min(ground - 10, this.y);
    this.ySpeed += gravity;
    if (this.y == ground - 10) {
	this.ySpeed = -this.ySpeed * .82;
    }
}

function barrelAppearance() {
    fill(this.color);
    strokeWeight(1);
    stroke(0, 150);
    ellipse(this.x, this.y, this.radius * 2, this.radius * 2);
}

function stepBarrels() {
    for (var i = 0; i < barrels.length; i ++) {
	barrels[i].move();
	barrels[i].appearance();
    }
}

function addBarrels() {
    if (random(0, 1) < .01 & count >= 48/*prevents from being too close*/) { 
	barrels.push(makeBarrel());
	count = 0;
    }
}

function removeBarrels() {
    var barrelsToKeep = [];
    for (var i = 0; i < barrels.length; i ++) {
	if (barrels[i].x + 10 > 0) {
	    barrelsToKeep.push(barrels[i]);
	}
    }
    barrels = barrelsToKeep;
}

function barrelHit(index) { //deletes hit barrels and says Ouch!
    var barrelsToKeep = [];
    for (var i = 0; i < barrels.length; i ++) {
	if (i != index) {
	    barrelsToKeep.push(barrels[i]);
	}
    }
    barrels = barrelsToKeep;
    ouch = 255; //sets opacity for Ouch! to be visible
}

function hit() { //displays Ouch!
    fill(255, 0, 0, ouch);
    strokeWeight(0);
    textSize(100);
    text("Ouch!", 60, 100, width - 100, 200);
    ouch -= 5;
}

//landscape elements
function midground() { //makes ground randomly according to noise
    var terrainSpeed = 0.00005;
    var terrainDetail = 0.005;
    fill(50);
    strokeWeight(0);
    beginShape();
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, height / 4, ground);
        vertex(x, y); 
    }
    vertex(width, height);
    endShape();
}

function closerMidground() { //makes ground randomly according to noise
    var terrainSpeed = 0.0007;
    var terrainDetail = 0.05;
    fill(50, 80, 50);
    strokeWeight(0);
    beginShape();
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (100000 + millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, height / 2, ground);
        vertex(x, y); 
    }
    vertex(width, height);
    endShape();
}

//spaceship
function makeSpaceship() {
    var spaceship = {x: -50,
		     y: random(50, 150),
		     speed: 0,
		     speedBoost: random(0, 500),
		     move: spaceshipMove,
		     appearance: spaceshipAppearance}
    return spaceship;
}

function spaceshipMove() {
    //movement speeds up and slows down according to noise
    this.x += this.speed + .5 * (noise(millis() * .001 + this.speedBoost));
}

function spaceshipAppearance() {
    strokeWeight(1);
    fill(255, 200);
    ellipse(this.x + 25, this.y - 5, 15, 15);
    fill(150);
    ellipse(this.x + 25, this.y, 50, 10);
}

function stepSpaceship() {
    for (var i = 0; i < spaceship.length; i ++) {
	spaceship[i].move();
	spaceship[i].appearance();
	addDrop(i); //spawns in barrel drops from ship
    }
}

function addSpaceship() {
    if (random(0, 1) < .0009 - (spaceship.length * .0003)) {
	spaceship.push(makeSpaceship());
    }
}

function removeSpaceship() {
    var spaceshipToKeep = [];
    for (var i = 0; i < spaceship.length; i ++) {
	if (spaceship[i].x - 25 < width) {
	    spaceshipToKeep.push(spaceship[i]);
	}
    }
    spaceship = spaceshipToKeep;
}

//spaceship barrel drop
function makeDrop(i) {
    var drop = {x: spaceship[i].x + 27, //spawns at spaceship location
		y: spaceship[i].y,
		ySpeed: 0,
		color: color(random(0, 160), random(0, 160), random(0, 160)),
		radius: 3,
		move: dropMove,
		appearance: dropAppearance}
    return drop;
}

function dropMove() {
    this.y += this.ySpeed;
    this.ySpeed += gravity / 5;
}

function dropAppearance() {
    fill(this.color);
    strokeWeight(.5);
    stroke(0, 150);
    ellipse(this.x, this.y, this.radius * 2, this.radius * 2);
}

function stepDrop() {
    for (var i = 0; i < drop.length; i ++) {
	drop[i].move();
	drop[i].appearance();
    }
}

function addDrop(i) {
    if (random(0, 1) < .01) {
	drop.push(makeDrop(i));
    }
}

function removeDrop() {
    var dropToKeep = [];
    for (var i = 0; i < drop.length; i ++) {
	if (drop[i].y < ground) {
	    dropToKeep.push(drop[i]);
	}
    }
    drop = dropToKeep;
}

When thinking of generative landscapes, I started thinking about side-scrolling games, and so I decided to combine the two!  Most of the objects are pretty basic — stuff gets introduced and moves across the screen — so I decided to add some complexity to each of the objects, giving them things like different numbers of components, bouncing, and spawning new objects.  The part of this project I personally love the most is that when the character gets hit by a barrel, they become the same color as that barrel!  I just think that’s so neat (and it’s also kinda sad, because clearly getting hit by the barrel hurts, but it’s so cool to watch!).

jknip-SectionA-LookingOutwards-10

Yael Braha’s Project Mapping

Yael Braha is a creative director working at Obscura Digital, who has a lot of experience designing projection mapping shows for large scaled buildings and facades. One of the projects I really enjoyed was the show for AHA, a multi-day festival of lights celebrating Cleveland. Her team at Obscura tends to approach imagery through a very hands-on approach, which I admire, as they brainstorm, create and record slow-mo footage from big to small. The project transformed a 370 foot by 70 foot tall building into an animated canvas, and created high engagement with the community who gather to enjoy the facades. Yael Braha has a degree in Graphic Design and a masters in Fine Arts in Cinema.

Transformations, 2014, Yael Braha

Video from Obscura Digital

http://www.yaelbraha.com/

http://obscuradigital.com/work/aha-cleveland/

hyt-Project-10: Generative Landscape

hyt-10-project

// helen tsui
// 15-104 section d
// hyt@andrew.cmu.edu
// project-10-Generative-Landscape

var frames = [];
var framesIndex = 0;
var dino = [];

var terrainSpeed = 0.001;
var terrainDetail = 0.005;

var SkySpeed = 0.0003;
var SkyDetail = 0.01;

var t; // terrain in for loop
var y; // terrain y coordinate



function preload() {
    var filenames = [];
    filenames[0] = "https://i.imgur.com/nNc7b23.png";
    filenames[1] = "https://i.imgur.com/XMA7PM4.png";
    filenames[2] = "https://i.imgur.com/kN7pKft.png";
    filenames[3] = "https://i.imgur.com/0BpdBta.png";
    filenames[4] = "https://i.imgur.com/FZ6hBbP.png";
    for (var i = 0; i < filenames.length; i++) {
        frames[i] = loadImage(filenames[i]); 
    }
}

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

    for (var i = 0; i < 5; i++) {
        var rx = random(width);
        dino[i] = makeDinosaur(rx);
    }
}    


function makeStar() {
    stroke(200, 0, 0);
    strokeWeight(8);
    var starx = random(0, width);
    var stary = random(0, height);
    line(starx, stary, starx + 7, stary + 7);
}

// function makeStar2() {
//     stroke(200, 0, 0);
//     strokeWeight(8);
//     var starx2 = random(0, width);
//     var stary2 = random(0, height);
//     line(starx2, stary2, starx2 + 7, stary2 + 7);
// }

// background desert
    
// foreground - terrain that changes color
function makeTerrain() {
    noFill();
    noStroke();
    beginShape(); 
    for (var x = 0; x < width; x++) {
        t = (x * terrainDetail) + (millis() * terrainSpeed);
        y = map(noise(t), 0, 1, 150, height);
        vertex(x, y); 
        stroke(200-frameCount*0.5, 141, 103);
        line(x, y, x, height);
    }
    endShape();
}

// background - make sky 
function makeSky() {
    noFill();
    noStroke();
    beginShape(); 
    for (var x = 0; x < width; x++) {
        t = (x * SkyDetail) + (millis() * SkySpeed);
        y = map(noise(t), 0, 1, 0, 200);
        vertex(x, y); 
        stroke(219, 239, 240, 200, 200); // sky color
        line(x, 0, x, y);
    }
    endShape();
}



// making an object - dinosaur
function makeDinosaur(birthPos) { 
    var dino = {x: birthPos, 
                speed: 1,
                display: displayDinosaur,
                move: moveDinosaur
                }
    return dino;
}

// create dinosaur movement by using frames[]
function displayDinosaur() {
    push();
    scale(0.5);
    //makeDinosaur();
    framesIndex = frameCount % 4; // frameIndex keeps track with the framecount
    image(frames[framesIndex], t, y + 100);
    pop();
}

// give dinosaur speed
function moveDinosaur() {
    this.x += this.speed;
}

function AddNewDinosaur() { 
// With a very tiny probability, add new dinosaur to the end
    var newDinoLikelihood = 0.7; 
    if (random(0,1) < newDinoLikelihood) {
        dino.push(makeDinosaur(width));
    }
}

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

// call function
function draw() {
    background(236, 163, 130, 200);
    makeTerrain();
    makeSky();
    makeStar();
    makeStar();
    UpdateAndDisplayDinosaur();
        AddNewDinosaur();
        displayDinosaur();
}

For this project, I had a concept of creating animation-like short clip of running away, and therefore I captured a GIF from found source and broken into five different images, and then created the foreground and background using the noise() function, and the different dimensions have a changing gradient and opacity based off of the frameCount. Unfortunately the results were not as good as I expected, and I struggled a bit to figure out the objects’ properties and creating the constant movement. Below is a sketch that I have, and I hope to make some other alterations more as I delve more into the concepts.

hyt-Looking-Outwards-10: Chris Sugrue

Chris Sugrue is an audiovisual artist, experimental designer, programmer and educator. Coincidentally, the eye-tracking assignment that we did last week was in fact developed by her as well — an augmented smart device that allows drawing and writing through eye movements.

One of my favorite artworks of hers is Delicate Boundaries (2007), an interactive installation that dissolves the boundary between digital flat screens and physical space, specifically using human body as a “medium” to explore our relationship between these spaces. She created projections of tiny bugs that are able to climb from the screens onto your arms and hands. In a way, the illusory projection confuses our sense of virtuality and reality.

From a technical perspective, the project was written in openFrameworks on C++ platform, as well as incorporating the use of digital projector, video camera, and infrared lightings in order to detect human movements. I think these interactive installations are very intriguing and informative and I hope to reference these artworks into my own practice.

Press converage of the artist and project: https://news.gestalten.com/news/delicate-boundaries

More on Chris Sugrue’s website: http://csugrue.com/

karinac-LookingOutwards-10

The Carnegie Museum of Natural History has a door which opens up to the section of mystery.  Each time a person opens that door, an animal is seemingly holographically displayed in a room, along with its species name and the sound it produces.

A woman named Caroline Record was at the forefront of this project. The creation of the section of mystery encompassed four different phases: design, media collection, creating software, and fabrication.  The design phase consisted of simply designing a space as well as incorporated a glass that created the holographic effect. After, Record and her team collected images of 30 different species using a 3-D scanner, in which she was able to use to reproduce models of the animals featured in the exhibit. Then, Record designed her own software that allowed the computer to sense when the doors open and closed, switching out the animals so that each time the door opens, a different animal is shown inside. While coding, Record was able to fix more of the lighting and sound problems to generate an even more realistic effect of the animal displayed.  I am interested in the design process behind the section of mystery since I actually had the opportunity to see it just about a week ago.

yushano_Project 10

sketch

var choice = [];
var buildings = [];
var trees = [];
var cars = [];
var terrainSpeed = 0.0005;
var terrainDetail = 0.005;
 


function setup() {
    createCanvas(480, 240); 
    
    // create an initial collection of buildings
    for (var i = 0; i < 5; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
    frameRate(10);
}

function draw() {
    background(205,233,233); 


    // display the background
    stroke(0);
    strokeWeight(1);
    drawMountain();
    displayHorizon();
    

    // draw objects
    // Buildings
    updateAndDisplayBuildings();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability(); 
    // Trees
    updateAndDisplayTrees();
    removeTreesThatHaveSlippedOutOfView();
    addNewTreesWithSomeRandomProbability();
    // Cars
    updateAndDisplayCars();
    removeCarsThatHaveSlippedOutOfView();
    addNewCarsWithSomeRandomProbability();


    // snow
    drawSnow();

    // window frame
    strokeWeight(40);
    stroke(230);
    line(0,0,width,0);
    line(0,0,0,height);
    line(0,height,width,height);
    line(width,0,width,height);
}

function drawMountain() {
    fill(246,255,223); 
    beginShape(); 
    vertex(0, 200);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 30, 200);
        vertex(x, y);    
    }
    vertex(width, 200);   
    endShape();
}

function drawSnow() {
    var xS = 10;
    var yS;
    for (var i=0; i< 50; i++) {
        yS = 0;
        for (var j=0; j< 25; j++){
            fill(255);
            noStroke();
            ellipse(xS, yS, 5);
            yS += random(5,20);
        }
        xS += random(8,25);    
    }
}

    

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


function removeBuildingsThatHaveSlippedOutOfView() {
    var buildingsToKeep = [];
    for (var i = 0; i < buildings.length; i++){
        if (buildings[i].x + buildings[i].breadth > 0) {
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep; // remember the surviving buildings
}


function addNewBuildingsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newBuildingLikelihood = 0.02; 
    if (random(0,1) < newBuildingLikelihood) {
        buildings.push(makeBuilding(width));
    }
}


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

// draw the building and some windows
function buildingDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(255,255,0); 
    stroke(0); 
    push();
    translate(this.x, height - 40);
    rect(0, -bHeight, this.breadth, bHeight);
    stroke(200); 
    var wGap = this.breadth/16;
    var xW = this.breadth/16;
    //draw the windows
    for (var j=0; j < 5; j++) {
        for (var i = 0; i < this.nFloors; i++) {
            fill(153,204,255);
            stroke(102,178,255);
            rect(xW, -15 - (i * floorHeight), wGap*2 , 10);
        }
        xW += wGap*3;
    }
    pop();
}


function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -5.0,
                nFloors: round(random(3,8)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}

// DRAW THE CHRISTMAS TREE
function updateAndDisplayTrees() {
    // Update the tree's positions, and display them.
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
    }
}


function removeTreesThatHaveSlippedOutOfView() {
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x + trees[i].breadth > 0) {
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep; // remember the current trees
}


function addNewTreesWithSomeRandomProbability() {
    // With a very tiny probability, add a new tree to the end.
    var newTreeLikelihood = 0.03; 
    if (random(0,1) < newTreeLikelihood) {
        trees.push(makeTree(width));
    }
}


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

// draw the tree and some ornaments
function treeDisplay() { 
    stroke(0); 
    push();
    translate(this.x, 0-this.treeH/3);
    fill(0,102,51)
    triangle(0, height-40, this.breadth/2, height-this.treeH-80, this.breadth, height-40); 
    fill(108,22,22)
    rect(this.breadth/2-10, height-40, 20, this.treeH/3);
    var x0 = this.breadth/6;
    for (var i=0; i<5; i++){
        fill(255,0,0);
        ellipse(x0, height-40-5, 6);
        x0 += this.breadth/6;
    }
    pop();
}


function makeTree(birthLocationX) {
    var tree = {x: birthLocationX,
                breadth: 50,
                speed: -5.0,
                treeH: round(random(30,80)),
                move: treeMove,
                display: treeDisplay}
    return tree;
}

// DRAW VEHICLES
function updateAndDisplayCars() {
    // Update the car's positions, and display them.
    for (var i = 0; i < cars.length; i++){
        cars[i].move();
        cars[i].display();
    }
}


function removeCarsThatHaveSlippedOutOfView() {
    var carsToKeep = [];
    for (var i = 0; i < cars.length; i++){
        if (cars[i].x + cars[i].breadth > 0) {
            carsToKeep.push(cars[i]);
        }
    }
    cars = carsToKeep; // remember the current cars
}


function addNewCarsWithSomeRandomProbability() {
    // With a very tiny probability, add a new car to the end.
    var newCarLikelihood = 0.02; 
    if (random(0,1) < newCarLikelihood) {
        cars.push(makeCar(width));
    }
}


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

// draw the car
function carDisplay() {
    stroke(0); 
    push();
    translate(this.x, 0);
    fill(180)
    rect(0, height-40-this.carWid/6, this.carWid, this.carWid/6);
    rect(this.carWid/4, height-40-this.carWid/30*11, this.carWid/5*3, this.carWid/5); 
    ellipse(this.carWid/6, height-40, this.carWid/6);
    ellipse(this.carWid/6*5, height-40, this.carWid/6);
    
    
    pop();
}


function makeCar(birthLocationX) {
    var car = {x: birthLocationX,
                breadth: 50,
                speed: -5.0,
                carWid: round(random(30,50)),
                move: carMove,
                display: carDisplay}
    return car;
}


// Draw the soil 
function displayHorizon(){
    stroke(0);
    line (0,height-50, width, height-50); 
    fill(132, 75,47);
    rect (0, height-50, width, 50);
}

So, I started from the example code that professor provided for us. I tried to understand how all the things work. Then, I added more elements into the landscape. First, I added the mountain landscape in the background. Then, I change the orientations of the windows in the house. Then, I added the Christmas trees into the scene. Next, I added vehicles- cars to make the picture more fun. At last, I was inspired by the movie “The Power of Ten”. So, I give the animation a picture frame, making it look like people watching outside of a window. Also, I simulated the feeling of snowing to add more fun.

Hannahk2-LookingOutwards-10

The project I chose for this week is Camille Utterback’s “Dances of the Sacred and Profane”, an hour-long dance and computer generated video collaborative work shown at the Cowell Theater in San Francisco. The project is inspired by the music and art of the impressionist period, and mimics timing, memory, and angles of dancers using a motion graphics projection and real-time particle system. Camille manipulates the dancers movements on screen using onstage cameras projected onto large screens behind the dancers. I think this project is ambitious and extremely successful because the projected and manipulated graphics aesthetically augment and play with the details of the reflected choreography. I really admire the pure viscerality in the concept and the artwork, and the painterly quality of the art. It really does a convincing job of bringing me back to the impressionist era. Camille is an incredibly successful and internationally acclaimed artist and pioneer in digital and interactive art. Her work explores the aesthetic and experimental possibilities of connecting computational systems to human bodies, and has been displayed in galleries, festivals, and museums internationally. She is currently an assistant professor in Art at Stanford University, and a co-director of the Stanford Graduate Design program. She has a BA in Art from Williams College, and a Masters from NYU’s Tisch School of the Arts.

Link to the work: http://camilleutterback.com/projects/dances-of-the-sacred-and-profane/

 

Dances of the Sacred & Profane from Camille Utterback on Vimeo.

ashleyc1-Section C-Project-10-Landscape

sketch

//Ashley Chan
//Section C
//ashleyc1@andrew.cmu.edu
//Project-10-Landscape

var flowers = [];

var boatX = 440;
var boatY = 280;
var floatHeight;


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

    // create an initial collection of buildings
    for (var i = 0; i < 10; i++){

        var rx = random(width);
        var ry = random(height);

        flowers[i] = makeFlower(rx, ry);
    }

    frameRate(10);

}
 
function draw() {
    background(252, 220, 255);

    drawMountains();
    drawWater();
    drawBoat();

    
    displayHorizon();

    updateAndDisplayFlowers();
    removeFlowersThatHaveSlippedOutOfView();
    addNewFlowersWithSomeRandomProbability(); 

    
}

function updateAndDisplayFlowers(){
    // Update the flower's positions, and display them.
    for (var i = 0; i < flowers.length; i++){

        flowers[i].move();
        flowers[i].display();
    }
}

function removeFlowersThatHaveSlippedOutOfView(){

    var flowersToKeep = [];
    
    for (var i = 0; i < flowers.length; i++){

        if (flowers[i].x + flowers[i].stemThickness > 0) {

            flowersToKeep.push(flowers[i]);
        
        }
    }

    flowers = flowersToKeep; // remember the surviving flowers
}


function addNewFlowersWithSomeRandomProbability() {

    // With a very tiny probability, add a new flower to the end.
    var newFlowerLikelihood = 0.01; 

    if (random(0,1) < newFlowerLikelihood) {

        flowers.push(makeFlower(width));
    }
}


// method to update position of flower every frame
function flowerMove() {
    this.x += this.speed;
    this.y += this.speed;

}
    

// draw the flower and some windows
function flowerDisplay() {

    var floorHeight = -5;
    var stemHeight = this.nFloors * floorHeight; 

    push();
    translate(this.x, height - this.offset);
    
    //draw stems
       fill(210);
       rect(0, 0, this.stemThickness, stemHeight);

       translate(this.stemThickness/2, stemHeight);
        //draw flowers here
        for (var i = 0; i < 100; i++) {

            var g = random(0, 100);
            var b = random(0, 100);

            noStroke();
            fill(206, g, b);
            ellipse(0 , 10, 5, 30);
            rotate(PI/5);

            } 

    pop();
}


function makeFlower(birthLocationX, birthLocationY) {
    var flwr = {x: birthLocationX, 
                y: birthLocationY,
                floatHeight: random(10, 100),
                stemThickness: 5,
                speed: -1.0,
                nFloors: round(random(5, 10)),
                offset: random(10, 40), //allows stems to be drawn at various points
                move: flowerMove,
                display: flowerDisplay}

    return flwr;
}

//horizon that flowers are on
function displayHorizon(){
    noStroke(0);
    fill(81, 64, 137);
    rect(0, height - 100, width, height - 100); 
}


function drawWater() {

    var waterSpeed = 0.00009;
    var waterDetail = 0.0005;

    beginShape(); 

    fill(209, 211, 255);
    noStroke();
   
    for (var xWater = 0; xWater < width; xWater++) {

        var tWater = (xWater * waterDetail) + (millis() * waterSpeed);
        var yWater = map(noise(tWater), 0,1, 180, 280);
        vertex(xWater, yWater); 

        //make it draw to edge of canvas
        vertex(0, height);
        vertex(width, height);

    }

    endShape();

}

function drawMountains() {

    var mountainSpeed = 0.0005;
    var mountainDetail = 0.008;

    //Background Mountains
    beginShape(); 

    fill(101, 101, 202, 150);
    noStroke();
   
    for (var xMount = 0; xMount < width; xMount++) {

        var tMount = (xMount * mountainDetail) + (millis() * mountainSpeed);
        var yMount = map(noise(tMount), 0,1, 20, 100);
        vertex(xMount, yMount); 
        vertex(0, height);
        vertex(width, height);


    }

    //foreground mountains
    endShape();
    beginShape(); 

    fill(204, 204, 255, 150);
    noStroke();
   
    for (var xMount = 0; xMount < width; xMount++) {

        var tMount = (xMount * mountainDetail) + (millis() * mountainSpeed);
        var yMount = map(noise(tMount), 0,1, 80, 180);
        vertex(xMount, yMount); 
        vertex(0, height);
        vertex(width, height);

        //stagger mountain edges
        mountainDetail = .01;
    }

    endShape();

}


function drawBoat() {

    //post and sail
    stroke(255);
    strokeWeight(2);
    fill(255);
    line(boatX, boatY, boatX, boatY - 50);
    triangle(boatX, boatY - 50, boatX + 30, boatY -10, boatX, boatY - 5);

    fill(153, 51, 0);
    noStroke();
    arc(boatX, boatY, 80, 50, TWO_PI, PI);

    boatX -= 1;

    //var constrainY = constrain(boatY, 180, 280); 

    //reset boatX so it can repeat when it goes over edge of canvas
    if (boatX < -40) {

        boatX = width;
    }
}

For this project, I wanted to create a mountainscape because I find those peaceful to look at especially when going through the terrible stress of school in general. My image probably could’ve been pushed further but I had a lot of difficulty understanding what characteristics could automatically be defined within an objet and how those elements interacted with one another so just getting my landscape to this point was a success for me.

 


//Ashley Chan
//Section C
//ashleyc1@andrew.cmu.edu
//Project-10-Landscape

var flowers = [];

var boatX = 440;
var boatY = 280;
var floatHeight;


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

    // create an initial collection of buildings
    for (var i = 0; i < 10; i++){

        var rx = random(width);
        var ry = random(height);

        flowers[i] = makeFlower(rx, ry);
    }

    frameRate(10);

}
 
function draw() {
    background(252, 220, 255);

    drawMountains();
    drawWater();
    drawBoat();

    
    displayHorizon();

    updateAndDisplayFlowers();
    removeFlowersThatHaveSlippedOutOfView();
    addNewFlowersWithSomeRandomProbability(); 

    
}

function updateAndDisplayFlowers(){
    // Update the flower's positions, and display them.
    for (var i = 0; i < flowers.length; i++){

        flowers[i].move();
        flowers[i].display();
    }
}

function removeFlowersThatHaveSlippedOutOfView(){

    var flowersToKeep = [];
    
    for (var i = 0; i < flowers.length; i++){

        if (flowers[i].x + flowers[i].stemThickness > 0) {

            flowersToKeep.push(flowers[i]);
        
        }
    }

    flowers = flowersToKeep; // remember the surviving flowers
}


function addNewFlowersWithSomeRandomProbability() {

    // With a very tiny probability, add a new flower to the end.
    var newFlowerLikelihood = 0.01; 

    if (random(0,1) < newFlowerLikelihood) {

        flowers.push(makeFlower(width));
    }
}


// method to update position of flower every frame
function flowerMove() {
    this.x += this.speed;
    this.y += this.speed;

}
    

// draw the flower and some windows
function flowerDisplay() {

    var floorHeight = -5;
    var stemHeight = this.nFloors * floorHeight; 

    push();
    translate(this.x, height - this.offset);
    
    //draw stems
       fill(210);
       rect(0, 0, this.stemThickness, stemHeight);

       translate(this.stemThickness/2, stemHeight);
        //draw flowers here
        for (var i = 0; i < 100; i++) {

            var g = random(0, 100);
            var b = random(0, 100);

            noStroke();
            fill(206, g, b);
            ellipse(0 , 10, 5, 30);
            rotate(PI/5);

            } 

    pop();
}


function makeFlower(birthLocationX, birthLocationY) {
    var flwr = {x: birthLocationX, 
                y: birthLocationY,
                floatHeight: random(10, 100),
                stemThickness: 5,
                speed: -1.0,
                nFloors: round(random(5, 10)),
                offset: random(10, 40), //allows stems to be drawn at various points
                move: flowerMove,
                display: flowerDisplay}

    return flwr;
}

//horizon that flowers are on
function displayHorizon(){
    noStroke(0);
    fill(81, 64, 137);
    rect(0, height - 100, width, height - 100); 
}


function drawWater() {

    var waterSpeed = 0.00009;
    var waterDetail = 0.0005;

    beginShape(); 

    fill(209, 211, 255);
    noStroke();
   
    for (var xWater = 0; xWater < width; xWater++) {

        var tWater = (xWater * waterDetail) + (millis() * waterSpeed);
        var yWater = map(noise(tWater), 0,1, 180, 280);
        vertex(xWater, yWater); 

        //make it draw to edge of canvas
        vertex(0, height);
        vertex(width, height);

    }

    endShape();

}

function drawMountains() {

    var mountainSpeed = 0.0005;
    var mountainDetail = 0.008;

    //Background Mountains
    beginShape(); 

    fill(101, 101, 202, 150);
    noStroke();
   
    for (var xMount = 0; xMount < width; xMount++) {

        var tMount = (xMount * mountainDetail) + (millis() * mountainSpeed);
        var yMount = map(noise(tMount), 0,1, 20, 100);
        vertex(xMount, yMount); 
        vertex(0, height);
        vertex(width, height);


    }

    //foreground mountains
    endShape();
    beginShape(); 

    fill(204, 204, 255, 150);
    noStroke();
   
    for (var xMount = 0; xMount < width; xMount++) {

        var tMount = (xMount * mountainDetail) + (millis() * mountainSpeed);
        var yMount = map(noise(tMount), 0,1, 80, 180);
        vertex(xMount, yMount); 
        vertex(0, height);
        vertex(width, height);

        //stagger mountain edges
        mountainDetail = .01;
    }

    endShape();

}


function drawBoat() {

    //post and sail
    stroke(255);
    strokeWeight(2);
    fill(255);
    line(boatX, boatY, boatX, boatY - 50);
    triangle(boatX, boatY - 50, boatX + 30, boatY -10, boatX, boatY - 5);

    fill(153, 51, 0);
    noStroke();
    arc(boatX, boatY, 80, 50, TWO_PI, PI);

    boatX -= 1;

    //var constrainY = constrain(boatY, 180, 280); 

    //reset boatX so it can repeat when it goes over edge of canvas
    if (boatX < -40) {

        boatX = width;
    }
}

 

ikrsek-SectionC-Project-10-“When Pigs Fly”

“When Pigs Fly”

sketch

//Isadora Krsek
//Ikrsek@andrew.cmu.edu
//Section C
//Project 10: Landscape
//"When Pigs Fly"

var morningStars = [];
var terrainZoom = 0.0099;
var waterZoom = 0.0005;
var terrainSpeed = 0.0004;
var mistZoom = 0.004;

var pigsThatFly = []; // An array to store the images
var pigX;  // The last X location of the character
var pigY;  // The last Y location of the character
var targetX;     // The X goal, from the user's click
var targetY;     // The Y goal, from the user's click
var track = (0); //to keep track fo index in array "pigsThatFly"
var theX; //the current x location of character
var theY; //the current y location of character
 

function preload(){
    // These URLs are for the individual walk cycle images,
    // stored in the imgur album http://imgur.com/a/85DTu
    var filenames = [];
    filenames[0] = "https://i.imgur.com/yHI2wXX.png";
    filenames[1] = "https://i.imgur.com/yHI2wXX.png"
    filenames[2] = "https://i.imgur.com/Z5T1eCI.png";
    filenames[3] = "https://i.imgur.com/xPr6ucE.png";
    filenames[4] = "https://i.imgur.com/knjfg9E.png";
    filenames[5] = "https://i.imgur.com/uh2mgbF.png";
    filenames[6] = "https://i.imgur.com/k76ZBzT.png";
    filenames[7] = "https://i.imgur.com/nfG9mkZ.png";
    filenames[8] = "https://i.imgur.com/UXGbXhS.png";
    filenames[9] = "https://i.imgur.com/UXGbXhS.png";
    filenames[10] = "https://i.imgur.com/yHI2wXX.png";
    
    // PUT CODE HERE TO LOAD THE IMAGES INTO THE frames ARRAY,
    for(var z=0; z < filenames.length; z++) {
    pigsThatFly.push(loadImage(filenames[z]));
    }
}

function setup() {
    createCanvas(640, 240);
    imageMode(CENTER);
    frameRate(35);//natural rate 
  
    // Initialize the character and target positions. 
    pigX = width / 2; 
    pigY = height / 2; 
    targetX = pigX;
    targetY = pigY;
   
    //# which allows for new star to appear
    StarProb = 20; 

  //morningStars inital amount 
    for (var i = 0; i < 22; i++) {
      morningStars[i] = new Star(random(width));
    }  
}


function draw() {
    background(255);
    noStroke();
    
    gradientBack();
    drawStars();
    drawMount();
    drawWater();
    drawPig();
}


function drawStars(){
        //when random # is smaller than probability then new start occurs  
  if (StarProb > random(0,100)) {
    morningStars.push(new Star(width));
  }

  for (var i = 0; i < morningStars.length; i++) {
    morningStars[i].move(); //update star array
    morningStars[i].display(); 

    if (morningStars[i].x < 0) { //if star goes out of boundary, remove it
      morningStars.splice(i, 1);
    }    
  }
}

function drawMount(){
    //first mountain
    push();
    fill(0, 180);
    beginShape(); 
    noStroke();
    for (var x = 0; x < width; x++) {
        var t = (x * terrainZoom) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, height/2, height*3/4);
        vertex(x, y); 
    }
    vertex(width, height);
    vertex(0,height);
    endShape();
    pop();
}

function drawWater(){
  //water
    //water main
    push();
    fill(173,216,255,100); 

    beginShape(); 
    noStroke();
    for (var x = 0; x < width; x++) {
        var t = (x * waterZoom) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, height/2, height*3/4);
        vertex(x+.2, y+70); 
    }
    vertex(width, height);
    vertex(0,height);
    endShape();
    pop();
    //water layers
    fill(173,216,255,115); 
    beginShape(); 
    for (var a = 0;  a < width; a++) {
        var b = (a * waterZoom) + (millis() * terrainSpeed);
        var c = map(noise(b), 0,1, height/2, height*3/4);
        vertex(a+.2, c+75); 
    }
    vertex(width, height);
    vertex(0,height);
    endShape();
    pop();
        beginShape(); 
    for (var d = 0;  d < width; d++) {
        var e = (d * waterZoom) + (millis() * terrainSpeed);
        var f = map(noise(e), 0,1, height/2, height*3/4);
        vertex(d+.2, f+80); 
    }
    vertex(width, height);
    vertex(0,height);
    endShape();
    pop();
    
    
    

}

function drawPig(){
      // PUT CODE HERE TO MOVE THE CHARACTER TOWARDS THE TARGET
    var dx = targetX - pigX;
    var dy = targetY - pigY;
    var distanceFromCharacterToTarget = sqrt(dx*dx + dy*dy);
    //control how character moves toward target 
    theX = lerp(pigX,targetX,.15);
    theY = lerp(pigY,targetY,.15);
    //keep looping through the images continuously/seamlessly 
    if (track >= pigsThatFly.length){
      track = 0; 
    }
    
    // PUT CODE HERE TO DISPLAY THE CHARACTER, CYCLING THROUGH THE FRAMES.
    // WHEN YOU GET THAT WORKING, FLIP THE IMAGE IF THE CHARACTER'S HEADING LEFT. 
   //if the current x location is smaller than the last x location, it will be walking left 
    if (theX < pigX){
      push();
      scale(-1,1);//flip image 
      image(pigsThatFly[track],theX*-1,theY); //you multiply the X-coordinate by -1 so it walks in the right direction 
      pop();
    }
    //otherwise if it's larger, it will be walking right
    else if (theX >= pigX){
      push();
      image(pigsThatFly[track],theX,theY);
      pop();
    }
    
    //re-fresh values of pigX & pigY (which keep track of last place of character)
    pigX = theX;
    pigY = theY;
    
    //cycle through the walking images 
    track = track + 1
    
    
}

function gradientBack(){
  //Create gradient color for the background
    topGrad = color(117, 118, 195); //top gradient 
    bottomGrad = color(250, 207, 194); //bottom gradient 

    //gradient color steps
    var gradientSteps = (height);
    var gradientSteps2 = (30);

    for (var i = 0; i <= gradientSteps; i++) { //for each gradient strip
      fill(lerpColor(topGrad, bottomGrad, i/height)); //fill color inerpolation
      rect(0, (i/height * height) - (1/height * height), width, 1/height * height); //use the color draw boxes
    }
    
    //other gradient 
    /*
    for (var q = 0; q <= gradientSteps2; q++) { //for each gradient strip
      var sizeHeight = ((1/height * height)/2);
      noStroke();
      fill(lerpColor(topGrad2, bottomGrad2, q/gradientSteps2),80); //fill color inerpolation
      rect(0, (q/height * height) - sizeHeight +195, width, sizeHeight); //use the color draw boxes
      
      fill(lerpColor(topGrad3, topGrad2, q/gradientSteps2),80);
      rect(0, (q/height * height) - sizeHeight+164, width, sizeHeight);
    }  
    */
}

function mousePressed() {
    targetX = mouseX;
    targetY = mouseY;
}

//generate morningStars
function Star(xLocation){
  var randoOpa = random(80,180); //have the brightness of stars vary 
  var randoSize = random(.5,2); //have star size vary 
  
  this.x = xLocation;//controlled above by random width 
  this.y = random(1, 180); //range for stars to appear
  this.speed = (-1.5); //speed       

  this.move = function() {
  	  this.x += this.speed; //move the stars
  }

  this.display = function() {
	//draw the stars here 
	  fill(255,255,255,randoOpa);
	  ellipse(this.x, this.y,randoSize,randoSize);
  }
}

This time around I wanted to do something a little more fun than usual. I had some trouble deciding on what I wanted to do, but eventually decided to just do a pig flying across the water in the early early morning (early enough when you can still see stars). The reason why is because I was inspired by the phrase “when pigs fly”, but not in the traditional sense of the phrase. I was more interested in where pigs would go and what they would do when they fly – why would pigs fly? So I ended up deciding a pig would take the time to go on an early morning flight, beneath the glow of the stars at dawn.
I wanted to do something humorous and beautiful and this is the result.

Also, fun fact:
If you click on the screen, the pig will move to your mouse location.

Here is a picture of the original sketch.

agusman-LookingOutwards-10

Reverb
Reverb Video Documentation

REVERB is a project by new media artist and robot tamer Madeline Gannon that bridges the virtual and physical contexts of fabrication and wearable design.

This 3D modeling environment allows the artist or designer to guide the movement of a 3D asset across the curvature of the body, leaving a digital trace that is then 3D printed and transformed into wearable jewelry. The gestures of the artist’s hand are what the 3D asset uses as a guiding path as it leaves it’s trace. Madeline refers to this method as a sort of digital chronomorphology, an offshoot of chronophotography- which is a composite recording of an object’s movement.

The pipeline of Madeline’s chronomorphological process begins with a depth sensor (e.g. Kinect) that records the depth data of the person who will be fitted for the wearable model. A point cloud is then generated and imported into a 3D workspace. Once positioned in there, the same depth sensor will detect the motion of the artist’s hands as they move around, forming the path on which a small 3D asset moves. Finally, the generated chronomorphological 3D model is printed and worn by the person.

Reverb is one of Madeline’s most famous and reputed pieces, covered by virtually every important technology magazine and conference in America. Other successful works include Mimus, a whimsical robot with childlike wonder and curiosity for other humans, as well as Tactum, another exploration in 3D printed wearables that could be custom fit and distributed online. While her education background is predominantly in architecture, she has studied computational design, art and robotics in more recent years. She is currently attending Carnegie Mellon and will be graduating in May with a PhD in computational design.