Category: Project-04-String-Art

Project 04

sketch
// Sowang Kundeling skundeli Section C Project 04


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

function draw() {
    background('lavender');
    noLoop();

    var x = 0;
    var y = 0;
    var x2 = 400;
    var y2 = 300;
    var numLines = 100;
    var diam;
    var d1 = 2;

    // cross shapes that make a butterfly
    stroke('teal');
    for (var i = 0; i <= numLines; i += 1) {
        line(width - i, y, x, y + i*3);
        line(i, y2, x2, y2 - i*3);
        line(width - i, y2, x, y2 - i*3);
        line(i, y, x2, y + i*3);
    }

    // circles
    noFill();
    stroke('darkblue');
    for(diam = d1; diam <= 37; diam *= 1.15) {
        ellipse(165, 30, diam, diam);
        ellipse(width - 165, 30, diam, diam);
    }

    // inside body
    stroke('lightblue');
    for (var i = 150; i <=250; i += 3) {
        line(width/2, height/3, i, height/2);
        line(width/2, height*(2/3), i, height/2);
    }

    // antenna
    stroke('darkblue');
    line(width/2, height/3.05, 165, 30);
    line(width/2, height/3.05, width-165, 30);
}

I made a butterfly!

Project 04 – String Art – srauch

Here’s my string art — when the mouse is pressed, it makes rainbow spiderwebs in each corner of the canvas. To erase the canvas and start over, press “e”.

sketch 

//Sam Rauch / srauch / section B
//this code generates four "rainbow spiderwebs", one in each corner of the canvas,
//as long as the mouse is pressed. When the user presses the "e" key, the canvas
//erases. 

// two points of A line
var ax1;
var ay1;
var ax2;
var ay2;

// two points of B line
var bx1;
var by1;
var bx2;
var by2;

// endpoints of connecting lines
var x1; 
var y1;
var x2; 
var y2;


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

function draw() {

    //draw spiderwebs in each quadrant of the canvas as long as mouse is pressed
    if (mouseIsPressed){
        strokeWeight(1);

        stringart();

        push();
        translate(200,0);
        stringart();
        pop();

        push();
        translate(200,150);
        stringart();
        pop();

        push();
        translate(0, 150);
        stringart();
        pop();
    }

    //erase canvas when user presses e key
    if (keyIsPressed){
        if (key == "e") {
            background(0);
        }
    }
}

//creates two lines, with 50 "stringers" between each line
function stringart() {
    //canvas size (200, 150)

    //randomly generate location of A line
    ax1 = random(10, 190);
    ay1 = random(10, 140);
    ax2 = random(10, 190);
    ay2 = random(10, 140);

    //randomly generate location of B line
    bx1 = random(10, 190);
    by1 = random(10, 140);
    bx2 = random(10, 190);
    by2 = random(10, 140);

    //assign first stringer's location connecting top of A and bottom of B
    x1 = ax1; 
    y1 = ay1;
    x2 = bx2;
    y2 = by2;

    //draw A line and B line in a random color
    stroke(random(255), random(255), random(255));
    line(ax1, ay1, ax2, ay2);
    line(bx1, by1, bx2, by2);
    strokeWeight(0.5);

    //draw 50 lines between A line and B line, incrementing 1/50th of distance between x values
    //and y values of each line
    for (var i = 0; i < 51; i+=1) {

        var x1Increment = (ax2- ax1) / 50;
        var y1Increment = (ay2 - ay1) / 50;
        var x2Increment = (bx1 - bx2) / 50;
        var y2Increment = (by1 - by2) / 50;

        //first stringer
        line (x1, y1, x2, y2);

        //changing position of stringer for each loop
        x1 += x1Increment;
        y1 += y1Increment;
        x2 += x2Increment;
        y2 += y2Increment;

    }

}

Project 4

String Art!

sketch
var numlines =18;
var dx = (240/2)/numlines;
var dy = (240/2)/numlines;

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

