Category: Project-04-String-Art

Project 04 – String Art

sketch
/*
 * Eric Zhao
 * ezhao2@andrew.cmu.edu
 *
 * Project 4: String Art
 * A dynamic string art with four separate string shapes
 * that changes based on mouse position.
 */

var angle = 0;
var posX = 0;
var posY = 0;
var cursorX;
var cursorY;
var loopCount = 0;
var numLines = 30;
function setup() {
    createCanvas(400, 400);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw(){
    stroke(255);
    strokeWeight(0.125);
    background(0);
    translate(width/2, height/2);

    push()
    cursorX = map(min(mouseX, width), -200, 200, 0, 400);
    for(let a = 0; a <= 360; a += 1){
        //rotates the canvas an increment of radians and adjusts canvas
        rotate(5);
        push();
        scale(4);
        posY = -a;
        line(-cursorX, posY, cursorX, cursorX);
        //draws lines normal to point offset after rotation
        pop();
    }
    pop();

    stroke(0, 255, 255);
    strokeWeight(0.75);


    //bottom right cyan string corner
    line(0, height/2, width/2, height/2);
    line(width/2, 0, width/2, height/2);
    numLines = int(map(constrain(mouseX, 0, 400), 0, 400, 0, 30));
    var dx1 = (0-width/2)/numLines;
    var dy1 = (height/2-height/2)/numLines;
    var dx2 = (width/2-width/2)/numLines;
    var dy2 = (height/2-0)/numLines;
    var x1 = 0;
    var y1 = height/2;
    var x2 = width/2;
    var y2 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 -= dx1;
        y1 -= dy1;
        x2 -= dx2;
        y2 -= dy2;
    }

    //bottom left string corner
    line(0, height/2, -width/2, height/2);
    line(-width/2, 0, -width/2, height/2);
    dx1 = (0 + width/2)/numLines;
    dy1 = (height/2-height/2)/numLines;
    dx2 = (-width/2 - 0)/numLines;
    dy2 = (height/2-0)/numLines;
    x1 = 0;
    y1 = height/2;
    x2 = -width/2;
    y2 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 -= dx1;
        y1 -= dy1;
        x2 -= dx2;
        y2 -= dy2;
    }
    rotate(PI); //rotates canvas to draw top two string corners

    //top left string part
    line(0, height/2, width/2, height/2);
    line(width/2, 0, width/2, height/2);
    numLines = int(map(constrain(mouseX, 0, 400), 0, 400, 0, 30));
    dx1 = (0-width/2)/numLines;
    dy1 = (height/2-height/2)/numLines;
    dx2 = (width/2-width/2)/numLines;
    dy2 = (height/2-0)/numLines;
    x1 = 0;
    y1 = height/2;
    x2 = width/2;
    y2 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 -= dx1;
        y1 -= dy1;
        x2 -= dx2;
        y2 -= dy2;
    }
    //top right string part
    line(0, height/2, -width/2, height/2);
    line(-width/2, 0, -width/2, height/2);
    dx1 = (0 + width/2)/numLines;
    dy1 = (height/2-height/2)/numLines;
    dx2 = (-width/2 - 0)/numLines;
    dy2 = (height/2-0)/numLines;
    x1 = 0;
    y1 = height/2;
    x2 = -width/2;
    y2 = height/2;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 -= dx1;
        y1 -= dy1;
        x2 -= dx2;
        y2 -= dy2;
    }
}

I got the initial idea for this composition when trying to make the spiral example from a class lecture and accidentally rotating the canvas in radians instead of degrees.

Project 04 – String Art

I tried to visualize an image of eye through various shapes of string art.

sketch
//Stefanie Suk
//15-104 Section D

var ax1;
var ay1;
var ax2;
var ay2;      //variable for top left white strings 

var bx1;
var by1;
var bx2;
var by2;      //variable for top right white strings 

var cx1;
var cy1;
var cx2;
var cy2;      //variable for bottom right white strings 

var dx1;
var dy1;
var dx2;
var dy2;      //variable for bottom left white strings 

var fx1;
var fy1;
var fx2;
var fy2;      //variable for top bottom orange strings 

var gx1;
var gy1;
var gx2;
var gy2;      //variable for left right orange strings 

var numLines = 40;
var numLines2 = 50;

