Category: Section E

juyeonk-project04-stringart

sketch

var black = 0;

//dimension of the very first square
var a = 400/1.618;

//dimension of the margin on the top and bottom
var b = 150 - 200/1.618;

//dimensions of each squares
var dim1 = 400/1.618;
var dim2 = 400 - a;
var dim3 = 2 * a - 400;
var dim4 = 800 - 3 * a;
var dim5 = 5 * a - 1200;
var dim6 = 2000 - 8 * a;
var dim7 = 13 * a - 3200;

//color of each string
var color = 255;

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

function draw() {
    var color = 255;
    background(black); //sets up the background color
    
    
    //strings sprouting out from the corner of the biggest square
    for (var i = 0; i <= a; i += a/20) {
        stroke(color);
        line(a, a + b, i, a + b - i);
    }
    
    //within the square there are always two corners facing each other that are sprouting the strings 
     for (var i = 0; i <= a; i += a/20) {
        stroke(color);
        line(0, b, i, a + b - i);
    }
    
    //strings sprouting out from the corner of the second biggest square
    for (var i = 0; i <= dim2; i += dim2 /20) {
        stroke(color);
        line(a, b + 400 - a, a + i, b + i);
    }
    
    //the opposite corner
    for (var i = 0; i <= dim2; i += dim2 /20) {
        stroke(color);
        line(400, b, a + i, b + i);
    }
    
    //strings sprouting out from the corner of the third biggest square
    for (var i = 0; i <= dim3; i += dim3/20) {
        stroke(color);
        line(width - 2 * a + 400, b + 400 - a, width - 2 * a + 400 + i, 300 - b - i)
    }
    
    //oppotiste corner
    for (var i = 0; i <= dim3; i += dim3/20) {
        stroke(color);
        line(400, height - b, width - 2 * a + 400 + i, 300 - b - i)
    }
    
    //strings sprouting out from the corner of the fourth biggest square
    for (var i = 0; i <= 800 - 3 * a; i += (800 - 3 * a)/20)
        {
        stroke(color);
        line(a + 800 - 3 * a, height - b - 800 + 3 * a, width - 2 * a + 400 - i, 300 - b - i)
        }
    
    //opposite corner
    for (var i = 0; i <= 800 - 3 * a; i += (800 - 3 * a)/20)
        {
        stroke(color);
        line(a, height - b, width - 2 * a + 400 - i, 300 - b - i)
        }
    
    //strings sprouting out from the corner of the fifth biggest square
    for (var i = 0; i <= 5 * a - 1200; i += (5 * a - 1200)/20)
        {
        stroke(color);
        line(a + 5 * a - 1200, 300 - b - 800 + 3 * a, a + i, b + 400 - a - i + 5 * a - 1200)
        }
    
    //opposite corner
        for (var i = 0; i <= dim5; i += dim5/20)
        {
        stroke(color);
        line(a, b + 400 - a, a + i, b + 400 - a - i + 5 * a - 1200)
        }
    
    //strings sprouting out from the corner of the sixth biggest square
    for (var i = 0; i <= dim6; i += dim6/20)
        {
        stroke(color);
        line(a + dim5 + dim6, b + dim2, a + dim5 + i, b + dim2 + i)
        }
    
    //opposite corner
        for (var i = 0; i <= dim6; i += dim6/20)
        {
        stroke(color);
        line(a + dim5, b + dim2 + dim6, a + dim5 + i, b + dim2 + i)
        }
    
    //strings sprouting out from the corner of the seventh biggest square
        for (var i = 0; i <= dim7; i += dim7/20)
        {
        stroke(color);
        line(width - dim3 - dim7, b + dim2 + dim6, width - dim3 - dim7 + i, b + dim2 + dim6 + dim7 - i)
        }
    
    //opposite corner
        for (var i = 0; i <= dim7; i += dim7/20)
        {
        stroke(color);
        line(width - dim3, b + dim2 + dim6 + dim7, width - dim3 - dim7 + i, b + dim2 + dim6 + dim7 - i)
        }
}

For this project I wanted to create a drawing based on golden ratio. It would have been nice if I could figure out a way to make the spiral-y shape made of sets of lines but I’m satisfied with what I have.

The most challenging part of this project was to figure out a logic that would make the strings loop around the pattern you want. Instead of making an array of lines I had to figure out a way to make the lines rotate around a fixed coordinate point. But other than, the project was farily do-able. I wish I planned something more challenging.sketch

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.

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.

gyueunp – Looking Outwards 04

