Tag: Project-04-String-Art

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.

Janet Peng Project 04 – String Art

jjpeng project 4

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

function draw() {
	// outer curves
	drawCurve(0, 0, 0, 200, 12, 6, 40, 'upRight', monochromeColor());
	drawCurve(width, 0, width, 200, 10, 5, 60, 'upLeft', monochromeColor());
	drawCurve(width, 100, width, height, 8, 4, 60, 'downLeft', monochromeColor());
	drawCurve(0, 100, 0, height, 6, 3, 80, 'downRight', monochromeColor());

	// inner curves
	drawCurve(80, 80,
			  80, height / 2,
			  10, 6, 13, 'upRight', monochromeColor());
	drawCurve(width - 80, 80,
			  width - 80, height / 2,
			  8, 5, 15, 'upLeft', monochromeColor());
	drawCurve(width - 80, height / 2,
			  width - 80, height - 80,
			  6, 4, 19, 'downLeft', monochromeColor());
	drawCurve(80, height / 2, 80,
			  height - 80, 5,
			  3, 24, 'downRight', monochromeColor());

	// curves in the middle
	drawCurve(width / 2, 0, width / 2, height, 20, 10, 40, 'upRight', monochromeColor());
	drawCurve(width / 2, 0, width / 2, height, 20, 10, 40, 'upLeft', monochromeColor());
	drawCurve(width / 2, 0, width / 2, height, 20, 10, 40, 'downLeft', monochromeColor());
	drawCurve(width / 2, 0, width / 2, height, 20, 10, 40, 'downRight', monochromeColor());

	noLoop();
}

function monochromeColor(){
	return color(255, random(120, 200), random(120, 200))
}

// larger xstep = larger width
// larger ystep = larger height
function drawCurve(x1, y1, x2, y2, xstep, ystep, numOfLines, direction, color){
	var i = 0
	for (i = 0; i < numOfLines; i ++){
		stroke(color);
		line(x1, y1, x2, y2);

		if (direction === 'downRight'){
			// x1 stays the same, y1 increases
			// y2 stays the same, x2 increases
			y1 += ystep;
			x2 += xstep;
		} else if (direction === 'upRight'){
			y2 -= ystep;
			x1 += xstep;
		} else if (direction === 'downLeft'){
			y1 += ystep;
			x2 -= xstep;
		} else if (direction === 'upLeft'){
			y2 -= ystep
			x1 -= xstep
		}
	}
}

I started by experimenting with curves and how controlling what and how much I added and subtracted from affected the curve (its direction, density, width, height, etc.). This led me to writing a function to draw a curve given different parameters (x1, y1, x2, y2, xstep, ystep, number of lines, direction, color). Finally, I sketched out some curve designs and recreated it using the function I wrote.