Project-04-String-Art

Project 04: String Art

I had a lot of difficulty coming up with this project but I’m pretty happy with how it turned out. I wasn’t sure of the syntax of combining an if statement and a loop and it took a few tries to get it how it is. Instead of just drawing a crack when an area is clicked on, the crack gets darker and darker the more you click on it and eventually the window “breaks” to show an orange sunset color.

window

var dx1;
var dy1;
var dx2;
var dy2;
var dx3
var dx4
var dx5
var dx6
var numLines = 24 ////builds the cracks
var numLines2 = 12
var numLines3 = 36
var shatterCount = 0  ////keeps track of the clicks until the window breaks


function setup() {
    createCanvas(300, 400);
    dx1 = (120 - 110 )/numLines;
    dy1 = (80 - 80)/numLines;
    dx2 = (150 - 50)/numLines;
    dy2 = (200 - 200)/numLines
    dx3 = (240 - 220) /numLines2
    dx4 = (250 - 150)/numLines2
    dx5 = (170 - 160)/numLines3
    dy5 = (260 - 240)/numLines3
    dx6 = (250 - 150)/numLines3

}
function draw() {
    rectMode(CENTER)
    background(0)
    fill(237, 160, 17)  ////window info
    rect(width / 2, height / 2, 150, 300)
    line(width / 2, 50, width / 2, 350)
    line(75, height / 2, 225, height / 2)
    noLoop()
    line(110, 80, 120, 80)
    line(220, 140, 240, 160)
    line(160, 240, 170, 260)
   
            
}

function mousePressed() {
    var x1 = 110
    
    var y1 = 80
    var x2 = 75
    var y2 = 200
    var x3 = 220
    var y3 = 140
    var x4 = 150
    var y4 = 200
    var x5 = 160
    var y5 = 240
    var x6 = 150
    var y6 = 200
    var brokenx1 = random(0, width)
    var brokeny1 = random(0, height)
    var brokenx2 = random(0, width)
    var brokeny2 = random(0, height)
    print(shatterCount)
    
       if (mouseX <= width / 2 & mouseY <= height / 2) { 
        
        for (var s = 0; s <= numLines; s += 1) {
            line(x1, y1, x2, y2)
            x1 += dx1;
            y1 += dy1;
            x2 += dx2;
            y2 += dy2; ////first crack
            
        } shatterCount = shatterCount + 1
    }
       if (mouseX >= width / 2 & mouseY <= height / 2) {
        
       for (var s = 0; s <= numLines; s += 1) {
            line(x3, y3, x4, y4)
            x3 += dx3;
            x4 += dx4; ////second crack along the middle pane
            
            } shatterCount = shatterCount + 1
        }
        if (mouseX >= width / 2 & mouseY >= height / 2) {
            
            for (var s = 0; s <= numLines; s += 1) {
            line(x5, y5, x6, y6)
            x5 += dx5
            y5 += dy5
            x6 += dx6; ////bottom crack along the middle pane
            
           } shatterCount = shatterCount + 1
        }
        
        if (shatterCount >= 12) {
            fill(237, 160, 17) ////what to do after the window "breaks"
            rect(width / 2, height / 2, width, height)
                
    }
}

Stringy Art (Project-04)

For this week’s project, string art, I wanted to make something that showed off how straight lines could form apparent curves. Given that, I decided the cleanest way to do that was with circles, which are both easy to code & visually simple. Four simple colors – red, blue, green, and yellow – diverge from what on the inner hemispheres, while the foreground circle remains in white.

-Robert

sketch

//Robert Rice
//Section C

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

angle = 0

