sketch

//Julia Nishizaki
//Section B
//jnishiza@andrew.cmu.edu
//Final Project - ABCs of Climate Change


//variables for climate change effects, uses true/false statements to make effects appear/disappear
var cE = {
    lakeColor: false, //algae blooms
    flowers: false, //biodiversity
    clouds: false, //carbon footprint
    trees: true, //deforestation
    gas: false, //greenhouse gases
    mtn: false, //hazardous waste
    hill: false, //invasive species
    jeopardy: false, //jeopardy
    house: false, //population growth
    sky: false, //smog
    field: false, //toxic pollutants
    building: false, //urban sprawl
    lake: false, //water levels
    deadz: false, //zones that are dead
}

//variables to help with effects of climate change
var lakeWidth = 200; //initial width of lake
var lakeHeight = 35; //height of lake
var skyHeight = 0; //height of sky for smog
var cloudX = 475; //starting x position for cloud
var gasX = 475; //starting x position for gas cloud
var jtranslu = 0; //starting opacity for "smoke screen", jeopardy

//variables for the window and its dimensions
var win = {
    ws: 125, //distance from window to right and left sides of canvas
    wt: 40, //distance from window to top of canvas
    wb: 160, //distance from window to bottom of canvas
    frm: 5, //width of window frame
    dis: 5, //displacement outside of canvas
}

//variables for colors used throughout, especially for objects that change color
var colors = {
    hill: 80, //light green hill (HSB)
    mtnb: 70, //purple mountains (HSB)
    sky: '#8ED9EF', //light blue of sky
    smogop: 80, //opacity of smog in background
    field: 'green', //green
    lakeh: 55, //hue value of lake (HSB)
    lakes: 50, //saturation value of lake (HSB)
    lakeb: 100, //brightness value of lake (HSB)
    fieldb: 60, //brightness value of field (HSB)
    wall: 230, //light gray of walls
    table: 150, //dark gray of table 
    flower: 'purple', //purple flowers
    plnflw: 'green', //green flowers
    type: '#8BC63F', //light green of type
}

//arrays that store letters and each letter's climate change info
var alphabetLetters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
var letterInfo = [ //stores copy on climate change ABCs
    "Algae Blooms: toxic algae can poison water and create dead zones", 
    "Biodiversity: the variety of life on the planet", 
    "Carbon Footprint: the amount of carbon dioxide each of us produces", 
    "Deforestation: the reduction of trees due to natural forces or human activity", 
    "Extinctions: the death of all individuals of a species", 
    "Fossil Fuels: nonrenewable fuels that are burned for energy like coal and gas", 
    "Greenhouse Gases: gases like methane, trap heat and warm the atmosphere", 
    "Hazardous Waste: waste that pose a risk to human health and the environment", 
    "Invasive Species: any organism not native to an ecosystem that causes harm", 
    "Jeopardy: danger of loss, harm, or failure", 
    "Keystone Species: a species that is critical to the survival of other species", 
    "Landfill: a site where wastes are dumped for permanent disposal", 
    "Microplastics: very small pieces of plastic that pollute the environment", 
    "Nonrenewable: resources that can't be replenished onced used", 
    "Ozone Layer: a thin protective layer of gas above Earth that filters UV radiation", 
    "Population Growth: an increase in the total human population", 
    "Quotas Insufficient: limits and restrictions in environmental policies not met", 
    "Runoff: stormwater from cities or farms that carry pollutants into water systems", 
    "Smog: dust, smoke, or chemical fumes that pollute the air", 
    "Toxic Pollutants: contaminate areas and cause death, disease, or birth defects", 
    "Urban Sprawl: expansion of auto-dependent developments over large areas of land", 
    "Vulnerability: susceptibility to harm from exposure to stresses", 
    "Water Level Rise: rising sea levels due to global warming and melting glaciers", 
    "Xenobiotic: non-natural or man-made substances found in the environment", 
    "Yield: amount of crops produced per unit area", 
    "Zones that are Dead: dead zones are caused by hypoxia, or lack of oxygen in water",
    ];

function setup() {
    createCanvas(600, 480);
    frameRate(30);   
}

function draw() {
    background(colors.sky); //sets the background as a light blue
    
    prepEnvironEffects(); //connects each key to a variable

    drawLandscape(); //creates all elements of the landscape 
    drawRoom(); //creates all elements of the room
    
    typedLetterAlphabet(); //displays the alphabet
    typedLetterInfo(); //displays the words and definitions
}

