Category: Project-04-String-Art

Project 4: String Art

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

}

function draw() {
	background(220);
	strokeWeight(mouseX/40);
	//red right peak
	for(let i = 1; i <= 100; i += 1) {
        stroke(255 - mouseX, mouseY, 0); //changes color of the strokes
        line(width/2 + 10*i, height, width/2, 10*i); //
	}
	//yellow left peak
	for(let i = 1; i <= 100; i += 1) {
        stroke(255 - mouseY, mouseX, 255); //changes the color of the strokes
        line(width/2 - 10*i, height, width/2, 10*i);
	}
	//top left pattern
	for(let i = 1; i < 100; i += 1) {
        stroke(mouseY, 0, mouseX);
        line(0 + 10*i, 0, 0, height - 10*i);
    }
    //top right pattern
     for(let i = 1; i < 100; i += 1) {
        stroke(mouseX, 255 - mouseX, 255 - mouseY);
        line(width - 10*i, 0, width, height - 10*i);
    }
}

I drew a sketch of what I wanted my project to look like. If you move the mouse, the stroke width and color changes.

Project 04: String Art

project-04-stringArt 
/*
Lauren Kenny
lkenny
Section A

This is a program that creates an abstract string art piece.
*/

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

function draw() {
    background(0);
    strokeWeight(.2);
    //yellow center
    for(let i=1; i<50; i+=.5) {
        stroke(220, 220, 0);
        line(width/2+10*i, height/2, width/2, 10*i);
    }
    //red center
    for(let i=1; i<50; i+=.5) {
        stroke(220, 0, 0);
        line(width/2-10*i, height/2, width/2, 10*i);
    }
    //blue center
    for(let i=1; i<50; i+=.5) {
        stroke(0, 0, 220);
        line(width/2-10*i, height/2, width/2, height-10*i);
    }
    //green center
    for(let i=1; i<50; i+=.5) {
        stroke(0, 220, 0);
        line(width/2+10*i, height/2, width/2, height-10*i);
    }
    //yellow outside
    for(let i=1; i<50; i+=.5) {
        stroke(220, 220, 0);
        line(10*i, height, 0, (height/2)+(10*i));
    }
    //red outside
    for(let i=1; i<50; i+=.5) {
        stroke(220, 0, 0);
        line(width-10*i, height, width, (height/2)+(10*i));
    }
    //blue outside
    for(let i=1; i<50; i+=.5) {
        stroke(0, 0, 220);
        line(width-10*i, 0, width, (height/2)-(10*i));
    }
    //green outside
    for(let i=1; i<50; i+=.5) {
        stroke(0, 220, 0);
        line(10*i, 0, 0, (height/2)-(10*i));
    }
}

For this project, I wanted to experiment with the illusion of curved lines through looped string art. I focused on repeating shapes and simple colors to create a geometric piece.

Project 4 – String Art

sketch.sll4Download
// Sarah Luongo
// Section A

function setup() {
    createCanvas(400, 300);
    background(232, 240, 255);
}

function draw() {
    for (var i = 0; i <= 150; i++) {
	stroke(120, 150, 180);
	
	// Blue background horizontal lines
	line(0, height/2- i, width, height/2 - i);
        
	// Blue intersecting lines at the bottom
	line(0, height/2 + (i/2), 3 * i, height); // left
	line(width, height/2 + (i/2), width - (3 * i), height); // right
        stroke(132, 205, 190);
	
	// Green background horizontal lines
	line(0, height/1.5 + i, width, height/1.5 + i);
	
	i += 1;
    }

    for (var i = 0; i <= 75; i++) { 
	stroke(210, 200, 220);
	// Pink intersecting lines at the bottom
	line(0, height/2 + (i/2), 3 * i, height); // left
	line(width, height/2 + (i/2), width - (3 * i), height); // right
	
	// Pink intersecting lines at the top
        line(width-(6*i), 0, 0, height/2 + (2*i)); // left
        line(6*i, 0, width, height/2 + (2*i)); // right
    }
    // Pebbles
    fill(230, 230, 250);
    ellipse(mouseX, mouseY, 100, 50);
}

I want to create something that resembled a bag of pebbles. So, I made a see-through, colorful, bag using string art, and an ellipse that moves around behind the string art to look like a bunch of pebbles. I was also attempting to make the bag look open.

Project-04-String Art

sketchDownload
 /*
Nicholas Wong
Section A
*/


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

    background(0)

}
 
