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

abradbur – Looking Outwards – 10

Entangled by Camille Utterback (2015)

I was really drawn to this piece because of the magical imagery behind it. The images produced from projections onto three diaphanous screens give both a sense of volume and depth as well as a sort of ghostly feeling at the same time. The idea of two people connecting on other sides of the screen to make a collaborative piece of art is also very poetic. Since the images produced appear on both sides and are affected by both participants, no one has total control.

Camille Utterback has a BA in art from Williams College, and a Masters from The Interactive Telecommunications Program at New York University’s Tisch School of the Arts. She says that her art tries to bring the focus back to the richness of the human body in contrast to a world that is consistently digitized. Her work “explores the aesthetic and experiential possibilities of linking computational systems to human movement and physicality in visually layered ways.”(Bio)

Here is her website.

Here is the page with this particular work.

LookingOutwards10-jooheek

Heather Kelley – Perfect Plum

Website: http://www.perfectplum.com/

Perfect Plum is the design concern of Heather Kelley, a veteran game designer, digital artist and media curator. It focuses on under-explored aesthetic experiences and sensory interactions (smells, sounds, touch, etc.). Heather Kelley has an extensive career in the gaming industry, as she has contributed in the design and production of AAA next-gen console games, interactive smart toys, handheld games, research games, and web communities for girls. She was named one of the five most powerful women in gaming by Inc. magazine in 2013. In 2011, she was named one of the most influential women in technology by Fast Company.

One of her projects that I thought was interesting was SUPERHYPERCUBE, a VR game that was the launch title for PlayStationVR. It is an intuitive shape-matching gameplay where you control a group of cubes, rotating it to fit through a hole in a series of floating walls that are constantly moving toward you. As you keep making goals, your cube gets bigger, which makes you lean around it to see the hole coming, and makes you think quickly about what moves to make to make it fit. I thought this game was very intuitive because it makes you really think about how to play the game. It was also very interesting because it is a virtual reality game, which I personally always find very interesting and exciting. I also like the aesthetics of this game where it doesn’t use a real life setting, but a made up, designed space. Of course it could work as a 2D game as well, but because it is 3D and in virtual reality, it makes the game more interesting and more intuitive by making you use a lot of your senses.

jooheek-Project10-Generative Landscape

sketch

//JooHee Kim
//Section E
//jooheek@andrew.cmu.edu
//Project-10

var animals = [];
var mountainSpeed1 = 0.00005;
var mountainDetail1 = 0.005;
var mountainSpeed2 = 0.0001;
var mountainDetail2 = 0.003;
var mountainSpeed3 = 0.0002;
var mountainDetail3 = 0.001;

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

    //creates 5 animals at start
    for (var i = 0; i < 5; i++){
        var rx = random(width);
        animals[i] = makeAnimals(rx);
    }

    frameRate(30);
}


function draw() {
    background(210, 240, 255); 

    makeMountains();
    makeOasis();
    updateAndDisplayAnimals();
    removeAnimals();
    addNewRandomAnimals(); 

}

function makeMountains() {
    //first farthest mountain
    noStroke();
    fill(125, 185, 130);
    beginShape(); 
    for (var m1 = 0; m1 < width; m1++) {
        var mountainOneSpeed = (m1 * mountainDetail1) + (millis() * mountainSpeed1);
        var mountainPeaksOne = map(noise(mountainOneSpeed), 0, 1, width/2, height/4);
        vertex(m1, mountainPeaksOne); 
    }

    vertex(width,height);
    vertex(0, height);
    endShape();

    //second mountain
    fill(155, 215, 140);
    beginShape(); 
    for (var m2 = 0; m2 < width; m2++) {
        var mountainTwoSpeed = (m2 * mountainDetail2) + (millis() * mountainSpeed2);
        var mountainPeaksTwo = map(noise(mountainTwoSpeed), 0, 1, width/2 + 10, height/4 + 30);
        vertex(m2, mountainPeaksTwo); 
    }

    vertex(width,height);
    vertex(0, height);
    endShape();

    //third closest mountain
    fill(185, 245, 150);
    beginShape(); 
    for (var m3 = 0; m3 < width; m3++) {
        var mountainThreeSpeed = (m3 * mountainDetail3) + (millis() * mountainSpeed3);
        var mountainPeaksThree = map(noise(mountainThreeSpeed), 0, 1, width/2 + 20, height/4 + 60);
        vertex(m3, mountainPeaksThree); 
    }

    vertex(width,height);
    vertex(0, height);
    endShape();

}


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


