karinac@andrew.cmu.edu – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

karinac-Project 11

//Karina Chiu
//Section C
//karinac@andrew.cmu.edu
//Project 11

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 turtleBack(p) {
    this.forward(-p);
}
 
 
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 turtleDistTo(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
}
 
 
function turtleAngleTo(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 360) % 360.0;
    return angle;
}
 
 
function turtleTurnToward(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
        this.angle += d;
    } else {
        this.angle -= d;
    }
}
 
 
function turtleSetColor(c) {
    this.color = c;
}
 
 
function turtleSetWeight(w) {
    this.weight = w;
}
 
 
function turtleFace(angle) {
    this.angle = angle;
}
 
 
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, back: turtleBack,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, angleto: turtleAngleTo,
                  turnToward: turtleTurnToward,
                  distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;
}

function setup() {
    createCanvas(400,400);
    background(0);
}

function draw() {
    //draw turtle head
    var t1 = makeTurtle(width*10/12,height*3/10);
    t1.setColor(255);
    t1.setWeight(5);
    t1.left(50);
    t1.forward(15);
    t1.left(15);
    t1.forward(10);
    t1.left(10);
    t1.forward(10);
    t1.left(10);
    t1.forward(20);
    t1.left(10);
    t1.forward(20);
    t1.left(30);
    t1.forward(10);
    t1.left(30);
    t1.forward(10);
    t1.left(20);
    t1.forward(10);
    t1.left(5);
    t1.forward(10);
    t1.left(20);
    t1.forward(20);
    t1.left(15);
    t1.forward(10);
    t1.left(15);
    t1.forward(20);
    t1.left(20);
    t1.forward(20);

    //draw outer shell
    var t2 = makeTurtle(330,140);
    t2.setColor(255);
    t2.setWeight(6);
    t2.left(110);
    t2.forward(10);
    t2.left(10);
    t2.forward(10);
    for(var i=0; i < 3; i++) {
        t2.left(5);
        t2.forward(10);
    }
    for(var i = 0; i < 5; i++) {
    t2.left(10);
    t2.forward(15);
    }
    t2.left(2);
    t2.forward(20);
    t2.left(18);
    t2.forward(20);
    for(var i = 0; i < 10; i++) {
        t2.left(5);
        t2.forward(20);
    }
    for(var i = 0; i < 3; i++) {
        t2.left(7);
        t2.forward(15);
    }
    t2.left(10);
    t2.forward(15);
    for(var i = 0; i < 11; i++) {
        t2.left(8);
        t2.forward(12);
    }

    //inner shell
    var t3 = makeTurtle(315,150);
    t3.setColor(255);
    t3.setWeight(3);
    t3.left(110);
    t3.forward(8);
    t3.left(5);
    t3.forward(8);
    for(var i = 0; i < 8; i++) {
    t3.left(8);
    t3.forward(10);
    }
    t3.left(5);
    t3.forward(20);
    t3.left(20);
    t3.forward(20);
    for(var i = 0; i < 8; i++) {
        t3.left(6);
        t3.forward(22);
    }
    for(var i = 0; i < 3; i++) {
        t3.left(8);
        t3.forward(15);
    }
    t3.left(12);
    t3.forward(15);
    for(var i = 0; i < 8; i++) {
        t3.left(9);
        t3.forward(10);
    }

    //shell pattern 1
    var t4 = makeTurtle(230,110);
    t4.setColor(255);
    t4.setWeight(5);
    t4.left(5);
    for(var i = 0; i < 3; i++) {
        t4.forward(20);
        t4.right(90);
        t4.forward(20);
        t4.left(90);
    }
    t4.forward(20);
    t4.right(70);

    //wave pattern
    t4.setWeight(4);
    t4.forward(10);
    t4.setWeight(3);
    for(var i = 0; i < 8; i++) {
        t4.left(12);
        t4.forward(2);
    }
    t4.forward(10);
    t4.setWeight(2);
    for(var i = 0; i < 4; i++) {
        t4.right(20);
        t4.forward(7);
    }
    for(var i = 0; i < 3; i++) {
        t4.right(30);
        t4.forward(5); 
    }
    t4.right(90);
    t4.forward(10);
    t4.left(40);
    t4.forward(5);
    t4.left(40);
    t4.forward(5);
    t4.left(20);
    t4.forward(5);
    t4.left(50);
    t4.forward(10);
    t4.left(50);
    t4.forward(10);
    t4.left(30);
    t4.forward(10);
    t4.left(30);
    t4.forward(10);


    for(var i = 0; i < 4; i++) {
        t4.right(20);
        t4.forward(6);
    }
    for(var i = 0; i < 3; i++) {
        t4.right(30);
        t4.forward(5); 
    }
    t4.right(90);
    t4.forward(10);
    t4.left(40);
    t4.forward(5);
    t4.left(40);
    t4.forward(5);
    t4.left(20);
    t4.forward(5);
    t4.left(50);
    t4.forward(10);
    t4.left(50);
    t4.forward(10);
    t4.left(30);
    t4.forward(15);


    //shell pattern 2
    var t5 = makeTurtle(220,110);
    t5.setColor(255);
    t5.setWeight(2);
    t5.right(40);
    t5.forward(110);
    var t6 = makeTurtle(200,120);
    t6.setColor(255);
    t6.setWeight(4);
    t6.right(40);
    t6.forward(120);
    var t7 = makeTurtle(210,115);
    t7.setColor(255);
    t7.setWeight(2);
    t7.right(40);
    for(var i = 0; i < 24; i++) {
        t7.penDown();
        t7.forward(2);
        t7.penUp();
        t7.forward(3);
    }



    //shell pattern 3
    var t8 = makeTurtle(190,125);
    t8.setColor(255);
    t8.setWeight(2);
    t8.right(90);
    t8.forward(15);
    t8.left(95);
    for(var i = 0; i < 5; i++) {
        t8.forward(15);
        t8.right(90);
        t8.forward(15);
        t8.left(90);
    }
    t8.forward(20);
    t8.right(70);

    //wave pattern
    t8.setWeight(4);
    t8.forward(10);
    t8.setWeight(3);
    for(var i = 0; i < 6; i++) {
        t8.left(12);
        t8.forward(2);
    }
    t8.left(20);
    t8.forward(20);
    t8.right(10);
    t8.forward(10);
    for(var i = 0; i < 4; i++) {
        t8.right(15);
        t8.forward(8);
    }
    for(var i = 0; i < 3; i++) {
        t8.right(30);
        t8.forward(7); 
    }
    t8.right(90);
    t8.forward(15);
    t8.left(40);
    t8.forward(5);
    t8.left(40);
    t8.forward(5);
    t8.left(20);
    t8.forward(10);
    t8.left(50);
    t8.forward(15);
    t8.left(50);
    t8.forward(15);
    t8.left(30);
    t8.forward(10);
    t8.left(30);
    t8.forward(15);


    for(var i = 0; i < 4; i++) {
        t8.right(10);
        t8.forward(7);
    }
    

    //shell pattern 4
    var t9 = makeTurtle(160,145);
    t9.setColor(255);
    t9.setWeight(4);
    t9.left(4);
    for(var i = 0; i < 4; i++) {
        t9.forward(20);
        t9.right(90);
        t9.forward(20);
        t9.left(90);
    }
    t9.forward(20);

    //wave pattern
    t9.setWeight(4);
    t9.right(80);
    t9.forward(10);
    t9.setWeight(2);
    for(var i = 0; i < 8; i++) {
        t9.left(12);
        t9.forward(2);
    }
    t9.forward(10);
    t9.setWeight(1);
    for(var i = 0; i < 4; i++) {
        t9.right(20);
        t9.forward(7);
    }
    for(var i = 0; i < 3; i++) {
        t9.right(30);
        t9.forward(5); 
    }
    t9.right(90);
    t9.forward(10);
    t9.left(40);
    t9.forward(5);
    t9.left(40);
    t9.forward(5);
    t9.left(20);
    t9.forward(5);
    t9.left(50);
    t9.forward(10);
    t9.left(50);
    t9.forward(10);
    t9.left(40);
    t9.forward(10);
    t9.left(30);
    t9.forward(10);


    for(var i = 0; i < 4; i++) {
        t9.right(20);
        t9.forward(7);
    }
    for(var i = 0; i < 3; i++) {
        t9.right(30);
        t9.forward(5); 
    }
    t9.right(90);
    t9.forward(10);
    t9.left(40);
    t9.forward(5);
    t9.left(40);
    t9.forward(5);
    t9.left(20);
    t9.forward(5);
    t9.left(50);
    t9.forward(10);
    t9.left(50);
    t9.forward(10);
    t9.left(60);
    t9.forward(15);

    for(var i = 0; i < 4; i++) {
        t9.right(20);
        t9.forward(7);
    }
    for(var i = 0; i < 3; i++) {
        t9.right(30);
        t9.forward(5); 
    }
    t9.right(90);
    t9.forward(10);
    t9.left(40);
    t9.forward(5);
    t9.left(40);
    t9.forward(5);
    t9.left(20);
    t9.forward(5);
    t9.left(50);
    t9.forward(10);
    t9.left(50);
    t9.forward(10);
    t9.left(40);
    t9.forward(10);
    t9.left(50);
    t9.forward(10);

    for(var i = 0; i < 4; i++) {
        t9.right(20);
        t9.forward(7);
    }
    for(var i = 0; i < 3; i++) {
        t9.right(30);
        t9.forward(5); 
    }
    t9.right(90);
    t9.forward(10);
    t9.left(40);
    t9.forward(5);
    t9.left(40);
    t9.forward(5);
    t9.left(20);
    t9.forward(5);
    t9.left(50);
    t9.forward(10);
    t9.left(50);
    t9.forward(10);
    t9.left(30);
    t9.forward(10);
    t9.left(30);
    t9.forward(10);

    //shell pattern 5
    var t10 = makeTurtle(170,155);
    t10.setColor(255);
    t10.setWeight(1);
    t10.right(41);
    for(var i = 0; i < 5; i++) {
        for (var j = 0; j < 12; j++) {
            t10.right(30);
            t10.forward(2);
        }
        t10.penUp();
        t10.forward(28);
        t10.penDown();
    }
    var t11 = makeTurtle(170,165);
    t11.setColor(255);
    t11.setWeight(1);
    t11.right(41);
    for(var i = 0; i < 5; i++) {
        for (var j = 0; j < 12; j++) {
            t11.right(30);
            t11.forward(2);
        }
        t11.penUp();
        t11.forward(28);
        t11.penDown();
    }

    var t12 = makeTurtle(170,175);
    t12.setColor(255);
    t12.setWeight(1);
    t12.right(41);
    for(var i = 0; i < 5; i++) {
        for (var j = 0; j < 12; j++) {
            t12.right(30);
            t12.forward(2);
        }
        t12.penUp();
        t12.forward(28);
        t12.penDown();
    }
    var t13 = makeTurtle(160,175);
    t13.setColor(255);
    t13.setWeight(1);
    t13.right(41);
    for(var i = 0; i < 5; i++) {
        for (var j = 0; j < 12; j++) {
            t13.right(30);
            t13.forward(2);
        }
        t13.penUp();
        t13.forward(28);
        t13.penDown();
    }
    var t14 = makeTurtle(150,175);
    t14.setColor(255);
    t14.setWeight(1);
    t14.right(41);
    for(var i = 0; i < 5; i++) {
        for (var j = 0; j < 12; j++) {
            t14.right(30);
            t14.forward(2);
        }
        t14.penUp();
        t14.forward(28);
        t14.penDown();
    }

    //shell pattern 6
    var t15 = makeTurtle(130,180);
    t15.setColor(255);
    t15.setWeight(2);
    t15.right(90);
    t15.forward(10);
    t15.left(95);
    for(var i = 0; i < 9; i++) {
        t15.forward(10);
        t15.right(90);
        t15.forward(10);
        t15.left(90);
    }
    t15.right(70);

    //wave pattern
    t15.setWeight(4);
    t15.forward(10);
    t15.setWeight(5);
    for(var i = 0; i < 6; i++) {
        t15.left(12);
        t15.forward(2);
    }
    t15.left(20);
    t15.forward(10);
    t15.right(10);
    t15.forward(20);
    for(var i = 0; i < 4; i++) {
        t15.right(15);
        t15.forward(8);
    }
    for(var i = 0; i < 3; i++) {
        t15.right(30);
        t15.forward(7); 
    }
    t15.right(90);
    t15.forward(10);
    t15.left(40);
    t15.forward(5);
    t15.left(40);
    t15.forward(5);
    t15.left(30);
    t15.forward(15);
    t15.left(50);
    t15.forward(15);
    t15.left(50);
    t15.forward(15);
    t15.left(30);
    t15.forward(10);

    t15.left(20);
    t15.forward(10);
    for(var i = 0; i < 4; i++) {
        t15.right(15);
        t15.forward(8);
    }
    for(var i = 0; i < 3; i++) {
        t15.right(30);
        t15.forward(7); 
    }
    t15.right(90);
    t15.forward(10);
    t15.left(40);
    t15.forward(5);
    t15.left(40);
    t15.forward(5);
    t15.left(30);
    t15.forward(15);
    t15.left(50);
    t15.forward(15);
    t15.left(50);
    t15.forward(15);


    t15.left(30);
    t15.forward(10);
    for(var i = 0; i < 4; i++) {
        t15.right(15);
        t15.forward(8);
    }
    for(var i = 0; i < 3; i++) {
        t15.right(30);
        t15.forward(7); 
    }
    t15.right(90);
    t15.forward(10);
    t15.left(40);
    t15.forward(5);
    t15.left(40);
    t15.forward(5);
    t15.left(30);
    t15.forward(15);
    t15.left(50);
    t15.forward(15);
    t15.left(50);
    t15.forward(15);
    t15.left(30);
    t15.forward(10);

    //shell pattern 7
    var t16 = makeTurtle(135,205);
    t16.setColor(255);
    t16.setWeight(1);
    t16.right(41);
    for(var i = 0; i < 6; i++) {
        for (var j = 0; j < 3; j++) {
            t16.right(120);
            t16.forward(5);
        }
        t16.penUp();
        t16.forward(20);
        t16.penDown();
    }
    var t17 = makeTurtle(122,200);
    t17.setColor(255);
    t17.setWeight(1);
    t17.right(41);
    for(var i = 0; i < 7; i++) {
        t17.right(60);
        for(var j = 0; j < 3; j++) {
            t17.forward(5);
            t17.right(120);
        }
        t17.left(60);
        t17.penUp();
        t17.forward(20);
        t17.penDown();
    }


    //shell pattern 8
    var t18 = makeTurtle(110,230);
    t18.setColor(255);
    t18.setWeight(4);
    t18.left(5);
    for(var i = 0; i < 4; i++) {
        t18.forward(20);
        t18.right(90);
        t18.forward(20);
        t18.left(90);
    }
    t18.forward(20);

    //wave pattern
    t18.setWeight(4);
    t18.right(80);
    t18.forward(10);
    t18.setWeight(2);
    for(var i = 0; i < 8; i++) {
        t18.left(12);
        t18.forward(2);
    }
    t18.forward(10);
    for(var i = 0; i < 4; i++) {
        t18.right(20);
        t18.forward(7);
    }
    for(var i = 0; i < 3; i++) {
        t18.right(30);
        t18.forward(5); 
    }
    t18.right(90);
    t18.forward(10);
    t18.left(40);
    t18.forward(5);
    t18.left(50);
    t18.forward(5);
    t18.left(20);
    t18.forward(5);
    t18.left(50);
    t18.forward(10);
    t18.left(50);
    t18.forward(10);
    t18.left(40);
    t18.forward(10);
    t18.left(30);
    t18.forward(10);


    for(var i = 0; i < 4; i++) {
        t18.right(20);
        t18.forward(7);
    }
    for(var i = 0; i < 3; i++) {
        t18.right(30);
        t18.forward(5); 
    }
    t18.right(90);
    t18.forward(10);
    t18.left(40);
    t18.forward(5);
    t18.left(40);
    t18.forward(5);
    t18.left(20);
    t18.forward(5);
    t18.left(50);
    t18.forward(10);
    t18.left(50);
    t18.forward(10);
    t18.left(60);
    t18.forward(15);

    for(var i = 0; i < 4; i++) {
        t18.right(20);
        t18.forward(7);
    }
    for(var i = 0; i < 3; i++) {
        t18.right(30);
        t18.forward(5); 
    }
    t18.right(90);
    t18.forward(10);
    t18.left(40);
    t18.forward(5);
    t18.left(40);
    t18.forward(5);
    t18.left(30);
    t18.forward(5);
    t18.left(60);
    t18.forward(20);


    //shell pattern 9
    var t19 = makeTurtle(100,250);
    t19.setColor(255);
    t19.setWeight(2);
    t19.left(5);
    for(var i = 0; i < 7; i++) {
        t19.forward(12);
        t19.right(90);
        t19.forward(12);
        t19.left(90);
    }

    //wave pattern
    t19.setWeight(2);
    t19.right(80);
    t19.forward(10);
    t19.setWeight(2);
    for(var i = 0; i < 8; i++) {
        t19.left(12);
        t19.forward(2);
    }
    t19.forward(10);
    t19.setWeight(1);
    for(var i = 0; i < 4; i++) {
        t19.right(20);
        t19.forward(7);
    }
    for(var i = 0; i < 3; i++) {
        t19.right(30);
        t19.forward(5); 
    }
    t19.right(90);
    t19.forward(10);
    t19.left(40);
    t19.forward(5);
    t19.left(40);
    t19.forward(5);
    t19.left(20);
    t19.forward(5);
    t19.left(50);
    t19.forward(10);
    t19.left(50);
    t19.forward(10);
    t19.left(40);
    t19.forward(10);
    t19.left(30);
    t19.forward(10);


    for(var i = 0; i < 4; i++) {
        t19.right(20);
        t19.forward(7);
    }
    for(var i = 0; i < 3; i++) {
        t19.right(30);
        t19.forward(5); 
    }
    t19.right(90);
    t19.forward(10);
    t19.left(40);
    t19.forward(5);
    t19.left(40);
    t19.forward(5);
    t19.left(20);
    t19.forward(5);
    t19.left(50);
    t19.forward(10);
    t19.left(50);
    t19.forward(10);
    t19.left(60);
    t19.forward(15);

    for(var i = 0; i < 4; i++) {
        t19.right(20);
        t19.forward(7);
    }

    //shell pattern 10
    var t20 = makeTurtle(100,265);
    t20.setColor(255);
    t20.setWeight(2);
    t20.right(40);
    t20.forward(100);
    var t21 = makeTurtle(100,275);
    t21.setColor(255);
    t21.setWeight(4);
    t21.right(40);
    t21.forward(85);
    var t22 = makeTurtle(105,295);
    t22.setColor(255);
    t22.setWeight(2);
    t22.right(40);
    for(var i = 0; i < 12; i++) {
        t22.penDown();
        t22.forward(2);
        t22.penUp();
        t22.forward(3);
    }

    //front fin
    var t23 = makeTurtle(230,80);
    t23.setColor(255);
    t23.setWeight(3);
    t23.left(90);
    t23.forward(20);
    t23.left(10);
    t23.forward(20);
    t23.left(10);
    t23.forward(25);
    t23.left(90);
    t23.forward(5);
    t23.left(10);
    t23.forward(10);
    t23.left(15);
    t23.forward(15);
    t23.left(15);
    t23.forward(15);
    t23.left(15);
    t23.forward(15);
    t23.left(15);
    t23.forward(15);
    t23.left(15);
    t23.forward(15);

    //back fin
    var t24 = makeTurtle(75,230);
    t24.setColor(255);
    t24.setWeight(3);
    t24.left(160);
    t24.forward(20);
    t24.left(10);
    t24.forward(10);
    t24.left(20);
    t24.forward(25);
    t24.left(23);
    t24.forward(25);

    var t25 = makeTurtle(80,300);
    t25.setColor(255);
    t25.setWeight(3);
    t25.left(160);
    t25.forward(30);
    t25.left(10);
    t25.forward(20);
    t25.left(10);
    t25.forward(30);




    

}

