I created an interactive clock that includes two modes that the user can switch between: normal, and Christmas. Each of the two modes draws a green tree and a snowy Christmas tree. In the beginning, the user wouldn’t know what the wiggly lines are drawing, but as they wait, the tree images begin to appear. The drawing refreshes when they switch between the two modes.

The time is displayed quantitatively as numbers and more visually with bars on the tree trunk, and mouse movement creates variant colors for certain features.

sketch

/* Youie Cho
   Section E
   minyounc@andrew.cmu.edu
   Final-Project*/

// Set up turtles to draw paths. Two draw their own paths simultaneously.
var ttl;
var ttl2;
var currIter = 0;

// Sets color for tree, outside area, text, and background
var rTree = 0;
var gTree = 100;
var bTree = 0;
var rOutside = 64;
var gOutside = 147;
var bOutside = 255;
var rText = 255;
var gText = 255;
var bText = 255;
var backgroundCol = 255;

// Ball colors (Christmas mode)
var ballcolors = ["red", "green", "pink", "orange", 'rgb(18, 89, 52)',
                'rgb(140, 0, 0)', 'rgb(252, 186, 3)', 'rgb(217, 86, 30)'];

// Coordinates and opacity for drawing star at top (Christmas mode)
var x = [300, 311, 333, 319, 321, 300, 279, 281, 267, 289];
var y = [48, 67, 73, 90, 112, 103, 112, 90, 73, 67];

// Opacity for star (Christmas mode)
var opacity = 0;

function setup() {
    createCanvas(600, 600);
    background("white");

    // Create turtles
    ttl = makeTurtle(0, 300);
    ttl.setWeight(1);
    ttl2 = makeTurtle(600, 300);
    ttl2.setWeight(1);
}

function draw() {
    time(); // Displays time witn numbers
    trunk(); // Trunk displays time with bars
    star(); // Star displays in Christmas mode
    ttl1Mvt(); // ttl1 settings
    ttl2Mvt(); // ttl2 settings

    // Turtle movement per frame
    currIter ++;
    ttl.forward(10);
    ttl.right(random(-50, 50));
    ttl2.forward(10);
    ttl2.left(random(-50, 50));

    buttons(); // Buttons used to switch between modes
}

function time() {
    // Text box
    noStroke();
    fill(rTree, gTree, bTree);
    rectMode(CENTER);
    rect(width / 2, 293, 140, 32);

    // Display hours with AM/PM mode, minutes, and seconds
    noStroke();
    fill(rText, gText, bText);
    if (hour() > 12) {
        textSize(20);
        text(hour() - 12, 245, 300);
        textSize(10);
        text("PM", 345, 300);
    } else {
        textSize(20);
        text(hour(), 245, 300);
        textSize(10);
        text("AM", 345, 300);
    }
    textSize(20);
    text(minute(), 280, 300);
    text(second(), 315, 300);
}

function trunk() {
    rectMode(CORNER);
    strokeWeight(0.5);
    stroke(128, 70, 13);
    fill(backgroundCol, backgroundCol, backgroundCol);
    rect(259.5, 370, 81, 120);
    fill(128, 70, 13);

    // Progression of brown bars display time
    var prgH = map(hour(), 0, 23, 0, 120);
    rect(259.5, 370, 25, prgH);
    var prgM = map(minute(), 0, 59, 0, 120);
    rect(287.5, 370, 25, prgM);
    var prgS = map(second(), 0, 59, 0, 120);
    rect(315.5, 370, 25, prgS);
}

function star() {
    var nPoints = x.length;
    noStroke();

    // Star color changes according to mouseX
    var starCol = map(mouseX, 0, width, 130, 220);
    fill(255, starCol, 100, opacity);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(x[i], y[i]);
    }
    endShape(CLOSE);
    noStroke();
}

