Uncategorized – Page 16 – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice

Shannon Ha – Project 04 – String Art

//Shannon Ha
//Section D
//sha2@andrew.cmu.edu
//Project 04 String Art

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

function draw(){
  background(175,0,0);
  stroke('black')
  for (var i = 0; i < width; i+=20) {
    stroke(mouseX, mouseY, 210); //upper left corner arc
    line(mouseX-i,0,0,i+20);
    stroke(28,50,158);
    line(mouseX+i,0,0,i-20);
    stroke(255, 227, mouseX-10);//lower right corner arc
    line(mouseX-i,300,400,i-20);

}
  for (var i = 0; i < 500; i+=30) {
    push();
    translate(width/2, height/2);
    rotate(180);
    stroke(93,28,158);
    line(5,5, mouseX/2, i+1); //purple lines in the back
    rotate(90);
    line(5,5, mouseX/2, i+1);

    pop();
  }


    ellipseMode(CENTER); //the moving pupil of the eye
    noFill();
    ellipse(mouseX-200, height/2 ,100,100);
    strokeWeight(2);


  }

For this project I explored how the lines met to form arcs and curves through iteration and ultimately decided it would be fun to make the string art so that it looks like an eye!

project 04 – Ilona Altman – string art

This project was very interesting. It really helped me to isolate the changes of the variables in terms of width and height.

sketch

//Ilona Altman
//iea 

function setup() {
  createCanvas(400, 300);
  background(230,212,160);
}

function draw() {


for(var x = 0; x < 2*width; x = x + 5) {
    line(x, width, 0, -1*x);
    stroke(194,130,150);
    }

for(var x = 0; x < 2*width; x = x + 5) {
    line(x, width, height, -1*x);
    stroke(180,200,190);
    }

for(var x = 0; x < 2*width; x = x + 5) {
    line(width - x, -1.5*height, 0, height-x);
    stroke(230,212,160);
    }

for(var x = 0; x < 2*width; x = x + 10) {
    line(0.000000005*width + x, height, width, height - x);
    stroke(180,120,140);
    }

for(var x = 0; x < 2*width; x = x + 5) {
    line(width - x, height, width, 0.000000001*width + x);
    stroke(190,130,90);
    }


}

Sarah Kang – Project-04-String Art

string

//sarah kang
//section c
//sarahk1@andrew.cmu.edu
//project-04-string art


//for center diamond
var r = 255;
var g = 125;
var b = 175;

//for intermediate rays
var rr = 255;
var gg = 196; 
var bb = 179;

//for corner rays
var rrr = 255;
var ggg = 253;
var bbb = 232;

//canvas
var W = 400;
var H = 300;

function setup() {
    createCanvas(W, H);
}

function draw() {
    background(0);

    strokeWeight(1);

    //center diamond
    for (var i = 0; i < W; i += 10) {
        line(i, H / 2, W / 2, H - (0.8 / i));
        stroke(r, g, b);

        line(W / 2, 0.8 / i, i, H / 2);
        stroke(r, g, b);
    } 

    //intermediate rays
    for (var i = 0; i < W; i += 30) {
        line(W, 0.8 / i, i, H / 2);
        stroke(rr, gg, bb);

        line(i, H / 2, W, H - (0.8 / i));
        stroke(rr, gg, bb);

        line(0, 0.8 / i, i, H / 2);
        stroke(rr, gg, bb);

        line(i, H / 2, 0, H - (0.8 / i));
        stroke(rr, gg, bb);
    }

    //corner rays
    strokeWeight(0.3);
    for (var i = 0; i < W; i += 5) {
        line(i, H / 2, mouseX, H - (0.8 / i));
        stroke(rrr, ggg, bbb);

        line(mouseX, 0.8 / i, i, H / 2);
        stroke(rrr, ggg, bbb);

        line(i, H / 2, W - mouseX, H - (0.8 / i));
        stroke(rrr, ggg, bbb);

        line(W - mouseX, 0.8 / i, i, H / 2);
        stroke(rrr, ggg, bbb);
    }
}

It was pretty confusing at first when figuring out how the variables were controlled and changed, but after playing around with different options, I finally got the hang of the basic inputs.

Shannon Ha – Looking Outwards – 04

test pattern [N 12] at store studios.

Ikeda works with music in a variety of “raw” states, such as sine tones and noise, and explores a range of frequencies that are often close to the limit of what humans can hear. I appreciate how he is able to push the sensorial boundaries of humans through his art by using sound patterns to heighten the audiences’s awareness of what they can and cannot hear.

The sounds that he produces may come across as random, but he actually combines a variety of discrete tones and noises, in addition to beat patterns to create a drumming effect. He matches the frequency of the sound to the visual installation of strobe lights on the floor of Store Studios to create an overwhelming environment.

Charmaine Qiu-LookingOutwards 04

The Prelude in ACGT is a project created by Pierry Jaquillard where he used his own DNA to generate music by utilizing the chromosomes 1 to 22 and XY. Believing that DNA is the core structure of nature, Pierry wanted to experiment with his own personal code.

The project was created through JavaScript, and he generated midi signals that was passed into Ableton Live, a music sequencer, to play the sounds. The project was displayed on 4 ipads and a phone, where the phone is used to change tempo and arrangement. I found this project really interesting since it celebrated the nature of human beings and creating art through biology could become a direction of art in the future.