function prepEnvironEffects() {//when a particular key is pressed, the variable associated with that key switches from false to true
    if (key == 'a') { //algae blooms
            cE.lakeColor = true;
        } 
    if (key == 'b') { //biodiversity
            cE.flowers = true;
        }
    if (key == 'c') { //carbon footprint
            cE.clouds = true;
        } 
    if (key == 'd') { //deforestation
            cE.trees = false;
        } 
    if (key == 'g') { //greenhouse gases
            cE.gas = true;
        } 
    if (key == 'h') { //hazardous waste
            cE.mtn = true;
        } 
    if (key == 'i') { //invasive species
            cE.hill = true;
        } 
    if (key == 'j') { //jeopardy
            cE.jeopardy = true;
        } 
    if (key == 'p') { //population growth
            cE.house = true;
        } 
    if (key == 's') { //smog
            cE.sky = true;
        } 
    if (key == 't') { //toxic pollutants
            cE.field = true;
        } 
    if (key == 'u') { //urban sprawl
            cE.building = true;
        } 
    if (key == 'w') { //water level rise
            cE.lake = true;
        } 
    if (key == 'z') { //zones that are dead
            cE.deadz = true;
    }
}

//Creates elements in the landscape, and calls for changes to those elements
function drawLandscape() {
    makeClouds(); //creates clouds for carbon footprint and greenhouse gas, letters c and g
    changeSky(); //creates smog screen in background, letter s
    changeMtnHill(); //changes color of mountains and hills, letters h and i

    var landscapeScale1 = 0.004; //detail in hills
    var landscapeScale2 = 0.018; //detail in mountains

    //creates mountains in the background
    colorMode(HSB, 100);
    stroke(70, 30, colors.mtnb);
    strokeWeight(1);
    for (var x = 0; x < width; x ++) {
        var l = (x * landscapeScale2);
        var y = map(noise(l), 0, 1, height * 0.2, height * 0.5); //constrains hills
        line(x, y, x, height); //creates vertical lines, forming a solid shape
    }

    colorMode(RGB);
    makeBuilding(); //creates buildings when letter u is pressed

    //creates hills in the middleground
    colorMode(HSB, 100); //switches color mode to HSB to help with color changes
    stroke(25, 50, colors.hill);
    for (var x = 0; x < width; x ++) {
        var l = (x * landscapeScale1);
        var y = map(noise(l), 0, 1, height * 0.4, height * 0.6); //constrains hills
        line(x, y, x, height); //creates vertical lines, forming a solid shape
    }

    //creates field in foreground
    noStroke();
    fill(28, 100, colors.fieldb); //field color
    rect(0, height * 0.55, width, height * 0.35);
    changeField(); //changes color of field, letter t
    
    //creates lake
    fill(colors.lakeh, colors.lakes, colors.lakeb);
    ellipse(175, 286, lakeWidth, lakeHeight);
    changeLake(); //changes color and size of lake, letters a, w, and z

    colorMode(RGB); //switches color mode back to RGB
    makeFlowers(); //makes flowers, alternating colors, becomes one color with letter b
    makeHouse(); //makes houses, letter p
    makeTrees(); //makes single yellow tree in foreground, tree disappears with letter d 
    smokeScreen(); //creates a semi-transparent grey layer with letter j
}

//makes and moves the clouds
function makeClouds() {
    if (cE.clouds == true) { //makes a cloud for carbon footprint, letter c
        drawClouds(cloudX, 120, 150, 50, 150);
        cloudX = cloudX - 2;
        if (cloudX < win.ws - 150) {
            cloudX = 475;
        }
    }
    if (cE.gas == true) { //makes a cloud for greenhouse gases, letter g
        drawClouds(gasX, 180, 220, 75, 100);
        gasX = gasX - 1;
        if (gasX < win.ws - 220) {
            gasX = 475;
        }
    }
}

//draws the clouds
function drawClouds(locationX, locationY, width, height, color) {
    push();
    fill(color);
    translate(locationX, locationY);
    rect(0, - height, width, height, 50, 50, 50, 50);
    pop();
}

//adds "smog" in background
function changeSky() {
    if (cE.sky == true) {
        fill(80, colors.smogop);
        noStroke();
        rect(0, height * 0.55 - skyHeight, width, skyHeight);
        skyHeight = constrain(skyHeight, 0, 300) + 3;
    }
}

//changes colors of mountains and hills
function changeMtnHill() {
    if (cE.mtn == true) { //changes mountain colors
        colors.mtnb = constrain(colors.mtnb, 20, 70) - 5;
    }
    if (cE.hill == true) { //changes hill colors
        colors.hill = constrain(colors.hill, 30, 80) - 5;
    }
}