function removeAnimals(){
    var animalsToKeep = [];
    for (var i = 0; i < animals.length; i++){
        if (animals[i].x + animals[i].breadth > 0) {
            animalsToKeep.push(animals[i]);
        }
    }
    animals = animalsToKeep;
}


function addNewRandomAnimals() {

    var newAnimals = 0.009; 
    if (random(0,1) < newAnimals) {
        animals.push(makeAnimals(width));
    }
}

function animalsMove() {
    this.x += this.speed;
}
    
function animalsDisplay() {
    noStroke(); 
    push();
    translate(this.x, height - height/4);
    //shadow of animals
    fill(100, 100, 100, 60);
    ellipse(this.size/4, this.size*3/4, 150, 30);
    //the butts of the animals
    fill(this.color); 
    ellipse(0, 0, this.size, this.size);
    ellipse(this.size/2, 0, this.size, this.size);
    //the tails of the animals
    fill(50);
    ellipse(this.size/4, -this.size/2+this.size/4, this.size/8, this.size/4);
    //the legs of the animals
    fill(this.color);
    quad(-this.size/4-5, 0, -this.size/8-5, this.size*3/4, this.size/8-5, this.size*3/4, this.size/4-5, 0);
    quad(this.size/2-(this.size/4-5), 0, this.size/2-(this.size/8), this.size*3/4, this.size/2+(this.size/8), this.size*3/4, this.size/2+(this.size/4+5), 0);
    pop();
}


function makeAnimals(birth) {
    var ANIMALS = {
                x: birth,
                breadth: 50,
                size: 100,
                speed: -7.0,
                move: animalsMove,
                display: animalsDisplay,
                color: [random(50, 255), random(50, 255), random(50, 255)]
            }

    return ANIMALS;
}

function makeOasis() {
    fill(120, 170, 245);
    rect(0, height/2+80, width, 100);

}

I got inspiration for this project from the Lion King, where the animals drink from a pond or lake. I wanted to use this project to show animals drinking from a lake as well while the background (mountains) is moving. There are three mountains that vary in color to show depth and there are animals in the foreground drinking from the water. This is the picture that gave me the inspiration from the movie.

LookingOutwards-10-Chickoff

Swing is a video piece created by Yael Kanarek who is an Israeli American new media artist. She is based in New York City, where she was born, while having been raised in Israel. Returning to NYC for art school in 1991, she began her path into the internet art scene, while also having founded Upgrade!, a network of international artists concerned with combining activism with art and technology.

This artwork in particular is a screen capture of a computational video. As Kanarek states, “In this piece, a digital clock is used as the compositional device. The work runs live on a computer and is played by software that syncs video and audio with the computer’s internal clock. Thus, actual time is represented by the audiovisual experience on-screen.” More importantly, the children in the video (brothers and friends) discuss the issues of water scarcity in Israel as well as the lack of peace with Syria. Time being integral to such issues, and whether they are dealt with accordingly is incredibly present in this piece—the rhythmic swinging of the boy is the timekeeper.

thlai-Project-10-Landscape

Generative Landscape

I struggled a lot with this project. There were so many little things I wanted to do but didn’t know how to execute. I wanted to create a calming lake and mountains landscape with the sun in the background and used a purple color scheme and gradients to achieve this. The starter code helped me a lot with the clouds. The most difficult part, I think, was creating the reflections in the water – I used the noise() function to create them and used a similar code to the mountains. In the end, I used fog image to spice things up and create atmosphere.

sketch