function draw() 
{
    background(0)
    stroke(255)

    //Circle around image (follows mouse slightly)
    for (var i = 0; i <=300; i += 10) 
    {
        stroke(60)
        strokeWeight(0.5)
        line(width - i, 0.1*mouseY, width+(0.1*mouseX), height - i*2);
        line(i, height + (0.1*mouseY), -30+0.1*mouseX, i*2);
        line(width - i, height + (0.1*mouseY), width+(0.1*mouseX), i*2);
        line(i, 0.1*mouseY, -30+0.1*mouseX - 1, height - i*2);
    }

    //Double For-loop for X and Y grid coordinates
    for (let x=0;x<=width;x+=25) {
        //Columns
        push();
        stroke(255)
        strokeWeight(0.1)
        line(x,0,x,height)
        pop();

        for(let y=0;y <=height;y+=25){
            //Center point
            push();
            stroke(255)
            strokeWeight(0.05)
            line(mouseX,mouseY,x,y);

            //Rows
            push();
            stroke(50)
            strokeWeight(0.1)
            line(0,y,width,y)
            pop();

            //Right
            push();
            stroke(70,0,0)
            strokeWeight(0.15)
            line(0,mouseY,width,y)
            pop();

            //Left
            push();
            stroke(0,70,70)
            strokeWeight(0.15)
            line(width, mouseY, 0, y)
            pop();

            //Bottom
            push();
            stroke(50,50,0)
            strokeWeight(0.15)
            line(mouseX, height, x, 0)
            pop();

            //Top
            push();
            stroke(70,0,80)
            strokeWeight(0.15)
            line(mouseX, 0, x, height)
            pop();               
        }
    }


    
}

Project 4 – String Art

I began this project by playing around with loops to experiment with different forms. However, I later realized the loops could be used to create interesting environments with “perspective lines.” I decided to run with this and create an empty room with a door at the end. The color changing with the position of the mouse give a sense of dimension and personalization.

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

function draw() {
    spacing = 20;
    red = mouseX;
    blue = mouseY;
   
    for (var a = 0; a <= 600; a += spacing) {
        // sloped plane
        stroke(255);
        strokeWeight(0.5);
        line(0, a, a, 200);

        // vertical grid
        stroke(red, 0, 200);
        line(a, mouseX, a, a);
    }
    for (var a = width/3; a <= width; a += spacing/2) {
        //bg diagonals
      stroke(red, 255, blue);
      line(a, 0, 2*a, 200);
      line(2*a, 200, a, 200); //2 sets of lines converge at horizon
    }
  //door
  stroke(red, 255, blue);
  strokeWeight(1);
  fill(0);
  rect(width/2, height-200, 50, 100);
    //doorknob
    circle(width/2+40, height-150, 5);
}

Project-04-String-Art

deer
//Jiaqi Wang SectionC
var numLines=90;
//ears variables
var dxEL1;
var dxEL2;
var dxER1;
var dxER2;
var dyEL1;
var dyEL2;
var dyER1;
var dyER2;
//face variables
var dxFL1;
var dxFL2;
var dxFM1;
var dxFM2;
var dxFR1;
var dxFR2;
var dxFM2_2;
var dyFL1;
var dyFL2;
var dyFM1;
var dyFM2;
var dyFR1;
var dyFR2;
var dyFM2_2;
//nose
var dxN1;
var dxN2;
var dyN1;
var dyN2;
//body
var dxBL1;
var dxBL2;
var dxBR1;
var dxBR2;
var dyBL1;
var dyBL2;
var dyBR1;
var dyBR2;
var dxBR2_2;
var dyBR2_2;