//makes the buildings for urban sprawl
function makeBuilding() {
    if (cE.building == true) { //from left to right
        drawBuildings(125, 37, 130, 180);
        drawBuildings(162, 62, 110, 150);
        drawBuildings(224, 50, 120, 200);
        drawBuildings(274, 37, 100, 130);
    }
}

//draws buildings
function drawBuildings(locationX, buildW, buildH, color) {
    push();
    noStroke();
    fill(color);
    translate(locationX, height * 0.58);
    rect(0, - buildH, buildW, buildH);
    //windows in buildings
    fill(255);
    for (var x = 0; x < (buildW / 6) - 1; x ++) {
        for (var y = 0; y < 200; y ++) {
            rect(2 + x * 6, - buildH + 4 + y * 8, 3, 4);
        }
    }
    pop();
}

//changes lake size and color
function changeLake() {
    if (cE.lake == true) { //makes larger for water level
        lakeWidth = constrain(lakeWidth, 200, 350) + 5;
    }
    if (cE.lakeColor == true) { // becomes green for algae
        colors.lakeh = constrain(colors.lakeh, 30, 55) - 0.75;
    }
    if (cE.deadz == true) { //becomes dark for dead zones
        colors.lakes = constrain(colors.lakes, 50, 100) + 5;
        colors.lakeb = constrain(colors.lakeb, 35, 100) - 5;
    }
}

//changes color of field
function changeField() { 
    if (cE.field == true) {
        colors.fieldb = constrain(colors.fieldb, 20, 60) - 2;
    }
}

//makes row of flowers at base of hills
function makeFlowers() {
    for (var i = 0; i < 20; i ++) {
        strokeWeight(2);
        for (var g = 0; g < 6; g ++) {
            if (i % 2) { //alternates colors of flowers to represent biodiversity
                stroke(colors.plnflw);
                push();
                translate(win.ws + i * 25, height * 0.55);
                rotate(g * 60);
                line(0, 0, 0, 3);
                pop();   
            } else {
                stroke(colors.flower);
                push();
                translate(win.ws + i * 25, height * 0.55);
                rotate(g * 60);
                line(0, 0, 0, 3);
                pop();   
            }
        }
    }
    if (cE.flowers == true) { //changes color of flowers to single color, removal of biodiversity
        colors.flower = colors.plnflw; 
    }
}

//makes houses for population growth
function makeHouse() {
    if (cE.house == true) {
        drawHouses(320, height * 0.58, '#FCAD77', '#E8762A', 0.9); //left
        drawHouses(375, height * 0.57,'#7BE0FF', '#1CB8E8', 0.8); //right
        drawHouses(350, height * 0.59,'#B09DCC', '#9274C1', 1.0); //middle
    }
}

//draws houses
function drawHouses(locationX, locationY, colorHouse, colorDoor, houseScale) {
    push();
    noStroke();
    fill(colorHouse);
    translate(locationX, locationY);
    scale(houseScale);
    rect(0, -20, 40, 20);
    fill('white');
    triangle(-5, -20, 45, -20, 20, -30);
    rect(24, -15, 10, 10);
    fill(colorDoor);
    rect(8, -15, 8, 15);
    pop();   
}

//makes tree in foreground of landscape
function makeTrees() {
    if (cE.trees == true) { //the tree disapears when key is pressed, as key switches variable to false
        push();
        rectMode(CENTER);
        translate(440, 110);
        noStroke();
        fill(249, 176, 30); //yellow of tree
        rect(0, 0, 130, 200, 40, 40, 40, 40);
        //tree branches
        strokeWeight(15);
        stroke(124, 20, 22);
        line(0, -50, 0, 225);
        strokeWeight(10); //thinner branches
        line(0, 80, 40, 40);
        line(0, 20, -40, -20);
        pop();
    }  
}

function smokeScreen() { //creates grey screen
    if (cE.jeopardy == true) {
        noStroke();
        jtranslu = constrain(jtranslu, 0, 80) + 15;
        fill(150, jtranslu);
        rect(win.ws, win.wt, 350, 300)
    }
}

