Month: September 2016

Shannon Case Looking Outwards – 04

Google has created a virtual reality paintbrush called the TiltBrush, which now is able to react to sound. This means artists can create works that react to different sounds, and literally create musical paintings. Artists are able to create within the 360 VR experience and create layered sound reactive experiences. I find this project super interesting and inspiring because this is something I never imagined that would exist. I am not able to find the algorithm that creates these works, but through a bit of research I would assume that it has to do with code driven visuals that automatically adapt to a live audio input.

Here is a link to the project:

https://www.tiltbrush.com/

screen-shot-2016-09-24-at-9-12-08-pm

Looking Outwards – 04 – Shannon Case

sketch

//Shannon Case
//Section D
//scase@andrew.cmu.edu
//Project 04


function setup() {
    createCanvas(640,480);
    background(200);
   }

 function draw() {

var x0 = 130; //initial x position
var y0 = height/2 - 60; //initial y position
var x1 = 130; //end initial x position
var y1 = height/2 + 60; //end initial y position
var incX = 22.5; //how much x moves by
var incY = 20; //how much y moves by

var nextBox = 180; //moves to next box



 background('pink');
 strokeWeight(3);
 stroke('green');
 for (i = 0; i<3; i++){
 	line(x0,y0,x1,y1); 	
 	x0 += nextBox; //moves to second gift box
 	x1 += nextBox;
 }

//horizontal line
 x0 = 130 + incX;
 y0 = height/2 - 2*incY;
 x1 = 130 - incX;
 y1 = height/2 + 2*incY;
 stroke('red');
 for (i = 0; i<3; i++){
 	line(x0,y0,x1,y1); 	
 	x0 += nextBox; //moves to second gift box
 	x1 += nextBox;
 }

//first red line
 x0 = 130 + 2*incX; //moves to right by increment*2
 y0 = height/2 - incY;
 x1 = 130 - 2*incX;
 y1 = height/2 + incY;
 stroke('red');
 for (i = 0; i<3; i++){
 	line(x0,y0,x1,y1); 	
 	x0 += nextBox; 
 	x1 += nextBox;
 }

//vertical green line
 x0 = 130 + 3*incX;
 y0 = height/2;
 x1 = 130 - 3*incX;
 y1 = height/2;
 stroke('green');
 for (i = 0; i<3; i++){
 	line(x0,y0,x1,y1); 	
 	x0 += nextBox;
 	x1 += nextBox;
 }

//box
 stroke('white')
 noFill();
 x0 = 0;
 for (i = 0; i < 3; i++){
 	rect(60+x0, height/2 - 60, 140, 120); 
 	x0 += nextBox; 
 }

 	noLoop();

 	println();
}

For this assignment I chose to use for loops to do a string drawing of some presents. I wanted to experiment with making string drawings that were representative of real things. I’m also super excited for the holidays to come and wanted to make a piece about it 🙂

Yugyeong Lee Project 04

sketch

//Yugyeong Lee
//Section A (9:00AM)
//yugyeonl@andrew.cmu.edu
//Project-04
function setup() {
    createCanvas(640, 480);
}

function draw() {
	background(225, 219, 255);
	noLoop();
	
	var x = 0;
	var y = 0;

    //create "X" shape using two crossing shapes
	for (var i = 0; i <=640; i +=10) {
		stroke(255);
    	line(width - i, y, x, y + i*2);
        line(i, height, width, height - i*2);
        line(width - i, height, x, height - i*2);
      line(i, y, width, y + i*2);
    }
    //create the outlining shapes
    for (var i = 0; i <=640; i +=5) {
        line(width - i, y, width, height - i*2);
        line(i, height, x, y + i*2);
        line(width - i, height, width, y + i*2);
        line(i, y, x, height - i*2);
    }
    //create a diamond shape that will fill the center
    for (var i = 150; i <=350; i +=5) {
        line(width/2, height/5, 1.25*i, height/2);
        line(1.25*i, height/2, width/2, 4*height/5);
    }
}

