seoyounl@andrew.cmu.edu – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice https://courses.ideate.cmu.edu/15-104/f2019 Professor Roger B. Dannenberg • Fall 2019 • Introduction to Computing for Creative Practice Sat, 07 Dec 2019 02:58:13 +0000 en-US hourly 1 https://wordpress.org/?v=5.2.20 Claire Lee – Final Project https://courses.ideate.cmu.edu/15-104/f2019/2019/12/06/claire-lee-final-project/ https://courses.ideate.cmu.edu/15-104/f2019/2019/12/06/claire-lee-final-project/#respond Sat, 07 Dec 2019 02:42:20 +0000 https://courses.ideate.cmu.edu/15-104/f2019/?p=54628 Continue reading "Claire Lee – Final Project"]]>

Instructions: move the net with the mouse and click on the litter to remove it from the ocean! Make sure not to harm any of the sea creatures in the process. Collect as many points as possible in one minute.

finalproject

/* Claire Lee
15-104 Section B
seoyounl@andrew.cmu.edu
Final Project */

var bubbles = [];
var fish = [];
var bottle = [];
var seaTurtle = [];
var candyWrapper = [];
var candyColors = ["pink", "red", "gold", "plum", "dodgerblue"];
var score = 0;
var time = 60;
// arrays to store objects

function setup() {
    createCanvas(600, 240);
    frameRate(10);

    for (i = 0; i < 50; i++) {
        bubbleX = random(width);
        bubbleY = random(height);
        bubbles[i] = blowBubbles(bubbleX, bubbleY);
    }

    for (k = 0; k < 10; k++) {
        fishX = random(width);
        fishY = random(0, 220);
        fish[k] = makeFish(fishX, fishY);
    }

    for (j = 0; j < 6; j++) {
        bottleX = random(width);
        bottleY = random(20, 140);
        bottle[j] = makeBottle(bottleX, bottleY);
    }

    for (l = 0; l < 4; l++) {
        seaTurtleX = random(width);
        seaTurtleY = random(60, 140);
        seaTurtle[l] = makeSeaTurtle(seaTurtleX, seaTurtleY);
    }

    for (m = 0; m < 4; m++) {
        candyWrapperX = random(width); 
        candyWrapperY = random(20, 140);
        candyWrapper[m] = makeCandyWrapper(candyWrapperX, candyWrapperY);
    }
}

function keyPressed() {
    if (time == 0 & keyCode === 32) {
        bubbles = [];
        fish = [];
        bottle = [];
        seaTurtle = [];
        candyWrapper = [];
        score = 0;
        time = 60;
        setup();
        loop();
    }
    // pressing space bar will restart the game
}

function draw() {
    background(140, 225, 255);
    showBubbles();
    showFish();
    showBottle();
    showSeaTurtle(); 
    showCandyWrapper();
    showSand();

    netW = 40;
    netH = 20;
    netX = mouseX;
    netY = mouseY;
    if (netX > width / 2) {
        netX = width / 2;
    }

    if (netY > height - 20) {
        netY = height - 20;
    }

    if (frameCount % 10 == 0 & time > 0) {
        time--;
    } // using frameCount to create a 60s timer

    if (time == 0) {
        noStroke();
        fill(120, 205, 235, 120);
        rect(0, 0, width, height);
        noStroke();
        fill(0);
        textSize(15);
        text('The End!', (width / 2) - 50, height / 2 - 30);
        text('Final Score: ' + score, width / 2 - 70, height / 2 - 10);
        text('Press SPACE to restart', width / 2 - 90, 3 * height / 4);
    } // end of game

    if(time != 0) {
        stroke(0);
        strokeWeight(2);
        line(netX, 0, netX, netY - (netH / 2));
        stroke(255);
        strokeWeight(1);
        fill(255, 255, 255, 100);
        arc(netX, netY, netW, netH, HALF_PI, -HALF_PI);
        ellipse(netX, netY, netW / 4, netH);

        noStroke();
        fill(0);
        textSize(15);
        text('Score: ' + score, 500, 230);
        text('Time Remaining: ' + time + ' s', 325, 230);
    } // during game: code for user-controlled net and bottom text
}