function setup() {
    createCanvas(400, 300);
    background(25, 44, 108);

    //base lines for top left white strings
    line(0, 300, 0, 0);
    line(0, 0, 400, 0);
    ax1 = (0-0)/numLines;
    ay1 = (0-300)/numLines;
    ax2 = (400-0)/numLines;
    ay2 = (0-0)/numLines;

    //base lines for top right white strings
    line(0, 0, 400, 0);
    line(400, 0, 400, 300);
    bx1 = (400-0)/numLines;
    by1 = (0-0)/numLines;
    bx2 = (400-400)/numLines;
    by2 = (300-0)/numLines;

    //base lines for bottom right white strings
    line(400, 0, 400, 300);
    line(400, 300, 0, 300);
    cx1 = (400-400)/numLines;
    cy1 = (300-0)/numLines;
    cx2 = (0-400)/numLines;
    cy2 = (300-300)/numLines;

    //base lines for bottom left white strings
    line(400, 300, 0, 300);
    line(0, 300, 0, 0);
    dx1 = (0-400)/numLines;
    dy1 = (300-300)/numLines;
    dx2 = (0-0)/numLines;
    dy2 = (0-300)/numLines;

    //base lines for top bottom orange strings
    line(200, 0, 400, 0);
    line(200, 300, 0, 300);
    fx1 = (400-200)/numLines2;
    fy1 = (0-0)/numLines2;
    fx2 = (0-200)/numLines2;
    fy2 = (300-300)/numLines2;

    //base lines for left right orange strings
    line (0, 0, 0, 150);
    line(400, 300, 400, 150);
    gx1 = (0-0)/numLines2;
    gy1 = (150-0)/numLines2;
    gx2 = (400-400)/numLines2;
    gy2 = (150-300)/numLines2;
}

function draw() {

	//center pink strings
	for (var i = 0; i < 300; i += 8) {
		stroke(255, 161, 231); //pink
		strokeWeight(1);
		line (width/2, i + 0, i + width/2, height/2); //top right
		line(width/2, height - i, i + width/2, height/2); //bottom right
        line(width/2, i + 0, width/2 - i, height/2); //top left
        line(width/2, height - i, width/2 - i, height/2); //bottom left
	}

	//top left white strings
	var x1a = 0;
	var y1a = 300;
	var x2a = 0;
	var y2a = 0;
	for (var i = 0; i <= numLines; i +=1) {
		stroke(255);
		strokeWeight(1);
		line(x1a, y1a, x2a, y2a);
		x1a += ax1;
		y1a += ay1;
		x2a += ax2;
		y2a += ay2;
	}

	//top right white strings
	var x1b = 0;
	var y1b = 0;
	var x2b = 400;
	var y2b = 0;
	for (var i = 0; i <= numLines; i +=1) {
		line(x1b, y1b, x2b, y2b);
		x1b += bx1;
		y1b += by1;
		x2b += bx2;
		y2b += by2;
	}

	//bottom right white strings
	var x1c = 400;
	var y1c = 0;
	var x2c = 400;
	var y2c = 300;
	for (var i = 0; i <= numLines; i +=1) {
		line(x1c, y1c, x2c, y2c);
		x1c += cx1;
		y1c += cy1;
		x2c += cx2;
		y2c += cy2;
	}

	//bottom left white strings
	var x1d = 400;
	var y1d = 300;
	var x2d = 0;
	var y2d = 300;
	for (var i = 0; i <= numLines; i +=1) {
		line(x1d, y1d, x2d, y2d);
		x1d += dx1;
		y1d += dy1;
		x2d += dx2;
		y2d += dy2;
	}

	//center circle yellow strings
	for (var e = 120; e <= 240; e++) {
		stroke(247, 241, 117);
		strokeWeight(1.5);
		noFill();
		ellipse(width/2, height/2, e, e);
		e += 4; //spacing
	}

	//top bottom orange strings
	var x1f = 200;
	var y1f = 0;
	var x2f = 200;
	var y2f = 300;
	for (var i = 0; i <= numLines2; i +=1) {
		stroke(255, 134, 4, 70);
		line(x1f, y1f, x2f, y2f);
		x1f += fx1;
		y1f += fy1;
		x2f += fx2;
		y2f += fy2;
	}

	//left right orange strings
	var x1g = 0;
	var y1g = 0;
	var x2g = 400;
	var y2g = 300;
	for (var i = 0; i <= numLines2; i +=1) {
		line(x1g, y1g, x2g, y2g);
		x1g += gx1;
		y1g += gy1;
		x2g += gx2;
		y2g += gy2;
	}

	noLoop();
}

