Month: September 2017

Sheenu-Project 04-String Art

sketch

//Sheenu You
//Section E
//Project-04
//sheenuy@andrew.cmu.edu
function setup() {
    createCanvas(400, 300);
    strokeWeight(2);
}

function draw() {
	background(0);
	for (var i = 20; i <400; i+= 20) {
		stroke("yellow");
		line(0,i,i*mouseX/5,400);
		line(400,i,i*mouseX/5,0);
	}
	for (var b = 10; b<600; b+=5){
		strokeWeight(1);
		stroke("red");
		line(0+b,0,0+b,300);
	}
for (var a = 20; a <400; a+= 10) {
		stroke("blue");
		line(0,a,a,400);
		line(400,a,a,0);
	}
}

This is a very simple line art I made using the for function. The for function is something I still don’t understand very well. I see many possibilities in this function but learning this is a bit of a challenge that needs extra time. Other than that, I really enjoyed how my project turned out in the end. The MouseX really makes this thing come to life.

hschung-Project-04

sketch

// Heidi Chung
// Section A
// hschung@andrew.cmu.edu
// Project-04

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

function draw() {
    background(200, 90, 90);
     for (var i = -5; i < 350; i += 10) {

    var x1 = 0;
    var y1 = i * height/500;
    var x2 = i * height/300;
    var y2 = height;

      push();
      stroke(235, 130, 130); // peach lines that touch bottom of canvas
      strokeWeight(9);
      line(i*2 + 20, 500, 1.5*i, 120);
      pop();

      push();
      stroke(245, 185, 140); //thin short peach lines
      strokeWeight(3);
      line(1.5*i, 120, 1.2*i, 240);
      pop();

      push();
      stroke(111, 178, 173); //short blue lines
      strokeWeight(4);
      line(i*2 + 20, 240, 1.5*i, 120);
      pop();


      stroke(235, 130, 130);//left bottom corner pink underlay grid
      strokeWeight(3);
      line(x1, y1 +100, x2, y2);

      stroke(255); //white overlay grid
      strokeWeight(.5);
      line(x1, y1 +100, x2, y2);

      stroke(235, 130, 130); //top right pink overlay grid
      strokeWeight(.5);
      line(y2-width/2, x1, y1 +400, x2);

      stroke(235, 130, 130);//top left pink grid
      strokeWeight(1);
      line(y2, y2-width, x1, y1);

      stroke(239, 84, 84);//grid top left reddish pink
      strokeWeight(2);
      line(y2 + 100, y2-width, x1 + 100, y1);

      stroke(141, 219, 213); //light blue grid
      strokeWeight(1);
      line(y2 * i, x1, y1, x2);




    }

}

I didn’t have a clear image of what I wanted to make when I started this, except for the color palette surrounding peachy pinks. It took me a long time to conceptually understand how to use the for loop to make the lines appear in a curved grid. But I had some helpful explanations from my friends and that helped ground me a lot. I think I’ll need to keep practicing using for loops a lot.

katieche – project 04

katieche-04

 	var x = 200;
 	var curve = 400;
 	var v = 7;



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

function draw(){
		background(240);

	for (var i = 0; i<=500; i++) {
		strokeWeight (0.2);
		stroke (180);
		// bottom left
		line(i*v, height, x, height-i*v);
		// bottom right
		line (mouseX, i*v, i*v, mouseY);
		// top right
		line(x, i*v, width-(i*v), 0); 
		// top left
		line(i*v, mouseY, mouseX, i*v);

	}

}

This project was difficult for me as it was hard for me to understand which values to multiply to which variable. It was a lot of guess and check and hard to get the curves to do exactly what I wanted, but I think the end result is pretty fun to play with.

adev_Project 04_String Art

adev_Project04

var spacing = 1; 
var x1 = 0; 
var y1 = 100; 
var x2 = 200; 
var y2 = 0; 
var rectWidth = 10;
var sw;

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

    noFill();
	stroke (255);
	strokeWeight (0.5);

   }

