Month: September 2018

Christine Chen-Project-04-String Art

/*
Christine Chen
Section E
cyc1@andrew.cmu.edu
Assignment-04-B 
*/

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

function draw() {
    background(136, 164, 255); //background blue

    var increment = 7.5;
    //the smaller the increment it, the denser the lines

    //Blue pyramid-like lines in the center
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.9);
        stroke(0, 80, 105); 
        line (a, height, width - a, 0);
    }

    //LEFT LINES
    //rotate
    push(); 
    translate(width/2, height/2); 
    angleMode(DEGREES);
    rotate(90); 
    translate(-width/2, -height/2); 
        
    
    //Left side upper corner 
    //counting from outer blue lines to inner red lines
    //1st
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(0, 80, 105);
        line (0, a, a, 400);
    }
    
    //2nd 
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(50, 80, 105); 
        line (0, a, a, 300);
    }
    
    //3rd 
    for (var a = 0; a < width + 100; a = a + increment) {
        strokeWeight(0.4);
        stroke(100, 80, 105); 
        line (0, a, a, 250);
    }
    
    //4th
    for (var a = 0; a < width + 100; a = a + increment) {
        strokeWeight(0.4);
        stroke(150, 80, 105); 
        line (0, a, a, 220);
    }
    
    //5th
    for (var a = 0; a < width + 100; a = a + increment) {
        strokeWeight(0.4);
        stroke(255, 80, 105); 
        line (0, a, a, 200);
    }
    
    //Left side lower corner 
    //counting from outer blue lines to inner red lines
    //1st
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(0, 80, 105); 
        line (width, a, width - a, 400);
    }
    
    //2nd
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(50, 80, 105); 
        line (width, a, width - a, 300);
    }
    
    //3rd
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(100, 80, 105); 
        line (width, a, width - a, 250);
    }
    
    //4th
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(150, 80, 105); 
        line (width, a, width - a, 220);
    }
    
    //5th
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(255, 80, 105); //red line color
        line (width, a, width - a, 200);
    }

    pop(); 


    //RIGHT LINES
    //rotate
    push(); 
    translate(width/2, height/2); 
    angleMode(DEGREES);
    rotate(270); 
    translate(-width/2, -height/2); 
         
     
    //Right side lower corner
    //counting from outer blue lines to inner red lines
    //1st
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(0, 80, 105);
        line (0, a, a, 400);
    }
     
    //2nd 
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(50, 80, 105); 
        line (0, a, a, 300);
    }
     
    //3rd 
    for (var a = 0; a < width + 100; a = a + increment) {
        strokeWeight(0.4);
        stroke(100, 80, 105); 
        line (0, a, a, 250);
    }
     
    //4th
    for (var a = 0; a < width + 100; a = a + increment) {
        strokeWeight(0.4);
        stroke(150, 80, 105); 
        line (0, a, a, 220);
    }
     
    //5th
    for (var a = 0; a < width + 100; a = a + increment) {
        strokeWeight(0.4);
        stroke(255, 80, 105); 
        line (0, a, a, 200);
    }
     
    //Right side upper corner
    //counting from outer blue lines to inner red lines
    //1st
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(0, 80, 105); 
        line (width, a, width - a, 400);
         }
     
    //2nd
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(50, 80, 105); 
        line (width, a, width - a, 300);
    }
     
    //3rd
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(100, 80, 105); 
        line (width, a, width - a, 250);
    }
     
    //4th
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(150, 80, 105); 
        line (width, a, width - a, 220);
    }
     
    //5th
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(255, 80, 105); //red line color
        line (width, a, width - a, 200);
    }

    pop(); 
}

I think this project is particularly hard because it is so difficult to visualize what your codes are going to draw. However, once I got a part of my lines to work, it was easier to plan out what I want to create with the part I had. After playing around with my strings for a while, I finally settled with this piece where the left and right strings wraps around the middle to emphasize the forms of the pyramid-like strings in the center. Having the wrapping strings at the top and bottom isn’t as visually interesting and having the wrapping strings on four sides is just too much.

check out the mouse click~
sketch

var x; //increment variable for width for bottom curves
var y; //increment variable for height for bottom curves
var a; //increment variable for width for top curves
var b; //increment variable for height for top curves
var angleIncrement; //location for where to draw line in circle
var r; //radius of the center strings forming circle

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

function draw() {
    background(0);
    x = width / mouseX * 5;
    y = height / mouseY * 5;
    a = width / mouseY * 10;
    b = height / mouseX * 10;
    angleIncrement = mouseX / 100;
    r = width;

    //center circle
    if (mouseIsPressed) {
        for(var angle = 0; angle < 360; angle += mouseX / 100) {
            stroke(0, 0, 255);
            push();
            translate(width / 2, height / 2);
            line((r * sin(angle)) / tan(angle),
                  r * sin(angle),
                  r * sin(angle + angleIncrement) / tan(angle + angleIncrement),
                  r * sin(angle + angleIncrement));
            pop();
        }
    }

    //drawing the four curves on each corner of the canvas
    for(var i = 0; i < 50; i ++) {
        strokeWeight(1);

        //draws the first 20 red lines on the bottom left corner
        //draws green lines for the rest
        if (i >= 30) {
            stroke(0, 255, 0);
            line(0, y * i, x * i, height);
        }else {
            strokeWeight(1);
            stroke(i * 30, 0, 0);
            line(0, y * i,  (x * i), height);
        }

        //red on bottom right hand side 
        //stroke(255,0,0);
        stroke(i * 15, 0, 0);
        line(width, y * i, width - (x * i), height);

        //color changing curves on top 
        stroke(mouseX, 0, 255);
        line(0, height - (a * i), b * i, 0);
        line(width - (b * i), 0, width, height - (a * i));     
    }
}

I first started out making the most basic curve. After that, I began building symmetries and color changes into the code to make it more interactive and fun. Figuring out the circle took me a while since I haven’t touched math ever since junior year in high school, but the result was rewarding and I had a lot of fun doing so.