function draw() {
    fill(255);
    strokeWeight(1);
    stroke(255);

    line(200, 0, 200, 300);

    push();
    translate(350, 150);    //changes the axis of rotation to the center of the "circle" formed by the lines
    for(let i = 1; i <= 45; i+=1) { //rotates the same line 2 degrees around the new axis of rotation, loops 45 times
        stroke(255-i*10, 255-i*10, 255);       
        rotate(2);                  //angle change per loop (this rotates 90 degrees, bc 2*45=90)
        line(-150, 0, -150, -150);  //the line being rotated each loop
    }
    pop();

    push();                 //the same code, except it arcs to the bottom right instead of the top right
    translate(350, 150);
    for(let i = 1; i <= 45; i+=1) {
        stroke(255-i*10, 255, 255-i*10);
        rotate(-2);
        line(-150, 0, -150, 150);
    }
    pop();

    push();                 //arcs towards the bottom left
    translate(50, 150);
    for(let i = 1; i <= 45; i+=1) {
        stroke(255, 255, 255-i*10);
        rotate(2);
        line(150, 0, 150, 150);
    }
    pop();

    push();                 //arcs towards the top left
    translate(50, 150);
    for(let i = 1; i <= 45; i+=1) {
        stroke(255, 255-i*10, 255-i*10);
        rotate(-2);
        line(150, 0, 150, -150);
    }
    pop();

    push(); //the final circle, with the origin at the center
    translate(200, 150);
    strokeWeight(2);
    for (let i = 1; i <= 180; i += 1) {
        rotate(2);
        line(-200, -150, 200, -150)
    }
    pop();

    noLoop();
}

Project 4 – String Art

sketch

//simple string art
//hollyl
//section d

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

function setup(){
	createCanvas(400, 300);
	background(200);
	line(200, 25, 200, 125);
	line(217.67, 132.33, 288.38, 61.17);
	line(225, 150, 325, 150);
	line(217.67, 167.67, 288.38, 238.38);
	line(200, 175, 200, 275);
	line(182.33, 167.67, 111.62, 238.38);
	line(175, 150, 75, 150);
	line(182.33, 132.33, 111.62, 61.17);
	dx1 = (200 - 200)/numLines;
	dy1 = (125 - 25)/numLines;
	dx2 = (288.38 - 217.67)/numLines;
	dy2 = (61 - 132.33)/numLines;
	dx3 = (325 - 225)/numLines;
	dy3 = (150 - 150)/numLines;
	dx4 = (288.38 - 217.67)/numLines;
	dy4 = (238.38 - 167.67)/numLines;
	dx5 = (200 - 200)/numLines;
	dy5 = (275 - 175)/numLines;
	dx6 = (182.33 - 111.62)/numLines;
	dy6 = (238.38 - 167.67)/numLines;
	dx7 = (175 - 75)/numLines;
	dy7 = (150 - 150)/numLines;
	dx8 = (182.33 - 111.62)/numLines;
	dy8 = (132.33 - 61.17)/numLines;
}

function draw(){

	var x1 = 200;									//north-north-east
	var y1 = 25;
	var x2a = 217.67;
	var y2a = 132.33;
	for(var i = 0; i <= numLines; i += 1){
		line(x1, y1, x2a, y2a);
		x1 += dx1;
		y1 += dy1;
		x2a += dx2;
		y2a += dy2;
	}

	var x2b = 288.38;								//north-east-east
	var y2b = 61.17;
	var x3a = 225;
	var y3a = 150;
	for(var i = 0; i <= numLines; i += 1){
		line(x2b, y2b, x3a, y3a);
		x2b -= dx2;
		y2b -= dy2;
		x3a += dx3;
		y3a -= dy3;
	}

	var x3b = 325;									//south-east-east
	var y3b = 150;
	var x4a = 217.67;
	var y4a = 167.67;
	for (var i = 0; i <= numLines; i += 1){
		line(x3b, y3b, x4a, y4a);
		x3b -= dx3;
		y3b += dy3;
		x4a += dx4;
		y4a += dy4;
	}

	var x4b = 288.38;								//south-south-east
	var y4b = 238.38;
	var x5a = 200;
	var y5a = 175;
	for (var i = 0; i <= numLines; i += 1){
		line(x4b, y4b, x5a, y5a);
		x4b -= dx4;
		y4b -= dy4;
		x5a += dx5;
		y5a += dy5;
	}

	var x5b = 200;									//south-south-west
	var y5b = 275;
	var x6a = 182.33;
	var y6a = 167.67;
	for (var i = 0; i <=numLines; i += 1){			
		line(x5b, y5b, x6a, y6a);
		x5b += dx5;
		y5b -= dy5;
		x6a -= dx6;
		y6a += dy6;
	}

	var x6b = 111.62;								//south-west-west
	var y6b = 238.38;
	var x7a = 175;
	var y7a = 150;
	for (var i = 0; i <= numLines; i += 1){
		line(x6b, y6b, x7a, y7a);
		x6b += dx6;
		y6b -= dy6;
		x7a -= dx7;
		y7a += dy7;
	}

	var x7b = 75;									//north-west-west
	var y7b = 150;
	var x8a = 182.33;
	var y8a = 132.33;
	for (var i = 0; i <= numLines; i += 1){
		line(x7b, y7b, x8a, y8a);
		x7b += dx7;
		y7b += dy7;
		x8a -= dx8;
		y8a -= dy8;
	}

	var x8b = 111.62;								//north-north-west
	var y8b = 61.17;
	var x1b = 200;
	var y1b = 125;
	for (var i = 0; i <= numLines; i += 1){
		line(x8b, y8b, x1b, y1b);
		x8b += dx8;
		y8b += dy8;
		x1b += dx1;
		y1b -= dy1;
	}

	noLoop();
}