function draw() {
     background(232, 221, 199);

    spacing = map(mouseX, 0, 400, 3, 20);
    sw = map(mouseX, 0, 400, 0.3, 0.7);

   

	for(var i = 0; i < width; i += 1) {
		strokeWeight(sw);
		stroke(255); 
		line(x2, spacing * i, spacing * i , y2);
		line(x1, spacing * i, spacing * i , y1);
		

		strokeWeight(sw*2);
		stroke(255); 
		line(x2/2, spacing * i+2, spacing * i+2, y2/2);
		line(x1*2, spacing * i+2, spacing * i+2 , y1*2);


		strokeWeight(sw*2.7);
		stroke(255); 
		line(x2*2, spacing * i+2, spacing * i+2, y2*2);
		line(x1/2, spacing * i+2, spacing * i+2 , y1/2);

        strokeWeight(sw*3.2);
		line(x1/3, spacing * i+2, spacing * i+2 , y1*3);	
		
	}
}

I really liked playing with the layered quality of the “strings”. Instead of using colour, I used varying stroke weights to highlight that. The strings also really reminded me of fishnet, and I made a fish-like abstracted shape out of the curved lines.

aerubin-LookingOutwards-04-Section-C

As a music major, technology has affected our craft in both negative and positive ways. One of the most beneficial aspects of technology integrated into music, in my opinion, is the newfound ease that compositional programs provide composers, musicians, and creatives. Back in the day, composers would sit down and write hundreds of thousands of notes, one by one, on pieces of paper. This is a very slow method, erasing becomes a large hassle, and there is no way to hear what it sounds like completed, especially for compositions for large ensembles, unless one was to recruit the 50+ musicians necessary to create a full orchestra.

One of Beethoven’s original scores to exemplify the issues encountered while composing using pen and paper:

Composing on the computer allows the composer to quickly tap notes on the staff to write music. If the artist would like to get rid of a note, it is easy to click on it and press delete instead of erasing; one can even select an entire section to delete. One now has the ability to copy a melody, and paste it to have another instrument double the line, or even place it in another section of the piece. It is also possible to move a passage up or down by any interval, such as moving a melody down by an octave or changing the key by moving an entire piece a half-step or more up/down. In addition, there is a play-back setting that allows the composer to hear computer-generated instruments perform their work, and even listen to selected instruments individually. All of these features have greatly improved the speed and ease of composing.

Audacity
Created by: Roger Dannenberg and Dominic Mazzoni, Carnegie Mellon University

There are a multitude of composition applications and computer programs. Some of the most common ones are Sibelius, Ableton Live, Audacity, Pro Tools, Garage Band, and MuseScore. There are many differences between all of them, as some have the ability to edit sound, while others are more adapted for writing in notes on a staff. For many of my composition assignments I do for music classes, I use a computer program to cleanly write out and listen to my assignments. It is extremely helpful as I am not particularly fluent on piano, so I can easily listen to the counterpoint of my four-part harmony without the struggle of playing it myself. All in all, composing music utilizing technology has changed the field of composition and the music world for the better.

MuseScore
Written Using C++

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

rsp1-Looking Outwards04

The project that I found this time is called Prismverse.

http://www.creativeapplications.net/openframeworks/prismverse-spatialising-paths-of-light-inside-a-diamond/

Prismverse is an art installation created by XEX for Dr. Jart+. It’s inspiration draws from the light rays that move through a diamond and its reflections that result from the multifaceted faces of the diamond structure. In short, it is inspired by Brilliant Cut, which according to the article linked above, is “a form that produces highest brilliance with maximized light return through its top.” The installation itself consists of a surrounding of complex geometrical tessellated mirror walls that produce visually pleasing reflections on the floor that is made of LED lights itself. It also produces unique omnidirectional sound qualities for the visitor.

With the use of software programs such as C4D, Redshift, Adobe Aftereffect, openFrameworks, Ableton Live, Reaktor, Arduino, and Capacitive Sensors, the artists were able to achieve a breathtaking visual. The project itself illustrates an expertly executed installation of technology and art.