var sandSpeed = 0.0004;

function showSand() {
    var sand = 0.01;
    stroke(235, 220, 180);
    strokeWeight(2);
    beginShape();
    for (var i = 0; i < width; i++) {
        var x = (i * sand) + (millis() * sandSpeed);
        var s = map(noise(x), 0, 1, 190, 210);
        line(i, s, i, height);
        // using map() and noise() function to generate randomized sand terrain
    }
    endShape();
}

function blowBubbles (bubbleX, bubbleY) {
    // making bubble object
    var bubble = {
        x: bubbleX,
        y: bubbleY,
        radius: random(8, 12),
        speed: -0.5,
        float: floatBubbles, 
        draw: drawBubbles 
    }
    return bubble;
}

function floatBubbles() {
    // making the bubbles move horizontally and float
    this.x += (this.speed * 2);
    this.y += this.speed;
    if (this.x <= 0) {
        this.x = width;
    }
    if (this.y <= 0) {
        this.y = height;
    } // bubbles "pop" when they reach top of screen
}

function drawBubbles() {
    push();
    translate(this.x, this.y);
    strokeWeight(1);
    stroke(255, 255, 255, 90);
    fill(160, 245, 255, 90);
    ellipse(1, 10, this.radius, this.radius);
    noStroke();
    fill(255, 255, 255, 90);
    ellipse(-1, 8, 2, 2);
    pop();
}

function showBubbles() {
    for (i = 0; i < bubbles.length; i++) {
        bubbles[i].float();
        bubbles[i].draw();
    }
}

function makeFish(fishX, fishY) {
    // making the fish object
    var fish = {
        fx: fishX,
        fy: fishY,
        fishspeed: random(-3, -8),
        fishmove: moveFish,
        fishcolor: random(100, 150),
        fishdraw: drawFish
    }
    return fish;
}

function moveFish() {
    this.fx += this.fishspeed;
    if (this.fx <= -10) {
        this.fx += width;
        this.fy = random(height);
        this.fspeed = random(-3, -8);
    }
}

function drawFish() {
    var tailLength = 8;
    noStroke();
    fill(this.fishcolor);
    ellipse(this.fx, this.fy, 12, 6);
    triangle(this.fx + (tailLength / 2), this.fy, this.fx + tailLength, this.fy - 3, this.fx + tailLength, this.fy + 3);
}

function showFish() {
    for (i = 0; i < fish.length; i++) {
        fish[i].fishmove();
        fish[i].fishdraw();
    }
}

function makeBottle(bottleX, bottleY) {
    //making the bottle object
    var bottle = {
        bx: bottleX,
        by: bottleY,
        bspeed: random(-3, -8), 
        bmove: moveBottle,
        bdraw: drawBottle,
    }
    return bottle;
}

function moveBottle() {
    this.bx += this.bspeed;
    if (this.bx <= -15) {
        this.bx += width;
        this.by = random(20, 160);
        this.bspeed = random(-3, -8);
        if (time != 0) score -= 20;
        // if bottle isn't clicked, points are deducted
    }
}

function drawBottle() {
    bottleW = 7;
    bottleH = 14;
    bottleCapW = 3;
    bottleCapH = 2;
    stroke(255);
    strokeWeight(0.5);
    fill(255, 255, 255, 50);
    rect(this.bx, this.by, bottleW, bottleH);
    triangle(this.bx, this.by, this.bx + (bottleW / 2), this.by - 4, this.bx + bottleW, this.by);
    noStroke();
    fill(0, 160, 0);
    rect(this.bx + (bottleW / 2) - (bottleCapW / 2), this.by - 5, bottleCapW, bottleCapH);
    noStroke();
    fill("turquoise");
    rect(this.bx, this.by, bottleW, bottleH / 3);
}

function showBottle() {
    for (i = 0; i < bottle.length; i++) {
        bottle[i].bmove();
        bottle[i].bdraw();
    }
}