I thought it would be fun to draw a turtle using turtles. The designs on the shell came to me as I continued drawing; I had no set design. What I did know, however, was that I wanted some of the designs to fade into the wave formations, which was definitely the hardest and most time consuming part of this drawing. Overall, I am very proud that I was able to create this, and it turned out better than I had pictured it to be.

karinac-LookingOutwards-11

‘Mothership’ by Mason Bates

This is absolutely one of my favorite pieces of computer music. Mason Bates, the composer of ‘Mothership’, is a famous artist who integrates technology with music. This particular work uses synthesized sounds of multiple aircraft to create an alien sound of a mothership.

Mason Bates has to record and transfer those recordings into sound files that could be embedded into his laptop. Though the mechanical sounds were not computer-generated, he still had to edit a lot of the sounds to make it the way he wanted it to sound.

I was inspired by this piece and Mason Bates because it perfectly balances out the computer-generated sounds and the melodies and harmonies of the orchestra. Many times, computer generated music would be too heavy on either the tech side or the orchestral side, often clashing with one another. I think this piece is a great use of both.

karinac-LookingOutwards-10

The Carnegie Museum of Natural History has a door which opens up to the section of mystery. Each time a person opens that door, an animal is seemingly holographically displayed in a room, along with its species name and the sound it produces.