A video explaining the Prelude in ACGT project

William Su – Project 04 – String Art

I just made a rainbowy web of strings that changes colors depending on mouseX and mouseY. Credit to the person that utilized rotate and translate to move stuff around, it made things a lot simpler to think about.

sketch

// William Su
// Section E
// wsu1@andrew.cmu.edu
// Project 04

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

function draw () {
  for (var x = 0; x <= 50; x += 2) {
    var1 = x 
    var2 = x * 10
    b = constrain(var2, 0, (3 * width) / 5);

    //bottomleft
    stroke(mouseX, 0, 50);
    line(0, var2 + height / 2, var2, height);

    //topleft
    push();
    translate(300, 0);
    rotate(radians(90));
    stroke(mouseY, 0, mouseX);
    line(0, var2 + height / 2, var2, height);
    pop();

    //topright
    push();
    translate(400, 300);
    rotate(radians(180));
    stroke(mouseY, mouseX, 50);
    line(0, var2 + height / 2, var2, height);
    pop();

    //bottom right
    push();
    translate(100,300);
    rotate(radians(270));
    stroke(mouseX, mouseY, 50);
    line(0, var2 + height / 2, var2, height);
    pop();

    //2ndCurveTopRight
    stroke(50,mouseX, mouseY);
    line(width * 1.2, var2, var2 /2, 0);

    //2ndCurveBottomLeft
    push();
    translate(400, 300);
    rotate(radians(180));
    stroke(50,mouseY, mouseX);
    line(width * 1.2, var2, var2 /2, 0);
    pop();
  };
}

Shariq M. Shah – Project 04 – String Art

shariqs-project-04

// Project - 04
// Name: Shariq M. Shah
// Andrew ID: shariqs
// Section: C



function setup() {

createCanvas(400,300);

}

function draw() {

  background(0);

  for (var i = 0; i < 200; i += 1) {

      //defining a rotating series of lines that converge in patterns
      //using frameCount to have rotations and colors change over time

      strokeWeight(0.4);
      translate(width / 2, height / 2 + 100);
      rotate(radians(180 * 0.1 + frameCount));

      //various configurations and colors of lines that change according to stepping i variable
      //mouseY used to alter color and configurations depending on mouse location

      stroke(mouseY, 0, 25 + frameCount);
      line(i + i * width,  height * 0.1 * mouseY, width/2, i + i*2);


      stroke(0.5 * mouseY, 0, 25);
      line(i + i * -width,  height * 0.1 * mouseY, width/2, i + i*2 );


      stroke(mouseY, 0, 250);
      line(i + i * width/10,  -height * 0.1 * mouseY, width/2, height);


      stroke(mouseY, 0, 250);
      line(i + i * -width/10,  -height * 0.1 * mouseY, width/2, height);

      }

}

In this project, I explored various configurations and rotational properties that could be created with the lines created in for() loops. The program I developed focuses on developing a highly dynamic and fluid pattern of lines that at times seem solid and at other times seem porous. The colors are also dynamic as they change with the movement of the lines.

Monica Chang – Project 04 – String Art

sketch

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

function draw() {
  // changing background color based on mouse position
  background( mouseX, mouseY, 245);
    
  // creates pattern on top right
  
  for (var i = 0; i < 300; i++) {
      strokeWeight(0.5); // for thin lines
    
      var x1 = width - i * 5; // x1 for curve 1
      var x4 = width + 50; // x1 for curve 4
    
      var y1 = height - i * 5; // y1 for curve 1
      var y2 = height + i * 50; // y1 for curve 2
      var y3 = height - i * 6; // y2 for curve 3
      var y2y4 = height - i * 15; // y2 for curve 4
      var y1y4 = height - i; // y1 for curve 4

      //curve #1
      stroke("red");
      line(x1, mouseY, mouseX, y1); 
    
      //curve #2
      stroke("blue");
      line(0, y2, x1, mouseY); 
      
      //curve #3
      stroke(255);
      line( x1, mouseY, 0, y3);
      
      // curve #4
      stroke("yellow");
      line(x4, height - i, mouseX, y2y4); 
    }
      

  
  
}

This project allowed me to better understand the way loops can be used. I may have struggled but I am becoming more comfortable with the concept of loops and what I can do with them. I had lots of fun integrating color and design as I grew more familiar with the concept of for loops and “i”.

Shariq M. Shah – Looking Outwards 04 – Sound Art

http://

Demonstration of Hamdan’s work: Saydnaya

Lawrence Abu Hamdan is a sound researcher and designer studying the intersection of sonic research, politics, art, and forensics. Using his background as a musician, he uses computational processes and calibrated research models for his political and artistic investigations. One of his works, Saydnaya, consists of a sound box in a dim room in a way where voices of 4 inmates become quieter after 2011 protests in his country. There is a level of abstraction in his work that allows the work to be understood as not only sets of decibel data and forensic investigations, but also as emotional and evocative maps of the human condition.

The Hummingbird Clock, on the other hand, functions as a public time piece that exists both physically and online. It records, second by second, the buzz of the electronic grid picked up by surveillance cameras in a highly public location, so that it may be viewed in the public domain rather than exclusively by government security agencies.

These highly novel yet highly calibrated approaches to the interactions between computation, forensics, politics, and design push the boundaries on what can be conceived as art.

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