Category: Section C

sketch

//Ashley Chan
//Section C
//ashleyc1@andrew.cmu.edu
//Project-04-String-Art


var width = 400;
var height = 300;

var x1; //x of line
var y1; //y of line
var r; //rotational angle

function setup() {

    createCanvas(400, 300);

}

function draw() {
    background(249, 220, 187);

        x1 = 0; 
        y1 = 0;
        r = atan(height, width);

   for (var i = 0; i < 1000; i += 10) { 

        strokeWeight(.5);

        translate(width/2, height/2);
        rotate(r); //rotates lines so you can see it

        stroke(233, 100, 140); //pink
        line(x1 + 50, y1, 500, 1000); 
        line(x1, y1, 0, 500); 

        stroke(11, 47, 148); //navy
        line(x1, y1, -100, 500);

        stroke(0, 255, 252); //teal
        line(x1, y1, i + 200, 500); 
    }
}

Initially, I wanted to draw concentric circles for this project because the string art examples I found reminded me of spirographs and the fun “complex” circles children often make with a special tool. But after I made the image I wanted, for funsies, I continued altering my values and ended up with happier accidents. Below are some of the images I got along the way but this final image was the one that I personally responded to the most because of how different it was from the other iterations.

*move mouse between red and blue

sketch

var A = 5

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

function draw() {
    background(200);
    for (var i = 1; i < 50; i ++) { //draw 50 diagonal lines
      stroke(25,173,210)
      line(A*i, 0, 15*i, 150); //top blue lines
      line(15*i, 150, A*i, 300); //bottom blue lines
      stroke(0)
      line(15*i, 0, A*i, 150); //top black lines
      line(A*i, 150, 15*i, 300); //bottom black lines
    
    }
    if (mouseX > width/2){ //in mouse goesto blue, lines are less slanted
        A = 10
    }else{A = 5} //if red the lines are origionaly slanted

    //draws that 50% opaque box's
    push()
    strokeWeight(0)
    fill(255,0,0,50)
    rect(0,0,width/2,height)
    
    fill(0,0,255,50)
    rect(width/2,0,width/2,height)
    pop()
}

I thought this project was very interesting. Unlike previous weeks, this project was more about learning to use the program, in this example with “for” statements. I wanted to make a very intricate web of lines and I wanted to make them move. I made it so the web looks far more concentrated when you drag your mouse from one side to the other.

My string art design is fairly simple. Once understanding the concept of a for loop, I was able to quickly apply it to the creation of this string art. There were only a few small problems I faced, such as having to reverse the direction of the increments by subtracting them from the height. Besides little technical/syntax troubles, the overall project was quick and straight forward.

sketch

var yincrement = 15; //increments along y-axis
var xincrement = 20; //increments along x-axis
var x1position = 1; //points constantly flush left
var y1position = 299; //points constantly flush bottom
var x2position = 399; //points constantly flush right
var y2position = 1; //points constantly flush top

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

function draw() {
	for(var i = 0; i < 21; i += 1) {
		strokeWeight(0.5);
		stroke(255); //white
		line(x1position, yincrement * i, xincrement * i, y1position); //lines between left and bottom
		stroke(255, 0, 0); //red
		line(x2position, yincrement * i, xincrement * i, y2position); //lines between right and top
		stroke(0, 255, 0); //green
		line(xincrement * i, y1position, x2position, height - yincrement * i); //lines between bottom and right
		stroke(0, 0, 255); //blue
		line(x1position, height - yincrement * i, xincrement * i, y2position); //lines between top and left
	}
}

afukuda-project-04

/* 
 * Name | Ai Fukuda 
 * Course Section | C 
 * Email | afukuda@andrew.cmu.edu
 * Assignment | 04-b
 */ 

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

function draw() {
    background(206, 236, 236);

    var x1;                     // x-coordinate of vertices 
    var y1 = 160;               // initial y-coordinate of vertices 

// PURPLE LINES (THICK)
    strokeWeight(1.5);                           
    stroke(204, 178, 213);

    for (var x1 = 130; x1 < 201; x1+=10) {      // top-left lines    
        line(100, 50, x1, 120+(y1-x1));
    }

    for (var x1 = 200; x1 < 271; x1+=10) {      // top-right lines 
        line(300, 50, x1, x1-120); 
    }

    for (var x1 = 130; x1 < 201; x1+=10) {      // bottom-left lines     
        line(100, 250, x1, x1+20);
    }

    for (var x1 = 200; x1 < 271; x1+=10) {      // bottom-right lines 
        line(300, 250, x1, 420-x1);          
    }

// PURPLE LINES (THIN)
    strokeWeight(1);
     for (var x1 = 130; x1 < 201; x1+=10) {     // top-left lines     
        line(200, 150, x1, 120+(y1-x1));
    }

    for (var x1 = 200; x1 < 271; x1+=10) {      // top-right lines 
        line(200, 150, x1, x1-120); 
    }

    for (var x1 = 130; x1 < 201; x1+=10) {      // bottom-left lines     
        line(200, 150, x1, x1+20);
    }

    for (var x1 = 200; x1 < 271; x1+=10) {      // bottom-right lines 
        line(200, 150, x1, y1+260-x1);          
    }


// ORANGE LINES 
    strokeWeight(1);           
    stroke(253, 205, 167);     

    // top set of lines 
    for (var x1 = 130; x1 < 201; x1+=10) {       // top-left lines     
        line(200, 20, x1, 120+(y1-x1));
    }

    for (var x1 = 200; x1 < 271; x1+=10) {      // top-right lines 
        line(200, 20, x1, x1-120); 
    }

    // left set of lines 
    for (var x1 = 130; x1 < 201; x1+=10) {       // left-top lines     
        line(70, 150, x1, 120+(y1-x1));
    }

    for (var x1 = 130; x1 < 201; x1+=10) {       // left-bottom lines   
        line(70, 150, x1, x1+20);
    }

    // bottom set of lines 
    for (var x1 = 130; x1 < 201; x1+=10) {       // bottom-left lines     
        line(200, 280, x1, x1+20);
    }

     for (var x1 = 200; x1 < 271; x1+=10) {      // bottom-right lines 
        line(200, 280, x1, y1+260-x1);         
    }

    // right set of lines 
     for (var x1 = 200; x1 < 271; x1+=10) {     // top-right lines 
        line(330, 150, x1, x1-120); 
    }

    for (var x1 = 200; x1 < 271; x1+=10) {      // bottom-right lines 
        line(330, 150, x1, y1+260-x1);         
    }

// BLUE LINES 
    strokeWeight(1);           
    stroke(140, 164, 212); 

    line(130, 150, 200, 80);
    line(200, 80, 270, 150);
    line(130, 150, 200, 220);
    line(200, 220, 270, 150);

// BLUE VERTICES 
/*
    strokeWeight(3);                            
    fill(140, 164, 212);

    point(100, 50);                     // primary geometry vertices (purple)
    point(300, 50);
    point(100, 250); 
    point(300, 250);

    point(200, 20);                    // secondary geometry vertices (orange)
    point(70, 150);
    point(200, 280);
    point(330, 150);

    point(200, 150);                   // center of geometry 
*/
    
}

I was able to generate this string art by simply declaring two variables: one for the initial x-coordinate and another for the y-coordinate. I began with the top-left set of purple curves, and translated those appropriately to create the geometry. Things that I could improve are: using rotation to make the code much simpler, and to use variables so the geometry becomes dynamic.

Process work: