Project 04 String Art

Throughout this project, I felt it was a little difficult to figure out what I wanted to create, but it was interesting to consider how forms could appear with the use of repeated lines. Originally, I was thinking about a butterfly with the ground and sky as a background, but I decided to use translate and rotate to twist the ground to instead become colorful lines emphasizing the butterfly’s movement (instead of the ground) which I think makes it a little more fun and dynamic.

project3 

// Rachel Legg / rlegg / Section C

var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
var numLines = 15;

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

function draw() {

 background(0);
    
    //move over orgin and rotate so aligns w/ butterfly
    push();   
    translate(-132, -20);  
    rotate(radians(15));


    //light blue lines toward center @ slant
    stroke(0);
    strokeWeight(1);
    line(0, 300, 10, 390);
    line(250, 250, 200, 350);
    dx1 = (10-0)/numLines;
    dy1 = (390 - 300)/numLines;
    dx2 = (350-250)/numLines;
    dy2 = (200 - 250)/numLines;


    stroke(135, 206, 235);    //lightblue 
    var x1 = 0;
    var y1 = 400;
    var x2 = 180;
    var y2 = 300;
    for (var i = 0; i <= numLines; i += 1){
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    //layer and tranlate green group to the right
    push();
    translate(0, 25);
    rotate(radians(-15));    //more tilt and move orgin
    noStroke();
    strokeWeight(1);
    line(0, 300, 10, 390);
    line(250, 250, 200, 350);
    dx1 = (10-0)/numLines;
    dy1 = (390 - 300)/numLines;
    dx2 = (350-250)/numLines;
    dy2 = (200 - 250)/numLines;


    stroke(144, 238, 144);         //light green
    var x1 = 0;
    var y1 = 400;
    var x2 = 180;
    var y2 = 300;
    for (var i = 0; i <= numLines; i += 1){
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    pop();

    //layer and tranlate pink group to the right
    push();
    translate(0, 55);
    rotate(radians(-30));
    noStroke();
    strokeWeight(1);
    line(0, 300, 10, 390);
    line(250, 250, 200, 350);
    dx1 = (10-0)/numLines;
    dy1 = (390 - 300)/numLines;
    dx2 = (350-250)/numLines;
    dy2 = (200 - 250)/numLines;


    stroke(255, 0, 127);         //pink
    var x1 = 0;
    var y1 = 400;
    var x2 = 180;
    var y2 = 300;
    for (var i = 0; i <= numLines; i += 1){
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    pop();


    //layer and tranlate purple group to the right
    push();
    translate(0, 120);
    rotate(radians(-45));
    noStroke();
    strokeWeight(1);
    line(0, 300, 10, 390);
    line(250, 250, 200, 350);
    dx1 = (10-0)/numLines;
    dy1 = (390 - 300)/numLines;
    dx2 = (350-250)/numLines;
    dy2 = (200 - 250)/numLines;


    stroke(147, 112, 219);         //purple
    var x1 = 0;
    var y1 = 400;
    var x2 = 180;
    var y2 = 300;
    for (var i = 0; i <= numLines; i += 1){
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    pop();

    //layer and tranlate yellow group to the right
    push();
    translate(0, 170);
    rotate(radians(-50));      
    noStroke();
    strokeWeight(1);
    line(0, 300, 10, 390);
    line(250, 250, 200, 350);
    dx1 = (10-0)/numLines;
    dy1 = (390 - 300)/numLines;
    dx2 = (350-250)/numLines;
    dy2 = (200 - 250)/numLines;


    stroke("yellow");         //yellow
    var x1 = 0;
    var y1 = 400;
    var x2 = 180;
    var y2 = 300;
    for (var i = 0; i <= numLines; i += 1){
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    pop();
    pop();
    
    


//butterfly!!!
//blue part of wings : top left to bottom right
    
    push();
    translate(175, 15);    //make smaller and move to align w/ lines
    rotate(radians(12));
    scale(2/5);
    

    stroke("blue");
    strokeWeight(2);        
    line(0, 0, 50, 180);
    line(250, 220, 300, 400);
    dx1 = (50 - 0)/numLines;
    dy1 = (180 - 0)/numLines;
    dx2 = (300 - 250)/numLines;
    dy2 = (400 - 220)/numLines;

    var x1 = 0;
    var y1 = 0;
    var x2 = 250;
    var y2 = 220;
    for (var i = 0; i <= numLines; i += 1){
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }


//magenta part of wings : top right to bottom left
    
    stroke("magenta");     
    strokeWeight(2);
    line(50, 220, 0, 400);
    line(300, 0, 250, 180);
    dx3 = (0-50)/numLines;
    dy3 = (400 - 220)/numLines;
    dx4 = (250 - 300)/numLines;
    dy4 = (180 - 0)/numLines;

    var x3 = 50;
    var y3 = 220;
    var x4 = 300;
    var y4 = 0;
    for (var i = 0; i <= numLines; i += 1){
        line(x3, y3, x4, y4);
        x3 += dx3;
        y3 += dy3;
        x4 += dx4;
        y4 += dy4;
    }

//butterfly body in center of criss cross
stroke("yellow");
strokeWeight(1);
noFill();

for(var l = 10; l <= 200; l += 10){       //repeated rings make up body
    ellipse(150, l + 90, 10, 10);
}
line((width/2) + 3, height/4, (width/2) + 30, (height/4) - 35);
line((width/2) - 3, height/4, (width/2) - 30, (height/4) - 35);
pop();

noLoop();

}

Leave a Reply