PROJECT 04- STRING ART

JUNE STRING ART
//junelee
//section c
//15-104
//junelee@andrew.cmu.edu

var incx1;
var incy1;
var incx2;
var incy2;
var linebw;
var offsetx;
var offsety;

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

function draw() {


//WHITE
//first- lines from 0,0
	// line(0,0,300,150);
	// line(75,0,300,300);

	strokeWeight(0.5);
	stroke(255);
	//increments for line
	linebw=30;

	incx1=(75-0)/linebw;
	incy1=0;
	incx2=0;
	incy2=(300-150)/linebw;

	//bound for starting line (box)
	var x1=0;
	var x2=300;
	var y1=0;
	var y2=150;

	//lines bw
	for (var n=0; n<=linebw; n+=1) {
		line(x1,y1,x2,y2);
		x1+=incx1;
		y1+=incy1;
		x2+=incx2;
		y2+=incy2;

	}
	noLoop();

//second- circles
	noFill();
	strokeWeight(0.7);
	stroke(255);
	//points
	var x1=125;
	var y1=200;
	linebw=30;

	//circle draw
	for (var diam=3; diam<=200; diam*=1.07) {
		circle(x1,y1,diam);
	}
	noLoop();

//third- background
	// line(100,400,300,150);
	// line(55,500,75,0);

	strokeWeight(0.5);
	stroke(255);

	//increments for line
	linebw=20;

	incx1=(300-75)/linebw;
	incy1=(150-0)/linebw;
	incx2=(100-55)/linebw;
	incy2=0;

	//bound for starting line (box)
	var x1=75
	var x2=55;
	var y1=-170;
	var y2=500;

	//lines bw
	for (var n=0; n<=linebw; n+=1) {
		line(x1,y1,x2,y2);
		x1+=incx1;
		y1+=incy1;
		x2+=incx2;
		y2+=incy2;
	}
	noLoop();


//BLUE
	translate(14,0)
		strokeWeight(0.5);
		stroke(0,0,255);
		//increments for line
		linebw=30;

		incx1=(75-0)/linebw;
		incy1=0;
		incx2=0;
		incy2=(300-150)/linebw;

		//bound for starting line (box)
		var x1=0;
		var x2=300;
		var y1=0;
		var y2=150;

		//lines bw
		for (var n=0; n<=linebw; n+=1) {
			line(x1,y1,x2,y2);
			x1+=incx1;
			y1+=incy1;
			x2+=incx2;
			y2+=incy2;

		}
		noLoop();

	//second- circles
		noFill();
		strokeWeight(0.7);
		stroke(0,0,255);
		//points
		var x1=125;
		var y1=200;
		linebw=30;

		//circle draw
		for (var diam=3; diam<=200; diam*=1.07) {
			circle(x1,y1,diam);
		}
		noLoop();

	//third- background
		// line(100,400,300,150);
		// line(55,500,75,0);

		strokeWeight(0.5);
		stroke(0,0,255);

		//increments for line
		linebw=20;

		incx1=(300-75)/linebw;
		incy1=(150-0)/linebw;
		incx2=(100-55)/linebw;
		incy2=0;

		//bound for starting line (box)
		var x1=75
		var x2=55;
		var y1=-170;
		var y2=500;

		//lines bw
		for (var n=0; n<=linebw; n+=1) {
			line(x1,y1,x2,y2);
			x1+=incx1;
			y1+=incy1;
			x2+=incx2;
			y2+=incy2;
		}
		noLoop();



//RED
	translate(20,0)
		strokeWeight(0.5);
		stroke(255,0,0);
		//increments for line
		linebw=30;

		incx1=(75-0)/linebw;
		incy1=0;
		incx2=0;
		incy2=(300-150)/linebw;

		//bound for starting line (box)
		var x1=0;
		var x2=300;
		var y1=0;
		var y2=150;

		//lines bw
		for (var n=0; n<=linebw; n+=1) {
			line(x1,y1,x2,y2);
			x1+=incx1;
			y1+=incy1;
			x2+=incx2;
			y2+=incy2;

		}
		noLoop();

	//second- circles
		noFill();
		strokeWeight(0.7);
		stroke(255,0,0);
		//points
		var x1=125;
		var y1=200;
		linebw=30;

		//circle draw
		for (var diam=3; diam<=200; diam*=1.07) {
			circle(x1,y1,diam);
		}
		noLoop();

	//third- background
		// line(100,400,300,150);
		// line(55,500,75,0);

		strokeWeight(0.5);
		stroke(255,0,0);

		//increments for line
		linebw=20;

		incx1=(300-75)/linebw;
		incy1=(150-0)/linebw;
		incx2=(100-55)/linebw;
		incy2=0;

		//bound for starting line (box)
		var x1=75
		var x2=55;
		var y1=-170;
		var y2=500;

		//lines bw
		for (var n=0; n<=linebw; n+=1) {
			line(x1,y1,x2,y2);
			x1+=incx1;
			y1+=incy1;
			x2+=incx2;
			y2+=incy2;
		}
		noLoop();

}