I personally liked this project because although it is similar to many other installations such a mirror maze, but it incorporates so many more complex elements, logic, and technology. Instead of a static installation where you see just your reflection, the installation now is something interactive and changeable. I thought it was interesting how the geometries were shaped as well. Its psychedelic qualities make it hard to look away and keep the visual interest of the viewer. I wonder now what the experience would be like to actually be within the installation itself.

Below is a video of the experience by the artists:

 

Matthew Erlebacher Looking Outward-04

One piece of sound art that I found to be interesting was the Hexome. The device sound beautiful while also looking aesthetically appealing. I think that what sells the look is its hexagonal shape. It is said that hexagons are the shape of nature, (many things in nature come in that for e.g. bee nests and turtle shells) and the shape is used to make this device incredibly attractive. The creator likely encoded each light with specific instructions on how to interact with each other using “if” and “else” statements. I think that the programmer’s creativity was able to manifest in the final project just by how much you can interact with it. The device can even do a small light show making it a highly versatile instrument. It also just looks fun to uses and see how many different combinations of sounds you can come up with.

amui1-Project-04-String-Art

amui1-p4

//Allison Mui
//15-104 Section A
//amui1@andrew.cmu.edu
//Project-04

//variables for main triangle
var trgStep = 5;
//variables for eye
var eyeStep = 2;
//variables for mini triangle
var trgStepmin = 3;
//variables for left wing
var winStep = 4;

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