function makeSeaTurtle (seaTurtleX, seaTurtleY) {
    //making the sea turtle object
    var seaTurtle = {
        stx: seaTurtleX,
        sty: seaTurtleY,
        stspeed: random(-3, -6),
        stmove: swimSeaTurtle,
        stdraw: hatchSeaTurtle
    }
    return seaTurtle;
}

function swimSeaTurtle() {
    this.stx += this.stspeed;
    if (this.stx <= -15) {
        this.stx += width;
        this.sty = random(60, 140);
        this.stspeed = random(-3, -6);
    }
}

function hatchSeaTurtle() {
    shellW = 30;
    shellH = 20;
    stroke(110, 150, 75);
    strokeWeight(0.5);
    fill(175, 200, 90);
    ellipse(this.stx - 17, this.sty - 3, 12, 5);
    arc(this.stx - 5, this.sty, 7, 15, HALF_PI - QUARTER_PI, PI + HALF_PI - QUARTER_PI, CHORD);
    arc(this.stx + 10, this.sty, 5, 15, HALF_PI - QUARTER_PI, PI + HALF_PI - QUARTER_PI, CHORD);
    triangle(this.stx + (shellW / 4) + 3, this.sty - 4, this.stx + (shellW / 2) + 3, this.sty - 5, this.stx + (shellW / 4) + 3, this.sty);
    stroke(70, 125, 30);
    strokeWeight(0.5);
    fill(110, 150, 75);
    arc(this.stx, this.sty, shellW, shellH, -PI, 0, CHORD);
    noStroke();
    fill(50, 105, 10);
    ellipse(this.stx - 18, this.sty - 2, 1, 1);
    stroke(175, 200, 90);
    strokeWeight(0.5);
    noFill();
    arc(this.stx, this.sty - 8, 15, 5, 0, PI, OPEN);
    line(this.stx - 4, this.sty - 5.5, this.stx - 6, this.sty - 0.5);
    line(this.stx + 4, this.sty - 5.5, this.stx + 6, this.sty - 0.5);
}

function showSeaTurtle() {
    for (i = 0; i < seaTurtle.length; i++) {
        seaTurtle[i].stmove();
        seaTurtle[i].stdraw();
    }
}

function makeCandyWrapper() {
    // making the caondy wrapper object
    var colorRand = Math.floor(random(0,5));
    var candyWrapper = {
        cwx: candyWrapperX,
        cwy: candyWrapperY,
        cwspeed: random(-3, -6),
        cwmove: floatCandyWrapper,
        cwdraw: tossCandyWrapper,
        cwcolor: candyColors[colorRand]
    }
    return candyWrapper;  
}

function floatCandyWrapper() {
    this.cwx += this.cwspeed;
    if (this.cwx <= -15) {
        this.cwx += width;
        this.cwy = random(60, 140);
        this.cwspeed = random(-3, -6);
        if (time != 0) score -= 5;
        // if candy wrapper isn't clicked, points are deducted
    }
}

function tossCandyWrapper() {
    candyW = 7;
    candyH = 5;
    noStroke();
    fill(this.cwcolor);
    ellipse(this.cwx, this.cwy, candyW, candyH);
    triangle(this.cwx - (candyW / 2), this.cwy, this.cwx - (candyW / 2) - 3, this.cwy - 2, this.cwx - (candyW / 2) - 3, this.cwy + 2);
    triangle(this.cwx + (candyW / 2), this.cwy, this.cwx + (candyW / 2) + 3, this.cwy - 2, this.cwx + (candyW / 2) + 3, this.cwy + 2);
}

function showCandyWrapper() {
    for (i = 0; i < candyWrapper.length; i++) {
        candyWrapper[i].cwmove();
        candyWrapper[i].cwdraw();
    }
}