A woman named Caroline Record was at the forefront of this project. The creation of the section of mystery encompassed four different phases: design, media collection, creating software, and fabrication. The design phase consisted of simply designing a space as well as incorporated a glass that created the holographic effect. After, Record and her team collected images of 30 different species using a 3-D scanner, in which she was able to use to reproduce models of the animals featured in the exhibit. Then, Record designed her own software that allowed the computer to sense when the doors open and closed, switching out the animals so that each time the door opens, a different animal is shown inside. While coding, Record was able to fix more of the lighting and sound problems to generate an even more realistic effect of the animal displayed. I am interested in the design process behind the section of mystery since I actually had the opportunity to see it just about a week ago.

karinac-Project 10

karinac-project10

//Karina Chiu
//Section C
//karinac@andrew.cmu.edu
//Project 10

var fish1;
var fish2;
var fish1X = 500;
var fish1Y = 150;
var fish2X = -200;
var fish2Y = 100;
var fish3X = 650;
var fish3Y = 200;
var fish4X = 700;
var fish4Y = 60;
var fish5X = 540;
var fish5Y = 40;
var fishWidth = 40;
var fishHeight = 30;

function preload() {
	fish1 = loadImage("https://openclipart.org/image/2400px/svg_to_png/263089/fish-3.png");
	fish2 = loadImage("https://openclipart.org/image/2400px/svg_to_png/263085/1475323265.png");
	fish3 = loadImage("https://openclipart.org/image/2400px/svg_to_png/263089/fish-3.png");
	fish4 = loadImage("https://openclipart.org/image/2400px/svg_to_png/263089/fish-3.png");
	fish5 = loadImage("https://openclipart.org/image/2400px/svg_to_png/263089/fish-3.png");
}