function draw() {
    strokeWeight(0.5);
    var x1 = 30;
    var y1 = 200;
    var x2 = 150;
    var y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    line(30,200,270,200);
    line(150,80,150,320);
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 += dx;
        y2 -= dy;
    }
    x1 = 270;
    y1 = 200;
    x2 = 150;
    y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 -= dx;
        y2 -= dy;
    }
    x1 = 30;
    y1 = 200;
    x2 = 150;
    y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 += dx;
        y2 += dy;
    }
    x1 = 270;
    y1 = 200;
    x2 = 150;
    y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 -= dx;
        y2 += dy;
    }
    translate(0,200)
    var x1 = 30;
    var y1 = 200;
    var x2 = 150;
    var y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    line(30,200,270,200);
    line(150,80,150,320);
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 += dx;
        y2 -= dy;
    }
    x1 = 270;
    y1 = 200;
    x2 = 150;
    y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 -= dx;
        y2 -= dy;
    }
    x1 = 30;
    y1 = 200;
    x2 = 150;
    y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 += dx;
        y2 += dy;
    }
    x1 = 270;
    y1 = 200;
    x2 = 150;
    y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 -= dx;
        y2 += dy;
    }
    translate(0,-400)
    var x1 = 30;
    var y1 = 200;
    var x2 = 150;
    var y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    line(30,200,270,200);
    line(150,80,150,320);
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 += dx;
        y2 -= dy;
    }
    x1 = 270;
    y1 = 200;
    x2 = 150;
    y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 -= dx;
        y2 -= dy;
    }
    x1 = 30;
    y1 = 200;
    x2 = 150;
    y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 += dx;
        y2 += dy;
    }
    x1 = 270;
    y1 = 200;
    x2 = 150;
    y2 = 200;
    var r = 255;
    var g = 192;
    var b = 203;
    for (var i = 0; i <= numlines; i += 1) {
        r -= i*3;
        g -= i*10;
        b -= i*6;
        stroke(r,g,b);
        line(x1,y1,x2,y2);
        x1 -= dx;
        y2 += dy;
    }
}

getting stringy

sketch
// Jaden Luscher
// jluscher
// section A
// project 4: string art

// increments along lines
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;

// line density
var numLines = 50;

// determines location / quadrant of strings1 function
// when mycount = 0, the top left quadrant is drawn
var mycount = 0;

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

function draw() {
  dx1 = (50-100)/numLines;
  dy1 = (150-300)/numLines; // split up L1

  dx2 = (200-200)/numLines;
  dy2 = (250-50)/numLines; // split up M1

  dx3 = (350-300)/numLines;
  dy3 = (150-300)/numLines; // split up R1

  dx4 = (350-50)/numLines; // split up horizontal line
  dy4 = (600-0)/numLines/2;  // split up long vertical (height)

  // brown lines
  push();
  strokeWeight(0.2);
  stroke("brown");
  bgStrings(350, 300, 200, 0);
  bgStrings(350, 300, 400, 0);
  bgStrings(50, 300, 200, 0);
  bgStrings(50, 300, 0, 0);
  pop();

  stroke(255);
  strokeWeight(0.7);
  outline(); // draw base lines (L1, M1, R1, L2, M2, R2)

  push();
  strings1(50, 150, 200, 250);  // call function to connect L1 to M1
  mycount = 1;
  strings1(350, 150, 200, 250);  // connect R1 to M1

  translate(width, height); // flip canvas to mirror strings
  rotate(PI);
  mycount = 0;  // reset to 0
  strings1(50, 150, 200, 250);  // L1 to M1
  mycount = 1;  // string1 uses "else" conditional do draw top right quadrant
  strings1(350, 150, 200, 250);  // R1 to M1
  pop();

  // lines at center of canvas (resemble parallelogram)
  strings2(200, 250, 50, 300);
  strings2(200, 350, 50, 300);

  noLoop();
}

function outline() {
  // top lines
  line(50, 150, 100, 300);  // L1
  line(200, 250, 200, 50);   // M1
  line(350, 150, 300, 300);   // R1

  // bottom lines
  line(50, 450, 100, 300);  // L2
  line(200, 550, 200, 350);  // M2
  line(350, 450, 300, 300);   // R2

  push();
  strokeWeight(2);
  line(width/2, 0, width/2, 250);
  line(width/2, height, width/2, 350);
  pop();

  // other lines
  line(0, height/2, width, height/2);   // horizontal line
}

function bgStrings(a, b, x, y) {
  for (var i = 0; i <= numLines*2; i += 1) {
    line(a, b, x, y);
    y += dy4;
  }
}

function strings1(x1, y1, x2, y2) {
  for (var i = 0; i <= numLines; i += 1) {
    line(x1, y1, x2, y2);
    if(mycount == 0) {  // top left quadrant
      x1 -= dx1;
      y1 -= dy1;
      x2 -= dx2;
      y2 -= dy2;
    } else {          // top right quadrant
      x1 -= dx3;
      y1 -= dy3;
      x2 -= dx2;
      y2 -= dy2;
    }
  }
}

function strings2(a, b, x, y) {
  for (var i = 0; i <= numLines; i += 1) {
    line(a, b, x, y);
    x += dx4;
  }
}

String Art?

sketch
//Emily Brunner, ebrunner
//Section C

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

}