function mousePressed() {
    //making the objects "reset" when pressed on by mouse
    for(var i = 0; i < fish.length; i++) {
        if (dist(netX - 7, netY, fish[i].fx, fish[i].fy) < 10 & mouseIsPressed && time != 0) {
            fish[i].fx = width;
            fish[i].fy = random(height);
            fish[i].fspeed = random(-3, -8);
            score -= 5;
            // if fish are clicked, points are deducted
        }
    }

    for(var i = 0; i < seaTurtle.length; i++) {
        if (dist(netX - 7, netY, seaTurtle[i].stx, seaTurtle[i].sty) < 15 & mouseIsPressed && time != 0) {
            seaTurtle[i].stx = width;
            seaTurtle[i].sty = random(height);
            seaTurtle[i].stspeed = random(-3, -6);
            score -= 25;
            // if turtle is clicked, points are deducted
        }
    }

    for(var i = 0; i < bottle.length; i++) {
        if (dist(netX - 7, netY, bottle[i].bx, bottle[i].by) < 10 & mouseIsPressed && time != 0) {
            bottle[i].bx = width;
            bottle[i].by = random(height);
            bottle[i].bspeed = random(-3, -6);
            score += 20;
        }
    }

    for(var i = 0; i < candyWrapper.length; i++) {
        if (dist(netX - 7, netY, candyWrapper[i].cwx, candyWrapper[i].cwy) < 10 & mouseIsPressed && time != 0) {
            candyWrapper[i].cwx = width;
            candyWrapper[i].cwy = random(height);
            candyWrapper[i].cwspeed = random(-3, -8);
            score += 5;
        }
    }
}

For my final project, I made an interactive game that’s supposed to serve as a commentary on the ocean pollution crisis. The game itself is a metaphor: we have a limited amount of time to solve the problem of ocean pollution, and finding a solution requires awareness and active work.

Working more with using objects in code and figuring out how to make objects interactive was a really fun process. I also liked testing out my game and thinking about the ways to improve the user-oriented aspects of my game design.

]]>
https://courses.ideate.cmu.edu/15-104/f2019/2019/12/06/claire-lee-final-project/feed/ 0
Claire Lee – Looking Outwards – 12 https://courses.ideate.cmu.edu/15-104/f2019/2019/11/12/claire-lee-looking-outwards-12/ https://courses.ideate.cmu.edu/15-104/f2019/2019/11/12/claire-lee-looking-outwards-12/#respond Wed, 13 Nov 2019 01:10:40 +0000 https://courses.ideate.cmu.edu/15-104/f2019/?p=52663 Continue reading "Claire Lee – Looking Outwards – 12"]]>

For reference: my final project is an interactive game about cleaning up ocean waste.

The first project I want to discuss is an app called Motionphone that was created by interactive artist Scott Snibbe. The app allows people to collaborate on a work of interactive art over a network. I liked the way that Motionphone created a whole new way for players to communicate visually over a network. It also includes some cool UI/UX elements, such as an infinite interactive canvas and a music-playing function. Some of the aspects of this work that I’m taking inspiration from for my project is the quality and fluidity of the generated objects and the ease with which the user can manipulate the given object at their will.

Motionphone, created by Scott Snibbe.

The second project I’m taking inspiration from is called EROS/ION by designer, researcher, and educator Caitlin Morris. EROS/ION is an installed performance that explores how we perceive and interact with our environment by depicting an object’s decay through the synthesis of audible and tactile experience. I was inspired by the concepts that inspired Morris to create this piece: because my project also pertains to the ideas of decay and the environment, I drew inspiration from the thought-provoking setup of EROS/ION.

]]>
https://courses.ideate.cmu.edu/15-104/f2019/2019/11/12/claire-lee-looking-outwards-12/feed/ 0
Claire Lee – Project 12 – Proposal https://courses.ideate.cmu.edu/15-104/f2019/2019/11/12/claire-lee-project-12-proposal/ https://courses.ideate.cmu.edu/15-104/f2019/2019/11/12/claire-lee-project-12-proposal/#respond Wed, 13 Nov 2019 00:47:11 +0000 https://courses.ideate.cmu.edu/15-104/f2019/?p=52660 Continue reading "Claire Lee – Project 12 – Proposal"]]>

