Category: Project-04-String-Art

project 04: string art

for this project, I was inspired by the work of weaver and sculptor Ruth Asawa, who gained international recognition in the art world for her looped-wire sculptures and hanging mobiles. the most challenging part of this project was creating self-contained forms that intersected multiple times.

string art ruth asawa
/*  atayao
    lab section E
    project 04: string art
*/ 

// incrementing variables
var connectX = 150;    // starting x for all connecting lines
var connectY1a = 75;    // top of shape A
var connectY1b = 125;    // bottom of shape A
var connectY2a = 160;    // top of shape B
var connectY2b = 190;    // bottom of shape B
var connectY3a = 250;    // top of shape C
var connectY3b = 350;    // bottom of shape C
var xa = 200;    // y-point of top share
var xb = 50;    // y-point of middle shape
var xc = 120;    // y-point of bottom shape
var dx1a;    // change in x for top half of top shape
var dx1b;    // change in x for bottom half of top shape
var dx2a;    // change in x for top half of middle shape
var dx2b;    // change in x for bottom half of middle shape
var dx3a;    // change in x for top half of bottom shape

// number of lines that connect two anchors
var numLines = 15;

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

    // ANCHOR LINES

    stroke(100);
    line(width/2, 0, width/2, 350);    // center line

    stroke(255);
    strokeWeight(1.5);
    // shape A
    line(100, 100, 200, 100);    // anchor 1A (horizontal)
    line(150, 75, 150, 125);    // anchor 1B (vertical)
    line(100, 100, 150, 75);    // anchor 2 (top-left diagonal)
    line(150, 125, 200, 100);    // anchor 3 (bottom-right diagonal)
    // shape B
    line(50, 175, 250, 175);    // anchor 4A (horizontal)
    line(150, 160, 150, 190);    // anchor 4B (vertical)
    line(50, 175, 150, 160);    // anchor 5 (top-left diagonal)
    line(150, 190, 250, 175);    // anchor 6 (bottom-right diagonal)
    // shape C
    line(120, 300, 180, 300);    // anchor 7A (horizontal)
    line(150, 250, 150, 350);    // anchor 7B (vertical)
    line(120, 300, 150, 350);    // anchor 8 (bottom-left diagonal)
    line(150, 250, 180, 300);    // anchor 9 (top-right diagonal)

    // INCREMENTS
    dx1a = (100-xa)/numLines;
    dx1b = (200-100)/numLines;
    dx2a = (250-50)/numLines;
    dx2b = (50-250)/numLines;
    dx3a = (180-120)/numLines;
    dx3b = (120-180)/numLines;
}

function draw () {
    stroke(200);    // color of connecting lines

    // TOP SHAPE
    // top half
    for (var i = 0; i <= numLines; i++) {
        line(connectX, connectY1a, xa, 100);
        xa += dx1a;
    }
    // bottom half
    xa = xa + dx1b
    for (var i = 0; i <= numLines; i++) {
        line(connectX, connectY1b, xa, 100);
        xa += dx1b;
    }

    // MIDDLE SHAPE
    // top half
    for (var i = 0; i <= numLines; i++) {
        line(connectX, connectY2a, xb, 175);
        xb += dx2a;
    }
    // bottom half
    for (var i = 0; i <= numLines; i++) {
        line(connectX, connectY2b, xb + dx2b, 175);
        xb += dx2b;
    }

    // BOTTOM SHAPE
    // top half
    for (var i = 0; i <=numLines; i++) {
        line(connectX, connectY3a, xc, 300);
        xc += dx3a;
    }
    // bottom half
    xc  = xc + dx3b;
    for (var i = 0; i <= numLines; i++) {
        line(connectX, connectY3b, xc, 300);
        xc += dx3b;
    }
    noLoop();
}

Project 04 – String art

Randomly generated string vortex effect

sketch
//Aarnav Patel
//aarnavp
//Section D

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


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

}