function ttl1Mvt() {
    // Turtle does not go outside of the canvas
    if (ttl.x >= width || ttl.x <= 0 || ttl.y >= height || ttl.y <= 0) {
        ttl.penUp();
        ttl.goto(300, 300);
        ttl.penDown();
    }

    // Color settings for tree area and outside area
    if ((ttl.x > 280 & ttl.x < 320 && ttl.y > 90 && ttl.y < 110) ||
        (ttl.x > 260 && ttl.x < 340 && ttl.y > 110 && ttl.y < 150) ||
        (ttl.x > 240 && ttl.x < 360 && ttl.y > 150 && ttl.y < 200) ||
        (ttl.x > 200 && ttl.x < 400 && ttl.y > 200 && ttl.y < 260) ||
        (ttl.x > 150 && ttl.x < 450 && ttl.y > 260 && ttl.y < 370)) {
        ttl.setColor(color(rTree, gTree, bTree));
    } else {
        ttl.setColor(color(rOutside, gOutside, bOutside));
    }
}

function ttl2Mvt() {
    // Turtle does not go outside of the canvas
    if (ttl2.x >= width || ttl2.x <= 0 || ttl2.y >= height || ttl.y <= 0) {
        ttl2.penUp();
        ttl2.goto(300, 300);
        ttl2.penDown();
    }

    // Color settings for tree area and outside area
    if ((ttl2.x > 280 & ttl2.x < 320 && ttl2.y > 90 && ttl2.y < 110) ||
        (ttl2.x > 260 && ttl2.x < 340 && ttl2.y > 110 && ttl2.y < 150) ||
        (ttl2.x > 240 && ttl2.x < 360 && ttl2.y > 150 && ttl2.y < 200) ||
        (ttl2.x > 200 && ttl2.x < 400 && ttl2.y > 200 && ttl2.y < 260) ||
        (ttl2.x > 150 && ttl2.x < 450 && ttl2.y > 260 && ttl2.y < 370)) {
        ttl2.setColor(color(rTree, gTree, bTree));
    } else {
        ttl2.setColor(color(rOutside, gOutside, bOutside));
    }
}

function buttons() {
    noStroke();
    fill(mouseY / 5 + 200, mouseX / 5 + 200, mouseX / 5 + 100);
    rect(13, 558, 100, 33);
    rect(487, 558, 100, 33);
    strokeWeight(0.5);
    fill(rOutside, gOutside, bOutside);
    textSize(15);
    text("Normal", 40, 580);
    text("Christmas", 505, 580);
}

function mousePressed() {
    // NORMAL MODE ////////////////////////////////////////////////////////////
    if (mouseX >= 13 & mouseX <= 113 && mouseY >= 558 && mouseY <= 691) {
        // Turtle drawing refreshes upon cliking the button
        noStroke();
        clear();
        backgroundCol = 255;
        background(backgroundCol, backgroundCol, backgroundCol);
        opacity = 0;

        // Color settings
        rTree = 0; // Green tree
        gTree = 100;
        bTree = 0;
        rOutside = 64; // Blue outside
        gOutside = 147;
        bOutside = 255;
        rText = 240; // Light green text
        gText = 247;
        bText = 218;
    }

    // CHRISTMAS MODE /////////////////////////////////////////////////////////
    if (mouseX >= 487 & mouseX <= 587 && mouseY >= 558 && mouseY <= 691) {
        // Turtle drawing refreshes upon cliking the button
        clear();
        backgroundCol = 0;
        background(backgroundCol, backgroundCol, backgroundCol);
        opacity = 100; // Displays star only in Christmas mode

        // Color settings
        rTree = 255; // White tree
        gTree = 255;
        bTree = 255;
        rOutside = 255; // Yellow outside
        gOutside = 213;
        bOutside = 28;
        rText = 248; // Dark yellow text
        gText = 178;
        bText = 41;

        // Ornaments (Christmas mode)
        noStroke();
        for (var i = 0; i < ballcolors.length; i++) {
            for (var j = 0; j < ballcolors.length; j++) {
            fill(ballcolors[i]);
            }
        ellipse(random(280, 320), random(150, 250), 12, 12);
        ellipse(random(170, 450), random(250, 370), 18, 18);
        }
    }
}

// TURTLE FUNCTIONS ///////////////////////////////////////////////////////////
function turtleLeft(d) {
    this.angle -= d;
}

function turtleRight(d) {
    this.angle += d;
}

function turtleForward(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
}

function turtlePenDown() {
    this.penIsDown = true;
}

function turtlePenUp() {
    this.penIsDown = false;
}

function turtleGoTo(x, y) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;
}

function turtleSetColor(c) {
    this.color = c;
}

