Author: NatalieKS

NatalieKS-Project-07

This project was pretty difficult for me since I hadn’t worked with trig functions and parametric equations in over a year. Most of the time spent on this was just trying to figure out what the equations actually did when implemented in p5js, and understanding what i needed to change in order to get my desired result. I wanted to draw a little picture, and when I saw the ellipse evolute, it reminded me of the stars from Peter Pan. The star changes size and color as you move the mouse. I would’ve liked to try to create some kind of glow around the stars, and I tried using filter() and blur(), but both functions messed with the frame rate in a way that I didn’t know how to fix, so I abandoned the idea. I tried to reference this image, just because I liked the colors and shape. 

sketch2

//Natalie Schmidt
//nkschmid@andrew.cmu.edu
//Section D
//Project-07

//taken from examplde code
var nPoints = 100;
var R; //for color "r"
var G; //for color "g"
var B; //for color "b"

function setup() {
    createCanvas(300, 480);
    frameRate(20);
}

function draw() {
//draw the two stars
    background(22, 42, 67);
    push();
    translate(width - 70, height-400);
    drawLargeEllipseEvolute();
    pop();
    push();
    translate(width- 120, height - 350);
    drawLargeEllipseEvolute();
    pop();

    fill(255);
    textSize(24);
    text("Second star to the right", 25, 420);
    text("and straight on til morning!", 10, 450);
    //draw small random stars
    //modified code from
    //http://alpha.editor.p5js.org/nanou/sketches/rJ-EMpxa
    fill(255);
    var star = {x : 100, y : 50};
    star.x = random(0, width);
    star.y = random(0, height);
    ellipse(star.x, star.y, 4, 4);
    ellipse(star.x, star.y, 4, 4);
    //draw Peter Pan!
    drawPeter();
}

function drawLargeEllipseEvolute() {
//modified version of the example code
    var x;
    var y;
    var a = constrain(mouseX, 0, width);
    //map the value so it only expands a little
    var a1 = map(a, 0, 300, 0, 15);
    var b = constrain(mouseY, 0, height);
    //map the value so it expands only a little
    var b1 = map(b, 0, 300, 0, 15);
    //change colors with mouse
    R = map(mouseX, 0, width, 138, 255);
    G = map(mouseX, 0, width, 153, 255);
    B = map(mouseX, 0, width, 196, 255);

    fill(R, G, B);
    stroke(61, 80, 112);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);

        x = ((sq(a1) - sq(b1))/a1) * pow(cos(t), 3);
        y = ((sq(b1) - sq(a1))/b1) * pow(sin(t), 3);
        vertex(x, y);
    }
    endShape(CLOSE);
}

function drawPeter() {
//draw Peter Pan!
    fill(0);
    //head
    ellipse(125, 225, 20, 20);
    push();
    //body
    translate(113, 252);
    rotate(35);
    ellipse(0, 0, 20, 40);
    pop();
    //left leg
    push();
    translate(98, 270);
    rotate(35);
    ellipse(0, 0, 7, 25);
    pop();
    //right leg
    push();
    translate(110, 275);
    rotate(35);
    ellipse(0, 0, 7, 25);
    pop();
    //left foot
    ellipse(91, 278, 8, 8);
    //right foot
    ellipse(107, 286, 8, 8);
    //left arm
    push();
    translate(102, 236);
    rotate(90);
    ellipse(0, 0, 8, 25);
    pop();
    //right arm
    push();
    translate(130, 250);
    rotate(90);
    ellipse(0, 0, 8, 25);
    pop();
    //peter pan hat!
    triangle(118, 216, 123, 196, 133, 221);
    //feather on hat
    stroke(4);
    line(120, 215, 115, 198);
}

NatalieKS-LookingOutwards-07

In a project lead by Boris Müller and one/one, Studio NAND developed a map that was a visual landscape of fictional and poetic illustrations for the 14th Poetry on the Road festival in Bremen, Germany. The works of 25 different authors spanning 4 different languages created the computational basis for several generated media projects. For example, the image above: this is a visual map in which all of the works in the festival were represented in this unique form of computational media. This particular visualization was based on a “Conic Equidistant Project” so the distances were proportionally correct, as well as visual mapping, natural language processing, “Jan Rybicki’s TransVis research for detecting author finger­ prints,” and Yahoo’s geocoding service, among other distributions to establish connections between the different works.