I chose to portray string art that interacts with each other and creates new shapes through intersections. I chose the colors for a “trippy” color palette.

Project-04

sketch
var x1 = 0
var x2 = 0
var y1 = 0
var y2 = 300

var dx3;
var dy3;
var dx4;
var dy4;
numLines = 80;

var dx5;
var dy5;
var dx6;
var dy6;


function setup() {
    createCanvas(400, 300);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(66, 245, 236);

	stroke(255); //white background lines
	for (var p = 0; p <= 400; p += 10) {
		line(p, 0, 1.5*p, 300);
		line(1.5*p, 0, p, 300);
	}
    
    stroke(245, 66, 173); //top left pink lines
    for (x1 = 0; x1 <= 400; x1 +=10) {
    	line(x1, y1, x2, y2);
        y2 -= 10;
    }

    push();
    translate(400, 0); //top right pink lines
    rotate(radians(180));
    for (x1 = 0; x1 <= 400; x1 += 5) {
    	line(x1, y1, x2, y2-200);
    	y2 += 5
    }
    pop();
    
    stroke(0, 150, 0); //green triangle
    line(330, 100, 100, 300);
    line(330, 100, 320, 300);
    dx3 = (100-330)/numLines;
    dy3 = (300-100)/numLines;
    dx4 = (320-330)/numLines;
    dy4 = (300-100)/numLines;

    var x3 = 330;
    var y3 = 100;
    var x4 = 330;
    var y4 = 100;
    for (var i = 0; i <= numLines; i+=1) {
    	line(x3, y3, x4, y4);
    	x3 += dx3;
    	y3 += dy3;
        x4 += dx4;
        y4 += dy4;
    }

    stroke (255, 0, 255); //purple triangle
    line(60, 100, 275, 300);
    line(60, 100, 70, 300);
    dx5 = (275-60)/numLines;
    dy5 = (300-100)/numLines;
    dx6 = (70-60)/numLines;
    dy6 = (300-100)/numLines;

    var x5 = 60;
    var y5 = 100;
    var x6 = 60;
    var y6 = 100;
    for (var j = 0; j <= numLines; j+=1) {
    	line(x5, y5, x6, y6);
    	x5 += dx5;
    	y5 += dy5;
    	x6 += dx6;
    	y6 += dy6;
    }

  
    noLoop();
    

}

I had a color scheme in mind when I started, then I tried messing around with different shapes and line spacing, and this is what I came up with.

Project 04

sketch
var ndx1;
var ndy1;
var ndx2;
var ndy2;

var numLines = 100;
var r = 255;
var g = 20;
var b = 150;
var n1xstart = 0;   //shape u, first line, x value of first point, etc
var n1ystart = 0;   //just variables to make values easier to change
var n1xstop = 100;
var n1ystop = 400;

var n2xstart = 300;   //same but second line
var n2ystart = 400;
var n2xstop = 400;
var n2ystop = 0;

var u1xstart = 100;   //same variables but for u shape 
var u1ystart = 0;   
var u1xstop = 0;
var u1ystop = 400;

var u2xstart = 400;  
var u2ystart = 400;
var u2xstop = 300;
var u2ystop = 0;

var t1xstart = 100;  
var t1ystart = 0;   
var t1xstop = 150;
var t1ystop = 400;