function setup() {
	createCanvas(500,300);
	frameRate(100);
}

function draw(){
	background(18,27,180);
	drawSand();
	drawFish();
}


//drawing sea floor
var terrainSpeed = 0.0005;
var sandFloor = 0.010;

function drawSand() {  
    noStroke();
    fill(170,150,120); 

    beginShape();
        for (x=0; x < width; x++) {
            var t = (x*sandFloor) + (millis()*terrainSpeed);
            var y = map(noise(t), 0, 1, 220, 270);
            vertex(x, y);
            vertex(0,height);
            vertex(width,height);
        }
    endShape();
}

function drawFish() {
	image(fish1, fish1X, fish1Y, fishWidth, fishHeight);
	fish1X -= random(1,2);
	fish1Y -= random(-0.5,0.5);

	if (fish1X < -fishWidth) {
		fish1X = 500;
	}

	image(fish2, fish2X, fish2Y, fishWidth, fishHeight);
	fish2X += random(0,0.5);
	fish2Y += random(-0.5,0.5);

	if (fish2X > 700) {
		fish2X = -100;
	}

	image(fish3, fish3X, fish3Y, fishWidth, fishHeight);
	fish3X -= random(0,2);
	fish3Y -= random(-0.5,0.5);

	if (fish3X < -fishWidth) {
		fish3X = 650;
	}

	image(fish4, fish4X, fish4Y, fishWidth, fishHeight);
	fish4X -= random(1,2.5);
	fish4Y -= random(-1,1);

	if (fish4X < -fishWidth) {
		fish4X = 700;
	}

	image(fish5, fish5X, fish5Y, fishWidth, fishHeight);
	fish5X -= random(1,2.5);
	fish5Y -= random(-1,1);

	if (fish5X < -fishWidth) {
		fish5X = 540;
	}
}

