Project-04-String-Art – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice https://courses.ideate.cmu.edu/15-104/f2019 Professor Roger B. Dannenberg • Fall 2019 • Introduction to Computing for Creative Practice Sat, 21 Sep 2019 00:36:51 +0000 en-US hourly 1 https://wordpress.org/?v=5.2.20 Shariq M. Shah – Project 04 – String Art https://courses.ideate.cmu.edu/15-104/f2019/2019/09/20/shariq-m-shah-project-04-string-art/ https://courses.ideate.cmu.edu/15-104/f2019/2019/09/20/shariq-m-shah-project-04-string-art/#respond Sat, 21 Sep 2019 00:36:51 +0000 https://courses.ideate.cmu.edu/15-104/f2019/?p=45139 Continue reading "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.

]]>
https://courses.ideate.cmu.edu/15-104/f2019/2019/09/20/shariq-m-shah-project-04-string-art/feed/ 0
Janet Peng Project 04 – String Art https://courses.ideate.cmu.edu/15-104/f2019/2019/09/20/janet-peng-project-04-string-art/ https://courses.ideate.cmu.edu/15-104/f2019/2019/09/20/janet-peng-project-04-string-art/#respond Fri, 20 Sep 2019 14:19:36 +0000 https://courses.ideate.cmu.edu/15-104/f2019/?p=44911 Continue reading "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.

]]>
https://courses.ideate.cmu.edu/15-104/f2019/2019/09/20/janet-peng-project-04-string-art/feed/ 0