I really admire this project for its application; this design ended up being used for the promotional poster – as a form of publications-art. It’s a unique way or representing other forms of art, while also having a practical use. It’s very cool to see how even works of literature, like poetry, can be represented through code and visual mapping.

NatalieKS-Project-06

I really wanted to do something with birds, because I have always had the association of birds with time. I thought having the necks grow would be a funny/cute way to represent time, so that’s what I set out to do. Using the time functions was relatively easy, and I thought this was a very enjoyable project. Doing Assignment-06-C definitely helped me when it came to figuring out how to execute my ideas. The only thing I wasn’t sure how to do (without messing up the picture) was how to make the head start off screen. Right now, if it was at midnight, it would show the head starting at the bottom of the canvas instead of slowly coming in.

I originally wanted to do a rooster, but I liked the simpler image of a pigeon-like bird instead.

sketch

//Natalie Schmidt
//nkschmid@andrew.cmu.edu
//Section D
//Project-06


var x;
var H;
var M;
var S;
var H2;
var M2;
var S2;

function setup() {
    createCanvas(500, 400);
    angleMode(DEGREES);
    noStroke();
    textSize(16);
    stroke(1);
}

function draw() {
  background(18, 202, 255);
  H = hour() % 12;
  M = minute();
  S = second();
//map out the time so the bird necks
//move with the time
  H2 = map(H, 0, 23, 0, height - 25);
  M2 = map(M, 0, 59, 0, height - 25);
  S2 = map(S, 0, 59, 0, height - 25);
//"second" bird head
    fill(255);
//draw the neck
    rect(350, height - S2, 100, S2, 60);
    push();
    stroke(0);
    strokeWeight(1);
//draw the white part of eye
    fill(240);
    ellipse(390, height - (S2 - 25), 35, 35);
    fill(0);
//draw the black pupil
    ellipse(388, height - (S2 - 20), 20, 20);
    pop();
    fill(236, 223, 21);
//draw the beak right
    triangle(420, height - (S2 - 5), 441, height - (S2 + 15),
        431, height - (S2 - 10));
//draw the beak left
    triangle(407, height - (S2), 414, height - (S2 + 20),
        419, height - (S2 - 4));
//draw the body
    fill(252, 158, 255);
    rect(320, 300, 105, 100, 60);
//add the bird's "bawk"
    fill(0);
    var bawk = random(447, 449);
    text("Bawk!", bawk, height - (S2 - 25));
// "minute" bird head
    fill(255);
//draw the neck
    rect(200, height - M2, 100, M2, 60);
    push();
    stroke(0);
    strokeWeight(1);
    fill(240);
//white part of eye
    ellipse(240, height - (M2 - 25), 35, 35);
    fill(0);
//pupil
    ellipse(238, height - (M2 - 20), 20, 20);
    pop();
    fill(236, 223, 21);
//beak right
    triangle(270, height - (M2 - 5), 291, height - (M2 + 13),
        281, height - (M2 - 10));
//beak left
    triangle(257, height - (M2 - 2), 264, height - (M2 + 19),
        269, height - (M2 - 5));
//body
    fill(242, 208, 255);
    rect(165, 300, 115, 100, 60);
    fill(0);
    bawk = random(298, 300);
    text("Bawk!", bawk, height - (M2 - 30));
// "hour" bird head
    fill(255);
    stroke(1);
//neck
    rect(50, height - H2, 100, H2, 60);
    push();
    stroke(0);
    strokeWeight(1);
    fill(240);
//white part of eye
    ellipse(90, height - (H2 - 25), 35, 35);
    fill(0);
//pupil
    ellipse(87, height - (H2 - 20), 20, 20);
    pop();
    fill(236, 223, 21);
//beak right
    triangle(117, height - (H2 - 4), 138, height - (H2 + 16),
        128, height - (H2 - 9));
//beak left
    triangle(104, height - (H2), 111, height - (H2 + 21),
        116, height - (H2 - 3));
//body
    fill(188, 255, 218);
    rect(0, 300, 130, 100, 60);
    fill(0);
    bawk = random(152, 154);
    text("Bawk!", bawk,height - (H2 - 44));
}