For my final project, I decided to create an interactive game where the player is given a set amount of time to move a net up and down and “filter” as much waste from the ocean as possible without harming the marine wildlife. I decided to calculate the total points system based on the number of years (back-to-back) that the trash collected would have lasted before decomposing, to give players a little more perspective on how the impact of a minuscule decision can quite literally last several lifetimes. I also wanted to depict the gravity of the waste problem in the oceans–while this is not directly related to climate change, I believe that it is still an important issue to address because it is another reflection of the careless attitude with which we as a society are treating our planet. I plan to use object functions to generate the items, and have the net move with respect to mouseY.

]]>
https://courses.ideate.cmu.edu/15-104/f2019/2019/11/12/claire-lee-project-12-proposal/feed/ 0
Claire Lee – Project 11 – Landscape https://courses.ideate.cmu.edu/15-104/f2019/2019/11/09/claire-lee-project-11-landscape/ https://courses.ideate.cmu.edu/15-104/f2019/2019/11/09/claire-lee-project-11-landscape/#respond Sun, 10 Nov 2019 04:52:55 +0000 https://courses.ideate.cmu.edu/15-104/f2019/?p=52453 Continue reading "Claire Lee – Project 11 – Landscape"]]>

For my landscape project, I chose to make a basic underwater scene containing water, sand, bubbles, and fish. I think this project was a great opportunity to play around with objects and setting different types of parameters. I definitely came out of this with a much better understanding of how to use objects in code. One of the elements that I had trouble with is setting the color using the color() function (which is why I ended up using grayscale). Some things I wish I could have added are: coral/seaweed, other types of animals, and lines to represent water flow.

project11

/* Claire Lee
15-104 Section B
seoyounl@andrew.cmu.edu
Project-11 */

var bubbles = [];
var seaweed = [];
var fish = [];

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

    for (i = 0; i < 50; i++) {
        bubbleX = random(width);
        bubbleY = random(height);
        bubbles[i] = blowBubbles(bubbleX, bubbleY);
    }

    for (k = 0; k < 30; k++) {
        fishX = random(width);
        fishY = random(height);
        fish[k] = makeFish(fishX, fishY);
    }
}

function draw() {
    background(140, 225, 255);
    showBubbles();
    showFish();
    showSand();
}


var sandSpeed = 0.0004;

function showSand() {
    var sand = 0.01;
    stroke(235, 220, 180);
    strokeWeight(2)
    beginShape();
    for (var i = 0; i < width; i++) {
        var x = (i * sand) + (millis() * sandSpeed);
        var s = map(noise(x), 0, 1, 150, 200);
        line(i, s, i, height);
        // using map() and noise() function to generate randomized sand terrain
    }
    endShape();
}

function blowBubbles (bubbleX, bubbleY) {
    // making bubble object
    var bubble = {
        x: bubbleX,
        y: bubbleY,
        radius: random(8, 12),
        speed: -0.5,
        float: floatBubbles, 
        draw: drawBubbles 
    }
    return bubble;
}

function floatBubbles() {
    // making the bubbles move horizontally and float
    this.x += (this.speed * 2);
    this.y += this.speed;
    if (this.x <= 0) {
        this.x = width;
    }
    if (this.y <= 0) {
        this.y = height;
    } // bubbles "pop" when they reach top of screen
}

function drawBubbles() {
    push();
    translate(this.x, this.y);
    strokeWeight(1);
    stroke(255, 255, 255, 90);
    fill(160, 245, 255, 90);
    ellipse(1, 10, this.radius, this.radius);
    noStroke();
    fill(255, 255, 255, 90);
    ellipse(-1, 8, 2, 2);
    pop();
}

function showBubbles() {
    for (i = 0; i < bubbles.length; i++) {
        bubbles[i].float();
        bubbles[i].draw();
    }
}

function makeFish(fishX, fishY) {
    var fish = {
        fx: fishX,
        fy: fishY,
        fishspeed: random(-3, -8),
        fishmove: moveFish,
        fishcolor: random(100, 200),
        fishdraw: drawFish
    }
    return fish;
}

function moveFish() {
    this.fx += this.fishspeed;
    if (this.fx <= -10) {
        this.fx += width;
    }
}