function setup() {

    createCanvas(300, 400);
    background(255);
    strokeWeight(0.2);
    stroke(188,88,36);
    //left ear top
    line(30,20,115,140);
    //left ear bottom
    line(50,115,150,120);
    dxEL1=(50-30)/numLines;
    dyEL1=(115-20)/numLines;
    dxEL2=(150-115)/numLines;
    dyEL2=(120-140)/numLines;

    //right ear top
    line(265,20,185,140);
    //right ear bottom
    line(250,115,150,120);
    dxER1=(250-265)/numLines;
    dyER1=(115-20)/numLines;
    dxER2=(185-150)/numLines;
    dyER2=(140-120)/numLines;

    //face left
    line(115,140,140,205);
    //face middle
    line(150,120,150,205);
    
    dxFL1=(150-115)/numLines;
    dyFL1=(120-140)/numLines;
    dxFM2=(150-140)/numLines;
    dyFM2=(205-205)/numLines;
    //face right
    line(185,140,160,205);
    dxFR1=(150-185)/numLines;
    dyFR1=(120-140)/numLines;
    dxFM2_2=(150-160)/numLines;
    dyFM2_2=(205-205)/numLines;

    //nose 1
    line(135,215,160,235);
    //nouse 2
    line(165,215,145,235);
    dxN1=(165-135)/numLines;
    dyN1=(0)/numLines;
    dxN2=(145-160)/numLines;
    dyN2=(0)/numLines;

    //body left
    line(110,185,70,235);
    line(155,255,155,385);
    dxBL1=(155-110)/numLines;
    dyBL1=(250-180)/numLines;
    dxBL2=(155-70)/numLines;
    dyBL2=(380-235)/numLines;

    //body right
    line(200,185,240,235);
    line(155,255,155,385);
    dxBR1=(155-200)/numLines;
    dyBR1=(250-180)/numLines;
    dxBR2_2=(155-240)/numLines;
    dyBR2_2=(380-235)/numLines;


}

function draw() {

//left ear
	var xEL1=30;
    var yEL1=20;
    var xEL2=115;
    var yEL2=140;
	for(var i=0;i<=numLines;i+=1){
		line(xEL1,yEL1,xEL2,yEL2);
		xEL1+=dxEL1;
		yEL1+=dyEL1;
		xEL2+=dxEL2;
		yEL2+=dyEL2;
//print(xEL1,yEL1,xEL2,yEL2);
	}
 //right ear   
    var xER1=265;
    var yER1=20;
    var xER2=185;
    var yER2=140;
	for(var i=0;i<=numLines;i+=1){
		line(xER1,yER1,xER2,yER2);
		xER1+=dxER1;
		yER1+=dyER1;
		xER2-=dxER2;
		yER2-=dyER2;
		print(xER1,yER1,xER2,yER2);
		print(i.toString());
		print(numLines.toString());


    }
//face left
	var xFL1=115;
    var yFL1=140;
    var xFM2=140;
    var yFM2=205;
	for(var i=0;i<=numLines;i+=1){
		line(xFL1,yFL1,xFM2,yFM2);
		xFL1+=dxFL1;
		yFL1+=dyFL1;
		xFM2+=dxFM2;
		yFM2+=dyFM2;

	}
	//face right
    var xFR1=185;
    var yFR1=140;
    var xFM2_2=160;
    var yFM2_2=205;
	for(var i=0;i<=numLines;i+=1){
		line(xFR1,yFR1,xFM2_2,yFM2_2);
		xFR1+=dxFR1;
		yFR1+=dyFR1;
		xFM2_2+=dxFM2_2;
		yFM2_2+=dyFM2_2;

    }

    //nose
    var xN1=135;
    var yN1=215;
    var xN2=160;
    var yN2=235;
	for(var i=0;i<=numLines;i+=1){
		line(xN1,yN1,xN2,yN2);
		xN1+=dxN1;
		yN1+=dyN1;
		xN2+=dxN2;
		yN2+=dyN2;

    }
translate(0,5);
    //body left
    var xBL1=110;
    var yBL1=180;
    var xBL2=70;
    var yBL2=235;
	for(var i=0;i<=numLines;i+=1){
		line(xBL1,yBL1,xBL2,yBL2);
		xBL1+=dxBL1;
		yBL1+=dyBL1;
		xBL2+=dxBL2;
		yBL2+=dyBL2;

	}

    //body right
    var xBR1=200;
    var yBR1=180;
    var xBR2_2=240;
    var yBR2_2=235;
	for(var i=0;i<=numLines;i+=1){
		line(xBR1,yBR1,xBR2_2,yBR2_2);
		xBR1+=dxBR1;
		yBR1+=dyBR1;
		xBR2_2+=dxBR2_2;
		yBR2_2+=dyBR2_2;

	}

noLoop()
}

Below is the initial sketch I made in illustrator.

Project-04-String Art: Maryland Flag

sketchDownload
var dx1;
var dy1;
var dx2;
var dy2;
var bx1;
var by1;
var bx2;
var by2;
var cx1;
var cy1;
var cx2;
var cy2;
var ax1;
var ay1;
var ax2;
var ay2;
var numLines = 20;

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

    bx1 = (100-0)/numLines;
    by1 = (50-50)/numLines;
    bx2 = (100-100)/numLines;
    by2 = (100-50)/numLines;

    cx1 = (100-200)/numLines;
    cy1 = (50-50)/numLines;
    cx2 = (100-100)/numLines;
    cy2 = (100-50)/numLines;

    ax1 = (100-200)/numLines;
    ay1 = (50-50)/numLines;
    ax2 = (100-100)/numLines;
    ay2 = (0-50)/numLines;

}

