Project 4: String Art

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

function draw() {
  background(140);

  
  for (var i = 0; i < 590; i++) {

 
  var x1 = 0;
  var x2 = i*width/30;
  var y1 = i*height/59;
  var y2 = height;

  strokeWeight(0.7); 

  
  stroke(200, 103, 98);
  line(x1, y1, x2+100, y2);


  stroke(155,109,90);
  line(x2, 0, x1*2, height-y1);

  
  stroke(147,55,91);
  line(width, height-y1, x2*2, y2);


  stroke(46,56,64);
  line(x2, 4, width, y1);

  stroke(65,50,123);
  line(width+200, height-190, x2-999, height);

  
  stroke(200,85,45);
  line(width/2,height/2, x2, y1);
  }
}

Project-04

sketch
//Nami Numoto
//mnumoto
//Section A


var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;
var r = 0; //red
var g = 0; //green
var b = 0; //blue

function setup() {
    createCanvas(400, 400);
    background(200);
    line(50, 50, 150, 300);
    line(300, 300, 350, 100);
    var r = random(0,255);
    var g = random(0,255);
    var b = random(0,255);

    dx1 = (150-50)/numLines;
    dy1 = (300-50)/numLines;
    dx2 = (350-300)/numLines;
    dy2 = (100-300)/numLines; //shape 1 (given)

    ex1 = 2 * (150-50)/numLines;
    ey1 = 2 * (300-50)/numLines;
    ex2 = 2 * (350-300)/numLines;
    ey2 = 2 * (100-300)/numLines; //shape 2

    fx1 = 4 * (150-50)/numLines;
    fy1 = 4 * (300-50)/numLines;
    fx2 = 4 * (350-300)/numLines;
    fy2 = 4 * (100-300)/numLines; //shape 3
}

function draw() {
    var x1 = 50;
    var y1 = 50;
    var x2 = 300;
    var y2 = 300;
    stroke(r, 0, 0); //set the stroke colour to some shade of red
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    stroke(0, g, 0); //set the stroke colour to some shade of green
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += ex1;
        y1 += ey1;
        x2 += ex2;
        y2 += ey2;
    }
    stroke(0, 0, b); //set the stroke colour to some shade of blue
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += fx1;
        y1 += fy1;
        x2 += fx2;
        y2 += fy2;
    }
    noLoop();
}

I’m not sure why it’s showing up the way it is – baseline, I struggled a lot with this project (mostly technically).

The idea was to make a fractal of sorts by squaring (hence the doubling and quadrupling) the original shape. I also intended to make each segment a different shade of red, blue, and green, infinitely.

Any suggestions? I was going to do a loop, but I was running low on time so I simply did it manually three times.

Project-04-String-Art