// Tiffany Lai
// 15-104, Section A
// thlai@andrew.cmu.edu
// Project 10 - Landsape

var clouds = []; // array for clouds
var waterX = []; // array for x position of reflection lines
var waterY = []; // array for y position of reflection lines
var speed1 = 0.0002; // for mountain1
var peaks1 = 0.03; // for mountain1
var speed2 = 0.0005; // for mountain2
var peaks2 = 0.03; // for mountain2
var boatX = 250; // x coordinates of boat
var img; // variable to store fog filter

function preload() {
	img = loadImage("https://i.imgur.com/aoZ4YwF.png"); // fog image
}

function setup() {
	createCanvas(480, 480);
	// initial collection of clouds
	for (var i = 0; i < 5; i++) {
		var rx = random(width);
		clouds[i] = makeClouds(rx);
	}
	for (var i = 0; i < 50; i++) {
		var sparkleX = random(0, width);
		var sparkleY = random(height * 2 / 3, height);
		waterX.push(sparkleX);
		waterY.push(sparkleY);
	}
}

function draw() {
	var num = height; // number of lines for gradient bg
	// gradient background
	for (var i = 0; i < num; i++) {
		strokeWeight(2);
		stroke(100 + 1.2 * i, 50 + i, 100 + 0.7 * i);
		line(0, i, width, i);
	}
	sun(); // draw sun
	updateClouds(); // update and display clouds
	removeClouds(); // remove clouds that have slippsed out of view
	addClouds(); // add new clouds with random probability
	mountain1(); // draw first mountains
	mountain2(); // draw second mountains
	water(); // draw water and reflections
	boat(boatX); // draw boat
	boatX -= 0.5; // boat speed
	if (boatX < -50) { // if boat exits left, make it come in right
		boatX = width;
	}
	image(img, 0, 0, width, height); // load fog
}

function sun() { // sun and rays
	noStroke();
	fill(255, 200);
	ellipse(width / 3, height / 3, 170, 170); // sun
	for (var i = 0; i < 55; i++) { // sun rays
		strokeWeight(1);
		stroke(color(220 + 2 * i, 120 + i, 130 + 1 * i, 100)); // gradient
		noFill();
		ellipse(width / 3, height / 3, 170 + i * i * 0.2, 170 + i * i * 0.2); // distance between circles
	}
}

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

function removeClouds() {
	var keepClouds = [];
	for (var i = 0; i < clouds.length; i++) {
		if (clouds[i].x + clouds[i].breadth > 0) {
			keepClouds.push(clouds[i]);
		}
	}
	clouds = keepClouds;
}

function addClouds() {
	// probability of cloud appearing
	var cloudChance = 0.007;
	if (random(0, 1) < cloudChance) {
		clouds.push(makeClouds(width));
	}
}

function moveClouds() { // speed of clouds
	this.x += this.speed;
}

function displayClouds() {
	fill(255, 50);
	noStroke();
	ellipse(this.x, this.y, this.width, this.height);
	ellipse(this.x + 10, this.y + 10, this.width - 10, this.height - 10);
	ellipse(this.x + 20, this.y - 10, this.width / 2, this.height / 2);
	ellipse(this.x - 20, this.y, this.width - 20, this.height - 10);
}

function makeClouds(cloudX) {
	var cloud = {
		x: cloudX,
		y: random(0, height / 2 - 100),
		speed: random(-1, -0.1),
		width: random(40, 100),
		height: random(20, 50),
		breadth: 50,
		move: moveClouds,
		display: displayClouds,
	}
	return cloud;
}

function mountain1() { // background mountains
	noStroke();
	fill(135, 86, 110);
	beginShape();
	for (var x = 0; x < width; x++) {
		var t = (x * peaks1) + (millis() * speed1);
		var y = map(noise(t), 0, 1, height / 5, height / 2);
		vertex(x, y);
	}
	vertex(width, height);
	vertex(0, height);
	endShape();
}