notes:

I created a string art in which consists of lines that are sort of symmetric and floating lines according to the position of mouse.

sketch

//Jae Son, Section C

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

function draw() {
  background(55,40,39);
  for (var i  = 0;  i <= 250; i+=2){
    strokeWeight(1);
    //yellow line -left
    stroke(240,227,30);
    line(i*2, height, 0, 3*i);
    //purple line -left
    stroke(104,99,154);
    line(i*5, height, 0, 3*i);
    //pink line -left
    stroke(181,134,132);
    line(i*8, height, 0, 3*i);
    //yellow line -right
    stroke(240,227,30);
    line(width,i*2,3*i,0);
    //purple line -right
    stroke(104,99,154);
    line(width,i*5,3*i,0);
    //pink line -right
    stroke(181,134,132);
    line(width,i*8,3*i,0);
  }
  
  for (var i = 0; i <= 300; i++) {
    strokeWeight(0.5);
    //moving orange line
    stroke(249,211,140);
    line(mouseX,i*3,i*2,mouseY);
    //moving turquoise line
    stroke(148,224,226);
     line(i*3,mouseY,mouseX,i);
  }
  

  
}

Project 04: String Art

hcsa Download

//Hayoon Choi
//hayoonc
//Section C

var numLines = 50; 

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

function draw() {
    background(0);
    var x1 = 200;
    var x2 = 400;
    var y1 = 0;
    var y2 = 400;
    var sf = constrain(mouseY, 150, 255); //line color change
    stroke(sf); 
    strokeWeight(0.75); 
    for (var i = 0; i <= numLines; i++){
	    strokeWeight(0.75); 
        line(i, i, i * 8, 170); //top left section
        line(mouseX, i * 6, i, i); //moving left section
    }
    for (var i = 0; i <= numLines; i++){
	    strokeWeight(0.75); 
        line(400 - i, i, 400 - i * 8, 170); //top right section
        line(mouseX, i * 6, 400 - i, i); //moving right section
    } 
    for (var y1 = 0; y1 <= 400; y1 += 5) {
    	line(x1, y1 , x2, y2); //right section 
    	x2 += 35;
    }
    x2 = 0;
    y2 = 400;
    for (var y1 = 0; y1 <= 400; y1 += 5) {
        line(x1, y1 , x2, y2); //left section 
    	x2 -= 35;
    }
    stroke(244, 106, 78);
    fill(100, 23, 94, 50);
    push();
    translate(mouseX, 160);
    //rotating orange lines
    for (var j = 0; j < 60; j++){
        push();
        strokeWeight(1);
        rotate(radians(6 * j));
        line(0, 0, 0, 1000); //orange lines
        pop();
    }
    pop();
    
}

Project 4: String Art

string art cb

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

function setup() {
    createCanvas(400, 300);
    background(200);
    line(0, 0, 0, 300);
    line(0, 300, 400, 300);
    dx1 = (0-0)/numLines;
    dy1 = (300-0)/numLines;
    dx2 = (400-0)/numLines;
    dy2 = (300-300)/numLines;
}

function draw() {
    strokeWeight(.5);
    background(0);

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

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

        //bottom left corner
        stroke(mouseX, mouseY, 100);
        line(x1, y1, x2, y2);
        //top right corner
        line(x1 + 400, y1, x2, y2 - 300);
        //moving lines Y
        stroke(mouseY, 100, mouseX);
        line(i*4, mouseY, 400, 0);
        line(0, 300, i*4, mouseY);
        line(i*4, mouseY, 0, 0);
        line(400, 300, i*4, mouseY);
        //moving lines X
        stroke(mouseX, 100, mouseY);
        line(mouseX, i*3, 400, 0);
        line(0, 300, mouseX, i*3);
        line(mouseX, i*3, 0, 0);
        line(400, 300, mouseX, i*3);
      
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
}