I wanted to create an ocean floor. At first, I was only going to draw the orange fishes going to the left. However, I decided to add more. Drawing the terrain was definitely the most difficult part of the process, but I had learned a lot from it.

karinac-Project-09

//Karina Chiu
//Section C
//karinac@andrew.cmu.edu
//Project-09

var portrait;
var x = 230;
var y = 0;


function preload() {
    var portraitURL = "https://s1.postimg.org/1qix3ahu5r/IMG_6211.jpg";
    portrait = loadImage(portraitURL);
}

function setup() {
    createCanvas(230, 300);
    background(229,203,170);
    portrait.loadPixels();
    frameRate(60);

}

function draw() {
    //finding color
    var px = x;
    var py = y;
    var ix = constrain(floor(px), 0, width);
    var iy = constrain(floor(py), 0, height);
    var colorOfPoint = portrait.get(ix, iy);

    //generates waterfall effect
    push();
    y += 2.5;
    noStroke();
    fill(colorOfPoint);
    rect(x, y, 2, 2);
    pop();

    if (y > height) {
        x -= 2.5;
        y = 0;
    }
}

This is a portrait of my friend, Amara. At first, I really wanted to code a waterfall effect into the picture, but I was unsuccessful. Still, I spent a lot of time of this project and learned a lot, and I am pleased with the results.