function draw() {
	noStroke();
    fill(255,255,0);
    rect(0, 0, 400, 300);

//top left black lines
    stroke(0);
    for (var i = 2; i < width/2; i += 4) { 

      if (i < 80 || i > 130) { 
    
        line(i, i * .7 - 20, i, i - 400);
    }

      noLoop();
   
    }

    for (var i = 0; i < width/2; i += 4) {

    	if (i < 80 || i > 130) { 

          line(i, i + 400, i, i * .7 + 40);
      }
      noLoop();
  
    }

    for (var i = 0; i < width/2; i += 4) {

    	if (i > 80 & i < 130) { 

          line(i, i *.7 -20, i, i * .7 +40);
      }
      
      noLoop();
  
    }

//bottom right black lines
  for (var i = 200; i < width; i += 4) {

    	if (i < 280 || i > 330) { 

          line(i, i *.7 -20, i, i * .7 +40);
      }
      
      noLoop();
  
    }

  for (var i = 200; i < width; i += 4) { 

      if (i > 280 & i < 330) { 
    
        line(i, i * .7 - 20, i, i - 400);
    }

      noLoop();
   
    }

  for (var i = 200; i < width; i += 4) {

    	if (i > 280 & i < 330) { 

          line(i, i + 400, i, i * .7 + 40);
      }
      noLoop();

    }


 



    noStroke();

    fill(255, 0, 0); 
    rect(0, 150, 200, 150); //red rectangle bottom left
    rect(200, 0, 200,150); //red rectangle top right
    fill(255);
    rect(0, 150, 100, 75); //white rectangles bottom left 
    rect(100, 225, 100, 75);
    rect(200, 0, 100, 75);//white rectangles top right
    rect(300, 75, 100, 75);


    
    push();
    noFill();
    stroke(255);
//bottom right ellipses and arcs
    ellipse(107, 175, 15, 15);
    arc(100, 167, 15, 15, -PI / 2, 3 * -PI / 2, CHORD);
    
    ellipse(28, 233, 15, 15);
    arc(20, 225, 15, 15, radians(0), radians(180), CHORD);

    ellipse(92, 275, 15, 15);
    arc(100, 283, 15, 15, PI / 2, 3 * PI / 2, CHORD);

    ellipse(174, 217, 15, 15);
    arc(182, 225, 15, 15, radians(180), radians(0), CHORD);
    

    stroke(255,0,0);
    ellipse(92, 175, 15, 15);
    arc(100, 167, 15, 15, PI / 2, 3 * PI / 2, CHORD);

    ellipse(28, 217, 15, 15);
    arc(20, 225, 15, 15, radians(180), radians(0), CHORD);

    ellipse(107, 275, 15, 15);
    arc(100, 283, 15, 15, -PI / 2, 3 * -PI / 2, CHORD);

    ellipse(174, 233, 15, 15);
    arc(182, 225, 15, 15, radians(0), radians(180), CHORD);
  
//top right elliplses and arcs
    push;
    noFill();
    stroke(255);
    translate(200, -150);
    ellipse(107, 175, 15, 15);
    arc(100, 167, 15, 15, -PI / 2, 3 * -PI / 2, CHORD);
    
    ellipse(28, 233, 15, 15);
    arc(20, 225, 15, 15, radians(0), radians(180), CHORD);

    ellipse(92, 275, 15, 15);
    arc(100, 283, 15, 15, PI / 2, 3 * PI / 2, CHORD);

    ellipse(174, 217, 15, 15);
    arc(182, 225, 15, 15, radians(180), radians(0), CHORD);
    

    stroke(255,0,0);
    ellipse(92, 175, 15, 15);
    arc(100, 167, 15, 15, PI / 2, 3 * PI / 2, CHORD);

    ellipse(28, 217, 15, 15);
    arc(20, 225, 15, 15, radians(180), radians(0), CHORD);

    ellipse(107, 275, 15, 15);
    arc(100, 283, 15, 15, -PI / 2, 3 * -PI / 2, CHORD);

    ellipse(174, 233, 15, 15);
    arc(182, 225, 15, 15, radians(0), radians(180), CHORD);
    pop();



//bottom left red bend1
    push();
    translate(0, 175);
    stroke(255, 0, 0);
    var x1 = 0;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    noLoop();
    }

    pop();