function turtleSetWeight(w) {
    this.weight = w;
}

function makeTurtle(tx, ty) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0,
                  penIsDown: true,
                  color: color(128),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                 };
    return turtle;
}

This landscape project was made by shifting pixel sorting data out of landscape photos into a 2D noise matrix. This is great because I have been just thinking about filling shapes with solid colors, but this is using computated elements to draw. For my project, I could maybe use turtles to generate patterns for filling in shapes, or use interesting line drawings.

This work is inspirational because it is a setup representation that has great depth and clarity. Because climate change is a very complex issue, I will have to find ways to symbolize or very clearly represent the message I want to convey. This also similarly to the first work uses colors of plastic bottles to create depth in color, as opposed to making the water area just plain blue.

For my final project, I want to create a clock that shows the sequence of a certain aspect of climate change. I will be addressing global warming, especially how it affects sea animals. For instance, polar bears require specific climate for hunting, mating, and survival in general, but many are starving or dying because of global warming. I am currently planning to draw a scene of sea animals suffering from the impact of global warming.

There are some details I am considering, which I could change based on what I think is effective as I work through the project.:

1. Elements that change every second would depict short-term effects, elements that change every minute would depict long-term effects, and elements that change every hour would depict very long-term effects.
2. I could draw a cityscape in the background and affect it to show how people are getting effected as well.

sketch

/* Youie Cho
   Section E
   minyounc@andrew.cmu.edu
   Project-11-Landscape*/

var terrainSpeed = 0.0001;
var terrainDetail = 0.005;
var houses = [];
var tY = 130;

function setup() {
    createCanvas(400, 300);
    frameRate(10);
    // initial collection of houses
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        houses[i] = makehouse(rx);
    }
}

function draw() {
    background(219, 110, 163);
    snowyTerrain();
    snow();
    house();

    // Happy November text moving upwards
    fill(196, 71, 132);
    textSize(12);
    textFont('Helvetica');
    text('Happy November', 150, tY);
    tY -= 0.05;

    // moon
    fill(255, 238, 194);
    ellipse(330, 40, 40, 40);
}

function snow() {
    for (var i = 0; i < 50; i++) {
        ellipse(random(0, width), random(0, height), 1, 1);
    }
}