In this project, I wanted to utilize the curving shape created by straight lines to create gradient by overlapping lines. The white lines overlap to create a gradient color in the background as well as creating shapes that embrace the center part.

Project 04 – Alison Hoffman String Art

Alison Hoffman

//Alison Hoffman
//Section D
//achoffma@andrew.cmu.edu
//Project 04

lineWeight = 1;

function setup() {
    createCanvas(640, 480);
    background(235);

}
function draw() {
    // width/4 = 160
    strokeWeight(lineWeight); // standard line Weight 
    strokeCap(SQUARE); // sharp line edges
    //first curve
    var xLine = 1; // x starting postion
    var cG = 30; //starting green color value
    var cB = 120; // starting blue color value
	for(var i = 0; i < 160; i+=10){
		stroke(255,cG,cB);
		line(xLine*i,height/2,width/2,0); // just chaning x value
		cG +=  i/4;   // making the color lighter
		cB +=  i/4;   // making the color lighter 
	}

	// first curve second layer yellow
	var xLine2 = 1; // x starting postion 2 
    var cB = 60; // starting blue color value
	for(var i = 0; i < 160; i+= 28){
		stroke(255,255,cB);
		line(xLine2*i,height/2,width/2,0);
		cB +=  i/4; // change blue
	}
	//first curve blue
	var xLine3 = 1; // x starting postion 2 
    var cR = 0; // starting red color value
    var cG = 200; // starting gree
	for(var i = 0; i < 160; i+= 33){
		stroke(cR,cG,255);
		line(xLine3*i,height/2,width/2,0);
		cR +=  i/4 + 30; // change red
		cG +=  i/4;
	}
	//first curve repeated
    var xLine = 1; // x starting postion
    var cG = 30; //starting green color value
    var cB = 120; // starting blue color value
	for(var i = 0; i < 160; i+=10){
		stroke(255,cG,cB);
		line(xLine*i,height/2,width/2,0); // just chaning x value
		cG +=  i/4;   // making the color lighter
		cB +=  i/4;   // making the color lighter 
	}


	//second curve pink - right side layer
	var xLine4 = width; // x starting postion
    var cG = 30; //starting green color value
    var cB = 120; // starting blue color value
	for(var i = 0; i < 160; i+=10){
		stroke(255,cG,cB);
		line(width/2,0,xLine4-i,height/2); // just chaning x value
		cG +=  i/4;   // making the color lighter
		cB +=  i/4;   // making the color lighter 
	}
	//second curve yellow - right side 
	var xLine5 = width; // x starting postion
    var cB = 60; // starting blue color value
	for(var i = 0; i < 160; i+=28){
		stroke(255,255,cB);
		line(width/2,0,xLine5-i,height/2); // just chaning x value
        cB +=  i/4;   // making the color lighter 
    }
    // second curve blue - right side
    var xLine6 = width; // x starting postion
    var cR = 0; //starting red color value
    var cG = 200; // starting blue color value
	for(var i = 0; i < 160; i+= 33){
		stroke(cR,cG,255);
		line(width/2,0,xLine4-i,height/2); // just chaning x value
		cG +=  i/4;   // making the color lighter
		cR +=  i/4 + 30;   // making the color lighter 
	}
    //second curve pink - right side second layer
	var xLine7 = width; // x starting postion
    var cG = 30; //starting green color value
    var cB = 120; // starting blue color value
	for(var i = 0; i < 160; i+=10){
		stroke(255,cG,cB);
		line(width/2,0,xLine7-i,height/2); // just chaning x value
		cG +=  i/4;   // making the color lighter
		cB +=  i/4;   // making the color lighter
	}

	// third curve bottom left pink layer one
    var xLine8 = 1; // x starting postion
    var cG = 30; //starting green color value
    var cB = 120; // starting blue color value
	for(var i = 0; i < 160; i+=10){
		stroke(255,cG,cB);
		line(xLine8+i,height/2,width/2,height); // just chaning x value
		cG +=  i/4;   // making the color lighter
		cB +=  i/4;   // making the color lighter
	}
	// third curve bottom left blue layer 
    var xLine10 = 1; // x starting postion
    var cG = 200; // starting green color value
    var cR = 0; // starting red color value
	for(var i = 0; i < 160; i+= 33){
		stroke(cR,cG,255);
		line(xLine10+i,height/2,width/2,height); // just chaning x value
		cR +=  i/4 +30;  // making the color lighter
		cG +=  i/4;  // making the color lighter
	}
	// third curve bottom left yellow layer 
    var xLine9 = 1; // x starting postion
    var cB = 60; // starting blue color value
	for(var i = 0; i < 160; i+= 28){
		stroke(255,255,cB);
		line(xLine9+i,height/2,width/2,height); // just chaning x value
		cB +=  i/4;   // making the color lighter
	}
	// third curve bottom left pink layer two
    var xLine8 = 1; // x starting postion
    var cG = 30; //starting green color value
    var cB = 120; // starting blue color value
	for(var i = 0; i < 160; i+=10){
		stroke(255,cG,cB);
		line(xLine8+i,height/2,width/2,height); // just chaning x value
		cG +=  i/4;   // making the color lighter
		cB +=  i/4;   // making the color lighter
	}

	//fourth curve bottom right pink layer
	var xLine11 = width; // x starting postion
    var cG = 30; //starting green color value
    var cB = 120; // starting blue color value
	for(var i = 0; i < 160; i+=10){
		stroke(255,cG,cB);
		line(width/2,height,xLine11-i,height/2); // just chaning x value
		cG +=  i/4;   // making the color lighter
		cB +=  i/4;   // making the color lighter
	}
	//fourth curve bottom right yellow layer
	var xLine13 = width; // x starting postion
    var cB = 60; // starting blue color value
	for(var i = 0; i < 160; i+=28){
		stroke(255,255,cB);
		line(width/2,height,xLine13-i,height/2); // just chaning x value
		cB +=  i/4;   // making the color lighter
	}
	//fourth curve bottom right blue layer
	var xLine12 = width; // x starting postion
    var cB = 200; // starting blue color value
    var cR = 0; // starting red value
	for(var i = 0; i < 160; i+=33){
		stroke(cR,cG,255);
		line(width/2,height,xLine12-i,height/2); // just chaning x value
		cG +=  i/4;   // making the color lighter
		cR +=  i/4 +30; //making color lighter
	}

	//fourth curve bottom right pink layer
	var xLine14 = width; // x starting postion
    var cG = 30; //starting green color value
    var cB = 120; // starting blue color value
	for(var i = 0; i < 160; i+=10){
		stroke(255,cG,cB);
		line(width/2,height,xLine14-i,height/2); // just chaning x value
		cG +=  i/4;   // making the color lighter
		cB +=  i/4;   // making the color lighter
	}
}
function mouseDragged(){
	lineWeight += 0.1; // line weight changes if pressed
	if(lineWeight > 7){
		lineWeight = 0;
	}
}