NatalieKS-LookingOutwards-06

 

John Cage, famous for his “indeterminate” approach to music and art, composed an aleatoric piece called “Music of Changes.” Aleatoric music is music in which at least some element is randomly generated or somehow left to chance. This particular composition, composed in 1951, is a 43 minute piano solo, employing not only the keys but also the strings, pedals, and lid of the piano itself. He had based his composition off of a Chinese oracle book called I Ching (or Book of Changes). Using the chance-based operators listed in I Ching, Cage computed charts to use for various aspects of his piece – tempo, notes, rhythm, etc. – so that the piece would be entirely random. As with a large body of his work, Cage wanted to explore the “ability of a piece to be performed in substantially different ways.”

I really admire this piece for its exploration of patterns and how it embraced complete randomness. Music is heavily based on patterns – repeating choruses and motifs, among others – and we consider “good” music to have such patterns. This piece in contrast seems very disconnected and disorienting, and challenges those notions of “good” music. It is thought-provoking and interesting, if hard to listen to.

NatalieKS-Project-05

sketch

//Natalie Schmidt
//nkschmid@andrew.cmu.edu
//Sectiond D
//Project-05

var x = 0;
var y = 0;

function setup() {
    createCanvas(400, 480);
    background(102, 159, 166);
}

function draw() {

    for (var y = -460; y < height - 35; y += 140) {
        for (var x = -50; x < width - 50; x += 130) {
            leaf(x, y);
            push();
            fill(191, 158, 57);
            triangle(x + 5, y + 55, x + 18, y + 40, x + 30, y + 55);
            triangle(x + 5, y + 55, x + 18, y + 70, x + 30, y + 55);
            noFill();
            stroke(191, 158, 57);
            strokeWeight(2);
            triangle(x, y + 55, x + 18, y + 35, x + 35, y + 55);
            triangle(x, y + 55, x + 18, y + 75, x + 35, y + 55);
            pop();
        }
    }
    noLoop();

}

