Category: Project-04-String-Art

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.

reshin-string art

//Rachel Shin
//reshin
//15-104 Section B
// Project - 04 String Art

var shift = 10; // changing the lines position from one another (increments)
var a = 0;
var b = 0;
var c = 0;
var d = 0;
var e = 0;

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

function draw() {


// left middle to right middle: orange curves that cover canvas based on mouseX and e value
for (var e = 0; e < width; e+= shift){
	strokeWeight(0.5);
	stroke(245, 202, 147);
	line(mouseX, 300-e, e-100, e*0.5);
}


//bottom left to top right: pink rays
for (var c = 0; c < width; c += shift){
	strokeWeight(0.5);
	stroke(84, 77, 84);
	line(0, c-10, width, c*0.5);
}

let leftBound = 100;
let rightBound = 300;
let bound1 = constrain(mouseX, leftBound, rightBound);

//top middle to bottom middle: white rays to form off white rectangle with mouseX movement
for (var d = 0; d < height; d += shift){
	strokeWeight(0.5);
	stroke(225);
	line(bound1, mouseY, height/2, d*0.5);
}

//right top of canvas: green curves
 for (var a = 0; a < height; a += shift){
 	strokeWeight(0.5);
 	stroke(168, 201, 157);
 	line(a, 0, width, a*0.5);
 }

//top left of canvas: blue rays
for (var b = 0; b < width; b += shift){
	strokeWeight(0.5);
	stroke(157, 174, 201);
	line(0, 0, height, b*0.5);
	
}}

For this project, I wanted to implement a variety of strings that would, while visually very different, would produce a cohesive visual. I first arranged the code by creating a light green web-like string art at the top right corner and brought the rest of the art counter-clockwise. I then chose to push the off-white string art to the back to bring more attention to the colored lines. I also wanted to employ mouseX and mouseY and constrain to experiment more. I found it very interesting to layer strings on top of each other to create more dimensional art.