function mountain2() { // middleground mountains
	// noStroke();
	stroke(70, 63, 86);
	strokeWeight(1);
	// beginShape();
	for (var x = 0; x < width; x++) {
		var t = (x * peaks2) + (millis() * speed2);
		var y = map(noise(t), 0, 2, height / 2, height / 3);
		line(x, 330 + y / 2, x, 330 - y / 2);
	}
}

function water() { // water and reflections
	noStroke();
	fill(170, 120, 126, 100);
	rect(0, height - height / 3, width, height);

	for (var i = 0; i < 15; i++) {
		var t = (i * peaks2) + (millis() * speed2);
		var widthChange = (map(noise(t), 0, 1, 0, 100));
		stroke(255, 70);
		line(waterX[i] - widthChange, waterY[i], waterX[i] + widthChange, waterY[i]);
	}
}

function boat(boatX) { // make boat
	noStroke();
	fill(50, 43, 76);
	triangle(boatX + 31, 367, boatX + 31, 393, boatX + 16, 393);
	triangle(boatX + 33, 374, boatX + 34, 393, boatX + 47, 393);
	quad(boatX + 15, 396, boatX + 23, 405, boatX + 40, 405, boatX + 47, 396);

	stroke(255, 50);
	line(boatX + 15, 405, boatX + 45, 405);
}

Project 10-Chickoff

sketch

//Cora Hickoff
//Section D
//chickoff@andrew.cmu.edu
//Project 10

var terrain = [];

function setup() {

    createCanvas(480, 400); 
    frameRate(13);
    
    // create an initial collection of terrains
    for (var i = 0; i < 10; i++) {
        var rx = random(width);
        //"terrain" is the mountainous 
        //landscape at bottom of screen
        terrain[i] = makeTerrain(rx);
    }
}

function draw() {
    background(190, 140, 20); 
  
    updateAndDisplayTerrain();
    removeTerrainThatHasSlippedOutOfView();
    addNewTerrainWithSomeRandomProbability(); 

    drawTerrain(); 
}

function updateAndDisplayTerrain() {
    // Update the terrain's position, and display them.
    for (var i = 0; i < terrain.length; i++) {
        terrain[i].move();
        terrain[i].display();
    }
}

function removeTerrainThatHasSlippedOutOfView() {

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

function addNewTerrainWithSomeRandomProbability() {
    // With a very high probability, add a new terrain to the end.
    var newTerrainLikelihood = 1; 
    if (random(0,3) < newTerrainLikelihood) {
        terrain.push(makeTerrain(width));
    }
}

// method to update position of terrain every frame
function terrainMove() {
    this.x += this.speed;
}
    
// draw the mountain range
function terrainDisplay() {
    
    var floorHeight = 400;
    var bHeight = this.nFloors * floorHeight; 
    
        fill(154, 176, 119); 
        stroke(210, 164, 54); 
        strokeWeight(random(0,9));
        push();
        translate(this.x, height - 40);

        curveVertex(84,  91);
        curveVertex(68,  19);
        curveVertex(21,  107);
        curveVertex(0, -bHeight);

        stroke(74, 115, 119, 80); 
        strokeWeight(random(0,9));

    for (var i = 0; i < this.nFloors; i++) {

        beginShape();
        curveVertex(5, i * floorHeight);
        curveVertex(floorHeight, 34);
        curveVertex(68,  1);
        curveVertex(21,  107);
        curveVertex(400, 100);
        curveVertex(32, 100);
        endShape();

        beginShape();
        curveVertex(04, i * floorHeight);
        curveVertex(84,  91);
        curveVertex(68,  19);
        curveVertex(21,  107);
        curveVertex(3, 100);
        curveVertex(32, 100);
        endShape();
    }
        pop();

}

function makeTerrain(birthLocationX) {
    var trn = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(2,8)),
                move: terrainMove,
                display: terrainDisplay}
    return trn;
}

function drawTerrain() {

    fill(230, 160, 190);
    
    beginShape(); 
    for (var x = 10; x < width; x++) {
        var t = (x) + (millis() * 40);
        var y = map(noise(t), 0, 30, 10, height);
        vertex(x, y); 
    }
    endShape();

    //moon
    fill(240, 230, 74, 250);
    strokeWeight(random(0,9));
    ellipse(0, 0, width - 1, height - 1);

    //crater 1
    fill(250, 245, 140, 100)
    strokeWeight(random(0,4));
    ellipse(100, 23, 33, 33);

    //crater 1 faded edge
    fill(250, 245, 230, 100)
    strokeWeight(random(0,4));
    ellipse(100, 23, 23, 26);

    //crater 2
    fill(250, 245, 140, 100)
    strokeWeight(random(0,4));
    ellipse(123, 93, 33);

    //crater 3
    fill(250, 245, 230, 78)
    strokeWeight(random(0,4));
    ellipse(23, 53, 53, 46);

    //crater 4
    fill(250, 245, 230, 78)
    strokeWeight(random(0,4));
    ellipse(23, 153, 13, 16);

    //crater 5
    fill(250, 245, 140, 100)
    strokeWeight(random(0,4));
    ellipse(180, 0, 30, 30);

}

When I started this project, I knew that I wanted to create a landscape that involved nature. I wasn’t sure where to go with this until I started thinking about the idea of doing the opposite of a really lush landscape, and create something a bit more dead or barren. When I sketched, I thought about the idea of an asteroid, planet, or even our moon coming a little too close to Earth, enough to hurt the organisms living there.

I knew that to create this uneasy feeling, I’d have to play with color as well as a dizzying/shaky effect, which usually signals that something is wrong, and not everything is as it should be.

jennyzha – project 10

sketch

//Jenny Zhang
//jennyzha@andrew.cmu.edu
//Section D
//Project 10

var bird1;
var bird2;
var bird3;

var bird1X = 500;
var bird1Y = 150;
var bird2X = -200;
var bird2Y = 100;
var bird3X = 650;
var bird3Y = 200;

var birdWidth = 40;
var birdHeight = 30;

var cloud1;
var cloud2;
var cloud3;

var cloud1X = 700;
var cloud1Y = 60;
var cloud2X = 540;
var cloud2Y = 40;
var cloud3X = 700;
var cloud3Y = 60;

var cloudWidth = 40;
var cloudHeight = 30;

function preload() {
	bird1 = loadImage("https://i.imgur.com/nqLPhAm.png");
	bird2 = loadImage("https://i.imgur.com/nqLPhAm.png");
	bird3 = loadImage("https://i.imgur.com/nqLPhAm.png");
	
	cloud1 = loadImage("https://i.imgur.com/rkkaoGb.png");
	cloud2 = loadImage("https://i.imgur.com/rkkaoGb.png");
	cloud3 = loadImage("https://i.imgur.com/rkkaoGb.png");
}

function setup() {
	createCanvas(480,280);
	frameRate(120);
}

function draw(){
	background(248,248,255);
	drawhill();
	drawhill1();
	drawhill2();
	drawbird();
	drawcloud();
}


//draws the hilly background
var terrainSpeed = 0.00095;
var terrainSpeed1 = 0.0008;
var terrainSpeed2 = 0.00065;
var hill = 0.020;

function drawhill() {  
    noStroke();
    fill(154,205,50); 

    beginShape();
        for (x=0; x < width; x++) {
            var t = (x * hill) + (millis() * terrainSpeed);
            var y = map(noise(t), 0, .95, 120, 300);
            vertex(x, y);
            vertex(0, height);
            vertex(width, height);
        }
    endShape();
}

function drawhill1() {  
    noStroke();
    fill(85,107,47); 

    beginShape();
        for (x=0; x < width; x++) {
            var t = (x * hill) + (millis() * terrainSpeed1);
            var y = map(noise(t), 0, .8, 140, 300);
            vertex(x, y);
            vertex(0, height);
            vertex(width, height);
        }
    endShape();
}

function drawhill2() {  
    noStroke();
    fill(0,100,0); 

    beginShape();
        for (x=0; x < width; x++) {
            var t = (x * hill) + (millis() * terrainSpeed2);
            var y = map(noise(t), 0, .65, 160, 300);
            vertex(x, y);
            vertex(0, height);
            vertex(width, height);
        }
    endShape();
}


//draws the birds
function drawbird() {
	image(bird1, bird1X, bird1Y, birdWidth, birdHeight);
	bird1X -= random(1,2);
	bird1Y -= random(-0.5,0.5);

	if (bird1X < -birdWidth) {
		bird1X = 500;
	}

	image(bird2, bird2X, bird2Y, birdWidth, birdHeight);
	bird2X += random(0,0.5);
	bird2Y += random(-0.5,0.5);

	if (bird2X < -birdWidth) {
		bird2X = -100;
	}

	image(bird3, bird3X, bird3Y, birdWidth, birdHeight);
	bird3X -= random(0,2);
	bird3Y -= random(-0.5,0.5);

	if (bird3X < -birdWidth) {
		bird3X = 650;
	}
}

function drawcloud() {
	
	image(cloud1, cloud1X, cloud1Y, cloudWidth, cloudHeight);
	cloud1X -= random(0,2.5);
	cloud1Y -= random(-.25,.25);

	if (cloud1X < -cloudWidth) {
		cloud1X = 690;
	}

	image(cloud2, cloud2X, cloud2Y, cloudWidth, cloudHeight);
	cloud2X -= random(0,2.5);
	cloud2Y -= random(-.25,.25);

	if (cloud2X < -cloudWidth) {
		cloud2X = 530;
	}

	image(cloud3, cloud3X, cloud3Y, cloudWidth, cloudHeight);
	cloud3X -= random(0,2.5);
	cloud3Y -= random(-.25,.25);

	if (cloud3X < -cloudWidth) {
		cloud3X = 600;
	}	
}

With the cold weather coming upon us, I decided to create a spring theme as I begin to miss the warmer weather. Importing pictures from imgur using the preload function for the birds and clouds, I had them come flying across the screen as the code ran. As for the landscape/background, at first, I only had two hills for the terrain, but didn’t think it was enough and added the third layer. The same was true for the birds and clouds. At first I only had the birds, but then decided to import the clouds as well to create a fuller scene. Ultimately using the noise function, while playing with the inputs each time I was able to create a sense of depth.

dayoungl Project -10

sketch

//Sharon Lee
//dayoungl@andrew.cmu.edu
//Section E
//Assignment 10 - Generative Landscape
var terrainSpeed = 0.00015;
var terrainDetail = 0.001;
var parasol = [];
var cBlue = (115,151,232);
var cWhite = (234,238,247);
var x;
var y;
var location;


function preload(){
    imgParasol = loadImage("https://i.imgur.com/9wvs2bI.png");
    airplane = loadImage("https://i.imgur.com/M6sAe2x.png");
    airplane2 = loadImage("https://i.imgur.com/5j9Uq5v.png");
}

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

function addParasols(){
    var a = random(1);
    if (a < 0.03){
        parasol.push(makeParasols(width));
        parasol.push(makeParasols(height));
    }
}

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


function makeParasols(pointX){
    var parasol1 = {x: pointX,
        number: floor(random(1,3)),
        speed: 0.001,
        height: random(0,50), 
        move: moveParasols,
        display: displayParasols}
    return parasol1;
}

function oceanTerrain(){
    //ocean layer-1
    noStroke();
    fill(77,124,191);
    beginShape();
    for (var x = 0; x < width; x++){
       var t = (x * terrainDetail) + (millis() * terrainSpeed);
       var y = map(noise(t), 0, 1, 0, height - 30);
        vertex(x,y);
    }
    curveVertex(width, height);
    curveVertex(0,width);
    endShape(CLOSE);

    //ocean layer-2
    noStroke();
    fill(77,124,191,120);
    for (var x = 0; x < width; x ++){
        var t = (x* terrainDetail * 2) + (millis() * terrainSpeed);
        var y = map(noise(t/2), 0, 1, 10, height - 50);
        vertex(x,y);    
    }
    curveVertex(width, height);
    curveVertex(0,width);
    endShape(CLOSE);
}

function displayParasols(){
    push();
    translate(this.x, this.height);
    for (var i = 0; i < this.number; i++){
        image(imgParasol, random(0, width),random(30,90));
    }
    pop();
}

function setup() {
    createCanvas(480,300);
    for(var i = 0; i < 5; i ++){
        location = random(width);
        parasol[i] = makeParasols(location);
    }
    frameRate(10);
}

function draw() {
    background(228,211,207);
   
    updateParasols();
    addParasols();
    displayParasols();
    moveParasols();
    makeParasols();
    oceanTerrain();

    image(airplane2, mouseX - 80, mouseY - 50);
    push();
    tint(255,128);
    image(airplane, mouseX + 50, mouseY - 150);
    pop();

}

For project 10, I aimed to create a bird-eye-view landscape of a beach. Using the given terrain code, I manipulated it and lower the amount of noise so it resembles the smooth curves of the waves instead of pointy and rough terrain of mountains that the code was originally intended for. I added parasols as the elements to show the panning of the “camera”. I also added in airplane and its shadow just as a fun element users could play around by using their mouse.

dayoungl Looking Outwards – 10

Caroline Sinder’s Nudge Nudge

For this week’s Looking Outwards, we are focusing on women practitioners in the field of computational design. From a list given from the professor, I randomly selected an artist named Caroline Sinders. She introduced herself as many things but among them, I think how she described herself as a machine learning designer and a digital anthropologist was quite interesting. Looking through her website, I realized that a lot of the things she do and experiments with are things that are done frequently in CMU such as Human Computer Interaction (HCI) and merging of technology and design. Especially, I made a strong connection looking at one of her work “Nudge Nudge”, which is a wearable watch that doesn’t tell time but tells something in relation to time — Google Calendar Events. The idea itself was so clever to begin with. Her wearable tells time in relation to a meeting, class, or anything marked in the calendar and tells you how much time you have in between through variation of colour. Another thing that draw me in was her ideation process; it was very similar to what we do in research methods class as Design majors. She not only thought about the aesthetics and the delivery of the idea of changing colour but also about people’s response to the colour change through experimenting with putting stickers on participants and how distracted they felt when they were reminded of having stickers on their shirts; this experiment was done to measure the level of distraction people not wearing the Nudge would get when they are near an individual wearing Nudge. Little considerations like this revealed something I learned in class and through her post, I was able to see my learnings put into practice.

myoungsh-project-10-houses

sketch

var house = [];
var houseImg = [];
function preload() {
  houseImg[3] = loadImage("https://i.imgur.com/wsrsd27.png");
  houseImg[2] = loadImage("https://i.imgur.com/AG35goZ.png");
  houseImg[1] = loadImage("https://i.imgur.com/PkUvm1J.png");
}  
function setup() {
  createCanvas(480, 480);
  for (var i = 0; i < 1; i++){
    var x = random(0,width);
    house[i] = makeHouse(x);
  }
  frameRate(10);
}
function draw(){
  background(256);
  updateNdisplayHouses();
  newHouses();
}
function updateNdisplayHouses() {
  for (var i = 0; i < house.length; i ++){
    house[i].move();
    house[i].display();
  }
}
function newHouses() {
  var newHouseProb = .015;
  if (random(0,1) < newHouseProb) {
    house.push(makeHouse(width));
  }
}
function houseMove() {
  this.x += this.speed;
}
function houseDisplay() {
  push();
  translate(this.x, 0);
  // var imgNum = floor(random(1, 3.99));
  image(houseImg[1], 0, 0);
  image(houseImg[2], 220, 0);
  image(houseImg[3], 400, 0);
  noStroke();
  fill(0);
  rect(0, 400, 2000, 80);
  for (var i = 0; i < 2000; i += 48) {
    fill(256, 256, 0);
    rect(i, 435, 28, 10);
  }
  pop();
}
function makeHouse(startLocationX) {
  var house = {x: startLocationX,
              speed: -5,
              move: houseMove,
              display: houseDisplay}
  return house;
}