//creates all aspects of the room - window, window frame, walls, table, poster, instructions
function drawRoom() { 
    rectMode(CORNER);
    noStroke();
    
    //walls of the room
    fill(colors.wall);
    rect(-win.dis, -win.dis, win.ws + win.dis, height + win.dis * 2);
    rect(width - win.ws, -win.dis, win.ws + win.dis, height + win.dis * 2);
    rect(0, height - win.wb, width, win.wb);
    rect(0, 0, width, win.wt);
    
    //gray "table" below window where alphabet and definitions appear
    fill(colors.table); //medium gray
    rect(0, height - 130, width, 130);

    //white lines that divide window
    stroke(255);
    strokeWeight(4);
    line(width / 2, win.wt - win.frm, width / 2, height - win.wb + win.frm);
    line(win.ws - win.frm, (height - win.wb) / 2 + win.wt / 2, width - win.ws + win.frm, (height - win.wb) / 2 + win.wt / 2);
    //white border around the window
    strokeWeight(10);
    line(win.ws - win.frm, win.wt - win.frm, win.ws - win.frm, height - win.wb + win.frm);
    line(width - win.ws + win.frm, win.wt - win.frm, width - win.ws + win.frm, height - win.wb + win.frm);
    line(win.ws - win.frm, win.wt - win.frm, width - win.ws + win.frm, win.wt - win.frm);
    line(win.ws - win.frm, height - win.wb + win.frm, width - win.ws + win.frm, height - win.wb + win.frm);

    drawPoster(); //draws the poster to the left of window
    drawInstructions(); //draws instructions on the gray "table"
}

function drawPoster() { //creates poster telling you to refresh
    push();
    noStroke();
    rectMode(CENTER);
    angleMode(DEGREES);
    textAlign(CENTER);
    fill(255);
    translate(60, 165);
    rotate(-3); //rotates poster slightly
    rect(0, 0, 75, 100);
    //pin at the top of the poster
    fill(colors.table); 
    ellipse(0, -40, 5, 5);
    //writing in gray telling you to refresh
    textSize(12);
    textLeading(15); //sets leading
    var poster = "Refresh\npage\nto\nrestart"; //puts each word on a new line
    text(poster, 0, -17);
    pop();
}

function drawInstructions() { //creates instructions
    textAlign(CENTER);
    noStroke();
    fill(255);
    var textLocation = 375;
    textSize(12);
    text("Press and hold down keys to see some ABCs of climate change", width / 2, textLocation);
}

//creates alphabet
function typedLetterAlphabet() {
    for (var i = 0; i < 26; i ++) {
        textAlign(CENTER);
        textSize(20);
        noStroke();
        var alphabetLocation = 400;
        var x = map(i, 0, alphabetLetters.length, 50, width - 30);
        if (keyCode === 65 + i) { //when key is down, letter turns grey
            fill(100);
            text(alphabetLetters[i], x, alphabetLocation);
        } else { //all letters green when not pressed
            fill(colors.type);
            text(alphabetLetters[i], x, alphabetLocation);
        } 
    }
}

//creates climate change info
function typedLetterInfo() {
    textAlign(CENTER);
    textSize(15);
    fill(255);
    for (var i = 0; i < 26; i ++) {
        if (keyCode === 65 + i) {
            text(letterInfo[i], width / 2, height - 45);  
        } 
    }   
}

//when key released, already pressed letters disapear
function keyReleased() { //replaces already clicked letters and their info with spaces in the respective arrays
    for (var i = 0; i < 26; i ++) {
        if (keyCode == 65 + i) {
            alphabetLetters.splice(i, 1, " ");
            letterInfo.splice(i, 1, " ");
        }       
    }
}

For this project, I initially wanted to use sound and the typing keyboard in order to create an instrument out of sounds related to the environmental crisis. However, I decided to instead pivot towards creating an interactive and visual display of some “ABCs” of climate change. When you type and hold down a key, a word that starts with that letter will appear, along with that word’s definition. For a little less than half of the letters in the alphabet, something related to the word will happen on the landscape that is visible outside of the window. I wanted to keep the interactions fairly simple, while still conveying some of the effects of climate change, global warming, and our actions as a society.

For my final project, I want to create an instrument of sorts that is based on the sounds around us, both sounds of nature as well as sounds related to machinery, technology, or man-made systems. I was thinking about Greta Thunberg’s speech at the French Parliament in July, and I realized that I’m really not familiar with the IPCC’s reports or the fact that in just 11 years we’ll reach some tipping points that we likely won’t be able to recover from. Through this project, I want to help visualize and create a more concrete image of what the future could look and sound like if we don’t change, in terms of animal and plant life, water levels, weather, and technology. Similar to patatap.com, I want my instrument to have different sounds and visuals for each letter, so that as you type and your words appear on the screen, the landscape starts to scroll past, and forms like plants, animals, buildings, and cars start to populate it. However, when you press a key such as shift or the space bar, the landscape changes to a future where we didn’t actively try to combat climate change, and all the images and sounds your words create in this possible future reflect that.