function draw() {
	strokeWeight(0.25)	//to better see string

    for (var i = 0; i < 10; i += 1) {	//the amount of vortex triangles drawn
       	let x1 = random(0, width);
    	let y1 = random(0, height);
    	let x2 = width / 2;
    	let y2 = height / 2;
        //centering all lines towards middle on end point – converging vortex
        
        let x3 = random(0, width);
        let y3 = random(0, height);
        let x4 = random(0, width);
        let y4 = random(0, height);

    	line(x1, y1, x2, y2);
    	//line(x3, y3, x4, y4);

    	dx1 = (x2 - x1) / numLines;
    	dy1 = (y2 - y1) / numLines;
    	dx2 = (x3 - x4) / numLines;
    	dy2 = (y3 - y4) / numLines;
    	//creating evenly spaced lines for each "line art pair"

    	for (var j = 0; j < numLines; j += 1) {
    	    if (i == 5) {		//making the middle vortex triangle red
    			stroke("red");
    		} else {
    			stroke(0)
    		}

    		line(x1, y1, x2, y2);
    		x1 += dx1;
    		y1 += dy1;
    		x2 += dx2;
    		y2 += dy2;

    	}

    }
    noLoop();


}

Project 4 – String Art

For this project, I wanted to test the variability of how string art can generate, so I made a random string generator that creates what eventually looks like TV static. Press down the mouse to generate more and more strings until the screen is completely covered!

csavitz_4
//Cole Savitz-Vogel
//csavitzv
//Section A

var x1; 
var y1;
var x2; 
var y2;
var x3;
var y3;
var x4;
var y4;
var x5;
var y5;
var x6;
var y6;

function setup() {
    createCanvas(500, 500);
    background(0);
}

function draw() {

    if (mouseIsPressed){
        strokeWeight(.5);
        web();
        push();
        translate(random(0,500),random(0,500));
        web();
        pop();
        push();
        translate(random(0,500),random(0,500));
        web();
        pop();
        push();
    }
}

function web() {

    x3 = random(1, 500);
    y3 = random(1, 500);
    x4 = random(1, 500);
    y4 = random(1, 500);
    x5 = random(1, 500);
    y5 = random(1, 500);
    x6 = random(1, 500);
    y6 = random(1, 500);
    x1 = x3; 
    y1 = y3;
    x2 = x5;
    y2 = y5;

    line(x3, y3, x4, y4);
    line(x5, y5, x6, y6);
    strokeWeight(0.5);

    for (var i = 0; i < 51; i+=1) {

        var xdelta1 = (x4 - x3);
        var ydelta1 = (y4 - y3);
        var xdelta2 = (x5 - x6);
        var ydelta2 = (y5 - y6);
        
        noFill();
        stroke(random(i,200), random(i,200), random(i,200));
        arc(x1, y1, x2, y2, random(0,3), random(0,3));

        x1 += xdelta1;
        y1 += ydelta1;
        x2 += xdelta2;
        y2 += ydelta2;

    }

}

This is my project 04.

sketch
function setup() {
    createCanvas(400, 300);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}