karinac-LookingOutwards-09

This is a video posted by Sara Jahanian from Looking Outwards Week 6. According to her findings, this was produced by CMU’s own 15-112 student, Lingdong Huang. Upon first hearing that randomness is used in art, I didn’t quite believe it. This animation video surely proved me wrong.

I’m very intrigued by how much detail went into this project. The artist first coded algorithms to generate basic forms of the landscape and scenery for a general structure, then randomized the small details to make them unique and stand out differently from one another. The actions of the horse and the hermit are also randomized in the video. I am very impressed by how creative and visually stunning this video is when indeed many factors are simply randomized in the project.

karinac-LookingOutwards-08

This is Complex Movements, an artist collective based in Detroit, Michigan, that connects the complex sciences to social justice movements.

For those that do not know what the complex sciences are, it is explained as a study of complex systems, systems with many parts that interact to produce global behavior that cannot easily be explained in terms of interactions between the individual constituent elements.

Knowing this, Complex Movements uses the complex sciences by integrating their original music into visual arts exhibitions and mobile art installations to create a new way to deliver social justice messages of organizations and individuals who do not feel like they have a voice.

In their recent project, Beware of the Dandelions, Complex Movements uses a 400-square foot polyhedron to visually project sci-fi narratives to their audience. The man behind the visuals and animations is Wes Taylor, who hold graduate degree in 2-D design from the Cranbrook Academy of Art and is currently a Senior Assistant Professor of Art & Design at Lawrence Tech University. What I love about his work is that he created a new way to express the art of storytelling through the uses of computer graphics and music. Looking at the intersection of computer systems and social movements to generate interactive visuals that really speak to its audience is what really inspired me.