function drawFish() {
    var tailLength = 8;
    noStroke();
    fill(this.fishcolor);
    ellipse(this.fx, this.fy, 10, 5);
    triangle(this.fx + (tailLength / 2), this.fy, this.fx + tailLength, this.fy - 3, this.fx + tailLength, this.fy + 3);
}

function showFish() {
    for (i = 0; i < fish.length; i++) {
        fish[i].fishmove();
        fish[i].fishdraw();
    }
}

** I’m using a grace day for this project!

]]>
https://courses.ideate.cmu.edu/15-104/f2019/2019/11/09/claire-lee-project-11-landscape/feed/ 0
Claire Lee – Looking Outwards – 11 https://courses.ideate.cmu.edu/15-104/f2019/2019/11/06/claire-lee-looking-outwards-11/ https://courses.ideate.cmu.edu/15-104/f2019/2019/11/06/claire-lee-looking-outwards-11/#respond Thu, 07 Nov 2019 03:03:26 +0000 https://courses.ideate.cmu.edu/15-104/f2019/?p=51804 Continue reading "Claire Lee – Looking Outwards – 11"]]>

Filtered Transparencies is an interactive installation created for the Paseo Arts Festival by architect and media artist Filipa Valente. I decided to write about Valente’s work because she runs a platform called limiLAB for experimentation in the fields of architecture, user experience design, and animation, which is interesting to me because of my interest in UI/UX. With this piece in particular, Valente really focused on making her audience ponder about their relationship to the space around them by immersing them into a light-generated hologram-like environment. I thought it was really interesting that she used a mix of art and technology to create a commentary on how people perceive reality, how they fit into their own generated world, and how that perception is so easily manipulated.

Filtered Transparencies, Filipa Valente, 2014.

The installation is created in a 3-dimensional space, with multiple payers of projections adding to the complexity of the piece. Each element (different shapes or lines formed by the projections) also seems to receive influence from the viewer’s movements, so that no two viewers ever have the same experience. I think the algorithm behind this work probably involves something similar in concept to our text rain assignment, where objects created by code are interacting with input from a camera.

]]>
https://courses.ideate.cmu.edu/15-104/f2019/2019/11/06/claire-lee-looking-outwards-11/feed/ 0
Claire Lee – Project 10 – Sonic Sketch https://courses.ideate.cmu.edu/15-104/f2019/2019/11/02/claire-lee-project-10-sonic-sketch/ https://courses.ideate.cmu.edu/15-104/f2019/2019/11/02/claire-lee-project-10-sonic-sketch/#respond Sun, 03 Nov 2019 02:12:35 +0000 https://courses.ideate.cmu.edu/15-104/f2019/?p=51477 Continue reading "Claire Lee – Project 10 – Sonic Sketch"]]>

project10

/* 
Claire Lee
15-104 Section B
seoyounl@andrew.cmu.edu
Project-10
*/

// I'm using one of my grace days for this project!

var bearUrls = [
    "https://i.imgur.com/BOQ7Bt9.jpg", 
    "https://i.imgur.com/uhBjJf4.jpg",
    "https://i.imgur.com/UK6rJXn.jpg",
    "https://i.imgur.com/UsOhg2L.jpg" ]

var bearBrown;
var bearPolar;
var bearBlack;
var bearPanda;

var bearBrownSound;
var bearPolarSound;
var bearBlackSound;
var bearPandaSound;
//setting the global variables

function preload() {
    bearBrown  = loadImage(bearUrls[0]);
    bearPolar = loadImage(bearUrls[1]);
    bearBlack = loadImage(bearUrls[2]);
    bearPanda = loadImage(bearUrls[3]);
    //loading the images

    bearBrownSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bark.wav");
    bearPolarSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/meow.wav");
    bearBlackSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/hi.wav");
    bearPandaSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/moo.wav");
    //loading the sounds
}


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

function soundSetup() { // setup for audio generation
    bearBrownSound.setVolume(1);
    bearPolarSound.setVolume(1);
    bearBlackSound.setVolume(1);
    bearPandaSound.setVolume(1);
}