function snowyTerrain() {
    noStroke();
    fill(252, 230, 240);
    beginShape();
    for (var x = 0; x < width + 1; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, height * 0.5, height * 0.8);
        vertex(x, y);
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

function house() {
    push();
    translate(0.1 * width, 0.1 * height);
    scale(0.8);

    stroke(0);
    noFill();

    updateAndDisplayhouses();
    removehousesThatHaveSlippedOutOfView();
    addNewhousesWithSomeRandomProbability();
    pop();
}

// houses' positions are updated and displayed
function updateAndDisplayhouses(){
    for (var i = 0; i < houses.length; i++) {
        houses[i].move();
        houses[i].display();
    }
}

// houses outside of the canvas are removed
function removehousesThatHaveSlippedOutOfView() {
    var housesToKeep = [];
    for (var i = 0; i < houses.length; i++){
        if (houses[i].x + houses[i].breadth + 70 > 0) {
            housesToKeep.push(houses[i]);
        }
    }
    houses = housesToKeep;
}

// new house is added at the end with small probability
function addNewhousesWithSomeRandomProbability() {
    var newhouseLikelihood = 0.01;
    if (random(0, .5) < newhouseLikelihood) {
        houses.push(makehouse(width + 70));
    }
}


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


// draw the houses
function houseDisplay() {
    var floorHeight = 15;
    var bHeight = this.nFloors * floorHeight;

    // house block
    fill(145, 55, 26);
    noStroke();
    push();
    translate(this.x, height - 40);
    rect(0, -bHeight + 20, this.breadth, bHeight);

    // roof
    fill(61, 27, 18);
    triangle(-10, -bHeight + 20, this.breadth/2, -bHeight * 2, this.breadth + 10, -bHeight + 20)

    // snow on the roof
    stroke(255);
    strokeWeight(6);
    strokeJoin(ROUND);
    fill(255);
    triangle(0, -bHeight, this.breadth/2, -bHeight * 2, this.breadth, -bHeight)

    //window that flickers
    strokeWeight(0.5);
    stroke(0);
    fill("yellow")
    noStroke();
    var wL = this.nFloors * 6 // variable to determine location
    var wW = random(25, 27); //variable to determine width and height
    rect(wL, -bHeight + wL * 2, wW, wW - 10);

    // windowsill
    stroke(0);
    line(wL + wW / 2, -bHeight + wL * 2, wL + wW / 2, -bHeight + wL * 2 + wW - 10);
    line(wL, -bHeight + wL * 2 + wW / 2 - 5, wL + wW, -bHeight + wL * 2 + wW / 2 - 5);
    pop();
}


function makehouse(birthLocationX) {
    var hs = {x: birthLocationX,
                breadth: 70,
                speed: -4,
                nFloors: round(random(2,5)),
                move: houseMove,
                display: houseDisplay}
    return hs;
}

I wanted to create a scene that represented the Christmas season, which I like a lot. I made the terrains become snowy hills, and added colors that made the scenery seem pleasant. It was fun to play around with different factors of my drawings, especially to control different things in a way they depend on other elements. For instance, I made my window and windowsills randomly move together to create an effect of the yellow light flickering from each house. It was also fun to add snow on the roofs using rounded joining corners. If I were to continue to work on this, I would want to do something more interesting with the text movement.

This is a performance of gender blur, noise abstraction, and intimate electricity. The event in which this performance happened is Queer Trash, which celebrates the potential for noise to be a process that undoes fixed meanings, upsets hierarchies, and also collapses socially constructed order, although it is often considered something inevitable but unwanted. Max Hamel represents noise as something with an independent meaning itself, as something queer. I couldn’t find much about an algorithm that goes behind this work, but I think the randomness of noise is the nature of what he wants to express. I can see that he is controlling the various computational noise with his hands, and there are sections that are more defined with fewer amount of sounds, and other sections that are a combination of many sounds. I think this is very sensible of him to create levels of intensity, which is what often happens in music.

https://issueprojectroom.org/video/queer-trash-presents-max-hamel

sketch

/* Youie Cho
   Section E
   minyounc@andrew.cmu.edu
   Project-10-Sonic-Sketch*/

var mySndC;
var mySndCs;
var mySndD;
var mySndDs;
var mySndE;
var mySndF;
var mySndFs;
var mySndG;

function preload() {
    // Load sound files for each key
    mySndC = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/c-6.wav");
    mySndCs = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/cs.wav");
    mySndD = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/d-4.wav");
    mySndDs = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/ds.wav");
    mySndE = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/e-2.wav");
    mySndF = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/f-6.wav");
    mySndFs = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/fs.wav");
    mySndG = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/g-4.wav");
    // Set volume to 1
    mySndC.setVolume(1);
    mySndCs.setVolume(1);
    mySndD.setVolume(1);
    mySndDs.setVolume(1);
    mySndE.setVolume(1);
    mySndF.setVolume(1);
    mySndFs.setVolume(1);
    mySndG.setVolume(1);
}

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

function draw() {
    background("pink");
    strokeWeight(2);
    // Draw white keys
    fill(255);
    for (i = 0; i < 5; i++) {
        rect(120 + i*70, 150, 70, 250);
    }
    // Draw black keys
    fill(0);
    rect(170, 150, 40, 150);
    rect(240, 150, 40, 150);
    rect(380, 150, 40, 150);
}

function mousePressed() {
    // Within the height range of white keys
    if (150 < mouseY & mouseY < 400) {
        // C sharp and C
        if (170 < mouseX & mouseX < 210 & 150 < mouseY & mouseY < 300) {
            mySndCs.play();
        } else if (120 < mouseX & mouseX < 190) {
            mySndC.play();
        }
        // D sharp and D
        if (240 < mouseX & mouseX < 280 & 150 < mouseY & mouseY < 300) {
            mySndDs.play();
        } else if (210 < mouseX & mouseX < 260) {
            mySndD.play();
        }
        // E
        if (280 < mouseX & mouseX < 330) {
            mySndE.play();
        }
        // F sharp and F
        if (380 < mouseX & mouseX < 420 & 150 < mouseY & mouseY < 300) {
            mySndFs.play();
        }else if (330 < mouseX & mouseX < 400) {
            mySndF.play();
        }
        // G
        if (420 < mouseX & mouseX < 470) {
            mySndG.play();
        }
    }
}

This project is a transparent pneumatic toroiodal form that shows turbulent geophysical air dynamics with thousands of animated carbon particles. This shows the global airflow at a very small scale, at which people can experience the whole scheme. I thought this project was interesting because the idea of physically displaying numerous particles seemed very novel, and I liked that it was rather a realistic portrayal of aerodynamics, not a representation that has been overly manipulated to be aesthetic.

Rachel Wingfield is the female designer, researcher, and educator who founded Loop.pH in 2003. She specialized in responsive environments inspired by the study of living systems while she was in the Royal College of Art in London. She looks at both near and far future scenarios about biological and technological futures. Like in this project, she creates amazing public engagement initiatives, as well as other multidisciplinary visionary environments and experiences.

loop.ph

sketch

/* Youie Cho
   Section E
   minyounc@andrew.cmu.edu
   Project-09-Computational-Portrait*/

var myImage;

function preload() {
    var myImageURL = "https://i.imgur.com/42viitv.jpg";
    myImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(500, 500);
    background(0);
    myImage.loadPixels();
    frameRate(2000);
}

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);
    // Color at the current pixel
    var theColorAtLocationXY = myImage.get(ix, iy);
    // Random sizes of ellipses
    var w = random(2, 8);
    var h = random(.5, 3);
    // Draw ellipses
    fill(theColorAtLocationXY);
    ellipse(px, py, w, h);

    // Use color at the mouse
    var theColorAtTheMouse = myImage.get(mouseX, mouseY);
    // Draw the dog bone only every 30 frames
    if (frameCount % 30 == 0) {
    noStroke();
    fill(theColorAtTheMouse);
    dogBone();
    }
}