function draw() {
background(200);
for(i = 0; i <= width; i += 10){                 //DARK RED LINES
    stroke("darkred");
    line(width/2 - width, height/2, i, 0);
    line(width/2 - width, height/2, i, height);
}
for(i = 0; i <= width; i += 10){
    stroke("darkred");
    line(width/2 + width, height/2, i, 0);
    line(width/2 + width, height/2, i, height);
}
for(i = 0; i <= width; i += 10){
    stroke("darkred");
    line(width/2 + width/2, height/2, i, 0);
    line(width/2 + width/2, height/2, i, height);
}
for(i = 0; i <= width; i += 10){
    stroke("darkred");
    line(width/2 - width/2, height/2, i, 0);
    line(width/2 - width/2, height/2, i, height);
}
for(i = 0; i <= width; i += 10){
    stroke("darkred");
    line(width/2 + width/3, height/2, i, 0);
    line(width/2 + width/3, height/2, i, height);
}for(i = 0; i <= width; i += 10){
    stroke("darkred");
    line(width/2 - width/3, height/2, i, 0);
    line(width/2 - width/3, height/2, i, height);
}
for(i = 0; i <= width; i += 10){
    stroke("darkred");
    line(width/2 + width/4, height/2, i, 0);
    line(width/2 + width/4, height/2, i, height);
}for(i = 0; i <= width; i += 10){
    stroke("darkred");
    line(width/2 - width/4, height/2, i, 0);
    line(width/2 - width/4, height/2, i, height);
}



for(i = 0; i <= width; i += 10){         //YELLOW LINES
    stroke(246, 190, 0);
    line(width/5, height/2, i, 0);
    line(width/5, height/2, i, height);
}
for(i = 0; i <= width; i += 10){
    stroke(246, 190, 0);
    line(width/3 + width/2, height/2, i, 0);
    line(width/3 + width/2, height/2, i, height);
}


for(i = 0; i <= height; i += 10){             //ORANGE LINES
    stroke("orange");
    line(width/5, height/2, 0, i);
    line(width/5, height/2, width, i);
}
for(i = 0; i <= width; i += 10){
    stroke("darkorange");
    line(width/3 + width/2, height/2, 0, i);
    line(width/3 + width/2, height/2, width, i);
}
}

I had trouble with the math of this project, and understanding how to get the lines to do what I wanted. I didn’t get to draw a picture that was similar to what I pictured or found on the internet, but I made something that visually looks appealing so I call that a win.

Project 04 String Art

For this project, I used the curves generated by the strings to make a sort of landscape. Because the shapes generated were pretty organic, I thought it would be fitting to make the subject matter organic as well.

sketch 

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 numLines = 50;

function setup() {
    createCanvas(400, 300);
    background(237, 233, 223);
    dx1 = (150-50)/numLines;
    dy1 = (300-300)/numLines;
    dx2 = (400-400)/numLines;
    dy2 = (100-400)/numLines;
    dx3 = (400-400)/numLines;
    dy3 = (100-400)/numLines;
    dx4 = (500-600)/numLines;
    dy4 = (200-500)/numLines;
    dx5 = (200-400)/numLines;
    dy5 = (0-500)/numLines;
    dx6 = (200-500)/numLines;
    dy6 = (200-500)/numLines;
    dx7 = (200-400)/numLines;
    dy7 = (20-500)/numLines;
    dx8 = (400-500)/numLines;
    dy8 = (200-300)/numLines;
}

function draw() {
    var x1 = 400;
    var y1 = 0;
    var x2 = 0;
    var y2 = 300;
    var x3 = 0;
    var y3 = 300;
    var x4 = 500;
    var y4 = 300;
    var x5 = -175;
    var y5 = 150;
    var x6 = 500;
    var y6 = 700;
    var x7 = 3000;
    var y7 = 300;
    var x8 = 0;
    var y8 = 400;
    for (var i = 0; i <= numLines; i += 1) {
        strokeWeight(1);
        stroke(229,193,208);
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
        stroke(249,199,169);
        line(x3, y3, x4, y4);
        x3 += dx3;
        y3 += dy3;
        x4 += dx4;
        y4 += dy4;
        stroke(241,144,167);
        line(x5, y5, x6, y6);
        x5 += dx5;
        y5 += dy5;
        x6 += dx6;
        y6 += dy6;
        stroke(221,115,81);
        line(x7, y7, x8, y8);
        x7 += dx7;
        y7 += dy7;
        x8 += dx8;
        y8 += dy8;
    }
    noLoop();
    fill(221,81,108);
    strokeWeight(0);
    triangle(300, 150, 325, 220, 275, 220); //tree to the right
    rect(290, 220, 20, 30);
    triangle(0, 100, -50, 290, 50, 290); //big tree in foreground
    rect(0, 290, 20, 300)
    triangle(170, 150, 165, 165, 175, 165); //tiny tree far away
    rect(168, 165, 4, 8)
    fill(255,192,0);
    ellipse(100, 40, 50, 50);
}

Rowing boats

My string art uses loops to generate wave patterns to create an ocean. In the process, I am trying to control the lines carefully by adjusting the start and end points’ values.

