joanlee – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice https://courses.ideate.cmu.edu/15-104/f2022 Professor Tom Cortina • Fall 2022 • Introduction to Computing for Creative Practice Sun, 06 Nov 2022 04:53:00 +0000 en-US hourly 1 https://wordpress.org/?v=6.0.8 Project 09: Portrait https://courses.ideate.cmu.edu/15-104/f2022/2022/11/06/project-09-portrait-2/ https://courses.ideate.cmu.edu/15-104/f2022/2022/11/06/project-09-portrait-2/#respond Sun, 06 Nov 2022 04:53:00 +0000 https://courses.ideate.cmu.edu/15-104/f2022/?p=75303 Continue reading "Project 09: Portrait"]]>

I really enjoyed this project and think this turned out cute. I especially like how the icons reinforce what the image is communicating (I really love fruit).

sketch
sketch after coloring with the mouse for a while
/*
    Joan Lee
    Section D

    This program draws a portrait of me GRIPPING my fruit with symbols that represent me loving fruit.
*/

function preload() {
    joan = loadImage("https://i.imgur.com/eMJulaO.png");
}

function setup() {
    createCanvas(385, 480);
    joan.resize(width, height);
    background(255);
    joan.loadPixels();
}

function draw() {
    //want the image to be revealed where the mouse is
    var pixColor = joan.get(mouseX, mouseY);
    
    //revealing image of me GRIPPING fruit with icons that resemble fruit and my love for it
    noStroke();
    iLoveFruit = ["♥", "⊛", "❂"];

    for(var i = 0; i < 3; i ++) {
        fill(pixColor);
        textSize(random(1, 10));
        text(iLoveFruit[floor(random(iLoveFruit.length))], mouseX, mouseY);
    }
}
]]>
https://courses.ideate.cmu.edu/15-104/f2022/2022/11/06/project-09-portrait-2/feed/ 0
Looking Outwards 09: A Focus on Women and Non-binary Practitioners in Computational Art  https://courses.ideate.cmu.edu/15-104/f2022/2022/11/06/looking-outwards-09-a-focus-on-women-and-non-binary-practitioners-in-computational-art-5/ https://courses.ideate.cmu.edu/15-104/f2022/2022/11/06/looking-outwards-09-a-focus-on-women-and-non-binary-practitioners-in-computational-art-5/#respond Sun, 06 Nov 2022 04:45:58 +0000 https://courses.ideate.cmu.edu/15-104/f2022/?p=75300 Continue reading "Looking Outwards 09: A Focus on Women and Non-binary Practitioners in Computational Art "]]>
video of Delicate Boundaries by Chris Sugrue

I found Chris Sugrue’s Delicate Boundaries compelling because of its interactive and creative nature. Chris is an artist who specializes in interactive new media installations. She earned a Master’s of Fine Arts in Design and Technology from Parsons School of Design, and now is based in Paris, where she teaches at Parson’s campus there.

This piece allows users to watch as small bug-like creatures scuttle across a darkness, and come to life when hands touch the screen. The artist definitely knows how to make bugs look appealing; even though their movement and legs clearly indicate that they are creepy crawlers, their shapes are approachable and cute. I am curious as to why these critters were chosen to be the subjects of this project. It is remarkable how well the software is able to read the locations of hands, as well as the paths to follow along the arms, and I admire its blending of virtual and physical worlds (hence the title). Since it reacts to touch and is projected from above, I assume this effect is achieved through infrared/heat sensors.

]]>
https://courses.ideate.cmu.edu/15-104/f2022/2022/11/06/looking-outwards-09-a-focus-on-women-and-non-binary-practitioners-in-computational-art-5/feed/ 0
Project 07: Curves https://courses.ideate.cmu.edu/15-104/f2022/2022/10/16/project-07-curves-6/ https://courses.ideate.cmu.edu/15-104/f2022/2022/10/16/project-07-curves-6/#respond Mon, 17 Oct 2022 02:38:24 +0000 https://courses.ideate.cmu.edu/15-104/f2022/?p=74678 Continue reading "Project 07: Curves"]]>

This is my floral composition based on mathematical curves and reacts to the mouse’s location on the canvas.

sketch
/*
    Joan Lee
    Section D

    This program draws an interactive floral composition with mathematical curves.
*/

var nPoints = 400;

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


