Category: Section C

afukuda-LookingOutwards-12

 

[project 1 – Freeform | Interactive Reload Nr.1 by Rosanna Casalnuovo ]

“Freeform | Interactive Reload Nr.1” by Rosanna Casalnuovo is part of a series of interactive graphics with different geometrical compositions and colors realized with generative code. I admire the use of an array of vibrant colors in this project, something that I would hopefully be able to incorporate into my own project. I also find the balance between randomness yet the presence of an underlying structure in this project compelling, successfully making it an interesting interactive piece of work. An opportunity they might have overlooked is having a clear intent of their project. While the project is overall an interesting one, it just seems to be an interactive piece of work that is abstract and most likely programmed recreationally. By incorporating an intent, the project might become stronger and more meaningful.

[project 2 – Ring by Lucas Cabral]

“Ring” by Lucas Cabral, is another dynamic piece of work, in which the program creates distinct rings according to its accompanying sound. It attempts to emphasize that there is in fact a visual component in music as well, and overall plays around with the concept of sound visualization. The dynamic rings that appear on the screen reminded me of a kaleidoscope as well fireworks, which creates a relevance to my final project. I also enjoyed how the visuals changed depending on which part of the song was playing, along with the color of the rings. It would have been great if the artist took a further step forward and created more of these rings, creating a perception of depth and emphasizing the dynamism of the work.

Link | https://vimeo.com/241539505 [project 1]

Work | Rosanna Casalnuovo. Interactive Reload Nr.1. 11.06.2017

 

Link | https://vimeo.com/240247633 [project 2]

Work | Lucas Cabral. Ring. 10.26.2017

karinac-Project 11

sketch

//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.

afukuda-Final-Project-Proposal

For my final project I would like to create something involving fireworks. There is some leeway as to how to make my project compelling and not just project fireworks, but I am leaning towards creating an illustration showcasing what a common summer festival in Japan is like (see preliminary sketch). The animation would follow a young couple as they go on their first date at the summer festival. By making this animation a part of my final project, it would allow me to showcase a part of my culture, making it a meaningful project. Further, it would give me the opportunity to further explore generative landscape, which we briefly touched upon for project 10. I enjoyed doing this project so it would be great if I can also integrate this form of visual into my project as well. I am working on this project alone.

Bettina-Project11-SectionC

sketch

// Bettina Chou
// yuchienc@andrew.cmu.edu
// section c
// project 11 -- freestyle turtles

///////////////TURTLE API///////////////////////////////////////////////////////////////

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;
}

///////////////BEGINNING OF CODE///////////////////////////////////////////////////////////////

function preload() {
    img = loadImage("https://i.imgur.com/UB3R6VS.png")
}

function setup() {
  createCanvas(300,480);
  img.loadPixels(); //load pixels of image but don't display image
  background("#ffccff");
}

var px = 0; //x coordinate we're scanning through image
var py = 0; //y coordinate we're scanning through image
var threshold = 90; //image is bw so threshold is set to high brightness

function draw() {
  var col = img.get(px, py); //retrives RGBA value from x,y coordinate in image
  var currentPixelBrightness = brightness(col);
  var t1 = makeTurtle(px,py);
  var t2 = makeTurtle(px + 20, py); //offset by 10 pixels to the right
  strokeCap(PROJECT);
  t1.setWeight(5);
  t1.setColor("#ccffff");
  t2.setWeight(1);
  t2.setColor("#33cc33");
  if (currentPixelBrightness > threshold) { //does not draw lines in negative space
      t1.penUp();
      t2.penUp();
  }
  else if (currentPixelBrightness <= threshold) { //only draws lines to fill in positive space
      t1.penDown();
      t2.penDown();
  }
  t1.forward(1);
  t2.forward(1);
  px += 1;
  if (px >= width) { //brings px to 0 again
    px = 0;
    py += 10; //starts a new row
  }
}

I was inspired by the following piece of work and considered how computation could create such image treatments as opposed to manually setting the lines and offsets.