function draw() {
    background(0);

    //maintriangle
    stroke(255);
    strokeWeight(2);
    //leftside
    for (var midX = 150; midX <= 166; midX += trgStep) {
      line(60,230,midX,50);
    }
    //rightside
    for (var midX = 150; midX <= 166; midX += trgStep) {
      line(midX,50,270,230);
    }
    //base
    strokeWeight(1);
    var baseXa = 60;
    var baseYa = 235;
    var baseXb = 270;
    var baseYb = 235;
    for (var i = 0; i < 3; i++) {
      line(baseXa,baseYa,baseXb,baseYb);
      baseXa += 3;
      baseYa -= 3;
      baseXb -= 3;
      baseYb -= 3;
    }

    //eye
    //outereye

    stroke(255,255,0);
    strokeWeight(1);

    //vertical lines

    //part left up
    var eyeXa = 120;
    var eyeYa = 190;
    var eyeXb = 120;
    var eyeYb = 155;
    for (var i = 0; i < 16; i++){
      line(eyeXa,eyeYa,eyeXb,eyeYb);
      eyeXa += 3;
      eyeYa -= 2;
      eyeXb += 5;
    }
    //part right up
    var eyeXa = 200;
    var eyeYa = 190;
    var eyeXb = 200;
    var eyeYb = 155;
    for (var i = 0; i < 16; i++){
      line(eyeXa,eyeYa,eyeXb,eyeYb);
      eyeXa -= 3;
      eyeYa -= 2;
      eyeXb -= 5;
    }
    //part left down
    var eyeXa = 120;
    var eyeYa = 190;
    var eyeXb = 120;
    var eyeYb = 220;
    for (var i = 0; i < 16; i++){
      line(eyeXa,eyeYa,eyeXb,eyeYb);
      eyeXa += 3;
      eyeYa += 2;
      eyeXb += 5;
    }
    //part right down
    var eyeXa = 200;
    var eyeYa = 190;
    var eyeXb = 200;
    var eyeYb = 220;
    for (var i = 0; i < 16; i++){
      line(eyeXa,eyeYa,eyeXb,eyeYb);
      eyeXa -= 3;
      eyeYa += 2;
      eyeXb -= 5;
    }

    //eyeball
    var eyeXa = 155
    var eyeYa = 190
    var eyeXb = 160
    var eyeYb = 185
    stroke(255);
    for (var i = 0; i < 5; i++) {
      line(eyeXa,eyeYa,eyeXb,eyeYb)
      eyeXa += eyeStep
      eyeXb += eyeStep
    }
    var eyeXa = 160
    var eyeYa = 190
    var eyeXb = 155
    var eyeYb = 185
    stroke(255);
    for (var i = 0; i < 5; i++) {
      line(eyeXa,eyeYa,eyeXb,eyeYb)
      eyeXa += eyeStep
      eyeXb += eyeStep
    }
    var eyeXa = 160
    var eyeYa = 190
    var eyeXb = 155
    var eyeYb = 195
    stroke(255);
    for (var i = 0; i < 5; i++) {
      line(eyeXa,eyeYa,eyeXb,eyeYb)
      eyeXa += eyeStep
      eyeXb += eyeStep
    }
    var eyeXa = 155
    var eyeYa = 190
    var eyeXb = 160
    var eyeYb = 195
    stroke(255);
    for (var i = 0; i < 5; i++) {
      line(eyeXa,eyeYa,eyeXb,eyeYb)
      eyeXa += eyeStep
      eyeXb += eyeStep
    }

    //inner box

    //horizontal leg
    stroke(255);
    strokeWeight(1);
    miniXa = 120;
    miniYa = 148;
    miniXb = 200;
    miniYb = 148;
    for (var i = 0; i < 3; i++){
      line(miniXa,miniYa,miniXb,miniYb);
      miniXa -= 1;
      miniYa += 2;
      miniXb += 1;
      miniYb += 2;
    }
    //left vertical leg
    miniXa = 115;
    miniYa = 150;
    miniXb = 115;
    miniYb = 220;
    for (var i = 0; i < 3; i++){
      line(miniXa,miniYa,miniXb,miniYb);
      miniXa -= 2;
      miniYa += 5;
      miniXb -= 2;
      miniYb -= 1;
    }
    //right vertical leg
    miniXa = 205;
    miniYa = 150;
    miniXb = 205;
    miniYb = 220;
    for (var i = 0; i < 3; i++){
      line(miniXa,miniYa,miniXb,miniYb);
      miniXa += 2;
      miniYa += 5;
      miniXb += 2;
      miniYb -= 1;
    }

    //rainbow design
    //left side lines
    for (var leftWinX = -20; leftWinX <= 15; leftWinX += winStep){
      line(leftWinX,165,150,108);
    }
    //horizontal
    horizWinX = 180;
    horizWinY = 80
    for (var i = 0; i < 11; i++){
      line(150,108,horizWinX,horizWinY);
      horizWinX += 3;
      horizWinY += 5;
    }
    //actual rainbow
    //red rainbow lines
    stroke(255,0,0);
    rainXa = 180;
    rainYa = 80;
    rainXb = 400;
    rainYb = 75;
    for (var i = 0; i <8; i++){
      line(rainXa,rainYa,rainXb,rainYb);
      rainYb += 2;
    }
    //orange
    stroke(255,140,0);
    rainXa = 183;
    rainYa = 85;
    rainXb = 400;
    rainYb = 90;
    for (var i = 0; i <8; i++){
      line(rainXa,rainYa,rainXb,rainYb);
      rainYb += 2;
    }
    //yellow
    stroke(255,255,0);
    rainXa = 186;
    rainYa = 90;
    rainXb = 400;
    rainYb = 106;
    for (var i = 0; i <8; i++){
      line(rainXa,rainYa,rainXb,rainYb);
      rainYb += 2;
    }
    //darkgreen
    stroke(0,128,0);
    rainXa = 189;
    rainYa = 95;
    rainXb = 400;
    rainYb = 122;
    for (var i = 0; i <8; i++){
      line(rainXa,rainYa,rainXb,rainYb);
      rainYb += 2;
    }
    //lightgreen
    stroke(124,252,0);
    rainXa = 192;
    rainYa = 100;
    rainXb = 400;
    rainYb = 138;
    for (var i = 0; i <8; i++){
      line(rainXa,rainYa,rainXb,rainYb);
      rainYb += 2;
    }
    //darkblue
    stroke(0,0,255);
    rainXa = 195;
    rainYa = 105;
    rainXb = 400;
    rainYb = 154;
    for (var i = 0; i <8; i++){
      line(rainXa,rainYa,rainXb,rainYb);
      rainYb += 2;
    }
    //lightblue
    stroke(0,191,255);
    rainXa = 198;
    rainYa = 110;
    rainXb = 400;
    rainYb = 170;
    for (var i = 0; i <8; i++){
      line(rainXa,rainYa,rainXb,rainYb);
      rainYb += 2;
    }
    //darkpurple
    stroke(128,0,128);
    rainXa = 201;
    rainYa = 115;
    rainXb = 400;
    rainYb = 186;
    for (var i = 0; i <8; i++){
      line(rainXa,rainYa,rainXb,rainYb);
      rainYb += 2;
    }
    //lightpurple
    stroke(186,85,211);
    rainXa = 204;
    rainYa = 120;
    rainXb = 400;
    rainYb = 202;
    for (var i = 0; i <8; i++){
      line(rainXa,rainYa,rainXb,rainYb);
      rainYb += 2;
    }
    //pink
    stroke(255,192,203);
    rainXa = 207;
    rainYa = 125;
    rainXb = 400;
    rainYb = 218;
    for (var i = 0; i <8; i++){
      line(rainXa,rainYa,rainXb,rainYb);
      rainYb += 2;
    }
}