function draw() {
    background(28,92,76);    //dark green
    
    //drawing flower curve
    push();
    translate(width/2, height/2);
    drawCardioidCurve();
    pop();

    //drawing leaves curve
    push();
    translate(width/2, height/2);
    drawHypotrochoidCurve();
    pop();

}

//--------------------------------------------------
function drawCardioidCurve() {
    //cardioid curve
    push();
    translate(x, y);
    rotate(radians(90));
    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);
    var a = map(x, 0, width, 0, 40);
    var b = a/2;
   
    //mouse movement interaction
    if (mouseY > height/2) {    //color change
        fill(244,52,4);     //bright red
    } else {
        fill(252,156,132);  //pink
    }

    //cardioid curve parametric equations
    beginShape();
    noStroke();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);

        x = a * (6 * cos(t) - cos(6 * t));
        y = a * (6 * sin(t) - sin(6 *t));
        vertex(x, y);
    }
    endShape(CLOSE);
    pop();
    
}

//--------------------------------------------------
function drawHypotrochoidCurve() {
    //hypotrochoid curve
    noFill();
    strokeWeight(1);

    //mouse movement interaction

    if (mouseX < width/2) {      //color change
        stroke(4,220,156);  // bright green
    } else {
        stroke(204,236,228);    //pale green
    }

    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);
    var a = map(x, 0, width, 50, 150);
    var b = map(y, 0, height, 1, 6);
    var h = constrain(mouseY, 50, 90);
    
    //hypotrochoid curve parametric equations
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        x = (a - b) * cos(t) + h * cos(t * ((a - b) / b));
        y = (a - b) * sin(t) - h * sin(t * ((a - b) / b));
        vertex(x, y);
    }
    endShape(CLOSE);
    
}
]]>
https://courses.ideate.cmu.edu/15-104/f2022/2022/10/16/project-07-curves-6/feed/ 0
Looking Outwards 07 https://courses.ideate.cmu.edu/15-104/f2022/2022/10/16/looking-outwards-07-12/ https://courses.ideate.cmu.edu/15-104/f2022/2022/10/16/looking-outwards-07-12/#respond Mon, 17 Oct 2022 02:30:15 +0000 https://courses.ideate.cmu.edu/15-104/f2022/?p=74670 Continue reading "Looking Outwards 07"]]>

The Search Clock by Chris Harrison stood out to me because I found the concept very interesting; mapping out data from search engines, Magellan and AOL, over the course of a typical day (from studying trends for nine weeks), and then taking it a step further by mapping the differences in searches from 1997-2000. I admire firstly how visually interesting this project is because it is radially centered and balanced, but with enough variation to keep it interesting and engaging. It makes me want to read into the smaller text, and this demonstrates the artist’s eye for composition and hierarchy. Additionally, it very clearly shows information in a well-organized way. I have been learning about and practicing the visualization of data and systems in one of my design classes, and I know how tedious it is to land on something that makes sense. Furthermore, the content itself is interesting, with a lot of risqué and humorous topics trending at certain times of the day.

Visualization of information collected from the Magellan search engine
Visualization of information collected from the AOL search engine
]]>
https://courses.ideate.cmu.edu/15-104/f2022/2022/10/16/looking-outwards-07-12/feed/ 0
Project 03: Dynamic Drawing https://courses.ideate.cmu.edu/15-104/f2022/2022/09/18/project-03-dynamic-drawing-11/ https://courses.ideate.cmu.edu/15-104/f2022/2022/09/18/project-03-dynamic-drawing-11/#respond Mon, 19 Sep 2022 00:15:16 +0000 https://courses.ideate.cmu.edu/15-104/f2022/?p=72326 Continue reading "Project 03: Dynamic Drawing"]]>
Sketches for the different changes I planned to make when the mouse moved
sketch

Although the product is not where I wish it was visually, I will just have to improve on that in my next project. The most challenging part was refreshing my memory on radians so that I wouldn’t have to keep plugging in and checking if numbers work.

/*
    Joan Lee
    Section D
*/

var h = 0;
var angle = 0;

