Category: Project-04-String-Art

sketch-233

//Victor Tavarez
//Section D
//vtavarez@andrew.cmu.edu
//Project-04


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

function draw() {

    background(60);

   stroke(49,19,255);// rain like blue meant to cover background
   for (var x5 = 0; x5<width; x5+=width/50) {
       for(var y5 = 0; y5 < height; y5 +=height/40){

           line(x5, y5, x5+10, y5+30);
       }
   }
    stroke(240,255,250);//light source from an angle meant to give the piece a further dimension
    for (var x4=50;x4<=width*9/10;x4*=1.10) {
         for(var y4=50;y4 <=height*8/10;y4*=1.10) {
            line(x4,y4,width/6,height/2);
        }
    }

    // the following figures are mmeant to be similarand are meant to look like legs. 

    stroke(234,103,200);
    for (var x1 = 0; x1 <= width; x1+=100) {
        for (var y1 = 0; y1 <= height; y1+=10){
             line(x1,y1,x1+40,x1+40);
        }
    }

    stroke(190,253,213);
    for(var x2 = width; x2 >=0 ; x2-=100) {
        for(var y2 = height-40; y2 >= 0; y2-=10){
            line(x2,y2, x2+40, x2+40);
        }
    }     
   
   stroke(140,120,232);
   for(var x3 = 0; x3 <=width;x3+=100){
       for(var y3 = height; y3 >= 0; y3-=10){
            line(x3,0,x3+40,y3-200);
       }
   }   
   

}   

I restarted this project a few times. I wanted to experiment using the look system and incorporate the various functionalities I discovered in one piece. Although a bit abstract, the image above is supposed to depict a person crossing the street on a raining day. More importantly, the image uses short and frequent lines to simulate rain in the back layer of the image. By connecting many points to pixel, I was able to simulate distance and light using white lines. for the rest of the images I tried to emulate the stage of walking. with the green lines representing stepping forward in how the “knee” moves downward. In the future I hope to be able to use these with animation to simulate movement.

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 🙂

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.

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.

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>

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();
    
}

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.

sketch

//Garrett Rauck
//Section C
//grauck@andrew.cmu.edu
//Project-04

/////////////////////////////
// DECLARE VARS
/////////////////////////////
//canvas
var canvasWidth, canvasHeight, cx, cy, margin
//mouse
var xm, xy; //constrained mouseX and mouseY\
//color
var bgColor, nColor, hColor; //background, normal, and highlight colors

//Spiral
var r0, theta0; //initial values for recursive spiral

/////////////////////////////
// HELPER FNS
/////////////////////////////
function drawSpiralArt(r, theta) {
	//mouseX controls amount by which spiral lines are decimating
	//in length with each recursive call
	var reductionFactor = map(xm,0,canvasWidth,0,1);
	//mouseY controls rotational increment between strings in the
	//spiral. Varying this by numbers which are not factors of 2*pi
	//leads to different types of spirals. 
	var angleIncrement = int(map(xy, 0, canvasHeight, 1, 10));
	//get spiral points per call
	var p1x = cx + r*sin(theta);
	var p1y = cy + r*cos(theta);
	var p2x = cx - r*sin(theta);
	var p2y = cy - r*cos(theta);
	//draw grey strings
	stroke(nColor);
	line(0, 0, p1x, p1y); //top left to p1
	line(canvasWidth, 0, p1x, p1y); //top right to p1
	line(0, canvasHeight, p1x, p1y); //bottom left to p1
	line(canvasWidth, canvasHeight, p1x, p1y); //bottom right to p1
	line(0, 0, p2x, p2y); //top left to p2
	line(canvasWidth, 0, p2x, p2y); //top right to p2
	line(0, canvasHeight, p2x, p2y); //bottom left to p2
	line(canvasWidth, canvasHeight, p2x, p2y); //bottom right to p2
	//draw main strings; 
	stroke(hColor);
	line(p1x, p1y, p2x, p2y); //through center (core of spiral)

	//recursive call until base case is met
	if (r > 1) {
		drawSpiralArt(r*reductionFactor, theta + angleIncrement);
	}


}
/////////////////////////////
// RUN!
/////////////////////////////
function setup() {
    //init canvas vars
    canvasWidth = 640;
    canvasHeight = 480;
    cx = canvasWidth/2;
    cy = canvasHeight/2;
    margin = 30;
    //init color vars
    bgColor = color(255); //white
    nColor = color(136,136,136,35); //grey, semitransparent
    hColor = color(255,0,136); //fucia
    //init spiral vars
    r0 = canvasWidth/2
    theta0 = HALF_PI;
    //init canvas
    createCanvas(canvasWidth, canvasHeight);
}

function draw() {
	background(bgColor);
	//recalculate mouseX, mouseY with constraints
	xm = constrain(mouseX, margin, canvasWidth-margin);
    xy = constrain(mouseY, margin, canvasHeight-margin);
    //draw spiral
	drawSpiralArt(r0, theta0);
}

I wanted to use trigonometry to create a series of points predicated on circular geometry and then connect the points to various other points across the canvas. I ended up using recursion to generate a central spiral. I then used the mouse position to control the degree to which the length of strings in the spiral decimates (the rate at which the strings spiral towards the center) and to control the rotational rate of the strings in the spiral, so that spirals of various character could be created.

 

 

bdarreff_project_04

//Brandon Darreff

//Section A 

//bdarreff@andrew.cmu.edu

//Project-04

var diam; //circle diameters 
var h; //ribbon flared ends control
var x; //horizontal ribbon driver
var y; //vertical ribbon driver
var sd = 40; //starting diameter of circles

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


function draw() {

	background(23, 51, 68);

	noFill();

	for(diam = sd; diam <= 260; diam *= 1.1) { //background circle left
		stroke(75);
		strokeWeight(1);
		ellipseMode(CENTER); //modify ellipse drawing origin 
		ellipse(width / 2.4, height / 2.667, diam, diam);
	}

	for(diam = sd; diam <= 250; diam *= 1.1) { //background circle right
		stroke(75);
		ellipse(width / 1.37, height / 1.44, diam, diam);
	}

	h = 50; //assign flared end control value

	for (y = 200; y <= 400; y += 10) {

		stroke(200, 91, 111); //vertical ribbon color backdrop
		strokeWeight(.5);
		bezier(y + 80, 0, h + 5, 575, 450, 280, y + 75, height);

		stroke(220);		
		strokeWeight(0.75);	//vertical ribbon white overlay
		bezier(y + 100, 0, h, 550, 500, 270, y + 10, height);
		h -= 15 //flared end multiplier
	}

	for (x = 50; x <= 250; x += 15) {

		stroke(200, 91, 111);	//horizontal ribbon color backdrop
		strokeWeight(0.35);
		bezier(0, x - 30, 125, 305, 950, 300, 0, x + 370);
		
		stroke(200);		//horizontal ribbon white overlay
		strokeWeight(0.25);
		bezier(0, x - 50, 125, 285, 950, 300, 0, x  + 350);
		h -= 12; //flared end multiplier
	}


	for(diam = sd; diam <= 230; diam *= 1.05) {	//white circle left
		stroke(255);
		strokeWeight(1);
		ellipse(width / 2.133, height / 2.783, diam, diam);
	}

	for(var diam = sd; diam <= 150; diam *= 1.05) {	//white circle right
		stroke(215);
		ellipse(width / 1.574, height / 1.471, diam, diam);
	}

}

With this project I explored using arrayed curves to mimic ribbons across the defined canvas. By focusing in on the intersection points of the two ribbons using ellipses, the intent was to create depth using tone and varying line weights.