I am taking my second late day for this looking outwards post. Because I’m considering visualizing type as a part of my project, the two works I chose to look at explore type, one through sound, and the other through visuals.

The first work is typatone.com, by Lullatone and Jono Brandel, the same individuals who created patatap.com. I really enjoyed the visuals of patatap.com, but I like typatone’s direct connection between the user’s thoughts and what they see. It gives the sounds more meaning, and makes the interaction more personal.

The other work I decided to look at is called “A Flowering Theory,” by Stefanie Posavec and Abbie Stephens, and commissioned by Protein as a part of “Channel 4 Random Acts.” I was intrigued by this work, because rather than associate a sound or a visual with a single letter, Posavec analyzed the text’s grammatical structure, and the Stephens used that data to construct the growing plants and forms. I am interested in combining typatone.com’s more experimental approach and interactions, with visuals of flowers or smog that grow or change, like Posavec and Stephen’s interpretations.

sketch

//Julia Nishizaki
//Section B
//jnishiza@andrew.cmu.edu
//Project 11 - Generative Landscape

var landscapeScale = 0.005; //detail in hills
var landscapeSpeed = 0.00075; //speed of hills going by
var hillColor = '#92CA6D'; //light green

var houses = []; //array for houses
var trees = []; //array for trees

var train = { ////train variables
    wY: 200, //Y of windows
    wW: 325, //width of windows
    wH: 275, //height of windows
    corners: 30, //roundness of window corners
    wWeight: 25, //stroke weight of light gray
    backgroundColor: 255, //white
    mainColor: '#475AA8', //light blue
    wColor: '#2A357A', //dark blue, color of window and seats
    divXL: 61, //X coordinate of left divider
    divXR: 419, //X coordinate of right divider
}

function setup() {
    createCanvas(480, 480);
    for (var i = 0; i < 5; i ++) { //first houses
        var rx = random(width);
        houses[i] = makeHouses(rx);
    }
    for (var i = 0; i < 3; i ++) { //first trees
        var tx = random(width);
        trees[i] = makeTrees(tx);
    }
    frameRate(30);   
}

function draw() {
    background('#8ED9EF'); //blue sky
    //creates hills in the background
    stroke(hillColor);
    for (var x = 0; x < width; x ++) {
        var l = (x * landscapeScale) + (millis() * landscapeSpeed);
        var y = map(noise(l), 0, 1, 100, 230); //constrains hills
        line(x, y, x, height); //creates vertical lines, forming a solid shape
    }
    displayHouses(); //houses
    removeOldHouses();
    addHouses();

    displayTrees(); //trees
    removeOldTrees();
    addTrees();

    drawTrain(); //train
}

function displayHouses() { //displays and updates house location
    for (var i = 0; i < houses.length; i ++) {
        houses[i].move();
        houses[i].draw();
    }
}
function removeOldHouses() { //gets rid of old houses, puts the houses that are still on the canvas in a new array
    var housesToKeep = [];
    for (var i = 0; i < houses.length; i ++) {
        if (houses[i].x + houses[i].breadth > 0) {
            housesToKeep.push(houses[i]);
        }
    }
    houses = housesToKeep;
}
function addHouses() { //adds new houses into the array
    if (random(0, 1) < 0.02) {
        houses.push(makeHouses(width));
    }
}
function moveHouses() { //moves the houses
    this.x += this.speed;
    if (this.x < -this.breadth) {
        this.x == width + this.breadth;
    }
}
function drawHouses() { //draws the houses
    noStroke();
    rectMode(CORNER);
    fill(this.r, this.g, this.b); //randomizes color
    push();
    translate(this.x, this.y);
    rect(0, -this.height, this.breadth, this.height); //house rectangle
    //roof
    fill(255);
    triangle(-2, -this.height + 1, this.breadth + 2, -this.height + 1, this.breadth / 2, -this.height - this.roofH);
    //door
    rect(this.doorX, - this.doorH, this.doorW, this.doorH);
    pop();
}
function makeHouses(locationX) { //house variables
    var hse = {x: locationX,
               y: random(225, 275),
               r: random(255),
               g: random(255),
               b: random(255),
               roofH: round(random(10, 25)),
               height: round(random(25, 50)),
               breadth: round(random(30, 60)),
               doorX: random(10, 20),
               doorW: 10,
               doorH: 15,
               speed: -6.0,
               move: moveHouses,
               draw: drawHouses}
    return hse;
}