//bottom left white bend1
    push();
    translate(0, 175);
    stroke(255);
    var x1 = 0;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += bx1;
        y1 += by1;
        x2 += bx2;
        y2 += by2;
    noLoop();
    }
    pop();


//bottom left red bend2
    push();
    translate(0, 175);
    stroke(255, 0, 0);
    var x1 = 200;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += cx1;
        y1 += cy1;
        x2 += cx2;
        y2 += cy2;
    noLoop();
    }

    pop();


//bottom left white bend2
     push();
    translate(0, 175);
    stroke(255);
    var x1 = 200;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += ax1;
        y1 += ay1;
        x2 += ax2;
        y2 += ay2;
    noLoop();
    }

    pop();

    //next one


//top right red bend1
    push();
    translate(200, 25);
    stroke(255, 0, 0);
    var x1 = 0;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    noLoop();
    }

    pop();


//top right white bend1
    push();
    translate(200, 25);
    stroke(255);
    var x1 = 0;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += bx1;
        y1 += by1;
        x2 += bx2;
        y2 += by2;
    noLoop();
    }
    pop();


//top right red bend2
    push();
    translate(200, 25);
    stroke(255, 0, 0);
    var x1 = 200;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += cx1;
        y1 += cy1;
        x2 += cx2;
        y2 += cy2;
    noLoop();
    }

    pop();


//top right white bend2
    push();
    translate(200, 25);
    stroke(255);
    var x1 = 200;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += ax1;
        y1 += ay1;
        x2 += ax2;
        y2 += ay2;
    noLoop();
    }

    pop();



    
}

PROJECT 04 – STRING ART

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

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

    line(400, 150, 400,  300)

    dx1 = (0 - 0)/numLines;
    dy1 = (200 - 0)/numLines;
    dx2 = (300 - 200)/numLines;
    dy2 = (50 - 400)/numLines;
}

