Month: September 2019

My process started with trying to figure out how to get the strings to “curve” (or have the illusion to curve). After drawing a bunch of hatch marks didn’t work, I studied the photos on the blog of the 7th grade teacher until I understood the pattern. After a bit of experimentation, I was able to get the formula for my for loop. Then I just kept modifying it and adding colors till I was satisfied.

sketchsydsal

    var lx = 20;//width divided by 20
    var ly = 15;//height divided by 20

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

function draw() {
    background(255, 150, 213);

    //red heart
    fill("red");
    noStroke();
    ellipse(width/2 - 23, height/2, 50,50);//left heart bulb
    ellipse(width/2 + 23, height/2, 50,50);//right heart bulb
    triangle((width / 2) - 55,height / 2 + 10, width / 2,(height / 2) 
        + 60, (width / 2) + 55,height / 2 + 10);//base of heart
    
    //makes curve on top right
    for(var i = 0; i < lx; i += 1){//sets up increment and # of elements
        stroke(247, 25, 25);
        line(width - lx * i,0, width,height - ly * i);//draws lines
    }
    //makes curve on top left
    for(var j = 0; j < lx; j += 1){//sets up increment and # of elements
        stroke(250, 90, 96);
        line(0 + lx * j,0, 0,height - ly * j);//draws lines
    }
    //makes curve on bottom left
     for(var t = 0; t < lx; t += 1){//sets up increment and # of elements
        stroke(255, 150, 175);
        line(width - lx * t,height, 0,height - ly * t);//draws lines
    }
    //makes second curve on bottom right
     for(var z = 0; z < lx; z += 1){//sets up increment and # of elements
        stroke(255, 201, 201);
        line(height - lx * z,height, 0,height - ly * z);//draws lines
    }
    //makes second curve on top right
     for(var z = 0; z < lx; z += 1){//sets up increment and # of elements
        stroke(255, 201, 201);
        line(height - lx * z,0, width,height - ly * z);//draws lines
    }
}

sketch

/* Nadia Susanto
   nsusanto@andrew.cmu.edu
   Section B
   Project 04 - String Art */


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

}

function draw() {
    background("black");
    for (var i = 0; i < 100; i += 5) {
      //green line
      strokeWeight(1);
      stroke(29,151,98);
      //negative slope
      line(i - 50, -i, i*2, 300);

      //blue line
      strokeWeight(2);
      stroke(28,60,116);
      line(0, i + 20, width - i, i*3);

      //dark green line
      strokeWeight(3);
      stroke(1,50,36);
      //positive slope
      line(0, 350, i + 200, i*2);

      //red line
      strokeWeight(1);
      stroke(189, 3, 0);
      //right negative slope
      line(i - 50, -i, width, i + 20);
      //positive slope
      line(100, 400, 400, 50 + i*2);
      //left negative slope
      line(0, 50 + i*2, i*4, 100 + i*4);

      //yellow line
      stroke(218,149,1);
      strokeWeight(1);
      //negative slope
      line(350, i - 50, 400, 100 + i*3);
      //positive slope
      line(300, 400, 400, 100 + i*2);

    }

}

I was inspired by the tartan pattern and tried to code it similarly to this picture above. It was a challenging project because it took me a while to get used to it, but overall I am pretty happy with the result. It was fun experimenting with all the different curves and lines that can be a result of just changing a single number or variable.