function leaf(x, y) {
    stroke(47, 87, 53);
    strokeWeight(1);
    fill(65, 121, 73);
// top leaf 1 - right
    beginShape();
    curveVertex(x + 25, y + 400);
    curveVertex(x + 25, y + 400);
    curveVertex(x + 35, y + 403);
    curveVertex(x + 45, y + 408);
    curveVertex(x + 50, y + 420);
    curveVertex(x + 45, y + 430);
    curveVertex(x + 45, y + 430);
    endShape();
//top leaf 1 - left
    beginShape();
    curveVertex(x + 25, y + 400);
    curveVertex(x + 25, y + 400);
    curveVertex(x + 23, y + 406);
    curveVertex(x + 23, y + 409);
    curveVertex(x + 26, y + 420);
    curveVertex(x + 30, y + 425);
    curveVertex(x + 35, y + 428);
    curveVertex(x + 45, y + 430);
    curveVertex(x + 45, y + 430);
    endShape();
// top leaf 2 - right
    beginShape();
    curveVertex(x + 45, y + 388 - 8);
    curveVertex(x + 45, y + 388 - 8);
    curveVertex(x + 55, y + 391 - 8);
    curveVertex(x + 65, y + 396 - 8);
    curveVertex(x + 70, y + 408 - 8);
    curveVertex(x + 65, y + 418 - 8);
    curveVertex(x + 65, y + 418 - 8);
    endShape();
//top leaf 2 - left
    beginShape();
    curveVertex(x + 45, y + 388 - 8);
    curveVertex(x + 45, y + 388 - 8);
    curveVertex(x + 43, y + 394 - 8);
    curveVertex(x + 43, y + 397 - 8);
    curveVertex(x + 46, y + 408 - 8);
    curveVertex(x + 49, y + 413 - 8);
    curveVertex(x + 55, y + 416 - 8);
    curveVertex(x + 65, y + 418 - 8);
    curveVertex(x + 65, y + 418 - 8);
    endShape();
// top leaf 3 - right
    beginShape();
    curveVertex(x + 51 + 9, y + 388 - 29);
    curveVertex(x + 51 + 9, y + 388 - 29);
    curveVertex(x + 61 + 9, y + 391 - 29);
    curveVertex(x + 71 + 9, y + 396 - 29);
    curveVertex(x + 76 + 9, y + 408 - 29);
    curveVertex(x + 71 + 9, y + 418 - 29);
    curveVertex(x + 71 + 9, y + 418 - 29);
    endShape();
//top leaf 3 - left
    beginShape();
    curveVertex(x + 51 + 9, y + 388 - 29);
    curveVertex(x + 51 + 9, y + 388 - 29);
    curveVertex(x + 49 + 9, y + 394 - 29);
    curveVertex(x + 49 + 9, y + 397 - 29);
    curveVertex(x + 52 + 9, y + 408 - 29);
    curveVertex(x + 55 + 9, y + 413 - 29);
    curveVertex(x + 61 + 9, y + 416 - 29);
    curveVertex(x + 71 + 9, y + 418 - 29);
    curveVertex(x + 71 + 9, y + 418 - 29);
    endShape();
// top leaf 4 - right
    beginShape();
    curveVertex(x + 51 + 24, y + 388 - 52);
    curveVertex(x + 51 + 24, y + 388 - 52);
    curveVertex(x + 61 + 24, y + 391 - 52);
    curveVertex(x + 71 + 24, y + 396 - 52);
    curveVertex(x + 76 + 24, y + 408 - 52);
    curveVertex(x + 71 + 24, y + 418 - 52);
    curveVertex(x + 71 + 24, y + 418 - 52);
    endShape();
//top leaf 4 - left
    beginShape();
    curveVertex(x + 51 + 24, y + 388 - 52);
    curveVertex(x + 51 + 24, y + 388 - 52);
    curveVertex(x + 49 + 24, y + 394 - 52);
    curveVertex(x + 49 + 24, y + 397 - 52);
    curveVertex(x + 52 + 24, y + 408 - 52);
    curveVertex(x + 55 + 24, y + 413 - 52);
    curveVertex(x + 61 + 24, y + 416 - 52);
    curveVertex(x + 71 + 24, y + 418 - 52);
    curveVertex(x + 71 + 24, y + 418 - 52);
    endShape();
// bottom leaf 1 - right
    beginShape();
    curveVertex(x + 51 + 49, y + 388 - 25);
    curveVertex(x + 51 + 49, y + 388 - 25);
    curveVertex(x + 61 + 49, y + 391 - 25);
    curveVertex(x + 71 + 49, y + 396 - 25);
    curveVertex(x + 76 + 49, y + 408 - 25);
    curveVertex(x + 71 + 49, y + 418 - 25);
    curveVertex(x + 71 + 49, y + 418 - 25);
    endShape();
//bottom leaf 1 - left
    beginShape();
    curveVertex(x + 51 + 49, y + 388 - 25);
    curveVertex(x + 51 + 49, y + 388 - 25);
    curveVertex(x + 49 + 49, y + 394 - 25);
    curveVertex(x + 49 + 49, y + 397 - 25);
    curveVertex(x + 52 + 49, y + 408 - 25);
    curveVertex(x + 55 + 49, y + 413 - 25);
    curveVertex(x + 62 + 49, y + 416 - 25);
    curveVertex(x + 71 + 49, y + 418 - 25);
    curveVertex(x + 71 + 49, y + 418 - 25);
    endShape();
// bottom leaf 2 - right
    beginShape();
    curveVertex(x + 51 + 33, y + 388 - 1);
    curveVertex(x + 51 + 33, y + 388 - 1);
    curveVertex(x + 61 + 33, y + 391 - 1);
    curveVertex(x + 71 + 33, y + 396 - 1);
    curveVertex(x + 76 + 33, y + 408 - 1);
    curveVertex(x + 71 + 33, y + 418 - 1);
    curveVertex(x + 71 + 33, y + 418 - 1);
    endShape();
//bottom leaf 2 - left
    beginShape();
    curveVertex(x + 51 + 33, y + 388 - 1);
    curveVertex(x + 51 + 33, y + 388 - 1);
    curveVertex(x + 49 + 33, y + 394 - 1);
    curveVertex(x + 49 + 33, y + 397 - 1);
    curveVertex(x + 52 + 33, y + 408 - 1);
    curveVertex(x + 55 + 33, y + 413 - 1);
    curveVertex(x + 62 + 33, y + 416 - 1);
    curveVertex(x + 71 + 33, y + 418 - 1);
    curveVertex(x + 71 + 33, y + 418 - 1);
    endShape();
// bottom leaf 3 - right
    beginShape();
    curveVertex(x + 51 + 15, y + 388 + 18);
    curveVertex(x + 51 + 15, y + 388 + 18);
    curveVertex(x + 61 + 15, y + 391 + 18);
    curveVertex(x + 71 + 15, y + 396 + 18);
    curveVertex(x + 76 + 15, y + 408 + 18);
    curveVertex(x + 71 + 15, y + 418 + 18);
    curveVertex(x + 71 + 15, y + 418 + 18);
    endShape();
//bottom leaf 3 - left
    beginShape();
    curveVertex(x + 51 + 15, y + 388 + 18);
    curveVertex(x + 51 + 15, y + 388 + 18);
    curveVertex(x + 49 + 15, y + 394 + 18);
    curveVertex(x + 49 + 15, y + 397 + 18);
    curveVertex(x + 52 + 15, y + 408 + 18);
    curveVertex(x + 55 + 15, y + 413 + 18);
    curveVertex(x + 62 + 15, y + 416 + 18);
    curveVertex(x + 71 + 15, y + 418 + 18);
    curveVertex(x + 71 + 15, y + 418 + 18);
    endShape();
// bottom leaf 4 - right
    beginShape();
    curveVertex(x + 51 - 2, y + 388 + 35);
    curveVertex(x + 51 - 2, y + 388 + 35);
    curveVertex(x + 61 - 2, y + 391 + 35);
    curveVertex(x + 71 - 2, y + 396 + 35);
    curveVertex(x + 76 - 2, y + 408 + 35);
    curveVertex(x + 71 - 2, y + 418 + 35);
    curveVertex(x + 71 - 2, y + 418 + 35);
    endShape();
    //bottom leaf 3 - left
    beginShape();
    curveVertex(x + 51 - 2, y + 388 + 35);
    curveVertex(x + 51 - 2, y + 388 + 35);
    curveVertex(x + 49 - 2, y + 394 + 35);
    curveVertex(x + 49 - 2, y + 397 + 35);
    curveVertex(x + 52 - 2, y + 408 + 35);
    curveVertex(x + 55 - 2, y + 413 + 35);
    curveVertex(x + 62 - 2, y + 416 + 35);
    curveVertex(x + 71 - 2, y + 418 + 35);
    curveVertex(x + 71 - 2, y + 418 + 35);
    endShape();
    fill(73, 135, 82);
    stroke(191, 158, 57);
    strokeWeight(1);
//center line for leaf
    push();
    noFill();
    stroke(47, 87, 53);
    strokeWeight(3);
    beginShape();
    curveVertex(x + 30, y + 310);
    curveVertex(x + 30, y + 435);
    curveVertex(x + 100, y + 360);
    curveVertex(x + 50, y + 360)
    endShape();
    pop();
}