Spectra (2004) is a series of installations created by the new media artist Ryoji Ikeda. It is produced using an array of xenon search lights that is accompanied by a sound system of a mathematically derived score. His work has been installed in multiple locations including London, Tasmania, and JFK International Airport, and the number of lights and scales vary depending on the sites. Its white lights and ultra-high frequency sound component present the viewers with an ethereal experience as they walk through the field of light. The scale of the work is one of its most noteworthy features; the xenon lights shoot straight up into the sky, allowing a broad range of audiences to see the work. I would love to experience the work’s symphony of ultra pure sine sound waves; its sound is just as beautiful and celestial as the captivating visuals.

Ryoju Ikeda’s website

More about Spectra

katieche – looking outwards 04

shimon the robot

Shimon is a robot first of his kind created at Georgia Institute of Technology. Unlike some robots who just make beeping noises and call that a song, Shimon actually has four arms and knows how to play traditional, analog instruments. He has been programmed with over 5,000 songs, two million motifs, riffs, and licks. Particularly, he specializes in the marimba. A lot of robots can play preprogrammed songs, as did Shimon for the beginning of his lifetime, but what’s fascinating about Shimon is that he now is able to play original compositions! Researchers are still working on how to improve his musical abilities, as current original compositions are a little sporadic since Shimon can’t think in long term structures as well. If you pay attention to his song, it seems like the music is produced in short bursts that complete the song.

hqq – secE – LookingOutwards 04

“With my pictures, I create a musical space. With my music I create a pictorial space. Pictures and music are equivalent. They meet in the head of the beholder and the listener, and they reveal something new in him.” – Rolf Julius

Ash is an installation art piece by Rolf Julius that uses small particles of ash from German fireplaces to help create a medium to visualize soundwaves. Julius recorded a variety of everyday sounds at differing pitches to create a highly diverse soundscape that the piece uses to create imaging. The piece receives reverberations that are sustained within the terra cotta pots that make up the body of the unit. A small fabric drum within the piece holds ash that jumps and separates when vibrations from the sound are generated. This achieves a different image depending on what sounds are picked up.

Computationally, this piece uses an analog system to develop a top-down processing script and, although coding was not directly involved in the process, it uses a computationally-driven inherent logic that allows the image to differ between iterations.

The piece was created in 1991 and is still on display at the Mattress Factory in Pittsburgh, Pennsylvania.

ifv-project-04

sketch

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

function draw() {
  background(255,235,0);
     for (var i = 0; i < 70; i ++) {
       drawCurvedLines(i);
       //triangles made of lines
       line(210,200,i*3,300);
       line(210,200,150+i*3,0);
       line(210,200,400,150+i*3);
       line(i*3,0,i*3+2,);
       line(110,100,0,i*3);
       line(110,100,i*3,0);
     }

 }
function drawCurvedLines(count) {
 push();
 translate(200,200);
 rotate(radians(count*1));
 line(count*2+10, 0, count*3 + 10, 100);
 line(count*3+10,100,count*2+10,150);
 pop()
 push();
 translate(200,200);
 rotate(radians(count*2));
 line(count*2+10, 0, count*3 + 10, 100);
 line(count*3+10,100,count*2+10,150);
 pop()

 push();
 translate(100,100);
 rotate(radians(count*1));
 line(count*2+10, 0, count*3 + 10, 100);
 line(count*3+10,100,count*2+10,150);
 pop()
 push();
 translate(100,100);
 rotate(radians(count*2));
 line(count*2+10, 0, count*3 + 10, 100);
 line(count*3+10,100,count*2+10,150);
 pop()
 push();
 translate(100,100);
 rotate(radians(count*2+2));
 line(count*2+10, 0, count*3 + 10, 100);
 pop();
 push();
 translate(130,50);
 rotate(radians(count*2+2));
 line(count*2+10, 0, count*3 + 10, 100);
 pop();

 push();
 translate(400,0);
 rotate(radians(count*3));
 line(count*2+10, 0, count*3 + 10, 100);
 pop();

 push();
 translate(400,0);
 rotate(radians(count*2));
 line(count*2+10, 0, count*3 + 10, 100);
 pop();

 push();
 translate(400,0);
 rotate(radians(count*4));
 line(count*2+10, 0, count*3 + 10, 100);
 pop();

 push();
 translate(400,0);
 rotate(radians(count*5));
 line(count*2+10, 0, count*3 + 10, 100);
 pop();

 push();
 translate(400,0);
 rotate(radians(count*6));
 line(count*2+10, 0, count*3 + 10, 100);
 pop();

}

I just played around with curved and straight lines to create an abstract piece that has depth.

svitoora – 04 Gravity 2.0

Gravity

//
// Supawat Vitoorapakorn
// Svitoora@andrew.cmu.edu
// Section E
//
// Gravity 2.0 is a point mass dynamic drawing inspired
// from physics, nature, and falling off a skateboard.
// f = G (m1*m2)/d^2
// f = G sum(m)/(d from avg)^2


// World Model Setup /////////////////////////////////////
var max_curves = 4; //Limit amount of drawings