I would have had no idea where to start if not for the deliverables prompt suggesting that we could have turtles draw things in relation to an image. I decided to build upon the pixel brightness techniques we learned in previous weeks to make the turtle penDown() when the image is black and penUp() when the image is white. Thus, in a black and white image it is easy to recreate it using the lines method.

Above is the quick image I put together in illustrator to have my turtle trace

Above is a screenshot of the finished image from this particular code. Line weight, colors, amounts, and offsets could easily be manipulated to create a variety of imaging. There could even be multiple images referenced to create a more complex drawing.

afukuda-Project11-Composition

sketch

/* 
 * Name | Ai Fukuda 
 * Course Section | C 
 * Email | afukuda@andrew.cmu.edu
 * Project | 11
 */ 

var myTurtle; 

function setup() {
  createCanvas(400, 400);
  background(193, 228, 221);

  myTurtle = makeTurtle(width/2, height/2);  // set turtle at center of canvas 
  myTurtle.setColor(color(140, 164, 212));   // set stroke color 
  myTurtle.setWeight(1); 
  myTurtle.penDown();                        // initialize turtle 

  frameRate(2);
}


function draw() {
  var sideLength = 20;             // set initial side length of rectangle 

  for (i=0; i<50; i++) {
    myTurtle.forward(sideLength);
    myTurtle.right(90);
    myTurtle.forward(sideLength);
    myTurtle.right(90);
    myTurtle.forward(sideLength);
    myTurtle.right(90);
    myTurtle.forward(sideLength);
    myTurtle.right(90);

    myTurtle.penUp();              // put pen up while rotation of rectangles are occuring 
    myTurtle.right(15);            // rotate rectangle by 30 degrees 
    myTurtle.penDown();            // put pen down 

    sideLength *= 1.05;            // increase side length by 1.05  
  }
}


// Turtle graphics implementation for p5.js:
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;
}

For this project I used this week’s lab as an underlying base, as I wanted to develop it further and make it dynamic and more intricate, since I saw a potential for it to become a compelling piece of work. Using ‘Turtle Example 2’ as a guide, each loop creates an array of rotated squares, which is overall rotated to gradually fill the canvas. While working on this project, I was playing around with the value of angle of rotation, and I was intrigued with how a slight change in angle of rotation causes a significant change in the overall affect the aggregate conveys. In the current configuration the angle of rotation is set to 15, which conveys a spiraling, sea-shell like geometry. While an angle of rotation of 30 conveys a more radial aggregation (see below for visuals).

 

 

 

 

[screenshot of final project]

 

 

 

 

[screenshot of project with angle of rotation of 30]

 

 

 

 

[screenshot of lab assignment + initial sketch of project]

 

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.

ashleyc1-LookingOutwards-11

WE is an interactive, immersive sound installation by the studio Let’s and specifically designed and programmed by Andy Arkley, Peter Lynch, and Courtney Barnebey. First exhibited in Seattle’s MadArt event, WE’s creators wanted to create a place where a shared community and experience could be built-moving beyond people interacting with the piece but also with each other. The project allows for up to 12 participants where they can interact with controllers to create musical sequences. The installation used light bulbs, music, and mapped video projections to synchronize with the music and create an overwhelming, sensual experience. What makes this interactive sound installation unique from others is that this machine doesn’t stay silent when there aren’t any participants; making it more initially inviting to participants. Any one can also start interacting with the controllers and feel like they’re not messing up any previously established sound because the musical sequences aligned to the controllers are programmed to synchronize with each other. So even though participants have choice in what to play, all of the sounds still work well together. I think this feature is what makes this piece particularly successful.

Sources:

https://creators.vice.com/en_us/article/vvaeja/you-can-play-these-giant-sculptures-like-musical-instruments

http://letspresents.com/wewe/

Bettina-LookingOutwards11-SectionC

Above: screenshot of Carsten Nicolai’s work from vimeo. (click image for video)