var t2xstart = 250;  
var t2ystart = 400;
var t2xstop = 300;
var t2ystop = 0;

var s1xstart = 175;  
var s1ystart = 0;   
var s1xstop = 100;
var s1ystop = 400;

var s2xstart = 300;  
var s2ystart = 400;
var s2xstop = 225;
var s2ystop = 0;


function setup() {
    createCanvas(400, 400);
    background(0);
    stroke(r, g, b);
    //line(n1xstart, n1ystart, n1xstop, n1ystop);
    //line(n2xstart, n2ystart, n2xstop, n2ystop);
    
  
    ndx1 = (n1xstop-n1xstart)/numLines;    // n shape distance
    ndy1 = (n1ystop-n1ystart)/numLines;
    ndx2 = (n2xstop-n2xstart)/numLines;
    ndy2 = (n2ystop-n2ystart)/numLines;
    
    udx1 = (u1xstop-u1xstart)/numLines;    // u shape distance
    udy1 = (u1ystop-u1ystart)/numLines;
    udx2 = (u2xstop-u2xstart)/numLines;
    udy2 = (u2ystop-u2ystart)/numLines;

    tdx1 = (t1xstop-t1xstart)/numLines;    // t shape distance
    tdy1 = (t1ystop-t1ystart)/numLines;
    tdx2 = (t2xstop-t2xstart)/numLines;
    tdy2 = (t2ystop-t2ystart)/numLines;

    sdx1 = (s1xstop-s1xstart)/numLines;    // s shape distance
    sdy1 = (s1ystop-s1ystart)/numLines;
    sdx2 = (s2xstop-s2xstart)/numLines;
    sdy2 = (s2ystop-s2ystart)/numLines;
}

function draw() {
        var nx1 = n1xstart;
        var ny1 = n1ystart;
        var nx2 = n2xstart;
        var ny2 = n2ystart;
       
        var ux1 = u1xstart;
        var uy1 = u1ystart;
        var ux2 = u2xstart;
        var uy2 = u2ystart;

        var tx1 = t1xstart;
        var ty1 = t1ystart;
        var tx2 = t2xstart;
        var ty2 = t2ystart;

        var sx1 = s1xstart;
        var sy1 = s1ystart;
        var sx2 = s2xstart;
        var sy2 = s2ystart;
    
    for (var i = 0; i <= numLines; i += 1) {   //shape u
          
          stroke(r, g, b);
          line(ux1, uy1, ux2, uy2);
          ux1 += udx1;
          uy1 += udy1;
          ux2 += udx2;
          uy2 += udy2;
          r -= 2;        //color changes as lines progress
          g += 1;
          b += 3;
    }
    r = 25;
    g = 50;
    b = 220;
    for (var i = 0; i <= numLines; i += 1) {   //shape n
        
        stroke(r, g, b);
        line(nx1, ny1, nx2, ny2);
        nx1 += ndx1;
        ny1 += ndy1;
        nx2 += ndx2;
        ny2 += ndy2;
        r += 4;
        g += 2;
        b -= 3;
    }
    for (var i = 0; i <= numLines; i += 1) {   //shape t
        
        stroke(255);
        line(tx1, ty1, tx2, ty2);
        tx1 += tdx1;
        ty1 += tdy1;
        tx2 += tdx2;
        ty2 += tdy2;
        
    }
    for (var i = 0; i <= numLines; i += 1) {   //shape s
        
        stroke(255);
        line(sx1, sy1, sx2, sy2);
        sx1 += sdx1;
        sy1 += sdy1;
        sx2 += sdx2;
        sy2 += sdy2;
        
    }
    
    noLoop();
}

String Art

sketchDownload
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
//I think these are the distance variables between where each line is drawn
var numLines = 30

function setup() {
    createCanvas(400, 300);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    line(10, 10, 50, 290);
    line(140, 10, 100, 290);
    line(260, 10, 300, 290);
    line(390, 10, 350, 290);
    dx1 = (50-10)/numLines;
    dy1 = (290-10)/numLines;
    dx2 = (100-140)/numLines;
    dy2 = (10-290)/numLines;
    dx3 = (10-295)/numLines
    dy3 = (150-260)/numLines
    dx4 = (105-390)/numLines
    dy4 = (260-150)/numLines
}