function setup() {
    createCanvas(600, 450);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(135 * h, 209 * h, 255 * h);      //whenever the mouse moves horizontally it turns from 0 (black) to a sky blue color

    //earth
    noStroke();
    fill(78, 92, 222);
    ellipse(width / 2, height, 800, 400);

    //orbit, done above both the sun and moon to apply to both the same
    translate(h * width, 100);  //moves the sun and moon as the mouse moves horizontally
    rotate(h * QUARTER_PI);     //rotates by pi/4 radians when the mouse moves horizontally
    
    //sun
    fill(255, 208, 0);
    circle(-width / 2, 325, 100 * h);     //grows when mouse moving to the right

    //moon
    fill(200);
    circle(width / 2, 50, 50 * (1 - h));    //shrinks when mouse moving to the right
    fill(135 * h, 209 * h, 255 * h);                //same fill as the background to ensure it is invisible and hiding the rest of the moon
    circle(width / 2 + 15, 50, 50 * (1 - h));       //circle that hides the rest of the moon so it looks like a crescent moon

    hPosition();        //function defined below

}

function hPosition(){
    h = mouseX / width;     //h is btwn 0 and 1 for simplicity's sake instead of just mouseX
    h = Math.min(h, 1);     //stops the changes when the mouse moves 100% of the canvas horizontally
}
]]>
https://courses.ideate.cmu.edu/15-104/f2022/2022/09/18/project-03-dynamic-drawing-11/feed/ 0
Looking Outwards 03: Computational Fabrication https://courses.ideate.cmu.edu/15-104/f2022/2022/09/18/looking-outwards-03-computational-fabrication-7/ https://courses.ideate.cmu.edu/15-104/f2022/2022/09/18/looking-outwards-03-computational-fabrication-7/#respond Mon, 19 Sep 2022 00:04:22 +0000 https://courses.ideate.cmu.edu/15-104/f2022/?p=72320 Continue reading "Looking Outwards 03: Computational Fabrication"]]>

A project I find particularly inspirational is “P_Wall” by Andrew Kudless (Matsys). I admire that it is a clearly patterned sculpture with a mathematical structure, but it has organic curves to it. I know that this is difficult to achieve because of a project I had done last year in my freshman year design studio in which a group of my classmates and I were to construct an environment with duplicates of small modules. It was difficult to form something that looked natural with pieces that were geometric, so I respect this aspect. This wall also reminds me of beef tripe, which is very soft and flabby, and contrasts the hardness of the wood used in the sculpture. I suppose that the algorithm that generated this structure was based on simple shapes and limited in size per hole. It was likely also randomized in its protruding curves or calculated based on ripples or waves seen in nature. Kudless’ artistic sensibility is seen in this piece, not just in the visually appealing pattern, but additionally in its size, which leaves the viewer with a grander impression and ability to experience the individual modules.

Image of the “P_Wall” by Andrew Kudless

]]>
https://courses.ideate.cmu.edu/15-104/f2022/2022/09/18/looking-outwards-03-computational-fabrication-7/feed/ 0
Project 02: Variable Face https://courses.ideate.cmu.edu/15-104/f2022/2022/09/10/project-02-variable-face-8/ https://courses.ideate.cmu.edu/15-104/f2022/2022/09/10/project-02-variable-face-8/#respond Sat, 10 Sep 2022 22:22:55 +0000 https://courses.ideate.cmu.edu/15-104/f2022/?p=71153 Continue reading "Project 02: Variable Face"]]>

This project was challenging because it took a lot of trial and error. Commenting helped a lot when going back and forth between editing different things to match them up.

sketch
/*
    Joan Lee
    Section D

    Aspects of variability
        4 different expressions with mouse movement
        switching hair color each click
        different posture each click
        background changes every click
*/

var eyeSize = 20;
var faceWidth = 150;
var faceHeight = 180;
var shoulderHeight = 480;
var bodyColor = "white";
var on = false;
var r = 100;
var g = 74;
var b = 65;
var bgColor = 0;

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