//Jason Jiang
//Section E

//Setting variables 
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 10;

//Creating Sky
function setup() {
    createCanvas(300, 400);
    background(135, 206, 235, 50);
    }
    


function draw() {
    
    //Waves
    stroke(0, 100, 184);
    var x1 = -30;
    var y1 = 300;
    var x2 = 600;
    var y2 = 500;
    strokeWeight(0);
    line(-30, 300, -50, 400);
    line(600, 300, 400, 500);
    strokeWeight(1);
    dx1 = (-50-(-30))/numLines;
    dy1 = (400-300)/numLines;
    dx2 = (600-300)/numLines;
    dy2 = -(500-300)/numLines;
    for (var i = 0; i <= numLines; i += 1) {
        strokeWeight(i*0.1)
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    

    x1 = 0;
    y1 = 300;
    x2 = 500;
    y2 = 500;
    strokeWeight(0);
    line(0, 300, -50, 400);
    line(400, 150, 500, 500);
    strokeWeight(1);
    dx1 = (-50-0)/+numLines;
    dy1 = (400-300)/numLines;
    dx2 = (500-400)/numLines;
    dy2 = -(500-150)/numLines;
    for (var i = 0; i <= numLines; i += 1) {
        strokeWeight(i*0.1)
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }


    x1 = -100;
    y1 = 300;
    x2 = 400;
    y2 = 300;
    strokeWeight(0);
    line(-100, 300, -250, 500);
    line(300, 200, 400, 300);
    strokeWeight(1)
    dx1 = (-150+50)/+numLines;
    dy1 = (500-300)/numLines;
    dx2 = -(500-400)/numLines;
    dy2 = -(300-200)/numLines;
    for (var i = 0; i <= numLines; i += 1) {
        strokeWeight((numLines-i)*0.1)
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    
    }


    x1 = -100;
    y1 = 300;
    x2 = 400;
    y2 = 320;
    strokeWeight(0);
    line(-100, 320, -350, 450);
    line(200, 350, 150, 320);
    strokeWeight(1)
    dx1 = (-250-150)/+numLines;
    dy1 = (450-250)/numLines;
    dx2 = -(350-300)/numLines;
    dy2 = -(400-350)/numLines;
    for (var i = 0; i <= numLines; i += 1) {
        strokeWeight((numLines-i)*0.1)
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    
    }
    

    x1 = -150;
    y1 = 200;
    x2 = 350;
    y2 = 350;
    strokeWeight(0);
    line(-150, 200, -250, 400);
    line(300, 300, 350, 350);
    strokeWeight(1)
    dx1 = (-250+100)/+numLines;
    dy1 = (300-100)/numLines;
    dx2 = -(500-400)/numLines;
    dy2 = -(300-200)/numLines;
    for (var i = 0; i <= numLines; i += 1) {
        strokeWeight((numLines-i)*0.05)
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    
    }
    

    //Boat
    //Lower Part
    x1 = 85;
    y1 = 260;
    x2 = 130;
    y2 = 270;
    strokeWeight(0);
    line(85, 260, 90, 272);
    line(130, 270, 120, 280);
    strokeWeight(1)
    dx1 = 2*(90-85)/numLines;
    dy1 = 2*(272-260)/numLines;
    dx2 = 2*(120-130)/numLines;
    dy2 = 2*(280-270)/numLines;
    for (var i = 0; i <= 0.5*numLines; i += 1) {
        strokeWeight((numLines-i)*0.15)
        stroke(i);
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    
    }
    //Upper Part
    x1 = 92;
    y1 = 259;
    x2 = 120;
    y2 = 265;
    strokeWeight(0);
    line(92, 261, 110, 230);
    line(120, 267, 110, 230);
    strokeWeight(1)
    dx1 = (110-92)/numLines;
    dy1 = (230-261)/numLines;
    dx2 = (110-120)/numLines;
    dy2 = (230-267)/numLines;
    for (var i = 0; i <= numLines; i += 1) {
        strokeWeight((numLines-i)*0.15)
        stroke(i+100);
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    
    }

    //Sun
    x1 = 200;
    y1 = 59;
     //Outer Ring
     for (var i = 0; i <= 10*numLines; i += 1) {
        stroke(253, 184, 19, 50)
        strokeWeight(1)
        push()
        translate(x1, y1);
        rotate(radians(i*180/numLines));
        line(0, 0, 0, 100);
        pop()
 
    }
    //Inner Ring
    for (var i = 0; i <= 10*numLines; i += 1) {
        stroke(200, 92, 60)
        strokeWeight(1)
        push()
        translate(x1, y1);
        rotate(radians(i*0.5*180/numLines));
        line(0, 0, 0, 50);
        pop()
    }

noLoop();

}