//setting variables
function draw() {
    var x1 = 0;
    var y1 = 0;
    var x2 = 400;
    var y2 = 300;
    var x3 = 0;
    var y3 = 0;
    var x4 = -100;
    var y4 = height;
    var x5 = width;
    var y5 = height;

//blue and pink gradient
    for (var i = 0; i <= numLines; i += 1) {
        stroke(225-i*10, 125-i*10, 225  );
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

//orange and green gradient
    for (var j = 0; j <= 60; j ++) {
        stroke(100+j*10, 200, 140);
        line(x4, height, width, y4);
        x4 += width/20;
        y4 -= height/20;
    }

//green on bottom left
    for (var k = 0; k <= 30; k ++) {
        stroke(25, 255, 255-k*10);
        line(0, y3, x3, height);
        x3 += width/20;
        y3 += height/20;
    }

//pink top left
    for (var z = 0; z <= 20; z ++) {
        stroke(100+z*10, 0, 140);
        line(x5, 0, width, y5);
        x5 -= width/20;
        y5 -= height/20;
    }

}

For this project, I really wanted to test out how curvatures can warp lines into creating new dimensions. I also tried to emphasize the depth by using gradients.

Project 04 – String Art

I chose to create a responsive string art project, since I still haven’t had my fill of mouseX and mouseY data use. I also used a mousePressed function to spice things up as well, ultimately changing the location of the pivot points of the string as well as the color.

sketchDownload
//PROJECT 04 STRING ART
//Julia Steinweh-Adler
//jsteinwe


var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 1;
var mode = 0;

function setup() {
    createCanvas(400, 400);
    background(0);
    
  
    //line initial variables
    dx1 = (width/1) / numLines;
    dy1 = (width/2) / numLines;
    dx2 = (width/3) / numLines;
    dy2 = (width/4) / numLines;
}

function draw() {
    
    var x1 = mouseX;
    var y1 = mouseY;
    var ptOne = 400; // yarn pivot point, y value
    var ptTwo = 180; // yarn pivot point, x value
    
    stroke(0);
    strokeWeight(2);
   
     // Red and Blue Yarn
       if(mode == 0) {
          for (var i = 0; i < numLines; i += 1) {
       
             stroke(mouseX, 0, mouseY); // red blue color
             line(x1, y1, ptOne, ptTwo); //line 1
        
             stroke(mouseY, 0, mouseX); // red blue color
             line(y1, x1, ptTwo, ptOne); //line 2, inverted from line 1
        
             line(x1, y1, y1, x1); // line 3: connecting 1 and 2
          
            
            // incremental addition to coordinates
             x1 += dx1;
             y1 += dy1;
             ptOne += dx2;
             ptTwo += dy2;  
            
          }  
     
       
       } else {
          // Blue and Green Yarn
         
         
         // changing yarn pivot point
         let ptOne = 0 // yarn pivot point, x value
         let  ptTwo = 200 // yarn pivot point, y value
         
          for (i = 0; i < numLines; i += 1) {
         
          //change yarn color
             stroke(0, mouseX, mouseY); // green blue color
             line(y1, x1, ptTwo, ptOne); //line 1
  
      
             stroke(mouseY, 0, mouseX); //green blue color
             line(x1, y1, ptOne, ptTwo); //line 2, inverted line 1
        
             line(y1, x1, x1, y1) //line 3; connector line
       
            
              // incremental addition to coordinates 
             x1 += dx1;
             y1 += dy1;
             ptOne += dx2;
             ptTwo += dy2;  
             }  
       }
  }
  function mousePressed() {
    if (mode == 0) {
      mode = 1;
    } else {
      mode = 0;
    }
  }

The color, repetitive nature, string-like-ness, and “stretchy” behavior of this interaction remind me of the rainbow loom. Therefore, I have titled this piece “Rainbow Loom”.

Colorful Rainbow Loom Bracelet Rubber Bands Stock Photo, Picture And Royalty Free Image. Image 32648073.

Project 4 – String Art

sketch
var carWidth = 20;
var carHeight = 10;
var carA = 0;
var carB = 0;

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

function draw() {
    background(146, 234, 255);
    //left cloud
    fill(235);
    noStroke();
    circle(0, 50, 50);
    circle(40, 50, 70);
    circle(80, 70, 40);
    circle(90, 40, 50);
    //right cloud
    circle(250, 100, 50);
    circle(250, 60, 60);
    circle(300, 80, 100);
    circle(340, 50, 80);
    circle(360, 90, 90);
    //sun
    fill(255, 213, 0);
    circle(200, 300, 200);
    //black car
    fill(0);
    if (carA > width) {
        carA = -carWidth
    }
    carA = carA + 1;
    rect(carA, 240, carWidth, carHeight);
    //green car
    fill(0, 255, 0);

    stroke(100, 0, 0);
    strokeWeight(1);
    push();
    //left bridge lines
    translate(-30, -50);
    for (var i = 0; i <= 120; i += 10) {
        line(0, i + 180, i + 80, 300);
    }
    //middle bridge lines
    translate(100, 0);
    stroke(50, 0, 0);
    for (var i = 0; i <= 210; i += 15) {
        line(300, i + 90, 210 - i, 300);
    }
    //bottom of bridge
    translate(-70, 0);
    for (var i = 0; i <= 12; i += 1.5) {
        line(0, i + 301, 400, i + 301);
        fill(180, 0, 0);
        rect(0, i + 301, 400, 2);
    }
    pop();
    noFill();
    //left top bridge structure
    stroke(190, 0, 0);
    strokeWeight(5);
    rect(-10, 130, 15, 25);
    rect(-10, 160, 15, 25);
    rect(-10, 190, 15, 25);
    rect(-10, 220, 15, 29);
    //left bottom bridge structure
    noStroke();
    fill(150, 0, 0);
    rect(-7, 265, 15, 50);
    //right bridge structure circles
    noFill();
    stroke(190, 0, 0);
    strokeWeight(1);
    circle(340, 35, 7);
    circle(375, 35, 7);
    //right bridge structure
    stroke(180, 0, 0);
    strokeWeight(10);
    rect(340, 41, 35, 40);
    rect(340, 86, 35, 45);
    rect(340, 136, 35, 55);
    rect(340, 186, 35, 60);
    //right bottom bridge structure
    stroke(150, 0, 0);
    rect(340, 270, 35, 50);
    line(340, 270, 375, 305);
    line(375, 270, 340, 305);
    push();
    //right bridge lines
    translate(336, -140);
    stroke(150, 0, 0);
    strokeWeight(1);
    for (var i = 0; i <= 210; i += 15) {
        line(0, i + 180, i + 180, 390);
    }
    pop();
}

My depiction of the Golden Gate Bridge in San Fransisco!