My approach to this project involved a lot of trial and error but I had fun experimenting with different parts of the code and seeing what I could make. I wanted to make something interactive, so I made the colors change and the lines follow the mouse position.

Project 04: String Art

For this assignment, I was interested in the way that changing a couple of the location variables for the string would alter the way in which the strings move within the loop. I couldn’t find a reference image of the memory I was basing the drawing off of, but I was inspired by those default backgrounds of older computers when they are not in use, but still on.

peachstring1

var x = 0;//x location of lines moves
var y = 0//y position of lines moves
var c = 0//change background color from black to white

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

}

function draw() {
  background(c);
    c += 1 //background changes over time
  for (i = 0; i <= 50; i += 2.5) //use loop to draw lines
  {var l = i *10
  stroke(194, 255, 254)//blue lines 
   strokeWeight(2);
      line(-width, height, x, l);
      line(width, height, x, l);
   stroke(124, 232, 124);//neon green lines
        strokeWeight(1);
    	  line(x, height/2, 5+l, l);
          line(-width/50, y, 5+l, l);
      stroke(0) //black lines
       line(0,y,20*l,height-l)
  x += 0.1 //lines move across screen
   if(x>width){
     y += 0.1
     x = width
   }
   stroke(255) //white lines
   strokeWeight(0.5)
          line(4*width/l+x, height, 5+l, 0)

  }
}

Project 04 String Art

For this project I drew an eye using string art. I attempted to include face shadows by “cross-hatching” with the string art.

stringart Download

//skin lines
var dx1;
var dy1;
var dx2;
var dy2;
var numLines1 = 75
var dx3;
var dy3;
var dx4;
var dy4;
//eyebrow lines
var ba1;
var bb1;
var ba2;
var bb2;
var numLines2 = 20


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