I really wanted to do something with plant leaves and gold, and started at first to sketch out what I wanted. That ended up changing quite a lot, as I couldn’t for the life of me figure out how to write a loop that would loop the leaf shape rather than having to figure out the coordinates for each one individually. I asked multiple people for help, including a TA and some students in other CS courses, but none of us could really make it work. I wish I could’ve figured that out and implemented it for this project, because it would’ve saved a lot of time. Otherwise, figuring out how to loop the whole plant was relatively easy, since we had learned a version of how to do so in class.

The original ideas for my wallpaper. I wanted to do some sort of fern, and did a rough sketch of what that might look like.

 

 

Trying to figure out coordinates for the leaves. Figuring out the first leaf took most of my time, as I was pretty new to using curveVertex().

 

A friend (from another CS course) tried to help me figure out how to write a loop for the leaves by drawing it out on paper. In the end, we couldn’t figure it out.

NatalieKS-LookingOutwards-05

Created by Aldo Martínez Calzadilla, this is a 3D generated portrait of an Aghori. I found this work on the same page as the Ebola Virus example, and was completely amazed at the level of detail and accuracy this portrait has.

Calzadilla specializes in 3D models, spending meticulous time modelling and sculpting people and backgrounds, using programs such as Maya, ZBrush, and Mari. This particular piece of work was made in two weeks, and is his most recent work aside from his professional portfolio. The artist’s love for detail work is seen in his close attention to accurate anatomy and texture, which is a common trait for all of his work.