var w = 300;
var h = 400;
var t = 1; // time variable
var g = 12; // gravity

var ball;
var balls = []; // Local Objects
var ballz = []; // Global Object
var ball_size = w * .010 // Default object size

var max_count = 35;
var auto_every = 40;
var auto_create = 125;
var max_line = 1000; // Prevents crash


// Control ///////////////////////////////////////////////

// Creates new object in system given (x,y)
function ball_create(x, y) {
	this.x = x;
	this.y = y;
	this.vx = 0;
	this.vy = 0;
	this.r = ball_size;
	this.m = 1;
	this.ALPHA = 255
}

function mousePressed() {
	ballz.push([]);
	// print("Added Yo");
}

// Add new object and delete oldest object
function mouseDragged() {
	if (t % 10) {
		ballz[ballz.length - 1].push(new ball_create(mouseX, mouseY));
	}
	if (ballz[ballz.length - 1].length >= max_count) {
		ballz[ballz.length - 1].splice(0, 1)
	}
}

// World /////////////////////////////////////////////////


// Maintain global mass of system
function sum_mass(balls) {
	sum_m = 0;
	for (i in balls) {
		sum_m += balls[i].m;
	}
	return sum_m;
}

// Determines the system's average position X
function average_posX(balls) {
	if (balls.length == 0) {
		return w / 2;
	};
	var sum_x = 0;
	for (i in balls) {
		sum_x += balls[i].x;
	}
	avg = sum_x / balls.length
	return avg;
}

// Determines the system's average position Y
function average_posY(balls) {
	if (balls.length == 0) {
		return h / 2;
	};
	var sum_y = 0;
	for (i in balls) {
		sum_y += balls[i].y;
	}
	avg = sum_y / balls.length;
	return avg
}

// Apply gravity for all objects in the system
function gravity(balls) {
	var avg_x = average_posX(balls);
	var avg_y = average_posY(balls);
	var speed = .005 //0-1 Multuplier for controlling velocity of attratction
	for (i in balls) {
		d = dist(balls[i].x, balls[i].y, avg_x, avg_y);
		ds = map(d, 0, w / 2, 1, 0); // used to simulate d^2

		// Gravity X
		if (balls[i].x > avg_x) {
			balls[i].x *= 1 - (g * (balls.length * speed));
		} else {
			balls[i].x *= 1 + (g * (balls.length * speed + ds));
		}

		// Gravity Y
		if (balls[i].y > avg_y) {
			balls[i].y *= 1 - (g * (balls.length * speed))
		} else {
			balls[i].y *= 1 + (g * (balls.length * speed + ds));
		}
	}
}

// Add object to system in the middle; // Used at setup()
function add_ball(balls) {
	balls.push(new ball_create(w / 2, h / 2));
}



// Connects all the object in the system via a line
function draw_line(balls) {
	lines = 0
	opacity = 255 * .1

	if (lines < max_line) {
		for (i in balls) {
			var x_1 = balls[i].x;
			var y_1 = balls[i].y;
			for (i in balls) {
				var x_2 = balls[i].x;
				var y_2 = balls[i].y;
				stroke(255, 255, 255, opacity);
				line(x_1, y_1, x_2, y_2);
				lines += 1;
			}
		}
	}
}

// SETUP
function setup() {
	createCanvas(w, h);
	g = .0025;
	background(50);
	balls.length = 0; // Kill all objects in system
}

// Refreshes the systems with new objects
// Removes old objects and add new objects
function auto_refresh(balls, t) {
	// Starts refreshing system at 5 objects
	// every auto_every interval.
	if (t % auto_every == 0 & balls.length > 5) {
		balls.splice(0, 1);
	}
	X = constrain(mouseX, 1, w);
	Y = constrain(mouseY, 1, h)
	if (t % auto_every == 0) {
		balls.push(new ball_create(X, Y));
	}

	// Resets the system to 8 objects once every 500 ms
	// This prevents overload; Array starts at [0]
	if (t % 500 == 0 & balls.length > 8) {
		balls.length = 7;
	}
}

// Draw ////////////////////////////////////////////////////

// Draw all objects in systems mapped by distance from avg
function draw_balls(BALLS) {
	// print("BALLS.length" + BALLS.length)
	for (i in BALLS) {

		var avg_x = average_posX(BALLS);
		var avg_y = average_posY(BALLS);

		var d = dist(BALLS[i].x, BALLS[i].y, avg_x, avg_y);
		var SIZE = map(d, 0, w / 2, -2, 3) //max to min
		print(i + " : " + SIZE)

		noStroke();
		fill(255, 255, 255, 255 * .5);
		ellipse(BALLS[i].x, BALLS[i].y,
			BALLS[i].r * (2 * SIZE),
			BALLS[i].r * (2 * SIZE));
	}
}