function draw() {
	var x1 = 10;
	var y1 = 10;
	var x2 = 300;
	var y2 = 290;
	var x3 = 390;
	var y3 = 10;
	var x4 = 100;
	var y4 = 290;
	var x5 = 10;
	var y5 = 40;
	var x6 = 390;
	var y6 = 40;
	var x7 = 10;
	var y7 = 260;
	var x8 = 390;
	var y8 = 260;
	for (var i = 0; i <= numLines; i += 1) {
		line(x1, y1, x2, y2);
		x1 += dx1;
		y1 += dy1;
		x2 += dx2;
		y2 += dy2;
		line(x3, y3, x4, y4);
		x3 -= dx1;
		y3 += dy1;
		x4 -= dx2;
		y4 += dy2;
		line(x5, y5, x6, y6);
		x5 += dx3;
		y5 -= dy3;
		x6 -= dx4;
		y6 -= dy4;
		line(x8, y8, x7, y7);
		x7 += dx3;
		y7 -= dy3;
		x8 -= dx4;
		y8 -= dy4;
	}
	noLoop();
	//to be fully honest, I don't get what's going on here so I can't really comment my code.
}

Project – 04 – string art

project 04
// Rouann Chen
// rouanc
// Section B

var angle;
var pos;
var side;

function setup() {
  side = 60;
  createCanvas(400, 400);
  angle = 0;
  pos = p5.Vector.fromAngle(0);
  setRadius();
}

function setRadius() {
  var m = min(width, height);
  var radius = m/2-side*0.6;
  pos.setMag(radius);
}

function drawRect(pos) {
  push();
  translate(pos.x, pos.y);
  rotate(angle);
  rect(-side/2, -side/2, side, side);
  pop();
}

function draw() {
  translate(width/2, height/2);
  drawRect(p5.Vector.mult(pos.rotate(TWO_PI/5), sin(angle)));
  drawRect(p5.Vector.mult(pos.rotate(TWO_PI/5), sin(angle)));
  drawRect(p5.Vector.mult(pos.rotate(TWO_PI/5), sin(angle)));
  drawRect(p5.Vector.mult(pos.rotate(TWO_PI/5), sin(angle)));
  drawRect(p5.Vector.mult(pos.rotate(TWO_PI/5), sin(angle)));

  angle += 0.029;
  pos.rotate(sin(angle)/40);

}

I was inspired by snakes and wanted to draw something that moves infinitely. Instead of using lines, I tried to use endless rectangles connected together to represent a single line.

Project-04-String Art

sketch
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;

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

    // x1, x2, endx1, endx2
    line(50, 50, 150, 300);
  
    // y1, y2, endy1, endy2
    line(300, 300, 350, 100);
  
    //endx1 - x1/numlines
    dx1 = (150-50)/numLines;
  
    //endx2 - x2/numlines
    dy1 = (300-50)/numLines;
  
    //endy1 - y1/numlines
    dx2 = (350-300)/numLines;
  
    //endy2 - y2/numlines
    dy2 = (100-300)/numLines;
    
}

function draw() {
    background(255, mouseX, mouseY);
    var x1 = 50;
    var y1 = 50;
    var x2 = 300;
    var y2 = 300;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    //noLoop();
  
  stroke(255,0,0);
  var x11 = 50;
    var y11 = 50;
    var x22 = 300;
    var y22 = 300;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    //noLoop();
  
  stroke(0,255,0);
    var x113 = 50;
    var y113 = 50;
    var x223 = 300;
    var y223 = 300;
    for (var i = 0; i <= 50; i += 1) {
        line(x223, y223, x113, y11);
        x113 += dx1;
        y113 += dy1;
        x223 += dx2;
        y223 += dy2;
    }
    //noLoop();

    for(var y = 0; y<=300; y+=15){
    	stroke(mouseX, mouseY,40);
    	line(y,0,400,y);
    	stroke(mouseY,mouseX,200);
    	line(0,y,y-5,300);

    }
  

}

PROJECT-04 (string art)

sketch
// SEAN CHEN
// 15-104 A

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