Link to Artist Site

https://emergencemedia.org/pages/complex-movements

Artist works

karinac-Project-07

karinac-project-07

//Karina Chiu
//Section C
//karinac@andrew.cmu.edu
//Project-07

//number of points drawn on hypocycloid
var nPoints = 500;

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


function draw() {
    background(234,187,196);

    //rotation by mouseX
    var angle = mouseX/200;
    
    // draw the curve
    push();
    translate(width / 2, height / 2);
    rotate(angle);
    drawHypocycloidCurve();
    pop();
}

function drawHypocycloidCurve() {  
    var x;
    var y;
    var a = constrain(mouseX/5,0,width);
    
    fill(255);
    strokeWeight(3);
    stroke(150,46,63);

    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        x = (1*a) * cos(t) + a * cos(7*t);
        y = (1*a) * sin(t) - a * sin(7*t);
        vertex(x,y);
    }
    endShape(CLOSE);
}

I started first by attempting to generate a simple astroid curve:

In doing so, while looking up formulas and trying to figure out what each variable in the equation affects, I found out that an astroid is part of a bigger group called hypocycloids, which is “a special plane curve generated by the trace of a fixed point on a small circle that rolls within a larger circle.”

https://en.wikipedia.org/wiki/Hypocycloid

After creating a simple astroid that expands and contracts with the movement of the mouse, I decided I wanted to experiment with the other variables to see what other shapes I could make. Following the logic of the curves, I ended up with the flower-like shape that you see above. To complete the project, I added a rotation to the expanding flower.