//trees
function displayTrees() { //dispays and updates tree locations
    for (var i = 0; i < trees.length; i ++) {
        trees[i].movet();
        trees[i].drawt();
    }
}
function removeOldTrees() { //gets rid of old trees
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i ++) {
        if (trees[i].xt + trees[i].breadtht > 0) {
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep;
}
function addTrees() { //adds new trees
    if (random(0, 1) < 0.1) {
        trees.push(makeTrees(width));
    }
}
function moveTrees() { //moves trees
    this.xt += this.speedt;
    if (this.xt < -this.breadtht) {
        this.xt == width + this.breadtht;
    }
}
function drawTrees() { //draws trees
    noStroke();
    rectMode(CORNER);
    colorMode(HSB, 100); //switches color mode to HSB to assist with random colors
    fill(this.ht, 55, this.bt); //random colors between yellow-green to green
    push();
    translate(this.xt, height * 3 / 4);
    rect(0, -this.heightt, this.breadtht, this.heightt, 50, 50, 0, 0);
    pop();
}
function makeTrees(locationX) { //tree variables
    var trs = {xt: locationX,
               bt: random(50, 85),
               ht: random(17, 25),
               heightt: round(random(50, 160)),
               breadtht: round(random(100, 130)),
               speedt: -10.0,
               movet: moveTrees,
               drawt: drawTrees}
    return trs;
}

//train
function drawTrain() {
    colorMode(RGB);
    drawWindow(width / 2); //draws center window
    drawWindow(-118); //draws left window
    drawWindow(width + 118); //draws right window
    //light blue panels
    noStroke();
    rectMode(CORNER);
    fill(train.mainColor);
    rect(0, 0, width, train.wY - (train.wH / 2) - 10); //top panel
    rect(0, train.wY + (train.wH / 2) + 10, width, height - (train.wY + (train.wH / 2)) - 10); //bottom panel
    //seats
    drawSeats(train.divXL, 0, 0, 40); //left seat
    drawSeats(train.divXR, width - 200, 40, 0); //right seat
    //table
    rectMode(CENTER);
    rect(width / 2, height - 105, 150, 20, 5, 5, 5, 5);
    //section dividers, light gray
    drawDividers(train.divXL);
    drawDividers(train.divXR);
}
function drawWindow(x) { //creates center window
    rectMode(CENTER);
    noFill();
    stroke(train.backgroundColor); //creates light gray area around the windows
    strokeWeight(train.wWeight);
    rect(x, train.wY, train.wW + train.wWeight, train.wH + train.wWeight, train.corners, train.corners, train.corners, train.corners);
    stroke(train.wColor); //creates blue window border
    strokeWeight(10);  
    rect(x, train.wY, train.wW, train.wH, train.corners, train.corners, train.corners, train.corners);
}
function drawSeats(x1, x2, UL, UR) {
    fill(train.wColor);
    rect(x1 - 45, height - 200, 90, 200, 30, 30, 0, 0); //seat back
    rect(x2, height - 50, 200, 50, UL, UR, 0, 0); //left seat cushions
}
function drawDividers(x) {
    strokeWeight(5);
    stroke(200);
    line(x, train.wY - (train.wH / 2) - 7.5, x, height); //line dividing sections
}

For this project, I wanted to create a landscape outside of a train window. I decided to use three layers, some bushes or trees in the foreground, houses in the middle ground, and hills in the background. I tried to change the speeds of the different layers, with the tree layer the fastest and the hill layer the slowest, in order to give the illusion of perspective, and that you’re looking out of a window as everything flies by.

This week, I’m focusing on Tina Frank, an Austrian designer, artist, and professor at the University of Art and Design Linz, where she heads the department of Visual Communication at the Institute for Media. Frank collaborates with musicians to create installations and audio visual performances, though more recently, her design work has shifted more towards data visualization for scientific projects. In addition, Frank is interested in teaching digital publications, and experiments in synesthesia.

The project that I chose to look at is called “What if,” created by Tina Frank and Alexandra Murray-Leslie as a part of the Klanglichtfestival in 2019. “What if” is an immersive image sound installation meant to challenge how we think about and approach society and the world, through the use of color, forms, sounds, and images. This work is made up of three scenes, “Growing,” “Fantasy,” and “Future Dreams,” which, as stated on Frank’s website, address questions such as “What does our environment look like if it were only inhabited by mosses and ferns? How would our everyday life be if detached from patriarchal structures? What if feminists ruled the world?” 

I found this project particularly interesting because it uses critical design in order to question our current ideologies, values, and assumptions, and to provide glimpses into different possible futures or scenarios. Although the installation and the visuals appear very abstract at first, the different layers of overlapping audio, voice, music, images, and flashes of light immerse and draw you into these different worlds, creating a deeper meaning within the work and serving as a critique on society and how we approach topics like the environment, women, and feminism.

For this project, I wanted to create a landscape that responded to the position of your mouse both visually and through sound. When you click your mouse, depending on the mouse’s position, different sounds will play. The four sounds I chose were chirping birds to represent the daytime, insects to represent the night, wind blowing through grass for the field/desert, and water flowing for the river.

//Julia Nishizaki
//Section B
//jnishiza@andrew.cmu.edu
//Project 10

var night; //nighttime sounds
var daytime; //daytime sounds
var field; //sound of fields
var river; //river sounds

function preload() {
    // loads four sounds
    field = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/field.wav");
    night = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/night.wav");
    daytime = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/day.wav");
    river = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/river.wav");
}

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

function soundSetup() { // setup for audio generation
    field.setVolume(0.1); //sets Volume for all four sounds at a quarter the volume
    night.setVolume(0.1);
    daytime.setVolume(0.1);
    river.setVolume(0.1);
}

function draw() {
    background(200);

    noStroke();
    colorMode(HSB, 100); //switches color mode to HSB, easier to manipulate with mouse
    var constMouseX = constrain(mouseX, 0, width); //constrains X direction of mouse within canvas
    var constMouseY = constrain(mouseY, 0, height); //constrains Y direction of mouse within canvas

    //variables for the different colors
    var skyColor = color(55, 55, map(constMouseX, 0, width, 25, 100)); //sky changes color w/ mouse position between light and dark blue
    var mountainColor = color(25, 55, map(constMouseX, 0, width, 0, 85)); //mountains change color w/ mouse between light and dark green
    var desertColor = color(map(constMouseY, 0, height, 10, 25), 67, 75); //field or desert changes color w/ mouse between brown and green
    var riverColor = color(48, 70, map(constMouseY, height, 0, 50, 100)); //river changes color w/ mouse slightly from light to dark blue
    
    //sky
    createSky(skyColor);
    //background mountains
    createMountains(mountainColor);
    //desert or field
    createDesert(desertColor);
    //river
    createRiver(riverColor);
    
}
function mousePressed() {
    if (mouseX < (width / 2)) {
        night.play(0, 1, 2); //plays nighttime sounds
    } else {
        night.pause();
    }
    if (mouseX > (width / 2)) {
        daytime.play(0, 1, 2); //plays daytime sounds
    } else {
        daytime.pause();
    }
    if (mouseY < (height / 2)) {
        field.play(0, 1, 2); //plays field sounds
    } else {
        field.pause();
    }
    if (mouseY > (height / 2)) {
        river.play(0, 1, 2); //plays river sounds
    } else {
        river.pause();
    }
}

function createSky(fillColor) { //function creates the sky
    fill(fillColor);
    rect(0, 0, width, height);
}
function createMountains(fillColor) { //function creates background hills
    var mountainY = height * 2 / 3;
    fill(fillColor);
    ellipse(width / 5, mountainY, width / 2, height / 2);
    ellipse(width * 2 / 3, mountainY, width * 3 / 4, height * 4 / 5);
}
function createDesert(fillColor) { //function creates desert/field
    var desertY = height * 5 / 8;
    fill(fillColor);
    rect(0, desertY, width, desertY);
}
function createRiver(fillColor) { //function creates river
    var riverY = height * 7 / 8;
    fill(fillColor);
    var constRivMouseY = constrain(mouseY, height / 2, height); //river only starts to appear when the mouse is below the halfway mark
    rect(0, map(constRivMouseY, height, height / 2, riverY, height), width, riverY);
}

This week, I chose to look into the San Francisco startup, Melomics Media, and their computational system for automatically composing music. Melomics has created two “computer-musicians,” Iamus and Melomics109. Iamus is a computer cluster which is currently located at the Universidad de Málaga in Spain, where it was developed in 2010. Iamus composed “Opus One” on October 15, 2010, which was the first fragment of professional contemporary classical music to be composed by a computer in its own style, as it was not attempting to copy a previous composer’s work. A year later, “Helo, World,” Iamus’s first complete composition premiered, and in 2012, the London Symphony Orchestra recorded 10 of Iamus’s pieces, creating “Iamus,” the first studio album composed using this computational system.

It takes Iamus 8 minutes to create a new composition and to output this data into multiple formats. According to the Universidad de Málaga’s website, the algorithm that Iamus uses is built on data-structures that act as genomes in order to create possible compositions.

While listening to “Hello, World” I was surprised by both how contemporary and dissonant the piece sounded, and how an entire, fairly coherent piece of chamber music could be composed by a computer. However, the constant tension in the piece, combined by the very human musicians and their interpretations gives “Hello, World” an uncanny valley feel, because the piece is technically music, but something still seems slightly off. I’m curious as to why Melomics decided to go in this direction, rather than to create music that is composed of “new” sounds and is entirely unplayable by humans.

For this week, I chose to look at Margot Gersing’s post on Zeitguised Studios, and specifically their project in 2014 titled “Birds.” Using 3D computer graphics, the now Berlin based studio is known for creating compelling narratives, quirky characters, and fun, playful projects.

On their website, Zeitguised describes their project, “Birds,” as a “lighthearted essay on contextualized characters.” Throughout the video, this work portrays representations of birds made only out of objects we associate with birds, like eggs, worms, or bird houses.

I decided to write about this project, as I’m not very familiar with 3D animation or how it can be utilized, and I was drawn to the very creative nature of the work’s concept, the beautiful graphics, the bright colors, and the fun animations.

In her post, Margot reflects on the playful choice to represent a bird out of everything except for the bird. I thought this was an interesting point, and I’m curious as to what the deeper meanings in this piece are, as far as what a bird actually is and how our relationship to birds shifts that definition.

sketch

//Julia Nishizaki
//Section B
//jnishiza@andrew.cmu.edu
//Project 09 - Computational Portrait

var siblingImage;

function preload() { // load image
    var siblingImageURL = "https://i.imgur.com/oi1ahe3.jpg";
    siblingImage = loadImage(siblingImageURL);
}

function setup() {
    createCanvas(320, 480); // same ratio as photo, 2:3
    background('white'); // white background
    rectMode(CENTER);
    siblingImage.loadPixels();
    frameRate(1000); // beginning frame rate
}

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width - 1);
    var iy = constrain(floor(py), 0, height - 1);
    var theColorAtLocationXY = siblingImage.get(ix, iy);
    var psize = map(mouseY, 0, height, 1, 7); // size of rectangles based on y coordinate of mouse
    var pcorner = 1; // how curved the corners of the rectangle are
    var pdimenW = map(mouseX, 0, width, 4, 8); // As mouse moves to right, width increases, height decreases
    var pdimenH = map(mouseX, 0, width, 8, 4); // As mouse moves to left, height increases, width decreases

    noStroke();
    push()
    translate(px, py);
    if (mouseIsPressed) { // if mouse is pressed, rectangles are rotated 45 degrees
        rotate(PI / 4);
    }
    scale(psize); // rectangle size increases and decreases as mouse moves vertically
    fill(theColorAtLocationXY);
    rect(0, 0, pdimenW, pdimenH, pcorner, pcorner, pcorner, pcorner); //creates colored squares
    pop();
}