Conceptually, this project was pretty difficult to me.  I was inspired by Pink Floyd’s “Dark Side of the Moon”. It was difficult for me to figure out the points and the way in which the curve would change from loop to loop. I started off by sketching an idea, just like the 7th grade planning sheet. I manually calculated the first few lines in a for loop, and then I figured out a pattern. In the future, I would try to improve the middle section of the triangle to represent an eye better.

rsp1-Project04-StringArt-SectionB

sketch

/*Rachel Park
rsp1@andrew.cmu.edu
Section B @ 10:30AM
Project 04: String Art*/


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

function draw() {
  background(100);

  //defines limit to how many lines are drawn
  for (var i = 0; i < 600; i++) {

  //variables determine location of the lines
  var x1 = 0;
  var x2 = i*width/35;
  var y1 = i*height/60;
  var y2 = height;

  strokeWeight(0.5);  //setting thickness of the line

  //red
  stroke(255,0,0);
  line(x1, y1, x2+100, y2);

  //orange
  stroke(255,119,0);
  line(x2, 0, x1, height-y1);

  //yellow
  stroke(247,255,0);
  line(width, height-y1, x2, y2);

  //green
  stroke(3,156,64);
  line(x2, 0, width, y1);

  //purple
  stroke(147,0,192);
  line(width+200, height-200, x2-1000, height);

  //blue
  stroke(49,75,243);
  line(width/2,height/2, x2+width, y1);
  }
}

When the project called for a “string project” I immediately thought of the string art that stands in the Renwick Gallery location in Washington, D.C. I liked how the colors of the rainbow just bleed together seemlessly.

I tried to emulate that style within my project, but with little tweaks to the location of the lines themselves.

jknip-Project-04-string-art

sketch

/*Jessica Nip
Section A
jknip@andrew.cmu.edu
Project-04
*/

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

function draw() {
    background(240);

    //set mouseX and mouseY as controles of color change
    var mouseR = mouseX;
    var mouseG = mouseY;
    var mouseB = 150;

    //set up for loop and increments
    for (var i = 0; i < 30; i+=1) {

    //set line characteristics
        stroke(mouseR-50, mouseG-50, mouseB); //define stroke RGB in relation to mouseR, mouseG, mouseB
        strokeWeight(1); //define weight to 1
        noFill(); //set fill to colorless

    //draw lines from left to right
        line(0 , i*10, mouseX+i*10, height);
        line(width/3+10*i, i*10, mouseX+i*10, height);
        line(width/3+4*i , height, width, height-(mouseX+15*i));
        line(width/2+10*i, 0, width, mouseX+i*10);
    }
}

I wanted to generate different curves from different sides of the canvas, and have colors randomize by a factor through the movement of the mouse. The result was an abstract line piece.