Category: SectionC

Sean Leo – Project 04 – String Art

This learning curve on this was step (pun intended) but once I realized I could copy and rotate the different parts it was smooth sailing.

sleo-project04

//Sean B. Leo
//sleo@andrew.cmu.edu
//Section C
//Project 04
var x1 = 0;
var y1 = 0;
var x2 = 0; 
var y2 = 350;
var x2step = 11; 
var y1step = 4;

function setup() {
  createCanvas(400, 300);
  background(0);
  strokeWeight(.6);
}

function draw() {
//first curve
stroke('blue');
for(var i=0; i<1; i++){
    line(x1, y1, x2, y2);
    y1+=y1step;
    x2+=x2step;
}
//blue curve translated, rotated and colored
push();
stroke('red');
translate(300, 0);
rotate(radians(90));
for(var i=0; i<1; i++){
    line(x1, y1, x2, y2);
    y1+=y1step;
    x2+=x2step;
}
pop();
//blue curve translated, rotated and colored 2
push();
stroke('green');
translate(400, 300);
rotate(radians(180));
for(var i=0; i<1; i++){
    line(x1, y1, x2, y2);
    y1+=y1step;
    x2+=x2step;
}
pop();
//blue curve translated, rotated and colored 3
push();
stroke('yellow');
translate(100, 300);
rotate(radians(270));
for(var i=0; i<1; i++){
line(x1, y1, x2, y2);
y1+=y1step;
x2+=x2step;
}
pop();
}

Ammar Hassonjee – Project 04 – String Art

Project 04 – String Art

/* Ammar Hassonjee
   Section C
   ahassonj@andrew.cmu.edu
   Project 04 - String Art
   */

function setup() {
  createCanvas(300, 400);
  background(180);
}

function draw() {
    // For loop that allows for reiterations of the line
    // Loop runs 90 times to generate specific shapes
    for (i = 0; i < 90; i++) {
        // Multiple variables declared that are used in line function
        x1 = i * 10;
        y1 = -x1;
        x2 = width / 2 - x1;
        y2 = height / 2 - y1;
        y3 = 0;
        y3 += i * 5;
        y4 = height;
        y4 -= i * 5;

        // Alternating the color of lines to create an intersting composition
        if (i < 50) {
            stroke(0);
        }
        else {
            stroke(255);
        }
        strokeWeight(.5);

        // First pair of top triangles
        line(width / 2, height / 2, x1, y1);
        line(width / 2, height / 2, width - x1, height - y1);

        // Second pair of the side triangles
        line(width / 2, height / 2, width, y4);
        line(width / 2, height / 2, 0, y3);

        // Second series of variables declared to allow for curves to be developed
        stroke(255);
        a1 = width;
        a2 = 0;
        a3 = -100;
        a4 = 0;

        a1 -= i * 4;
        a3 += i * 1.2;
        a4 += i * 5;
        // Top left curve drawn
        line(a1, a2, a3, a4);

        b1 = width;
        b2 = height;
        b3 = width;
        b4 = -5;

        b1 -= i * 4;
        b3 += i * 3;
        b4 += i * 5;
        // Bottom right curve drawn
        line(b1, b2, b3, b4);


    }


}

My inspiration for this project started with testing what combinations of lines resulted from varying the parameters in a for loop. I found interesting patterns where lines clustered together represent shadows, and by alternating colors, I was able to make an interesting composition.

Ammar Hassonjee – Project 03 – Dynamic Drawing

Ammar Hassonjee – Dynamic Drawing

/* Ammar Hassonjee
    Section C
    ahassonj@andrew.cmu.edu
    Project 03 - Dynamic Drawing
*/

// Sky color variables
var sc1 = 255;
var sc2 = 255;
var sc3 = 255;
function setup() {
    createCanvas(480, 640);
}