function draw() {
    background(bgColor);

    //hair behind face
    if(on == true){
        fill(r, g, b);
    } else{
        fill(255 - r, 255 - g, 255 - b);
    }
    ellipse(width / 2, height / 2 + (faceHeight / 4), faceWidth + 50, 330);

    //person
    noStroke();
    fill(bodyColor);
    ellipse(width / 2, height, 170, shoulderHeight);    //body
    fill(250, 230, 180);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);     //head
   
    //eyes
    stroke(0);
    strokeWeight(1);
    fill("white");
    var eyeLX = width / 2 - faceWidth / 4;
    var eyeRX = width / 2 + faceWidth / 4;
    var x = constrain(mouseX, 20, 35);  //eyes getting bigger with mouse moving right
    circle(eyeLX, height / 2, x);
    circle(eyeRX, height / 2, x);   //whites of eyes
    fill(63, 35, 11);
    circle(eyeLX + 1, height / 2, 5);
    circle(eyeRX - 1, height / 2, 5);   //pupils considering interpupillary distance

    //nose
    noFill();
    stroke(205, 179, 156);  //shadow
    strokeWeight(1);
    beginShape();
    curveVertex(width / 2 + 5, height / 2 + 10);
    curveVertex(width / 2 + 5, height / 2 + 10);
    curveVertex(width / 2, height / 2 + 20);
    curveVertex(width / 2 - 5, height / 2 + 10);
    curveVertex(width / 2 - 5, height / 2 + 10);
    endShape();
    
    //mouth
    strokeWeight(4);
    stroke(255, 200, 200);
    fill(0);
    var x1 = constrain(mouseX, 1, 40);
    ellipse(width / 2, height / 2 + 50, 60, x1);    //making mouth bigger with mouse placement
    
    //bangs
    noStroke();
    if(on == true){
        fill(r, g, b);
    } else{
        fill(255 - r, 255 - g, 255 - b);
    }
    arc(width / 2, height / 2 - faceHeight / 6, faceWidth + 10, faceHeight - 30, PI, 0);

    //eyebrows
    fill(73, 45, 35);
    var y = constrain(mouseY, height / 2 - 50, height / 2 - 30);
    rect((width / 2) - (faceWidth / 3), y, 30, 5);      
    rect((width / 2) + (faceWidth / 8), y, 30, 5);  //raised vs furrowed eyebrows with mouse moving up or down
}

function mousePressed() {
    bgColor = random(0, 255);
    faceWidth = random(110, 160);
    faceHeight = random(160, 200);
    shoulderHeight = random(330, 450);
    if(on == true){     //changing hair color each click
        on = false;
    } else{
        on = true;
    }
}
]]>
https://courses.ideate.cmu.edu/15-104/f2022/2022/09/10/project-02-variable-face-8/feed/ 0
Looking Outwards 02 https://courses.ideate.cmu.edu/15-104/f2022/2022/09/09/looking-outwards-02-3/ https://courses.ideate.cmu.edu/15-104/f2022/2022/09/09/looking-outwards-02-3/#respond Fri, 09 Sep 2022 19:41:37 +0000 https://courses.ideate.cmu.edu/15-104/f2022/?p=70744 Continue reading "Looking Outwards 02"]]>

LIA’s work draws me in because it is outstandingly compelling, and every piece has thought behind it. Her “Four Seasons” series is most interesting personally because of the shapes and colors she uses, as well as the details in movement for each season; slow, sharp, and downward movement for a snowy Winter, as opposed to the bright, warm, and growing/spiraling motion for spring, etc. The artistic sense is undeniable in LIA’s projects as her eye for color and composition as stated above is incredible.

In terms of the algorithm that generates her work, LIA’s animations are generated randomly as stated in the beginning of her videos, so there is no repetition. Moreover, it seems that she uses many variables for color, shapes, and motion because the website states that she codes with a fluidity. This implies that she may not have a specific picture in mind before coding, and declaring her own variables would allow for her to make changes to the entire piece in a convenient manner. I suppose this is especially useful in deciding colors, since I know from experience that even the slightest change in value or hue can enhance or mar the product.

“Winter” by LIA, the second part of a four-part series on seasons that showcases her ability to code and eye for shape, color, and motion
“Spring” by LIA, the third edition to the “Four Seasons” series that showcases her ability to code and eye for shape, color, and motion
]]>
https://courses.ideate.cmu.edu/15-104/f2022/2022/09/09/looking-outwards-02-3/feed/ 0
Project 1: My Self Portrait https://courses.ideate.cmu.edu/15-104/f2022/2022/09/09/project-1-my-self-portrait-22/ https://courses.ideate.cmu.edu/15-104/f2022/2022/09/09/project-1-my-self-portrait-22/#respond Fri, 09 Sep 2022 18:20:47 +0000 https://courses.ideate.cmu.edu/15-104/f2022/?p=70735 Continue reading "Project 1: My Self Portrait"]]>