function local_gravity(ballz) {
	for (i in ballz) {
		if (ballz[i].length > 1) {
			gravity(ballz[i]);
		}
	}
}

function DIE(BALLS) {
	BALLS.splice(0, 1);
}

function death_ballz(ballz) {
	var populated = 0;
	for (i in ballz) {
		if (ballz[i].length != 0) {
			populated++;
		}
	}
	if (populated > max_curves) {
		DIE(ballz[0]);
	}
}


function refresh_ballz(ballz) {
	if (ballz.length > 4) {
		for (i in ballz) {
			if (ballz[i].length == 0) {
				ballz.splice(i, i + 1);
				ballz.push([]);

			}
		}
	}
}


function draw_ballz(ballz) {
	for (i in ballz) {
		draw_balls(ballz[i]);
	}
}

function draw_lines(balls) {
	for (i in ballz) {
		draw_line(ballz[i]);

	}
}

// Creates Trail
function guider1() {
	stroke(255, 255, 255, 255 * .75)
	line(mouseX, mouseY, pmouseX, pmouseY)
}

// Prompt user to drag via random generation
function guider2() {
	ran1 = random(4, 12);
	if (t % auto_create == 0) {
		ballz.push([])
		ballz[ballz.length - 1].push(new ball_create(mouseX, mouseY));
		ballz[ballz.length - 1].push(new ball_create(pmouseX, pmouseY));
		for (var i = 0; i < ran1; i++) {
			ballz[ballz.length - 1].push(new ball_create(mouseX * random(.75,
				1.25), mouseY * random(.75, 1.25)));
		}
	}
}

// Execute /////////////////////////////////////////////////
function draw() {
	background(50);
	noStroke();
	// Update World
	t = t + 1;
	local_gravity(ballz);
	death_ballz(ballz);
	refresh_ballz(ballz);
	// LOL();

	// // Draw World
	draw_lines(ballz);
	guider1();
	guider2();
	// draw_ballz(ballz);	// For Some reason this doesn't work
	// Maybe it ran out of memory allocation


}

Click and drag to draw shapes. Try writing your name. I struggle with array in arrays. Eventually figured I figured it out.

elizabew – looking outwards – 04 – SectionE

Sugarcube: MIDI and MaxMSP Controller

 

What I really like about this project is how satisfying it looks to play with and touch and listen too. The tilt sensors as you tilt the entire machine makes the sound go up or down, almost as if you were holding a bowl and rolling around a ball in it. It really creates a bridge between physically doing something and technology. I also really like the satisfying buttons and the shape of the whole box — it looks like something I could keep on the side of my desk to just push the buttons for fun.

According to the maker, the project is a MIDI controller — generates Musical Instrument Digital Interface (MIDI) data to MIDI-enabled devices.

The artist was inspired by monome — a similar interactive instrument. However, he wanted to make something cheaper while also not relying on the computer to process everything into MIDI.

Click Here for Further Information on the Project

hqq – secE – project04 – string art

hamza

//hamza qureshi
//section e
//project 04
//hqq@andrew.cmu.edu

var x1;
var y1 = 1;
var x2 = 1;
var y2 = 1;
var yDes = 400;

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

function draw(){
    background(30); //dark gray background
    //create a single loop that sets the limits
    //within the x1 variable to allow the curves
    //to stretch horizontally
    for (var x1 = 0; x1 < 4*width; x1 += 5){
        strokeWeight(0.3);
        var y1 = x1 * 0.50;
        var yDev = height/4 + y1;
//outermost lines that are brightest in color
        stroke(180);
        line(x1*4, y1, x1-yDes, y2*0.5);
        line(x1*.10, height, x2, yDev);

//next ring
        stroke(130);
        line(x1*0.4, y1*0.6, x1-yDes, y2*0.5);
        line(x1*2, height*2, x2, yDev);

//next ring
        stroke(80);
        line(x1*0.4, y1, x1-yDes, y2*0.5);
        line(x1*.90, height, x2, yDev);

///next ring
        stroke(60);
        line(x1*0.3, y1, x1-yDes, y2*0.5);
        line(x1*1.7, height, x2, yDev);

//next ring
        stroke(50);
        line(x1*0.2, y1, x1-yDes, y2*0.5);
        line(x1*2.5, height, x2, yDev);

//final ring
        stroke(40);
        line(x1*0.1, y1, x1-yDes, y2*0.5);
        line(x1*3.2, height, x2, yDev);
    }
}

//voila!

For this piece of string art, I wanted to create a piece that used a tunneling effect to show depth. To do this, I used the for loop to change the size, orientation, and stroke color to make it appear as if the sections are getting deeper and deeper. After a few projects where the code became so long, I’m glad that this one uses a much more refined syntax.