function draw() {
    // Making sure the sky color changes from day to night as the mouse moves down
    background(mouseY * .5, 6 + mouseY * .18, 60 + mouseY * .12);
    if (mouseY > height) {
        background(242, 117, 134);
  }

  // Changing the color of the stars to make sure they fade at dawn
    noStroke();
    sc2 = 255 - mouseY * .4;
    sc3 = 255 - mouseY * .3;
    if (mouseY > height / 2) {
        sc1 = 242;
        sc2 = 117;
        sc3 = 134;
  }

  // Creating the star pattern using nested for loop
    fill(sc1, sc2, sc3);
    for (let a = 1; a < 7; a++) {
        for (let i = 1; i < 51; i++) {
            if (i % 2 === 0) {
                ellipse(i * 30 - 15, 70 * a, 10, 10);
                }
            else {
                ellipse(i * 30 - 15, 70 * a - 30, 10, 10);
              }
            }
  }

  // Drawing the mountains
    var p = 0;
    fill(96, 90, 114);
    for(let i = 0; i < 23; i++) {
        if (i % 2 === 0) {
            triangle(p - 30, 640, p + 45, 500 + (mouseX * .1), p + 90, 640);
          }
        else {
            triangle(p - 30, 640, p + 45, 460 + (mouseX * .1), p + 90, 640);
          }
          p += 45;
        }

    // Creating the shooting star
    push();
    // Making the star translate back and forth across the image plane
    translate(mouseX, height / 3);
    rotate(radians(170));
    // Streaks for the star
    fill(220);
    triangle(384, 145, 387, 160, 665, 92);
    triangle(665, 86, 384, 127, 383, 138);
    // Shooting star drawing
    fill('yellow');
    beginShape();
    vertex(339, 86);
    vertex(353, 112);
    vertex(379, 116);
    vertex(359, 138);
    vertex(364, 166);
    vertex(339, 153);
    vertex(314, 166);
    vertex(319, 138);
    vertex(299, 116);
    vertex(326, 112);
    endShape();
    pop();

  }

 

My inspiration for this assignment stemmed from my love of nature and landscape. I’ve always liked the scene of a shooting star in a starry sky, so I thought it would be a great dynamic drawing opportunity to have a star move across the screen while the sky color changes.

Kimberlyn Cho- Project 04

string

/* Kimberlyn Cho
Section C
ycho2@andrew.cmu.edu
Project 4 */

//all comments in context of left to right

function setup () {
	createCanvas(400, 300);
	background(255);
	strokeWeight(0.03);
}

function draw () {
	for (var i = 0; i < 30; i++) {
		var a = i * 5
		var b = i * 7
		b = constrain(b, 0, width / 2);

		//bottomleft fold
		stroke(0);
		line(0, b + height / 2, b, height);

		//middle gray fold 
		stroke(105);
		line(0, a, b, height / 2);
		stroke(0);
		line(b, height / 2, width / 2, height / 2 + b);
		stroke(105);
		line(width / 2, height / 2 + a, b + width / 2, height);

		//middle red fold
		stroke(160,0,0);
		line(0, a / 2, b / 2, height / 4);
		stroke(72,0,0);
		line(a - width / 9, height / 4, width / 4, a + height / 4);
		stroke(160,0,0);
		line(width / 4, a + height * 0.26, b + width / 4, height * 0.75);
		stroke(72,0,0);
		line(b + width / 4, height * 0.75, width * 0.75, height * 0.75 + b);
		stroke(160,0,0);
		line(width * 0.75, height * 0.75 + b, width * 0.75 + b, height);

		//outer right
		stroke(0);
		line(width, b * 1.5, b * 2, 0);

		//middletop
		stroke(0, 0, 204);
		line(b, 0, width / 2, b);
		line(b + width / 2, 0, width / 2, height / 2 - b);
		
		//pins
		fill(0);
		ellipse(0, 0, 20, 20)
		ellipse(0, height / 4, 10, 10)
		ellipse(width / 4, height / 4, 10, 10)
		ellipse(width / 4, height * 0.75, 10, 10)
		ellipse(width * 0.75, height * 0.75, 10, 10)
		ellipse(width * 0.75, height, 10, 10)
		ellipse(width, height, 20, 20)
		ellipse(0, height / 2, 10, 10)
		ellipse(width / 2, height / 2, 10, 10)
		ellipse(width / 2, height, 10, 10)
		ellipse(width, 0, 20, 20)
		ellipse(0, height, 20, 20)

	};
}

I was inspired by tensile systems such as pinning down flexible materials such as nylon. I used different shades to emphasize the folding pattern of the middles pieces.

Carly Sacco – Looking Outwards – 04

The Mylar Typology is an audio – visual performance of continuous textures that seem to shimmer and flow with the amplification of sound. I thought this project was particularly appealing because of the calming effects the visual and audio had as you watch it. The muted colors that seemingly blend together and create swift vibrations seem to always be rippling off of each other.

One of the visuals Prudence uses in “The Mylar Typology.”

I could imagine that the algorithms used to create these visuals are complex since they not only have to correlate to each other, but also to the changing sounds that occur. Paul Prudence shows his artistic abilities in this project with his attention to details of the sounds played and how the visual reacts.