The most challenging part was figuring out the math for the arc shapes and matching them up to the rest of my face.

sketch
/*
    Joan Lee
    Section D
*/

function setup() {
    createCanvas(300, 400);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(200);

    //hair behind face
    noStroke();
    fill(53, 25, 15);
    rect(65, 100, 170, 300);
    ellipse(70, 260, 70, 350);
    ellipse(230, 260, 70, 350);     //background hair
    ellipse(115, 120, 120, 130);
    ellipse(185, 120, 120, 130);
  
     //body
    fill(223, 205, 230);
    triangle(150, 200, 230, 400, 70, 400);

    //face
    fill(250, 230, 180);
    noStroke();
    quad(75, 100, 225, 100, 230, 230, 70, 230);     //head
    quad(70, 230, 230, 230, 165, 285, 135, 285);    //jaw

    //eyebrows
    stroke(73, 45, 35);
    strokeWeight(5);
    line(171, 150, 206, 152);
    line(94, 152, 129, 150);

    //eyes
    fill(245, 245, 245);
    stroke(0);
    strokeWeight(3);
    arc(110, 180, 35, 25, PI, TWO_PI);
    arc(185, 180, 35, 25, PI, TWO_PI);  //eyeballs and lash line
    fill(63, 35, 11);
    stroke(0);
    strokeWeight(2);
    circle(111, 177, 17);
    circle(184, 177, 17);   //pupils and irises
    fill(255, 225, 215);
    stroke(205, 179, 156);
    strokeWeight(1);
    ellipse(110, 183, 35, 7);
    ellipse(185, 183, 35, 7);   //undereye silkworms

    //nose
    triangle(148, 180, 165, 220, 132, 220);

    //mouth
    stroke(255, 210, 200);  //lips
    strokeWeight(5);
    fill(255);
    arc(148, 233, 70, 50, 0, PI, CHORD);

    //front hair
    stroke(53, 25, 15);
    strokeWeight(1);
    noFill();
    arc(70, 100, 70, 200, TWO_PI, PI - HALF_PI);
    arc(230, 100, 80, 240, PI - HALF_PI, PI);
    arc(240, 100, 150, 190, PI - HALF_PI, PI);
    arc(100, 100, 100, 80, TWO_PI, PI - HALF_PI);
    arc(200, 100, 100, 80, PI - HALF_PI, PI);   //lil baby hairs
    noStroke();
    fill(53, 25, 15);
    arc(60, 95, 110, 170, TWO_PI, PI - HALF_PI);
    arc(230, 100, 80, 170, PI - HALF_PI, PI);   //side bangs
}
]]>
https://courses.ideate.cmu.edu/15-104/f2022/2022/09/09/project-1-my-self-portrait-22/feed/ 0
Lo My Inspiration https://courses.ideate.cmu.edu/15-104/f2022/2022/09/09/lo-my-inspiration-24/ https://courses.ideate.cmu.edu/15-104/f2022/2022/09/09/lo-my-inspiration-24/#respond Fri, 09 Sep 2022 17:59:41 +0000 https://courses.ideate.cmu.edu/15-104/f2022/?p=70073 Continue reading "Lo My Inspiration"]]>

Just Dance is a party game staple that has reached millions of users worldwide with just one instruction: just dance! I admire the intention of the game, which is to allow users to have fun gaming without having to slouch on the couch for hours. As someone who plays various games with friends, I appreciate when they don’t cause me back and shoulder pain. Additionally, I remember being absolutely amazed by the movement tracking my first time playing, and wondering how the game knew when I was lifting the wrong arm or kicking too
late (I’m not the greatest dancer). Just Dance was created by Ubisoft Paris in six months using Perforce Helix Core, a commercial software they have been using since 2001. The creators were inspired by Dance Dance Revolution, another popular dancing game that had players stepping on arrows to the beat of music. The body tracking in this game points to the potential of technology that extends to a variety of fields, including games, animation, health, and education.
https://justdancenow.com/
Ubisoft 2009
Reference: Parkin, S. (2013, October 27). The science of just dance. Eurogamer.net. Retrieved September 2, 2022, from https://www.eurogamer.net/the-science-of-just-dance-article

]]>
https://courses.ideate.cmu.edu/15-104/f2022/2022/09/09/lo-my-inspiration-24/feed/ 0