//Inside-wing top left & bottom right
var dx1;
var dy1;
var dx2;
var dy2;
var numberLines = 15
function draw() {
    background(249,214,214);

    //background line-top left
    stroke(168,141,158);
    line(50,0,150,0);
    line(0,50,0,150);
    dx1 = (150-50)/numberLines;
    dy1 = (0-0)/numberLines;
    dx2 = (0-0)/numberLines;
    dy2 = (150-50)/numberLines;
    var x1 = 50;
    var y1 = 0;
    var x2 = 0;
    var y2 = 150;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
        }
    //background line-top right
    line(250,0,350,0);
    line(400,50,400,150);
    dx1 = (350-250)/numberLines;
    dy1 = (0-0)/numberLines;
    dx2 = (400-400)/numberLines;
    dy2 = (150-50)/numberLines;
    var x1 = 250;
    var y1 = 0;
    var x2 = 400;
    var y2 = 50;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
        }

    line(0,150,0,250);
    line(150,300,50,300);
    dx1 = (0-0)/numberLines;
    dy1 = (250-150)/numberLines;
    dx2 = (50-150)/numberLines;
    dy2 = (300-300)/numberLines;
    var x1 = 0;
    var y1 = 150;
    var x2 = 50;
    var y2 = 300;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
        }
    line(400,150,400,250);
    line(250,300,350,300);
    dx1 = (400-400)/numberLines;
    dy1 = (250-150)/numberLines;
    dx2 = (350-250)/numberLines;
    dy2 = (300-300)/numberLines;
    var x1 = 400;
    var y1 = 150;
    var x2 = 350;
    var y2 = 300;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
        }    
    //feeler left
    stroke(146,63,75);
    line(185,80,190,75);
    line(197,117,203,115);
    dx1 = (190-185)/numberLines;
    dy1 = (75-80)/numberLines;
    dx2 = (203-197)/numberLines;
    dy2 = (115-117)/numberLines;
    var x1 = 185;
    var y1 = 80;
    var x2 = 203;
    var y2 = 115;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
    }
    //feeler right
    line(220,80,215,75);
    line(197,117,203,115);
    dx1 = (215-220)/numberLines;
    dy1 = (75-80)/numberLines;
    dx2 = (203-197)/numberLines;
    dy2 = (115-117)/numberLines;
    var x1 = 220;
    var y1 = 80;
    var x2 = 197;
    var y2 = 117;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    stroke(63,41,54);
    line(130,50,130,110);
    line(280,140,280,230);
    dx1 = (130-130)/numberLines;
    dy1 = (110-50)/numberLines;
    dx2 = (280-280)/numberLines;
    dy2 = (230-140)/numberLines;
    var x1 = 130;
    var y1 = 50;
    var x2 = 280;
    var y2 = 230;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
    }

    //Inside-wing top right & bottom left
    line(120,140,120,230);
    line(270,50,270,110);
    dx1 = (120-120)/numberLines;
    dy1 = (230-140)/numberLines;
    dx2 = (270-270)/numberLines;
    dy2 = (110-50)/numberLines;
    var x1 = 120;
    var y1 = 140;
    var x2 = 270;
    var y2 = 110;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
    }
    
    //Outside-top left
    stroke(189,135,134);
    line(110,20,110,115);
    line(200,115,200,130);
    dx1 = (110-110)/numberLines;
    dy1 = (115-20)/numberLines;
    dx2 = (200-200)/numberLines;
    dy2 = (130-115)/numberLines;
    var x1 = 110;
    var y1 = 20;
    var x2 = 200;
    var y2 = 115;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    //Outside-top right
    line(290,20,290,115);
    line(200,115,200,130);
    let numLines = 10;
    dx1 = (290-290)/numberLines;
    dy1 = (115-20)/numberLines;
    dx2 = (200-200)/numberLines;
    dy2 = (130-115)/numberLines;
    var x1 = 290;
    var y1 = 20;
    var x2 = 200;
    var y2 = 115;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
}
    //Ouside-bottom left 
    line(100,135,110,260);
    line(200,125,200,140);
    dx1 = (110-100)/numberLines;
    dy1 = (260-135)/numberLines;
    dx2 = (200-200)/numberLines;
    dy2 = (140-125)/numberLines;
    var x1 = 100;
    var y1 = 135;
    var x2 = 200;
    var y2 = 125;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    //Ouside-bottom right 
    line(300,135,290,260);
    line(200,125,200,140);
    dx1 = (290-300)/numberLines;
    dy1 = (260-135)/numberLines;
    dx2 = (200-200)/numberLines;
    dy2 = (140-125)/numberLines;
    var x1 = 300;
    var y1 = 135;
    var x2 = 200;
    var y2 = 125;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    //bottom patterning
    stroke(107,87,104)
    line(150,150,170,150);
    line(130,180,150,180);
    dx1 = (170-150)/numberLines;
    dy1 = (150-150)/numberLines;
    dx2 = (150-130)/numberLines;
    dy2 = (180-180)/numberLines;
    var x1 = 150;
    var y1 = 150;
    var x2 = 150;
    var y2 = 180;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
    }
    line(225,150,245,150);
    line(245,180,265,180);
    dx1 = (245-225)/numberLines;
    dy1 = (150-150)/numberLines;
    dx2 = (265-245)/numberLines;
    dy2 = (180-180)/numberLines;
    var x1 = 225;
    var y1 = 150;
    var x2 = 265;
    var y2 = 180;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
    }

    //upper patterning
    line(145,90,155,90);
    line(140,105,150,105);
    dx1 = (155-145)/numberLines;
    dy1 = (90-90)/numberLines;
    dx2 = (150-140)/numberLines;
    dy2 = (105-105)/numberLines;
    var x1 = 145;
    var y1 = 90;
    var x2 = 150;
    var y2 = 105;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
    }

    line(245,90,255,90);
    line(250,105,260,105);
    dx1 = (255-245)/numberLines;
    dy1 = (90-90)/numberLines;
    dx2 = (260-250)/numberLines;
    dy2 = (105-105)/numberLines;
    var x1 = 245;
    var y1 = 90;
    var x2 = 260;
    var y2 = 105;
    for(var i=0;i<=numberLines;i+=1){
        line(x1,y1,x2,y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
    }
}