I admire literally everything about his work. It is so utterly realistic and beautiful, and at first glance you wouldn’t be able to tell it was computer generated. Every little aspect of the piece, from shadows to individual hairs, is so well thought-out and placed. This really demonstrates technology’s current abilities to render something so realistic, and with artists like Calzadilla, it can only get better.

Shaman_viewPort.jpg

The bare model of the figure

Shaman_beau.jpg

The final product

NatalieKS-Project-04

When I saw the project, I was reminded of the 2013 Great Gatsby movie poster, and I wanted to make a version of it using the string art. I thought this project was going to be a huge difficulty for me, but after really looking at it and asking tutors, I got a better grasp of the assignment and was able to make better guesses at figuring coordinates out. I tried to use the x1,y1/x2, y2 concept listed in the instructions as well as the x1 += x1StepSize, because I figured it was probably the simplest way to help generate the “curves,” so I could focus more on creating a better design.

sketch2

//Natalie Schmidt
//nkschmid@andrew.cmu.edu
//Sectiond D
//Project-04-StringArt

var height = 300;
var width = 400;
//coordinates for light gold loops
var x1 = 0;
var y1 = 0;
var x1StepSize = width/20;
var y1StepSize = height/20;
//coordinates for dark gold loops
var x2 = 0;
var y2 = 0;
var x2StepSize = width/20;
var y2StepSize = height/20;
//to change from gold to silver
var colorR1 = 219;
var colorG1 = 180;
var colorB1 = 117;
var colorR2 = 183;
var colorG2 = 129;
var colorB2 = 59;

function setup() {
    createCanvas(400, 300);
    background(0);
    fill(255);
//display text
    textSize(15);
    text("The Great", 168, 135);
    textSize(50);
    text("GATSBY", 105, 180);
}