function draw() {
    var colX = map(mouseX, 0, width, 0, 250);
    var colY = map(mouseY, 0, height, 0, 250);
    // map mouse pos to color range val
    var bgCol = color(colX, colY, 125); // background color
    var cirCol = color(colY, colY, 125); // variable obj color
    background(bgCol);

    push(); // center diamond backround blob
    noStroke();
    fill(cirCol);
    beginShape();
    curveVertex(mouseX/2, mouseY);
    curveVertex(mouseX, mouseY/2);
    curveVertex(mouseX+(width-mouseX)/2, mouseY);
    curveVertex(mouseX, mouseY+(height-mouseY)/2);
    curveVertex(mouseX/2, mouseY);
    curveVertex(mouseX, mouseY/2);
    curveVertex(mouseX+(width-mouseX)/2, mouseY);
    endShape();
    pop();

    for (var i = 0; i < 25; i ++) { // border + diamond line art
        // border
        let x1 = map (i, 0, 25, mouseX, width); // mid to right vals (x)
        let y1 = map (i, 0, 25, 0, mouseY); // top to mid vals (y)
        let x2 = map (i, 0, 25, 0, mouseX); // left to mid vals (x)
        let y2 = map (i, 0, 25, mouseY, height); // mid to bottom vals (y)

        // center diamond
        let x1s = map (i, 0, 25, mouseX/2, mouseX);
        // half from leftside to mouse
        let y1s = map (i, 0, 25, mouseY, mouseY+(height-mouseY)/2);
        // half from bottomside to mouse
        let x2s = map (i, 0, 25, 0, mouseX/2);
        // left to half of mouse
        let y2s = map (i, 0, 25, mouseY/2, mouseY);
        // half from topside to mouse
        let x3s = map (i, 0, 25, mouseX, mouseX+(width-mouseX)/2);
        // half from rightside to mouse
        let y3s = map (i, 0, 25, mouseY+(height-mouseY)/2, mouseY);
        // half from left to mouse
        
        // border
        line (x1, 0, width, y1); // top right
        line (width, y2, width-x2, height); // bottom right
        line (0, y2, x2, height); // bottom left
        line (width-x1, 0, 0, y1); // top left

        // diamond
        line (x1s, mouseY, mouseX, y1s); // top left
        line (mouseX, y2s, mouseX-x2s, mouseY); // top right
        line (mouseX, y2s, x3s, mouseY); // bottom right
        line (mouseX, y3s, x3s, mouseY); // bottom left
        line (mouseX, mouseY, mouseX+(width-mouseX)/2, mouseY)
        // xtra line from cent to right
    }
}

Project-04- String Art

sketchDownload

//Project 4 - String Art Mail Envelope Drawing
//sp17
//Section C

var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;

var dx3;
var dy3;
var dx4;
var dy4;

var dx5;
var dy5;
var dx6;
var dy6;


function setup() {
    createCanvas(400, 300);
    background(200);

//envelope flap
    line(40, 40, 150, 200);
    line(360, 40, 250, 200);
    dx1 = (150-40)/numLines;
    dy1 = (200-40)/numLines;
    dx2 = (250-360)/numLines;
    dy2 = (200-40)/numLines;

//horizontal body
    fill(255,0,0);
    line(40,40,40,250);
    line(360,40, 360,250);
    dx3 = (40-40)/numLines;
    dy3 = (250-40)/numLines;
    dx4 = (360-360)/numLines;
    dy4 = (250-40)/numLines;


//black bottom triangle set
    line(40,250, 200, 200);
    line(360,250, 200, 200);
    dx5 = (200-40)/numLines;
    dy5 = (200-250)/numLines;
    dx6 = (200-360)/numLines;
    dy6 = (200-250)/numLines;


}

function draw() {

//flap
    var x1 = 40;
    var y1 = 40;
    var x2 = 360;
    var y2 = 40;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    noLoop();


//body
    var x3 = 40;
    var y3 = 40;
    var x4 = 360;
    var y4 = 40;
    for (var i = 0; i<= numLines; i+= 1) {
        line(x3,y3, x4,y4);
        x3 += dx3;
        y3 += dy3;
        x4 += dy4;
        y4 += dy4;
    }
    noLoop();


//black bottom triangle set
    var x5 = 40;
    var y5 = 250;
    var x6 = 360;
    var y6 = 250;
    for (var i = 0; i <= numLines; i += 1) {
        line(x5, y5, x6, y6);
        x5 += dx5;
        y5 += dy5;
        x6 += dx6;
        y6 += dy6;
    }
    noLoop();


}