The only sound artist I knew of prior to this assignment was Ryoji Ikeda, so through searching “artists like Ryoji Ikeda” I found the following article. Carsten Nicolai piqued my interest because of his work in “altering audiovisual perception”. I think it’s interesting how we often blend our 5 senses; perhaps we visually represent sound or taste, or aurally represent touch. I can see there being pre-determined constraints mapping one variable to another so one sensory input informs the other.

It is nevertheless interesting that despite his work in representing sound visually, the visuals he makes sounds very sterile and technical. He seems to emphasize texture and lines, but I’m interested to see what computation could do with colors as well.

Above: screenshot from google images of Nicolai’s work

 

afukuda-LookingOutwards-11

Game of Skill 2.0

[Video showcasing the installation]

Game of skill 2.0 by Christine Sun Kim is an interactive installation, resembling a zipline, where a text about the future written by Kim and voiced by a museum intern (as she is deaf since birth) is played at different levels and speeds depending on the direction and speed of the participant. I find this project compelling, as she conveys listening, which is often regarded as a passive activity, as something requiring physical labor in order to “acquire”. And being deaf since birth, I think this project communicates her personal struggles, making it a meaningful project. The technical side of the project involves the use of velcro, magnets, custom electronics and the intern’s voice.

[A snapshot of how users interact with the installation]

Link | http://christinesunkim.com/work/game-of-skill-2-0/

Work | Christine Sun Kim. Games of Skill 2.0. October 11 2015 – March 7 2016

abradbur- Project 10 – Landscape

sketch

var buildings = [];

var terrainSpeed = 0.0005;
var terrainDetail = 0.005;

function setup(){
    createCanvas(480, 240);
    // create an initial collection of buildings
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
    frameRate(20);
}

function draw(){
    background(98, 45, 107);
    noStroke();
    //moon + moonshine
    fill(216, 214, 243);
    ellipse(340,50,50);
    fill(216, 214, 243, 51);
    ellipse(340, 50, 60);
    //stars
    fill(255);
    for (var i = 0; i < 1000; i++) {
        ellipse(random(width), random(height), 1);
    }
    //mountains
    push();
    beginShape(); 
    fill(40, 17, 53);
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, 0, height);
        vertex(x, y); 
    }
    vertex(width, height);
    endShape();
    pop();

    //cabins
    updateAndDisplayBuildings();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability(); 



}   

function updateAndDisplayBuildings(){
    // Update the building's positions, and display them.
    for (var i = 0; i < buildings.length; i++){
        buildings[i].move();
        buildings[i].display();
    }
}


function removeBuildingsThatHaveSlippedOutOfView(){
    // If a building has dropped off the left edge,
    // remove it from the array.
    var buildingsToKeep = [];
    for (var i = 0; i < buildings.length; i++){
        if (buildings[i].x + buildings[i].breadth > 0) {
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep; // remember the surviving buildings
}


function addNewBuildingsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newBuildingLikelihood = 0.007; 
    if (random(0,1) < newBuildingLikelihood) {
        buildings.push(makeBuilding(width));
    }
}


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

// draw the building and some windows
function buildingDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(0); 
    stroke(0); 
    push();
    translate(this.x, height);
    rect(0, -bHeight, this.breadth, bHeight);
    stroke(200); 
    for (var i = 0; i < this.nFloors; i++) {
        fill(254, 242, 103);
        rect(5, -15 - (i * floorHeight), this.breadth - 40, 10);
    }
    pop();
}


function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(0,2)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}

I had a pretty difficult time parsing out the example code for this project, so I didn’t make it as extravagant as I had first hoped. As you can (kind of) see from my original sketch, I’d wanted to include trees and little creatures that popped out every once in a while. I wanted to make something that reminded me of the landscape back home, which is basically just mountains over mountains with tiny little lights blinking out from the homes of rich people. I have a lot of fond memories of driving through mountain neighborhoods at night. I actually made myself a little homesick with this project.

Original concept