function draw() {
    stroke(colorR2, colorG2, colorB2);
//change the colors from gold to silver
    if (mouseX <= height/2) {
        colorR2 = 183;
        colorG2 = 129;
        colorB2 = 59;
    }
    else {
        colorR2 = 109;
        colorG2 = 111;
        colorB2 = 106;
    }
    strokeWeight(10);
//how far apart each line is from each other
    var spacing = 20;
//lines down left
    for (var x = 65; x <= 115; x += spacing) {
        line(x, 0, x, height/2.3);
    }
//lines down right
    for (var x3 = 300; x3 <= 350; x3 += spacing) {
        line(x3, 0, x3, height/2.3);
    }
//lines across left
    line(0, height/2.3, width/4, height/2.3);
    line(0, height/2.6, width/4, height/2.6);
    line(0, height/3, width/4, height/3);
//lines across right
    line(width - width/4.2, height/2.3, width, height/2.3);
    line(width - width/4.2, height/2.6, width, height/2.6);
    line(width - width/4.2, height/3, width, height/3);
//lines going down left
    for (var x4 = 45; x4 <= 102; x4 += spacing) {
        line(x4, height/2.3, x4, height);
    }
//lines going down right
    for (var x5 = 320; x5 <= 360; x5 += spacing) {
        line(x5, height/2.3, x5, height);
    }
//light gold set of "curves"/loops
    for (var i = 0; i <= 400; i++) {
        strokeWeight(1);
        stroke(colorR1, colorG1, colorB1);
        line(0, y1, x1, height);
        line(0, height - y1, x1, 0);
        line(width, y1, width - x1, height);
        line(width, height - y1, width - x1, 0);
        x1 += x1StepSize;
        y1 += y1StepSize;

    }
//dark gold set of "curves"/loops
    for (var j = 0; j <= 400; j++) {
        strokeWeight(1);
        stroke(colorR2, colorG2, colorB2);
        line(0, y2, x2, height);
        line(0, height - y2, x2, 0);
        line(width, y2, width - x2, height);
        line(width, height - y2, width - x2, 0);
        x2 += 1.3*x2StepSize;
        y2 += 1.5*y2StepSize;

    }
//top triangle
    for (var k = 0; k < 5; k++) {
        stroke(colorR1, colorG1, colorB1);
        line(width/2, 110, k * 20, 50);
        line(width/2, 110, 60 + k * 20 , 50);
        line(width/2, 110, 120 + k * 20, 50);
        line(width/2, 110, 180 + k * 20, 50);
        line(width/2, 110, 240 + k * 20, 50);
        line(width/2, 110, 300 + k * 20, 50);
    }
//bottom triangle
    for (var l = 0; l < 5; l++) {
        stroke(colorR1, colorG1, colorB1);
        line(width/2, height - 110, l * 20, height - 50);
        line(width/2, height - 110, 60 + l * 20 , height - 50);
        line(width/2, height - 110, 120 + l * 20, height - 50);
        line(width/2, height - 110, 180 + l * 20, height - 50);
        line(width/2, height - 110, 240 + l * 20, height - 50);
        line(width/2, height - 110, 300 + l * 20, height - 50);
    }
    if (mouseX <= width/2) {
        colorR1 = 219;
        colorG1 = 170;
        colorB1 = 91;
    }
    else {
        colorR1 = 180;
        colorG1 = 177;
        colorB1 = 172;
    }
}

A really rough sketch of my initial idea. It ended up changing, because I felt like it originally looked too busy. I did have help from the CS pedagogy tutors in trying to figure out how to approach this assignment.

NatalieKS-LookingOutwards-04

Created by Amanda Ghassaei, the Sugarcube is a portable MIDI controller with the capability to connect with up to 16 apps. It implements both buttons and “shake and tilt” features, allowing the user to manipulate sounds by tilting the Sugarcube one way or another. The creator used code from Arduino so that the device does all of its app processing internally, rather than with another computer. The device is also able to store sounds to correspond with different buttons. The creator, who is a grad student working at MIT Media Labs, used their knowledge of interactivity and media to create a device that is both user-friendly and fun.

I admire the simple and clear aesthetic of the Sugarcube, because it is easy to use without sacrificing beauty. The back-lit buttons create a really beautiful visual while also producing sounds and patterns, so you can visually see the music you’re making. It looks so simple, yet all of the code that went into it is fairly complicated and long.

Project-03-Dynamic-Drawing

As I was creating this, I didn’t really know what my end goal was going to be. I mostly let creative freedom have its way while I tried out different shapes and movements to see what I liked best. Altogether, this project was pretty tough for me, as a couple of things I wanted to do were a little too complicated (and it was all getting too jumbled and confusing), so I tried to keep it simpler, but with interesting-enough shapes. I tried to experiment more with triangles and mouseX/mouseY, which is why I focused so much on it.

sketch

//Natalie Schmidt
//nkschmid@andrew.cmu.edu
//Section D
//Project-03

function setup() {
    createCanvas(480, 600);
    rectMode(CENTER);
}