A key striation effect Prudence uses that appears to shimmer with the audio.

Jai Sawkar – Looking Outwards – 04

Sonic Playground is an outdoor sound installation that features ingenious, colorful sculptures that modify and transmit sound in unusual, engaging and playful ways. Atlanta, GA

This week, I found an outdoor sound installation by Yuri Suzuki: Sonic Playground. This outdoor sound installation, located in Atlanta, is made up of 6 interactive sound sculptures that manipulate sound based on where you are in the installation. Using grasshopper, a Rhino 3D Model plugin, Suzuki computationally designed these installations using 3D ray tracing in order to simulate how sound can travel. Through this, users can interact with one another through individual installation.

Having experience in Grasshopper, it is super cool to see the possibilities with not only grasshopper, but with how you can use computational design to not only design material, but design products that are made to interact with people’s senses.

Link to Article

Carly Sacco – Project 04 – String Art

sketch

//Carly Sacco
//Section C
//csacco@andrew.cmu.edu
//Project 4

var x1 = 5;
var x2 = 9;
var y1 = 5;



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

function draw() {
	background(0);
	
	for (var i = x1; i < 400; i += y1){
		
	  //blue curves
	  stroke(95, 158, 176); 
	  line(i + 200, 300, i * x2 + mouseX, i); 
	  line(i + 200, 300, -i * x2 + -mouseX, i);
	  
	 //green
	  stroke(109, 199, 111);
	  line(i, 0, x1 * 80, i);
	  
	 //orange
	  stroke(214, 56, 39); 
	  //line(i + 400, 0,  -x2 * 10, i * 5); 
	  line(i, 300,  0, i);
	 
	  //purple
	  stroke(173, 142, 212);
	  line(i * x1, y1, 500, i * 10);
	  
	} 
}


Once I had made the blue curves that work oppositely of each other they reminded me of wings of a bird. I then decided to make the other curves mimic the shape of a peacock’s feather and chose the colors accordingly.

Katrina Hu – Looking Outwards – 04

Weather Thingy

The interface screen that displays the data collected by the sensors.

Weather Thingy is a sounds controller that uses real time climate-related events to control and modify the settings of musical instruments. The device consists of a weather station on a tripod microphone and a custom built controller connected to the weather station. The station has 3 climate sensors including a rain gauge, a wind vane and an anemometer. There is a controller that transforms climatic data into midi data, and can therefore be interpreted by instruments. The purpose of this project was to allow users to listen to the impact of climate on composition.

I admire that it allows users to take the data and use it to turn it into their own creative compositions. This is possible because you can use the device to pre-record the climate data of a certain place at a certain time. The musician can capture moments that he has found inspiring to create new melodies on his own.

lee chu – looking outwards – 04

Porter Robinson, a renown EDM artist is also known for amazing visuals at his live performances. His visuals usually consist of animation-esque landscapes and futuristic cityscapes which shift and morph to the music. Some of his visuals seem more computational than others, but I assume that most of them are animated completely digitally. The clip below was recorded during Porter’s Worlds tour probably last year or the year before. Porter Robinson’s personal tastes and artistic sensibilities translate directly to his visuals, as they seem to be inspired greatly by anime and consist of pastel colors.

Jai Sawkar Project 04 – String Art

Sketch

// Jai Sawkar
// jsawkar@andrew.cmu.edu
// Section C
// Project 04 

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

function draw() {
    background('#15274d');
    var x0 = 0;
    var y0 = 0;
    var x1 = width;
    var y1 = height;
    var y2 = height + 20
    var x2 = i - 34
    var x3 = width/2
    var y3 = height/3

    for (var i = 0; i < 50; i ++) {
         //white Eye
        stroke('#aab3aa')
        strokeWeight(.25)
        line(x1 + 60, (11 * i) - 110, 5 * i + 90, height/2)

        //white 2 Eye
        line(width/2, 5 * i - 40, 12 * i - 34, y2)

        //green
        strokeWeight(2); 
        stroke(86, 166, 85);
        line(x0, 5 * i - 40, 15 * i - 34, y2)

        //blue
        strokeWeight(2);
        stroke('#375dad');
        line(x1 + 60, 8 * i, 5 * i, 0)
      
} 
}

For this project, my aim was to use strings to create an abstract image of the Seattle Seahawks. Along with the use of the color schemes, I aimed to create the “eye” that the team uses in their logo schemes.