function draw() {
	background(255);
	//background "skin" (x,y) coordinates
	stroke(172, 134, 120); // left-bottom
	dx1 = (0-0)/numLines1;
	dy1 = (300 - 0)/numLines1;
	dx2 = (400 - 0) / numLines1;
	dy2 = (300 - 300) / numLines1;
	var x1 = 0;
	var y1 = 0;
	var x2 = 0;
	var y2 = 300;
	for(var i = 0; i <= numLines1; i+= 1){
		line(x1,y1,x2,y2);
		x1 += dx1;
		y1 += dy1;
		x2 += dx2;
		x2 += dy2;
	}
	//right to bottom
	dx3 = (400 - 400) / numLines1;
	dy3 = (300 - 0) / numLines1;
	var x3 = 400
	var y3 = 0
	for(var i = 0; i <= numLines1; i += 1){
		line(x3, y3, x2, y2);
		x2 -=dx2
		y2 -= dy2
		x3 += dx3
		y3 += dy3
	}
	//top to left
	dx4 = (400 - 0) / numLines1;
	dy4 = (0 - 0) / numLines1;
	var x4 = 400
	var y4 = 0
	for(var i = 0; i <= numLines1; i += 1){
		line(x1, y1, x4, y4);
		x1 += dx1
		y1 += dy1
		x4 -= dx4
		y4 -= dy4
	}
	//top to right
	push();
	translate((width/3)*2, 0)
	scale(0.33);
	for(var i = 0; i <= numLines1; i += 1){
		line(x3, y3, x4, y4);
		x3 += dx3
		y3 += dy3
		x4 += dx4
		y4 += dy4
	}
	pop();

	//start eyebrow lines (a,b) coordinates
	stroke (52, 41,41);
	//line(20, 175, 50, 225); reference lines
	//line(350, 10, 370, 20);
	ba1 = (50 - 20)/ numLines2;
	bb1 = (225 - 175) / numLines2;
	ba2 = (370-350) / numLines2;
	bb2 = (20 -10) / numLines2;
	var a1 =20
	var b1 = 175
	var a2 = 350
	var b2 = 10
	for(var i = 0; i <= numLines2; i += 1){
		line(a2, b2, a1, b1);
		a1 += ba1
		b1 += bb1
		a2 -= ba2
		b2 -= bb2
	}
	push();
	//start pupil, bigger square (c,d) coordinates
	stroke(102, 108, 95);
	noFill();
	var sc1; 
	var sd1;
	var sc2;
	var sd2;
	var sc3;
	var sd3;
	var sc4;
	var sd4;
	var numlinesS = 25
	sc1 = (150-150) / numlinesS;
	sd1 = (190-265) / numlinesS;
	sc2 = (225 -150) / numlinesS;
	sd2 = (190- 190) / numlinesS;
	var c1 = 150
	var d1 = 265
	var c2 = 150
	var d2 = 190
	for (var i = 0; i <= numlinesS; i += 1){ //top left
		line(c1, d1, c2, d2);
		c1 += sc1
		d1 += sd1
		c2 += sc2
		d2 += sd2
	}
	sc3 = (225-225) / numlinesS;
	sd3 = (190- 265)/ numlinesS;
	var c2 = 225
	var d2 = 190
	var c3 = 225
	var d3 = 265
	for(var i = 0; i <= numlinesS; i += 1){ //top left
		line(c2, d2, c3, d3);
		c2 -= sc2
		d2 -= sd2
		c3 += sc3
		d3 += sd3
	}
	sc4 = (150 -225)/ numlinesS;
	sd4 = (265- 265) / numlinesS;
	var c4 = 225
	var d4 = 265
	for(var i = 0; i <= numlinesS; i += 1){ //top left
		line(c3, d3, c4, d4);
		c3 -= sc3
		d3 -= sd3
		c4 += sc4
		d4 += sd4
	}
	for(var i = 0; i <= numlinesS; i += 1){ //top left
		line(c4, d4, c1, d1);
		c4 -= sc4
		d4 -= sd4
		c1 -= sc1
		d1 -= sd1
	}
	//smaller square
	scale(.5);
	translate(185, 225);
    stroke(0);
	noFill();
	for (var i = 0; i <= numlinesS; i += 1){ //top left
		line(c1, d1, c2, d2);
		c1 += sc1
		d1 += sd1
		c2 += sc2
		d2 += sd2
	}
	sc3 = (225-225) / numlinesS;
	sd3 = (190- 265)/ numlinesS;
	var c2 = 225
	var d2 = 190
	var c3 = 225
	var d3 = 265
	for(var i = 0; i <= numlinesS; i += 1){ //top left
		line(c2, d2, c3, d3);
		c2 -= sc2
		d2 -= sd2
		c3 += sc3
		d3 += sd3
	}
	sc4 = (150 -225)/ numlinesS;
	sd4 = (265- 265) / numlinesS;
	var c4 = 225
	var d4 = 265
	for(var i = 0; i <= numlinesS; i += 1){ //top left
		line(c3, d3, c4, d4);
		c3 -= sc3
		d3 -= sd3
		c4 += sc4
		d4 += sd4
	}
	for(var i = 0; i <= numlinesS; i += 1){ //top left
		line(c4, d4, c1, d1);
		c4 -= sc4
		d4 -= sd4
		c1 -= sc1
		d1 -= sd1
	}
	pop();
	// details
	translate(25, 20);
	stroke(172, 134, 120); //skin color
	var shade1;
	var shadf1;
	var shade2;
	var shadf2;
    shade1 = (50 - 20)/ numLines2;
	shadf1 = (225 - 200) / numLines2;
	shade2 = (370-300) / numLines2;
	shadf2 = (20 -10) / numLines2;
	var e1 =20
	var f1 = 200
	var e2 = 300
	var f2 = 10
	for(var i = 0; i <= numLines2; i += 1){
		line(e1, f1, e2, f2);
		e1 += shade1
		f1 += shadf1
		e2 += shade2
		f2 += shadf2
	}
	

    noLoop()
}

String Art

sketch

//Jasmin Kim
//Section D

var numLines = 70;


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

function draw(){
    background(0);
    var x1 = -10;
    var y1 = -10;
    var x2 = width;
    var y2 = height;
    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);

    for(var i = 0; i <= numLines; i += 1) {     
        stroke(i,150,100);
        line(mouseX, y1*i, x2*i, y2*i);         //right top green line
        stroke(200,i,90);
        line(x1*i,mouseY,x2*i,y2*i);            //left bottom red line
        stroke(i,i,190);
        line(mouseX*i,mouseY*i,width,height);   //blue line going over red and green

    }
    for(var i=0; i<= width; i+=30){
        stroke(255,255,0);                      //yellow curve
        line(mouseX, i, i, height - mouseY)
        line(mouseX, i, i, width - mouseX)
        stroke(255);                            //white curve
        line(width-i,y,x,height-i);     


    }
}