// Draw dog bone pattern according to mouse movement
function dogBone() {
    rectMode(CENTER);
    rect(mouseX, mouseY, 20, 8);
    ellipse(mouseX - 10, mouseY - 3, 8, 8);
    ellipse(mouseX - 10, mouseY + 3, 8, 8);
    ellipse(mouseX + 10, mouseY - 3, 8, 8);
    ellipse(mouseX + 10, mouseY + 3, 8, 8);
}

This project was fun to make and watch. Figuring out how to differentiate the drawing rate of the particles and my dog bone pattern was interesting, and it would be fun to make use of this in my future projects as well.

Blog: https://courses.ideate.cmu.edu/15-104/f2019/2019/10/04/jina-lee-looking-outwards-06/

Original Work: http://rectangleworld.com/blog/archives/733

This is a randomness project that Jina explored on her LO. When I first took a look at this project on the artist’s website, I was surprised to see that it was animated because I didn’t imagine “scrolling endlessly” in such a dynamically animated way. Like Jina said, it is very interesting that the color and pattern is randomized, but the overarching system is very systematic. I was personally fascinated by the choice of spot color and gradient in this specific work. The gradient is not used simply in a decorative way, but it adds an interesting depth across the work, and the red becomes an important spot color that highlights the form and flow of a single braid. To add on to the post, the braid group consists of braid diagrams that have n strings that are attached to n points at the top and bottom of the diagram. Each braid is attached at the string ends to another braid to form a longer braid, then the whole braid is shrunk down vertically in half for an appropriate scale.

Website: http://www.katehollenbach.com/

Kate Hollenbach leads the design computation team at Oblong Industries that is based in LA. She works with a lot of gestural interfaces and HCI applications and products. A recent work is phonelovesyoutoo, which is an application that captures video from the phone’s front and back camera, and the screen, watching the user’s activities. She creates an interesting perspective of what mobile devices would see when they observe human bodies, as well as looking into the physical and virtual planes of human presence. In this lecture, she explains her projects with very good supporting materials. When she presents her works, it is very good that she shows the demos from a perspective that the user would actually be in, so it helps visualize what the experience may be like. Also, she gives a good context of where the project is, and what kind of future stages the project is moving into.

A work of Kate Hollenbach that I admire is Infinite Scroll. It is an installation with videos generated from real video capture of user’s scrolling through social network feeds. It is very interesting that mundane rituals can turn into interesting colorful content. It feels familiar because of the scrolling action, but it comes across as something novel because of the way that the scrolling action is expressed.