Project 04 – String Art

sketch
/* eliana fleischer
    efleisch
    section e */ 

//GLOBAL VARIABLES
// these global variables will be used to be able to change the values while drawing different string arts
    
var dx1;
var dx2;
var dy1;
var dy2;

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

var numLines1 = 50;
var numLines2 = 15;

var ax1 = 50;
var ax2 = 150;
var ay1 = 50;
var ay2 = 300; 

var bx1 = 300;
var bx2 = 350;
var by1 = 300;
var by2 = 100;


function setup() {
    createCanvas(400, 300);
    background(124,158,129);
}

function draw() {

    push(); // push will create the bold deges of the lines
    stroke(0);
    strokeWeight(4);

    ax1 = floor(random(15,200)); // randomize x values for the two lines
    ax2 = floor(random(15,200));
    bx1 = floor(random(200,385));
    bx2 = floor(random(200,385));

    ay1 = floor(random(15,150)); // randomize the y values for the two anchor lines
    ay2 = floor(random(150,285));
    by1 = floor(random(150,285));
    by2 = floor(random(15,150));

    line(ax1, ay1, ax2, ay2); // anchor line A 
    line(bx1, by1, bx2, by2); // anchor line B


    dx1 = (ax2-ax1)/numLines2; // creates dx and dy for the lines created divided by numLines
    dx2 = (bx2-bx1)/numLines2;
    dy1 = (ay2-ay1)/numLines2;
    dy2 = (by2-by1)/numLines2;


    var x1 = ax1; // set the starting points of the string art lines to the anchor line values
    var y1 = ay1;
    var x2 = bx1;
    var y2 = by1;

    line(15,15, 385, 15); // upper anchor line
    line(15,285,385,285); // lower anchor line

    var x3 = 15; // creates the initial changing x values
    var x4 = 385; 
    var x5 = 15;
    var x6 = 385;

    dx3 = (385-15)/numLines1; // dx for the lines going to the left
    dx4 = (15 - 385)/numLines1; // dx for the lines going to the right


    pop();


    for (var i = 0; i <= numLines1; i +=1){ // for loop making the background lines
        stroke(243,204,113); // orange lines
        line(15,15, x3, 285); // lines going to left

        stroke(247,255,118); // yellow lines
        line(385,15,x4,285); // lines going to the right

        stroke(236,180,236); //purple lines
        line(15,285,x5,15); //lines from the bottom going left

        stroke(236,180,180); // pink lines
        line(385,285,x6,15); // lines from the bottom going right


        x3 += dx3; // changes the x values by the set dx
        x4 += dx4;
        x5 += dx3;
        x6 += dx4
    }

    stroke(29,5,95);
    strokeWeight(3)
    for (var i = 0; i <= numLines2; i+=1){
        line(x1, y1, x2, y2); // uses the randomly generated points to start lines
        x1 += dx1; // chnages the values by the set dxs and dys 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    noLoop();
}

I think the most difficult part of this project for me was creating an interesting image. I did this by randomizing one of the string art shapes.

Project 04-String Art

These are my abstract butterflies.

sketch
// Natalie Koch
// nataliek
// Section A

// Abstract Butterflies

var numLines = 400;
var c1 = ['pink', 'blue' , 'purple'] //color 1
var c2 = ['blue', 'red', 'yellow'] //color 2
var c3 = ['pink', 'green' , 'orange'] //color 3
var dx1 = 10*(150-50)/numLines;
var dy1 = 10*(300-50)/numLines;
var dx2 = 10*(350-300)/numLines;
var dy2 = 10*(100-300)/numLines;
function setup() {
    createCanvas(400, 400);
    background(0);

}

function draw() {
    function a (x1, y1, x2, y2,dx1, dy1, dx2, dy2, colorList) {
        for (var i = 0; i <= numLines; i += 1) {
            stroke(random(colorList))
            line(x1, y1, x2, y2);
            x1 += cos(i)*dx1*15;
            y1 += sin(i)*dy1*15;
            x2 += cos(i)*dx2*20;
            y2 += sin(i)*dy2*20;
            
        }
    }
    a(50,50,300,300,dx1,dy1,dx2,dy2, c1)
    a(50,200,200,375,dx1,dy1,dx2,dy2, c2)
    a(150,25,300,200,dx1,dy1,dx2,dy2, c3)

    noLoop()
}

Project-04-String Art

sketch
// Emily Franco
// efranco
// Section C

//num of string lines
var numLines = 50;

//base lines
var dx1;
var dy1;
var dx2;
var dy2;

//string lines
var x1;
var y1;
var x2;
var y2; 

//counts sets of lines
var setCount = 0;

//line points
var lnx1; 
var lny1;
var lnx2;
var lny2;

//colors
r = 0; 
g = 0; 
b = 0;
function setup() {
    createCanvas(400, 300);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    background ("white");
}

function draw() {
	var halfW = width/2;
	var halfH = height/2;
	
	if (setCount == 0){
		//-----first line set--------
		lnx1 = 0; 
		lny1 = 0;
		lnx2 = width/10;
		lny2 = height-(height/12);
	}else if (setCount == 1){
		//-----second line set--------
		lnx1 = width/10; 
		lny1 = height-(height/12);;
		lnx2 = halfW;
		lny2 = height-(height/7);
	}else if (setCount == 2){
		//-----third line set--------
		lnx1 = halfW; 
		lny1 = height-(height/7);
		lnx2 = width-(width/6);
		lny2 = height-(height/2);
	}else if (setCount == 3){
		//-----fourth line set--------
		lnx1 = width-(width/6); 
		lny1 = height-(height/2);
		lnx2 = width-(width/3);
		lny2 = 0;
	}else if (setCount == 4){
		//-----fifth line set--------
		lnx1 = width-(width/3); 
		lny1 = 0;
		lnx2 = width/2;
		lny2 = height/8;
	}else if (setCount == 5){
		//-----fifth line set--------
		lnx1 = width/2; 
		lny1 = height/8;
		lnx2 = width/9;
		lny2 = height/9;
	}else if (setCount>5){
		//stop looping
		noLoop();
	}

	//generate random colors
	r = random (255);
	g = random (255);
	b = random (255);

	push();
	noStroke();
	//fill trangle between base lines
	fill (r,g,b,100);
	beginShape();
	vertex (lnx1,lny1);
	vertex (halfW,halfH);
	vertex (lnx2,lny2);
	endShape();
	

	//draw base lines
	line(halfW,halfH,lnx1,lny1);
	line(halfW,halfH,lnx2,lny2);

	pop(); 

	//get position increment for string line
	dx1 = (halfW-lnx1)/numLines;
	dy1 = (halfH-lny1)/numLines;
	dx2 = (lnx2-halfW)/numLines;
	dy2 = (lny2-halfH)/numLines;

	//reset string postions
	x1 = lnx1;
	y1 = lny1;
	x2 = halfW; 
	y2 = halfH;

	for (var i = 0; i<numLines; i+=1){
		//inverted stroke color
		stroke (255-r,255-g,255-b,150);
		//draw string lines
		line (x1,y1,x2,y2);
		x1 += dx1;
		y1 += dy1;
		x2 += dx2;
		y2 += dy2;
	}

	setCount += 1;
}

Project 4

sketch
var dx1; 
var dy1; 
var dx2; 
var dy2; 

var dxOne;
var dyOne;
var dxTwo;
var dyTwo; 

var numLine = 50;
var numLineTwo = 40;

function setup() {
    createCanvas(400, 300);
    background(18, 77, 26);
    
    strokeWeight(2);
    // all lines two pixels wide 

    dx1 = (150-50)/numLine;
    dy1 = (300-50)/numLine;
    dx2 = (350-300)/numLine;
    dy2 = (100-300)/numLine;
    

    dxOne = (400 - 340)/numLineTwo;
    dyOne = (200 - 0)/numLineTwo;
    dxTwo = (50 - 220)/numLineTwo;
    dyTwo = (80 - 0)/numLineTwo;
}

function draw() {

    var x1 = 5;
    var y1 = 115;
    var x2 = 180;
    var y2 = 175;
    // x and y values for left shape and vert lines

    for(i  = 0; i <= numLine; i++) {
        stroke(232, 221, 202);
        line(x1, y1, x2, y2);
            x1 += dx1 + 5;
            y1 += dy1;
            x2 += dx2 - 2;
            y2 += dy2 - 4;
    } // draw left shape, advance by one pixel

    for(i = 0; i <= numLine; i+= 4) {
        stroke(16, 46, 14);
        line(x1, y1, x2, y2);
            x1 += dx2 + 80;
            y1 += dy1 + 120;
            x2 += dx1;
            y2 += dy2;
    } // draw right side vert lines, advance by four pixels

    var xOne = 120;
    var yOne = 0;
    var xTwo = 300;
    var yTwo = 20;
    // x and y values for orange shape

    for(i = 0; i <= numLineTwo; i ++) {
        stroke(122, 65, 15);
        line(xOne, yOne, xTwo, yTwo);
            xOne += dxOne;
            yOne += dyOne;
            xTwo += dxTwo;
            yTwo += dyTwo;
    } // draw orange shape
    
    noLoop();
}

Project-04: String Art

Graham Murtha

Section A

This is the “complimentary eye of the storm”. I used 4 different variations of a base string code, each with different stroke weights and stroke colors for more variation. The numlines is set to 25.

sketch
// gmurtha Graham Murtha
// Section A

var dx1 = 0;
var dy1 = 0;
var dx2 = 0;
var dy2 = 0;
var numLines =25;

function setup() {
    createCanvas(300, 400);
    background(80,0,80); // dark purple

    for(var a = 0; a <= 360; a += 80){ //a = angle
        translate(width/2,height/2);
        line(0,125,25,-75); // base line 1
        line(25,25,125,0); //base line 2
        dx1 = (25-0)/numLines; //calculates difference between each string
        dy1 = (-75-125)/numLines; //calculates difference between each string
        dx2 = (125-25)/numLines; //calculates difference between each string 
        dy2 = (0-25)/numLines; //calculates difference between each string
        rotate(radians(a));
    }

}

function draw() {
    fill(255,255,200) // bright yellow
        circle(width/2,height/2,25);
    fill(80,0,80); //background color
    circle(width/2,height/2,10);

    translate(width/2,height/2);
    stroke(255,255,255); //white
    strokeWeight(1);
    for(var a = 0; a <= 360; a += 30){ // 12 shape variations fit
        var x1 = 125;
        var y1 = 75;
        var x2 = 75;
        var y2 = 125;
        for (var i = 0; i <= numLines; i ++) { //loops 25 times
            line(x1, y1, x2, y2);
            x1 += dx1;
            y1 += dy1;
            x2 += dx2;
            y2 += dy2;
        }
    rotate(radians(a));
    }

    stroke(255,255,100); //yellow
    strokeWeight(3);
    for(var a = 0; a <= 360; a += 45){ // 8 shape variations fit
        var x1 = 125;
        var y1 = 175;
        var x2 = 175;
        var y2 = 125;
        for (var i = 0; i <= numLines; i ++) {  //loops 25 times
            line(x1, y1, x2, y2);
            x1 += dx1;
            y1 += dy1;
            x2 += dx2;
            y2 += dy2;
        }
    rotate(radians(a));
    }

    stroke(200,0,200); //purple
    strokeWeight(2);
    for(var a = 0; a <= 360; a += 60){ //six shape variations fit
        var x1 = 125;
        var y1 = -125;
        var x2 = 75;
        var y2 = 75;
        for (var i = 0; i <= numLines; i ++) {  //loops 25 times
            line(x1, y1, x2, y2);
            x1 += dx1;
            y1 += dy1;
            x2 += dx2;
            y2 += dy2;
        }
    rotate(radians(a));
    }

    
    stroke(255,150,255); //bright purple
    strokeWeight(1);
    for(var a = 0; a <= 360; a += 90){ //four shape variations fit
        var x1 = 0;
        var y1 = 125;
        var x2 = 125;
        var y2 = 0;
        for (var i = 0; i <= numLines; i ++) {  //loops 25 times
            line(x1, y1, x2, y2);
            x1 += dx1;
            y1 += dy1;
            x2 += dx2;
            y2 += dy2;
        }
    rotate(radians(a));
    }

}