var dx1; var dy1; var dx2; var dy2; var numLines = 43; function setup() { createCanvas(400, 400); background (0); dx1 = (100)/numLines; dy1 = (250)/numLines; dx2 = (50)/numLines; dy2 = (-200)/numLines; } function draw() { var x1 = 0;// dark blue wave var y1 = 350; var x2 = 400; var y2 = 300; for (var i = 0; i The inspiration for this string art project were ocean waves, created by three different shades of waves.

Project-04: String Art

sketch-beansDownload
//Yeon Lee, Section C
//Project-04: String Art

var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var numOfLines = 50;
var angle = 0;

function setup() {
    createCanvas(400, 300);
    background(244, 226, 116);
    dx = width / numOfLines;
    dy = height / numOfLines;    
    dx2 = 100 / numOfLines;
    dy2 = 200 / numOfLines;    
    dx3 = -100 / numOfLines;
    dy3 = -200 / numOfLines;
}

function draw() {
    var x1 = 0;
    var y1 = 0;
    var x2 = 0;
    var y2 = height;
    var x3 = 0;
    var y3 = 0;
    var x4 = width;
    var y4 = 0;
    var x5 = 0;
    var y5 = 0;
    var x6 = 0;
    var y6 = height / 3;    
    var x7 = width;
    var y7 = 0;
    var x8 = 0;
    var y8 = 0;    
    var x9 = 300;
    var y9 = 0;
    var x10 = 400;
    var y10 = 300;
    var x11 = 300;
    var y11 = 400;
    var x12 = 400;
    var y12 = 300;

    //draw torquoise lines on the left bottom
    for (var i = 0; i <= numOfLines; i ++) {
        stroke(123, 169, 147);
        line(x1, y1, x2, y2);
        y1 += dy;
        x2 += dx;
    }

    //draw pink lines on top right in the very back
    for (var i = 0; i <= numOfLines; i ++) {
        stroke(240,192,165);
        line(x3, y3, x4, y4);
        x3 += dx2;
        y4 += dy2;
    }    

    //draw purple lines on the left
    for (var i = 0; i <= numOfLines; i ++) { 
        stroke(177, 131, 222);
        line(x5, y5, x6, y6);
        x5 += dx2;
        y6 += dy2;
    }

    //draw light orange lines in the back
    for (var i = 0; i <= numOfLines; i ++) { 
        stroke(255, 195, 153);
        line(x7, y7, x8, y8);
        x7 += dx2;
        y8 += dy2;
    }    

    //draw light yellow lines in the back
    for (var i = 0; i <= numOfLines; i ++) {
        stroke(255,245,153);
        line(x7, y7, x8, y8);
        x7 += dx2;
        y8 += dy2;
    }    

    //draw light green lines on top right
    for (var i = 0; i <= numOfLines; i += 1) {
        stroke(127, 255, 180);
        line(x9, y9, x10, y10);
        x9 += dx3;
        y10 += dy3;
    }

    //draw blue lines on bottom right
    for (var i = 0; i <= numOfLines; i ++) {
        stroke(102,116,255);
        line(x11, y11, x12, y12);
        x11 += dx3;
        y12 += dy3;
    }

    noLoop();
}

I enjoyed playing around with variables to change the colors and shapes of the lines around. By overlapping lines on top of each other, one by one, I loved to mixture of colors and harmony it created among themselves.

Project 4: String Art

wpf-string-art
//Patrick Fisher Section B

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

function setup() {
    createCanvas(400, 300);
    background(50);
    fill(10);
    rectMode(CENTER);
    rect(200,150,250,250)
    dx1 = (275-25)/numLines;
    dy1 = (275-25)/numLines;
    dx2 = (25-275)/numLines;
    dy2 = (25-275)/numLines;
}

function draw() {
    var x1 = 75;
    var y1 = 25;
    var x2 = 275;
    var y2 = 275;
    stroke(255,0,0,200);
    for (var i = 0; i <= numLines; i += 1) { //crates x design that goes from upper left to bottom right
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;

    }

    x1 = 375;
    y1 = 25;
    x2 = 75;
    y2 = 275;
    for ( i = 0; i <= numLines; i += 1) { //creates x design that goes from lower left to upper right
        line(x1, y1, x2, y2);
        x1 += -dx1;
        y1 += dy1;
        x2 += -dx2;
        y2 += dy2;
    }

    dx1 = (325-25)/numLines;
    dy1 = (75-25)/numLines;
    dx2 = (25-275)/numLines;
    dy2 = (25-0)/numLines;

    x1 = 75;
    y1 = 25;
    x2 = 325;
    y2 = 75;
    stroke(0,0,255,200);
    for ( i = 0; i <= numLines; i += 1) { //creates the blue pattern at the top
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;

    
    }



    x1 = 325;
    y1 = 75;
    x2 = 75;
    y2 = 25;
    for ( i = 0; i <= numLines; i += 1) { //creates the second half of the top blue pattern
        line(x1, y1, x2, y2);
        x1 += -dx1;
        y1 += -dy1;
        x2 += -dx2;
        y2 += -dy2;

    
    }

    x1 = 325;
    y1 = 175;
    x2 = 75;
    y2 = 250;
    stroke(0,0,255,200);
    for ( i = 0; i <= numLines; i += 1) { //creates the botom blue pattern
        line(x1, y1, x2, y2);
        x1 += -dx1;
        y1 += dy1;
        x2 += -dx2;
        y2 += dy2;   
    }

    x1 = 75;
    y1 = 250;
    x2 = 325;
    y2 = 175;
    stroke(0,0,255,200);
    for ( i = 0; i <= numLines; i += 1) { //creates the top half of the bottom blue pattern
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += -dy1;
        x2 += dx2;
        y2 += -dy2;

    }
    noLoop();
}

I really struggled with this project, both creatively and technically. I had to take the sample code and finger with it mostly randomly to create anything that I was remotely satisfied with it.

Project 4: String Art

sketch

var dx1;
var dy1;
var dx2;
var dy2;
var numLines1 = 20;
var numLines2 = 20;
var numLines3 = 20;

function setup() {
    createCanvas(400, 300);
    background(220);
    line(100, 50, 300, 200); // top left triangle
    line(100, 50, 150, 250);
    dx1 = (100-100)/numLines1;
    dy1 = (50-50)/numLines1;
    dx2 = (300-150)/numLines1;
    dy2 = (250-200)/numLines1;
    line(350, 25, 200, 275); // top right triangle
    line(350, 25, 50, 125);
    dx3 = (350-350)/numLines2;
    dy3 = (25-25)/numLines2;
    dx4 = (200-50)/numLines2;
    dy4 = (275-125)/numLines2;
    line(100, 50, 50, 125); // connection lines
    line(350, 25, 300, 200);
    dx5 = (100-50)/numLines3;
    dy5 = (125-50)/numLines3;
    dx6 = (350-300)/numLines3;
    dy6 = (200-25)/numLines3;
}

function draw() {
    var x1 = 100; // top left triangle
    var y1 = 50;
    var x2 = 150;
    var y2 = 250;
    for (var i = 0; i <= numLines1; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 -= dy1;
        x2 += dx2;
        y2 -= dy2;
    }
    var x3 = 350; // top right triangle
    var y3 = 25;
    var x4 = 50;
    var y4 = 125;
    for (var j = 0; j <= numLines2; j += 1) {
        line(x3, y3, x4, y4);
        x3 += dx3;
        y3 += dy3;
        x4 += dx4;
        y4 += dy4;
    }
    var x5 = 100;
    var y5 = 50;
    var x6 = 350;
    var y6 = 25;
    for (var k = 0; k <= numLines3; k += 1) {
        line(x5, y5, x6, y6);
        x5 -= dx5;
        y5 += dy5;
        x6 -= dx6;
        y6 += dy6;
    }
    noLoop();
}

I wanted to see if I could create something that resembled a stage without having a lot of shapes. I ultimately chose to focus on the floor and lights to create both the playing space and the audience that surrounds it.

Project 4: String Art

string art
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
var dx5;
var dy5; 
var dx6;
var dy6;
var dx7;
var dy7;
var dx8;
var dy8;
var dx9;
var dy9;
var dx10;
var dy10;
var lines = 120; //for the left & right strings 
var lines2 = 100; //for the top-> bottom & left -> right strings
var lines3 = 20; //for center strings

function setup() {
    createCanvas(400, 300);
    background(220);
   
    //left blue+green strings
    line(0, 0, 0, 300); //initial line
    line(0, 300, 400, 0); //ending line
    dx1 = (0-0)/lines;
    dy1 = (300-0)/lines;
    dx2 = (400-0)/lines;
    dy2 = (0-300)/lines;

    //right blue+red strings
    line(0, 300, 400, 0); //initial line
    line(400, 0, 400, 300); //ending line
    dx3 = 400/lines;
    dy3 = -300/lines;
    dx4 = 0/lines;
    dy4 = 300/lines;

    //top -> bottom strings 
    line(0, 0, 400, 0); //initial line
    line(0, 300, 400, 300); //ending line
    dx5 = 400/lines2;
    dy5 = 0/lines2;
    dx6 = 400/lines2;
    dy6 = 0/lines2;

    //left -> right strings 
    line(0, 0, 0, 300); //initial line
    line(400, 0, 400, 300); //ending line
    dx7 = 0/lines2;
    dy7 = 300/lines2;
    dx8 = 0/lines2;
    dy8 = 300/lines2;

    //center piece
    dx9 = 100/lines3;
    dy9 = 150/lines3;
    dx10 = 100/lines3;
    dy10 = 150/lines3;
    
}

function draw() {

    //left -> right strings initial points
    var x7 = 0;
    var y7 = 0;
    var x8 = 400;
    var y8 = 300;

    //draw left -> right strings 
    for (var i = 0; i <= lines2; i += 1) {
        stroke(255, 95, 90); //red
        line(x7, y7, x8, y8);
        x7 += dx7;
        y7 += dy7;
        x8 -= dx8;
        y8 -= dy8;
    }


    //top -> bottom strings initial points
    var x5 = 0;
    var y5 = 0;
    var x6 = 400;
    var y6 = 300;

    //draw top -> bottom strings 
    for (var i = 0; i <= lines2; i += 1) {
        stroke(255, 105, 0); //orange
        line(x5, y5, x6, y6);
        x5 += dx5;
        y5 += dy5;
        x6 -= dx6;
        y6 -= dy6;
    }

    //left blue+green strings initial points
    var x1 = 0; 
    var y1 = 0;
    var x2 = 0;
    var y2 = 300;

    //draw blue+green strings
    for (var i = 0; i <= lines; i+= 1) { 
        stroke(0, random(50, 160), random(100, 200)); //pick random color from green & blue
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    //right blue+red strings initial points
    var x3 = 0;
    var y3 = 300;
    var x4 = 400;
    var y4 = 0;

    //draw blue+red strings
    for (var i = 0; i <= lines; i+= 1) { 
        stroke(random(80, 150), 0, random(100, 200)); //pick random color from red & blue
        line(x3, y3, x4, y4);
        x3 += dx3;
        y3 += dy3;
        x4 += dx4;
        y4 += dy4;
    }

    //center piece initial points
    var x9 = 100;
    var y9 = 150;
    var x10 = 300;
    var y10 = 150;

    //draw center piece
    for (var i = 0; i <= lines3; i += 1) {
        stroke(225, 210, 225); //white
        line(x9, y9, x10, y10);
        x9 += dx9;
        y9 += dy9;
        x10 -= dx10;
        y10 -= dy10;

    }

    noLoop();
}

I found it a bit challenging to visualize the way the strings would work in my head, and so the drafting part was quite difficult. However, I really liked how the strings overlapping created dimension in the piece.

Project-04-String-Art

sketch

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

function setup() {
    createCanvas(400, 300);
    background(255, 243, 79);
}

function draw() {
//reference function
    for(var i = 0; i < 200; i ++){

        var x1 = 0;
        var x2 = i*width/25;
        var y1 = i*height/50;
        var y2 = height;

        strokeWeight (0.5); //set thickness of the line

        stroke(13, 66, 22); // right green center of the butterfly 
        line(200+x1,y1,x2+100, y2);

        stroke(13, 66, 22); // left green center of the butterfly
        line(400-(200+x1),y1,400-(x2+100), y2);


        stroke(138, 233, 255); // right blue center of the butterfly 
        line(200+x1,y1,x2+100, y2+50);

        stroke(138, 233, 255); // left green center of the butterfly
        line(400-(200+x1),y1,400-(x2+100), y2+50);



        stroke(209, 102, 255);
        line(350+x1,y1,x2+100, y2);

        stroke(209, 102, 255);
        line(400-(350+x1),y1,400-(x2+100),y2);

        stroke("magenta");
        line(x1,y1,x2,y2);

        stroke("magenta");
        line(x1,300-y1,x2,300-y2);

        stroke("magenta");
        line(400-x1,y1,400-x2,y2);

        stroke("magenta");
        line(400-x1,300-y1,400-x2,300-y2);

        var x1 = 0;
        var x2 = i*width/25;
        var y1 = i*height/70;
        var y2 = height;

        stroke("orange");
        line(x1,y2,x2,y1);

        stroke("orange");
        line(400-x1,y2,400-x2,y1);

    }
    noLoop();
}

Project 04: String Art

sketch

//Tim Nelson-Pyne
//tnelsonp
//Section C

//shape 1
var ax1;
var ay1;
var ax2;
var ay2;

//shape 2
var by1;
var bx1;
var by2;
var bx2;

//shape 3
var cy1;
var cx1;
var cy2;
var cx2;

var numLines = 2;
var angle = 0;

//controls green value
var g = 0;
var gMod = 0;

//controls blue value
var b = 0;
var bMod = 0;

function setup() {
    createCanvas(400, 300);
    background(0);
    
    //shape 1
    ax1 = (100)/numLines;
    ay1 = (0)/numLines;
    ax2 = (100)/numLines;
    ay2 = (0)/numLines;

    //shape 2
    bx1 = (0)/numLines;
    by1 = (0)/numLines;
    bx2 = (0)/numLines;
    by2 = (0)/numLines;

    //shape 3
    cx1 = (100)/numLines;
    cy1 = (0)/numLines;
    cx2 = (0)/numLines;
    cy2 = (0)/numLines;
    
}

function draw() {

    //if you hold down the mouse it makes the canvas rotate around your mouse position
    if (mouseIsPressed == true){
        translate(mouseX, mouseY);
        rotate(radians(angle));
        angle += 1;
    }
    

    //brings green levels up and down based on sin() graph
    //maped between zero and 255
    gMod += 0.01;
    g = sin(gMod);
    g = map(g, -1, 1, 0, 255);

    //brings blue levels up and down based on cos() graph
    //maped between zero and 255
    bMod += 0.01;
    b = cos(bMod);
    b = map(b, -1, 1, 0, 255);


    //set stroke color and weight
    stroke(255, g, b);
    strokeWeight(.25);

    var x1 = min(mouseX, width);
    var y1 = min(mouseY, 246);
    var x2 = 0;
    var y2 = 0;

    //shape 1
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += ax1;
        y1 += ay1;
        x2 += ax2;
        y2 += ay2;
    }


    //green to zero for shape 2
    g = 0;
    stroke(255, g, b);

    var x1 = width;
    var y1 = map(mouseY, 0, height, 250, height);
    var x2 = 0;
    var y2 = map(mouseY, 0, height, 250, height);

    //shape 2
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += bx1;
        y1 += by1;
        x2 += bx2;
        y2 += by2;
    }

    
    //set blue to zero for shape 3 and return green to sin() based value
    b = 0;
    g = sin(gMod);
    g = map(g, -1, 1, 0, 255);
    stroke(255, g, b);

    var x1 = min(mouseX, width);
    var y1 = constrain(mouseY, 150, 246);
    var x2 = width;
    var y2 = 150;

    //shape 3
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += cx1;
        y1 += cy1;
        x2 += cx2;
        y2 += cy2;
    }
    


}

I chose to make some interactive string art. Moving the cursor around changes the drawing and clicking and dragging changes it even more. I also decided to incorporate shifting colors to make the drawing change a bit more over time.