For this project I really wanted to keep the composition simple and just focus on learning how draw with for loops. I played around with CMYK color and how they can interact, but again my goal was to keep it simple and clean. I tried to make it more dynamic by adding gradient color and a mouseDragged function, so whenever the mouse is dragged the stroke Weight increases.

VictorTavarez-LookingOutwards-04

The Wrong Way to Draw a Pirate’s Soundtrack is a graphical representation of the musical composition “He’s a Pirate” by artist Juanky Soriano. The piece is part of a larger series “The Wrong Way to Draw the Music”, which explores his experimentation with a generative drawing system using music performance. According to his website, his experiment analyzed Midi files into MusicString files. He developed a “midi2mstring” library to do so. Within the library every token is tied to a musical event. Next, he crafted his sketch using Processing to assign each token to a drawing event.

I think the project could have been improved by adding different allowing prior tokens to disburse after they are drawn. The layering on top of one another gave the piece a sloppy look. From my interpretation, I think Soriano is inspired by computational models based in living cells and so his use of p-systems are quite common.

Looking Outwards-04

Martin Klimas plays songs through a frequency generator with pigmented water on top, so that the sound waves cause the water to create standing waves. This way, we are able to visualize the tones themselves as they appear in the wate, three dimensionally. I admire the fact that you can actually visualize the frequencies as beautiful and dynamic forms.

