Category: Project-04-String-Art

nawon-project-04

// Nawon Choi
// nawonc@andrew.cmu.edu
// Section C
// Project 04 String Art


var a = 0;
var b = 300;
var c = 400;
var amt = 50;

var r = 500;
var x;
var y;
var x1;
var y1;

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

function draw() {
    // got help getting the points along a circle: 
    // (lines 27, 32, 33)
    // https://stackoverflow.com/questions/5300938/calculating-the-position-of-points-in-a-circle
    var slice = 2 * PI / amt;
    for (let i = 0; i < amt; i++) {
        // draw lines from points along the circle,
        // to points along the edge of the canvas
        var angle = slice * i;
        x = r * cos(angle) + a;
        y = r * sin(angle) + c;
        stroke("#37393b");
        line(x, y, i * 20, a);
    }

    // green and yellow lines
    for (let i = 0; i < (amt / 2); i++) {
        stroke("green");
        line(a, a, i * 20, c);
        var angle2 = slice * i * 2;
        x1 = r * cos(angle2) + a;
        y1 = r * sin(angle2) + c;
        stroke("yellow");
        line(x1, y1, i * 25, c);
    }

    // make lines that follow the mouse
    stroke("#a3afb5");
    line(b, a, mouseX, mouseY);
}

For this project, I mainly tried to experiment with different ways lines could be drawn. I initially played around with the way lines splay outward from a circle. I amplified this by playing around with the variables, magnifying the size of the circle and having it go off the canvas, creating the gray lines in the background. I added some green and yellow lines to add some visual interest, then added the lighter gray lines to add an interactive element.

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.

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.