While I was processing this coding, I tried to display contrasting lines depending on each other’s position. I also thought about how the lines will move when my mouse moves towards the left or right.

Project-04: String Art

stringartjessa

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

function setup() {
    createCanvas(400, 400);
    background(0);
    dx1 = (400-200)/count;
    dy1 = (0-200)/count;
    dx2 = (400-400)/count;
    dy2 = (400-400)/count;
    rectMode(CENTER);
}

function draw() {
	
	//divide the canvas into quadrants
	fill(255, 255, 255, 25);	//set fill to transparent white
	rect(300,0,width/2, height);	//draw square in top right
	rect(0,300,width, height/2);	//draw square in bottom left

	push();
	push();
	push();
	
	translate(-200,0)	//move the origin to the left
	//shape 1
	stroke('cyan')
	var x1 = 200;
    var y1 = 200;
    var x2 = 400;
    var y2 = 200;

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

    pop()	//return origin position
    //shape 2
    stroke('white')
    da1 = (200-0)/count;
    db1 = (200-0)/count;
    da2 = (400-0)/count;
    db2 = (200-400)/count;

    var a1 = 0;
    var b1 = 0;
    var a2 = 400;
    var b2 = 400;

    for (var i = 0; i <= count; i += 1) {
       line(a1, b1, a2, b2);
        a1 += da1;
        b1 += db1;
        a2 += da2;
        b2 += db2;
    noLoop();
    }
    
    push();	//save current canvas properties
    rotate(radians(45));	//rotate canvas 45 degrees
    
    //shape 3
    stroke('magenta')
    dc1 = (0-400)/count;
    dd1 = (0-0)/count;
    dc2 = (0-200)/count;
    dd2 = (400-200)/count;

    var c1 = 400;
    var d1 = 0;
    var c2 = 200;
    var d2 = 200;

    for (var i = 0; i <= count; i += 1) {
       line(c1, d1, c2, d2);
        c1 += dc1;
        d1 += dd1;
        c2 += dc2;
        d2 += dd2;
    noLoop();
}

	pop();	//restore canvas properties before drawing shape 3
	rotate(radians(-20))	//rotate canvas 20 degrees counterclockwise
	translate(-78,58)	//move canvas to the left and down so top point of shape 4 meets center of canvas

	//shape 4
	stroke('cyan')

	de1 = (200-400)/count;
    df1 = (200-400)/count;
    de2 = (0-200)/count;
    df2 = (400-200)/count;

    var e1 = 400;
    var f1 = 400;
    var e2 = 200;
    var f2 = 200;

    for (var i = 0; i <= count; i += 1) {
       line(e1, f1, e2, f2);
        e1 += de1;
        f1 += df1;
        e2 += de2;
        f2 += df2;
    noLoop();
}
	pop();	//reset canvas properties to before shape 3 was drawn
	
	//shape 5
	stroke('magenta');
	dg1 = (200-400)/count;
    dh1 = (0-0)/count;
    dg2 = (200-400)/count;
    dh2 = (400-100)/count;

    var g1 = 400;
    var h1 = 0;
    var g2 = 400;
    var h2 = 200;

    for (var i = 0; i <= count; i += 1) {
       line(g1, h1, g2, h2);
        g1 += dg1;
        h1 += dh1;
        g2 += dg2;
        h2 += dh2;
    noLoop();
}
	translate(-15,135)	//move canvas to the left and down
	rotate(radians(-44))	//rotate canvas 44 degrees counterclockwise

	//shape 6
	stroke('white')
	dj1 = (400-200)/count;
    dk1 = (200-0)/count;
    dj2 = (200-400)/count;
    dk2 = (400-200)/count;

    var j1 = 200;
    var k1 = 0;
    var j2 = 400;
    var k2 = 200;

    for (var i = 0; i <= count; i += 1) {
       line(j1, k1, j2, k2);
        j1 += dj1;
        k1 += dk1;
        j2 += dj2;
        k2 += dk2;
	}
	noLoop();
}

It took me a while to figure out how to manipulate the loops to make the shapes I wanted, so I made some general sketches to guide the composition and the guide lines. Ultimately, I had to transform the canvas and make slight modifications throughout the code to get the visual effect I wanted, but this would have been impossible to do without loops.