http://www.foleygallery.com/exhibitions/focus/sound_works_-_martin_klimas/pressrelease

19

04

37

Project 04-String Art

I was trying to create intricate spaces reminiscent of a stained glass window taken to the extreme.

 

sketch index

//Arula Ratnakar
//SectionC
//aratnaka@andrew.cmu.edu
//String Art



var y = 640
yTwo=0
var xStep = 50




function setup() {
    createCanvas(480,640);
    background('lightblue');
}  

function draw() {
	for (var i = 20; i< 480; i+=20)
	line(width/2,0, i, y )

	for (var i = 20; i<480; i+=20)
	line (width/2, 640, i, yTwo)

	for (var i = 20; i <640; i+=20)
	line (0, height/2, 480, i)
	
	for (var i = 20; i<640; i+=20)
	line (480, height/2, 0, i)
	
	for (var i = 20; i<640; i+=20)
	line (0, 0, 480, i)

	for (var i = 20; i<640; i+=20)
	line (480, 0, 0, i)

	for (var i = 20; i<640; i+=20)
	line (0, 640, 480, i)

	for (var i = 20; i<640; i+=20)
	line (480,640, 0, i)
	
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>p5.js vers 0.5.2, Edit index.html to Change This Title</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>

    <!-- Uncomment the lines below to include extra p5 libraries, or 
         use template-all or template-all-min:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.js"></script>
    -->

    <script src="sketch.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>

Liu Xiangqi-Project-04-String Art

sketch

// Liu Xiangqi xiangqil@andrew.cmu.edu Section-A Project-04
    
    var strokeR = 204;
    var strokeG = 230;
    var strokeB = 255;


function setup(){
    createCanvas(640, 480);
}

function draw() {
    background(0);
    //draw the outer ring
    var x1 = 320;
    var y1 = 0;
    var x2 = 320-120*sqrt(3);
    var y2 = 360;
    var x3 = 320+120*sqrt(3);
    var y3 = 360;
    stroke(255);
    noFill();
    triangle(x1, y1, x2, y2, x3, y3);
    
    push();
    translate(width/2, height/2);
    for (var i= 0; i < 60; i ++) {
        strokeR = 204;
        strokeG = map(i, 0, 30, 230, 153);
        strokeB = 255;
        stroke(strokeR, strokeG, strokeB);
        rotate(radians(2));
        triangle(x1-width/2, y1-height/2, x2-width/2, y2-height/2, x3-width/2, y3-height/2);
    } 
    pop();
    
    //draw the inner ring
    var x4 = 320;
    var y4 = 360;
    var x5 = 320 - 60*sqrt(3);
    var y5 = 180;
    var x6 = 320 + 60*sqrt(3);
    var y6 = 180;
    stroke(255);
    noFill();
    triangle(x4, y4, x5, y5, x6, y6);
    
    push();
    translate(width/2, height/2);
    for (var i= 0; i < 40; i ++) {
        strokeR = map(i, 0, 30, 204, 255);
        strokeG = map(i, 0, 30, 153, 204);
        strokeB = map(i, 0, 30, 255, 204);
        stroke(strokeR, strokeG, strokeB);
        rotate(radians(3));
        triangle(x4-width/2, y4-height/2, x5-width/2, y5-height/2, x6-width/2, y6-height/2);
    } 
    pop();
    //draw the innermost ring
    var x7 = 320;
    var y7 = 180;
    var x8 = 320 - 30*sqrt(3);
    var y8 = 270;
    var x9 = 320 + 30*sqrt(3);
    var y9 = 270;
    stroke(255);
    noFill();
    triangle(x7, y7, x8, y8, x9, y9);
    
    push();
    translate(width/2, height/2);
    for (var i= 0; i < 30; i ++) {
        strokeR = 255
        strokeG = map(i, 0, 30, 255, 204);
        strokeB = map(i, 0, 30, 255, 204);
        stroke(strokeR, strokeG, strokeB);
        rotate(radians(4));
        triangle(x7-width/2, y7-height/2, x8-width/2, y8-height/2, x9-width/2, y9-height/2);
    } 
    pop();
    
}

Sadie Johnson – Looking Outwards – 04

This project is by Swiss artist Zimoun, and is usually referred to by its materials- 121 prepared dc-motors, filler wire 1.0mm. It’s admirable because even though it appears ludicrously simple at first glance, it springs into life when turned on and almost appears organic. It’s also a fantastic exploration of sound that is interesting but isn’t necessarily music. The algorithms that control the spinning wires seem simple at first, but upon closer inspection, it becomes clear that each wire is spinning with a different starting point in a random direction. Zimoun is known for sculptures so simple they are almost abstract, a nod to minimalism, and that aesthetic is shown in this piece.

zimoun_361_dc-motors_filler_wire_01_800x450px

photo credit to zimoun.net

 

http://www.zimoun.net/2010-361.html

zhuoyinl-project04

my-sketch.js

function setup() {
  createCanvas(640, 480);
}

function draw() {
  background('lightpink');

//blue lines
  for (i = 0; i < 50; i++) {
    x1 = 0;
    y1 = 480;
    x2 = 0;
    y2 = 0;

    x1+= (i*60);
    y1+= (i*5);
    y2+= (i*20);
    stroke('lightblue');
    strokeWeight(1);
    line(x1, y1, x2, y2);
  }

//yellow lines
  for (i = 0; i<50; i++) {
    x1 = 640;
    y1 = 480;
    x2 = 640;
    y2 = 240;

    x1-= (i*20);
    y1+= (i*1);
    x2+= (i*2);
    y2+= (i*10);

    stroke(255, 240, 1);
    strokeWeight(1);
    line(x1, y1, x2, y2);

  }

//grey lines
for (i = 0; i<50; i++) {
    x1 = 320;
    y1 = 0;
    x2 = 640;
    y2 = 0;

    x1+= (i*16);
    y2+= (i*15);

    stroke(159, 150, 141);
    strokeWeight(1);
    line(x1, y1, x2, y2);

  }

//green lines
for (i = 0; i<50; i++) {
    x1 = 640;
    y1 = 0;
    x2 = 640;
    y2 = 480;

    x1-= (i*39);
    y1-= (i*5);
    y2-= (i*10);

    stroke(154, 231, 217);
    strokeWeight(1);
    line(x1, y1, x2, y2);

  }

//purple lines
for (i = 0; i<50; i++) {
    x1 = 0;
    y1 = 0;
    x2 = 0
    y2 = 240;

    x1+= (i*16);
    y2-= (i*10);

    stroke(193, 155, 223);
    strokeWeight(1);
    line(x1, y1, x2, y2);

  }
  

//pink lines
for (i = 0; i<50; i++) {
    x1 = 0;
    y1 = 240;
    x2 = 0
    y2 = 480;

    x1-= (i*3)
    y1+= (i*15);
    x2+= (i*20);
    y2-= (i*.01)

    stroke(250, 104, 127);
    strokeWeight(1);
    line(x1, y1, x2, y2);
  }

  //dark green lines
  for (i = 0; i < 50; i++) {
    x1 = 640;
    y1 = 0;
    x2 = 0;
    y2 = 0;

    x1-= (i*30);
    y1+= (i*.1);
    x2+= (i*.1);
    y2+= (i*25);
    stroke(155, 183, 212);
    strokeWeight(1);
    line(x1, y1, x2, y2);
  }

  //light grey lines
  for (i = 0; i < 50; i++) {
    x1 = 0;
    y1 = 480;
    x2 = 640;
    y2 = 480;

    x1+= (i*30);
    y1+= (i*.1);
    x2+= (i*.1);
    y2-= (i*25);
    stroke(209, 190, 199);
    strokeWeight(1);
    line(x1, y1, x2, y2);
  }
  
}

I used multiple grids along the edges of the canvas to create the pattern. The different color creating a depth to the pattern.