function draw() {
    image(bearBrown, 0, 0, width/4, height);
    image(bearPolar, width/4, 0, width/4, height);
    image(bearBlack, width/2, 0, width/4, height);
    image(bearPanda, 3*width/4, 0, width/4, height);
    //divides canvas into quarters and sets different image for each
}

function mousePressed() {
    if (mouseX > 0 & mouseX < (width/4)) {
        bearBrownSound.play();
    } else {
        bearBrownSound.pause();
    }
    // brown bear sound

    if (mouseX > (width/4) & mouseX < (width/2)) {
        bearPolarSound.play();
    } else {
        bearPolarSound.pause();
    }
    // polar bear sound

    if (mouseX > (width/2) & mouseX < (3*width/4)) {
        bearBlackSound.play();
    } else {
        bearBlackSound.pause();
    }
    // black bear sound

    if (mouseX > (3*width/4) & mouseX < width) {
        bearPandaSound.play();
    } else {
        bearPandaSound.pause();
    }
    //panda bear sound
}

I decided to do bears (with the addition of some unexpected sounds) because I wanted to make a group of cute characters with some unity. I had a lot of fun making the visuals for this project, and it was really interesting to learn how to manipulate sound files and work on a local server.

]]>
https://courses.ideate.cmu.edu/15-104/f2019/2019/11/02/claire-lee-project-10-sonic-sketch/feed/ 0
Claire Lee – Looking Outwards – 10 https://courses.ideate.cmu.edu/15-104/f2019/2019/11/01/claire-lee-looking-outwards-10/ https://courses.ideate.cmu.edu/15-104/f2019/2019/11/01/claire-lee-looking-outwards-10/#respond Fri, 01 Nov 2019 15:45:14 +0000 https://courses.ideate.cmu.edu/15-104/f2019/?p=50432 Continue reading "Claire Lee – Looking Outwards – 10"]]>

I decided to write about a short musical piece created by computer music artist and pioneer Laurie Spiegel called Strand of Life (‘Viroid’). I did listen to several other pieces in her album Unseen World, but Strand of Life was really fascinating to me because of both the conception and the result. This piece also interested me because it was so similar in concept to the sound art piece I wrote about in my Looking-Outwards-04, Pierry Jacquillard’s Prélude in ACGT, so I was interested to see each artist’s unique approach to the concept of generating music with patterns derived from genetic material.

Spiegel got the idea for this piece while she was sick with an infection-taking that as inspiration, she converted a viroid’s DNA into midi data and used that as the base for her musical track. I imagine that the algorithm behind the DNA-midi conversion was relatively straightforward, but she incorporates other elements (vocals, instrumentals) that were also partly computer-generated that make the piece much more complex than the sound art I wrote about previously.

]]>
https://courses.ideate.cmu.edu/15-104/f2019/2019/11/01/claire-lee-looking-outwards-10/feed/ 0
Claire Lee – Looking Outwards – 09 https://courses.ideate.cmu.edu/15-104/f2019/2019/10/23/claire-lee-looking-outwards-09/ https://courses.ideate.cmu.edu/15-104/f2019/2019/10/23/claire-lee-looking-outwards-09/#respond Wed, 23 Oct 2019 04:31:41 +0000 https://courses.ideate.cmu.edu/15-104/f2019/?p=49008 Continue reading "Claire Lee – Looking Outwards – 09"]]>
Weather Thingy by Adrien Kaeser

I decided to write about the project cited in Katrina Hu’s Looking Outwards-04, called the Weather Thingy. Created by Adrien Kaeser, the Weather Thingy is a real-time climate sound controller that essentially converts climactic data into instrument-friendly midi data. One aspect that I found particularly interesting was that the creator put a special focus on being able to listen to the real-time impact of the weather on a piece. I think this project captures a little piece of a moment in a very unique way, and I thought it was interesting how it was similar in concept (and presumably execution) to Pierry Jacquillard’s Prélude in ACGT, which I wrote about in one of my previous blog posts. It just goes to show that the modern conception of art is very different from the traditional paint-on-canvas ideas– the versatility of code even allows us to create art out of seemingly mundane data.

]]>
https://courses.ideate.cmu.edu/15-104/f2019/2019/10/23/claire-lee-looking-outwards-09/feed/ 0
Claire Lee – Project 09 – Computational Portrait https://courses.ideate.cmu.edu/15-104/f2019/2019/10/23/claire-lee-project-09-computational-portrait/ https://courses.ideate.cmu.edu/15-104/f2019/2019/10/23/claire-lee-project-09-computational-portrait/#respond Wed, 23 Oct 2019 04:11:09 +0000 https://courses.ideate.cmu.edu/15-104/f2019/?p=48995 Continue reading "Claire Lee – Project 09 – Computational Portrait"]]>