For this project, I chose a photo of my siblings and I when we were younger (I’m the one who’s lying on the floor half covered by a blanket). I wanted to create something that was fun and interactive, while also obscuring the contents of the photo a little, allowing you to view different layers of information, and conveying the emotions and silliness of that memory. The rectangles scale in size, width and height depending on the coordinates of the mouse, and when you click, the rectangles rotate 45 degrees.

I am using one of my grace days for this late submission.

The individual I chose to listen to and learn more about was Maya Indira Ganesh. On her website, Ganesh identifies as a “feminist technology researcher, speaker, and writer working with arts and culture organisations, academia and NGOs.” I was drawn to her work because she focuses on technology in advocacy, by exploring how to bring together data and art in order to progress social issues. In 2013, at the time of her Eyeo festival talk, Maya Ganesh was the Evidence and Action program director at Tactical Technology Collective, and organization that works with activists, right advocates, and data specialists to help visualize information and enact change. Ganesh is a writer and speaker, rather than a designer or technologist, so during her talk, she referenced her interests, focuses as a researcher, and “Visualising Information for Advocacy,” a book that she had worked on with Tactical Technology Collective, rather than personal works or projects.

I really admired how she spoke and presented her ideas. Throughout the presentation, she used the space around her very effectively. Rather than just reading notes or relying on her slideshow, she kept eye contact with the audience, and spoke almost like she was talking directly to you. Moreover, she framed her presentation with stories and examples of how people used technology and design to shift people’s perspectives. By framing her talk through narratives, she helped the audience to better understand the power of information and data visualization, and ultimately, her goals and inspirations.