function draw() {
    background(248, 207, 233);
//background lines
    var x = 0
    fill(0, 255, 0);
    strokeWeight(.3);
//these lines will shake back and forth - it
//   will change the position of each line with a value
//   between 1 and 5 as well as move with the mouse
//half of them will move up with the mouse,
//half will move down with the mouse
    x = x + random(1, 3);
    line(x + 5, 0, x + 5, mouseY);
    line(x + 25, 600, x + 25, mouseY);
    line(x + 45, 0, x + 45, mouseY);
    line(x + 65, 600, x + 65, mouseY);
    line(x + 85, 0, x + 85, mouseY);
    line(x + 105, 600, x + 105, mouseY);
    line(x + 125, 0, x + 125, mouseY);
    line(x + 145, 600, x + 145, mouseY);
    line(x + 165, 0, x + 165, mouseY);
    line(x + 185, 600, x + 185, mouseY);
    line(x + 205, 0, x + 205, mouseY);
    line(x + 225, 600, x + 225, mouseY);
    line(x + 245, 0, x + 245, mouseY);
    line(x + 265, 600, x + 265, mouseY);
    line(x + 285, 0, x + 285, mouseY);
    line(x + 305, 600, x + 305, mouseY);
    line(x + 325, 0, x + 325, mouseY);
    line(x + 345, 600, x + 345, mouseY);
    line(x + 365, 0, x + 365, mouseY);
    line(x + 385, 600, x + 385, mouseY);
    line(x + 405, 0, x + 405, mouseY);
    line(x + 425, 600, x + 425, mouseY);
    line(x + 445, 0, x + 445, mouseY);
    line(x + 465, 600, x + 465, mouseY);
//triangles
//the top points of each triangle will follow mouse
    fill(155, 44, 75);
    push();
    noStroke();
//top triangles
//constrain mouseX within the canvas
    var mouse1 = max(min(mouseX, 480), 0);
    var mouse2 = max(min(mouseY, 640), 0);
    triangle(mouse1, 50, 50, 150, 125, 150);
    triangle(mouse1, 50, 200, 150, 275, 150);
    triangle(mouse1, 50, 350, 150, 425, 150);
//center triangles - these will go in opposite direction
    triangle(-mouse1 + 480, 225, 50, 325, 125, 325);
    triangle(-mouse1 + 480, 225, 200, 325, 275, 325);
    triangle(-mouse1 + 480, 225, 350, 325, 425, 325);
//bottom triangles
    triangle(mouse1, 400, 50, 500, 125, 500);
    triangle(mouse1, 400, 200, 500, 275, 500);
    triangle(mouse1, 400, 350, 500, 425, 500);
    pop();
//these circles wil move vertically with the mouse
//larger circles
    push();
    noStroke();
    fill(201, 50, 93);
    ellipse(75, 10 + mouse2 * 225 / 600,
        40, 40);
    ellipse(75, 200 + mouse2 * 225 / 600,
        40, 40);
    ellipse(240, 10 + mouse2 * 225 / 600,
          40, 40);
    ellipse(240, 200 + mouse2 * 225 / 600,
          40, 40);
    ellipse(400, 10 + mouse2 * 225 / 600,
         40, 40)
    ellipse(400, 200 + mouse2 * 225 / 600,
          40, 40);
//smaller circles
    ellipse(165, 10 + (-mouse2+1000) * 225 / 600,
          20, 20);
    ellipse(165, 200 + (-mouse2+1000) * 225 / 600,
          20, 20);
    ellipse(320, 10 + (-mouse2+1000) * 225 / 600,
           20, 20);
    ellipse(320, 200 + (-mouse2+1000) * 225 / 600,
           20, 20);
    pop();
}

NatalieKS-Looking-Outwards-03

A team of researchers from MIT and UMass Amherst have created a 3D printed product that is able to fold itself up. These self-folding structures are made using a 3D printer and a special ink that expands once it solidifies, thus forcing the “legs” of the structure to fold themselves up. Due to its self-folding capabilities, these devices are also able to contain functional electronics. These researchers were inspired to create a material with complex, programmed shapes – not much is mentioned about the algorithm used, but it does mention that they programmed specific shapes for specific purposes – in order to further research into robotics and sensing.

This is inspiring because it broadens the opportunities and sources of material for other structures. Since other structures require heat or some other external stimulus to do this kind of behavior (which can be detrimental and degrade the material), this product can accomplish the same thing without using those additional resources and without the potential danger of those external resources. It’s exciting to see new forms of pre-existing material being made into something that is better for human action/interaction as well as the environment.

This project was completed and published in 2017. This video demonstrates the device and talks more in detail about its properties.