project09

/* 
Claire Lee
15-104 Section B
Project-09
*/

var portraitImage;

function preload() {
    var portraitImageURL = "https://i.imgur.com/yxlQW1j.jpg"
    portraitImage = loadImage(portraitImageURL);

}

function setup() {
    createCanvas(600, 800);
    background(0);
    portraitImage.loadPixels();
    frameRate(100);
}

function draw() {
    var px1 = random(width);
    var py1 = random(height);
    var px2 = px1 + random(-20, 20);
    var py2 = py1 + random(-20, 20);
    var px3 = px1 + random(-20, 20);
    var py3 = py1 + random(-20, 20);
    var px4 = px1 + random(-20, 20);
    var py4 = py1 + random(-20, 20);
    var ix = constrain(floor(px1), 0, width - 1);
    var iy = constrain(floor(py1), 0, height - 1);
    var colorAtXY = portraitImage.get(ix, iy);

    noStroke();
    fill(colorAtXY);
    quad(px1, py1, px2, py2, px3, py3, px4, py4);

}

This portrait project was really interesting because we got to work with inserting and manipulating images from external sources. It took me a while to understand what each piece of code was meant to do, but it turned out to be fairly straightforward. I tried experimenting with different degrees of randomness for the shapes. Orignally, I was trying to go for a clean-cut geometric look, but I ended up liking the look of multi-layered small shapes better because the smaller shapes kind of resemble rough brushstrokes.

The “finished” portrait
Original image. This is a self-portrait!
]]>
https://courses.ideate.cmu.edu/15-104/f2019/2019/10/23/claire-lee-project-09-computational-portrait/feed/ 0
Claire Lee – Looking Outwards – 08 https://courses.ideate.cmu.edu/15-104/f2019/2019/10/13/claire-lee-looking-outwards-08/ https://courses.ideate.cmu.edu/15-104/f2019/2019/10/13/claire-lee-looking-outwards-08/#respond Mon, 14 Oct 2019 02:41:16 +0000 https://courses.ideate.cmu.edu/15-104/f2019/?p=48436 Continue reading "Claire Lee – Looking Outwards – 08"]]>

I decided to read about Mary Huang, one of two joint speakers at the 2013 Eyeo festival that founded a software-based apparel creation company called Continuum Fashion. Huang graduated with a BA in Design/Media Arts from UCLA, and went on to receive a MA from the Copenhagen Institute of Interaction Design.

Eyeo 2013 – Huang & Fizel

I really admired Mary’s projects under Continuum Fashion, which served as a reflection the emerging role of technology in society while also giving the masses an accessible outlet with which anyone could design their own apparel and see it come to life. I really liked that Mary considers her work a continuation of the constantly evolving definition of “fashion” and the social commentary behind her work. I also really liked that she put a lot of effort into the user-interface design of these projects so that they were easy for people with no coding experience to use.

Strvct, Continuum’s first collection of 3D-printed shoes.

Some of the strategies in her presentation that I thought were most effective were that she gave a lot of visuals and included examples of some concepts and projects (2-dimensional pictures to knitwear, different types of weaves) that served as the foundation on which her work was based. I think it did a lot to enhance my understanding of her goals for these projects and her thought process behind them. I also liked that she went in and actually gave her audience a look inside the user interface of her apparel-making programs, so they could see some of the customizations and adjustments available for the users to make on their pieces.

]]>
https://courses.ideate.cmu.edu/15-104/f2019/2019/10/13/claire-lee-looking-outwards-08/feed/ 0