karinac-LookingOutwards-07

This is the On Broadway Project presented by Moritz Stefaner. He created this visualization project from activities of ordinary people in order to show the busy life of those who live and visit Broadway, Manhattan in New York. To do so, he monitored data such as number of twitter posts and taxi rides per day, and well as colors in the instagram posts. After gathering that data, he compressed his findings into the data layers that you see below:

What I love about Moritz’s project was that he essentially took the normal lives of people living on Broadway and compiled it into a visual product using his own algorithms or ones given to him by organizations that he had worked for. I was taken aback at how relevant the data was to ordinary people who may not necessarily be into statistics, but can enjoy this visual and even learn something from it.

Here is the link to the On Broadway Project:
http://truth-and-beauty.net/projects/on-broadway

karinac-Project-06

//Karina Chiu
//Section C
//karinac@andrew.cmu.edu
//Project-06


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

function draw() {
    background(0);
    angleMode(DEGREES);

    //Second Hand Rotation
    stroke(255);
    strokeWeight(1);
    noFill();
    ellipseMode(CENTER);
    ellipse(240,240,70,70);

    push();
    translate(width/2, height/2);
    rotate((second()*6)-90);
    noStroke();
    fill(156,144,94);
    ellipse(35,0,20,20);
    pop();

    //Minute Hand Rotation
    stroke(255);
    strokeWeight(1);
    noFill();
    ellipseMode(CENTER);
    ellipse(240,240,200,200);

    push();
    translate(width/2, height/2);
    rotate((minute()*6)-90);
    noStroke();
    fill(156,144,94);
    ellipse(100,0,35,35);
    pop();

    //Hour Hand Rotation
    stroke(255);
    strokeWeight(1);
    noFill();
    ellipseMode(CENTER);
    ellipse(240,240,350,350);

    push();
    translate(width/2, height/2);
    rotate((hour()*30)-90);
    noStroke();
    fill(156,144,94);
    ellipse(175,0,50,50);
    pop();

    //printed time
    noStroke();
    fill(255);
    textAlign(CENTER);
    text(hour(), 20, 20);
    text(minute(), 40, 20);
    text(second(), 60, 20);
}

I wasn’t exactly sure how I wanted to create this clock at first, so the end design really came up by trial and error.

I had a lot of difficulty with the movement of the ellipses. It took me a while to figure out how I could start at the top of the pathway and move counterclockwise. Overall, I am very excited to see how my clock turned out. I absolutely love the classy design and I believe it is something that I would actually use.