Category: Project-04-String-Art

jen project 04 sketch copy

var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
var dx5;
var dy5;
var dx6;
var dy6;
var dx7;
var dy7;
var dx8;
var dy8;
var numLines = 30;
var numLines2 = 40;
var numLines3 = 50;
var numLines4 = 60;

function setup() {
    createCanvas(400, 300);
    background(179,212,177);
    
    line(100, 50, 150, 250);
    dx1 = (150-75)/numLines;
    dy1 = (70-50)/numLines;
    dx2 = (250-150)/numLines;
    dy2 = (300-250)/numLines;
    
    line(400,0,400,300);
    dx3 = (400-0)/numLines2;
    dy3 = (0-300)/numLines2;
    dx4 = (400-400)/numLines2;
    dy4 = (300-0)/numLines2;
    
    line(100, 50, 50, 125); 
    dx5 = (100-50)/numLines3;
    dy5 = (125-50)/numLines3;
    dx6 = (350-300)/numLines3;
    dy6 = (200-25)/numLines3;
    
    //line(50, 50, 50, 150); 
    line(400, 100, 400, 300); 
    dx7 = (400-50)/numLines4;
    dy7 = 50/numLines4;
    dx8 = (400-50)/numLines4;
    dy8 = (300-150)/numLines4;

}

function draw() {
    
    //yellow sunlight ray from upper right hand corner
    var x3 = 375; 
    var y3 = 15;
    var x4 = 0;
    var y4 = 130;
    for (var a = 0; a <= numLines2; a += 1) {
        stroke(255,255,102);
        line(x3, y3, x4, y4);
        x3 += dx3;
        y3 += dy3;
        x4 += dx4;
        y4 += dy4;
    }
    
    //green twisty shape that aligns with orange ray
    var x7 = 150;
    var y7 = 250;
    var x8 = 250;
    var y8 = 200;
    for (var c = 0; c <= numLines4; c += 2) {
        stroke(51,102,0);
        line(x7, y7, x8, y8);
        x7 -= dx7;
        y7 -= dy7;
        x8 += dx8;
        y8 += dy8;
    }
    
        //blue "parallelogram" shaped solar panel
    var x1 = 100; 
    var y1 = 50;
    var x2 = 150;
    var y2 = 250;
    for (var i = 0; i <= numLines; i += 1) {
        stroke(0, random(90, 105), random(195, 210));
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 -= dy1;
        x2 += dx2;
        y2 -= dy2;
    }
    
        //orange ray from upper right left corner
    var x5 = 0;
    var y5 = 0;
    var x6 = 500;
    var y6 = 150;
    for (var b = 0; b <= numLines3; b += 1) {
        stroke(255,153,51);
        line(x5, y5, x6, y6);
        x5 -= dx5;
        y5 += dy5;
        x6 += dx6;
        y6 += dy6;
    }
    noLoop();
}

I knew that the string “rays” reminded me of sunlight and spotlights, so from there I wanted to add in something (the panel) that would make sense. Given that a lot of solar panels are just above grass, I made the background light green and put a dark green string element just below it.

sketch

//Jacky Lococo
//jlococo
//Section C

var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
var dx5;
var dy5;
var dx6;
var dy6;
var dx7;
var dy7;
var dx8;
var dy8;
var dx9;
var dy9;
var dx10;
var dy10;
var dx11;
var dy11;
var dx12;
var dy12;
var numLines = 50;
var numLines2 = 25;

function setup() {
    createCanvas(400, 400);
    //peach upper shape
//  line(150, 50, 50, 300);  //guiding lines to help visualize
//  line(250, 50, 350, 300);
    dx1 = (50-150)/numLines;
    dy1 = (300-50)/numLines;
    dx2 = (350-250)/numLines;
    dy2 = (300-50)/numLines;

    //peach lower shape
//  line(150, 350, 50, 100)//guiding lines
//  line(250, 350, 350, 100)
    dx3 = (50-150)/numLines
    dy3 = (100-350)/numLines
    dx4 = (350-250)/numLines
    dy4 = (100-350)/numLines

    //white spiral in the middle of canvas
//  line(200, 70, 40, 200); //guiding lines
//  line(40, 200, 200, 360);
    dx5 = (40-200)/numLines;
    dy5 = (200-70)/numLines;
    dx6 = (200-40)/numLines;
    dy6 = (360-200)/numLines

    //burgundy bowtie shape in the back of comp
//  line(200, 0, 400, 200) //guiding lines
//  line(500, 300, 100, 400)
    dx7 = (400-300)/numLines
    dy7 = (100-0)/numLines
    dx8 = (100-0)/numLines
    dy8 = (400-300)/numLines

    //top left corner lines
//  line(150, 0, 0, 100) //guiding lines
    dx9 = (0-150)/numLines
    dy9 = (100-0)/numLines
    dx10 = (0)/numLines
    dy10 = (0)/numLines

    //bottom right corner lines
//  line(250, 400, 400, 300) //guiding lines
    dx11 = (400-250)/numLines
    dy11 = (300-400)/numLines
    dx12 = (0)/numLines
    dy12 = (0)/numLines


}

function draw() {
    background(255, 63, 24);

    //this is the bowtie shape in the back of the composition
    var x7 = 300;
    var y7 = 0;
    var x8 = 100;
    var y8 = 400;
    for (var i = 0; i <= numLines; i += 1) {
        stroke(80, 13,0)
        line(x7, y7, x8, y8);
        x7 += dx7;
        y7 += dy7;
        x8 -= dx8;
        y8 -= dy8;
    }

    //upper peach colored upper curve
    var x1 = 150;
    var y1 = 50;
    var x2 = 350;
    var y2 = 300;
    for (var i = 0; i <= numLines; i += 1) {
        stroke(255, 148, 108)
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 -= dx2;
        y2 -= dy2;
    }

    //lower peach colored curve
    var x3 = 150;
    var y3 = 350;
    var x4 = 350;
    var y4 = 100;
    for (var i = 0; i <= numLines; i += 1) {
        stroke(255, 148, 108)
        line(x3, y3, x4, y4);
        x3 += dx3;
        y3 += dy3;
        x4 -= dx4;
        y4 -= dy4;
    }

    //white spiral in the middle dividing the canvas
    var x5 = 200;
    var y5 = 70;
    var x6 = 200;
    var y6 = 360;
    for (var i = 0; i <= numLines; i += 1) {
        stroke(255, 235, 238)
        line(x5, y5, x6, y6);
        x5 += dx5;
        y5 += dy5;
        x6 += dx6;
        y6 -= dy6;
    }

    //upper left corner lines
    var x9 = 150;
    var y9 = 0;
    var x10 = 0;
    var y10 = 0;
    for (var i = 0; i <= numLines; i += 1) {
        stroke(255)
        line(x9, y9, x10, y10);
        x9 += dx9;
        y9 += dy9;
        x10 += dx10;
        y10 -= dy10;
    }

    //bottom right corner lines
    var x11 = 250;
    var y11 = 400;
    var x12 = 400;
    var y12 = 400;
    for (var i = 0; i <= numLines; i += 1) {
        stroke(255)
        line(x11, y11, x12, y12);
        x11 += dx11;
        y11 += dy11;
        x12 += dx12;
        y12 += dy12;
    }


    //Inner circles, radius decreases by 5 for each
    //largest circle
    stroke(255)
    strokeWeight(1)
    fill(80, 13, 0)
    ellipse(200, 200, 50, 50)

    stroke(255)
    strokeWeight(1)
    fill(80, 13, 0)
    ellipse(200, 200, 45, 45)

    stroke(255)
    strokeWeight(1)
    fill(80, 13, 0)
    ellipse(200, 200, 40, 40)

    //smallest circle
    stroke(255)
    strokeWeight(1)
    fill(80, 13, 0)
    ellipse(200, 200, 35, 35)


    noLoop()

}
    

This project was a little bit difficult, I think I mainly approached it by trying to find patterns within the code given and use that to make any desired shapes. Once I got the hang of the process and why certain numbers were used, it became a lot easier.

var dx1;
var dy1;
var dx2;
var dy2;

var numLines = 20;

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

    //setting up star shaped template
    rectMode(CENTER);
    fill(50);
    noStroke();
    // stroke(255,0,0);
    push();

    translate(200, 150);
    rotate(radians(45));
    rect(0, 0, 200, 200);

    pop();
    translate(200, 150);
    rect(0, 0, 200, 200);

    //increments
    dx1 = (100-100)/numLines;
    dy1 = (250-200)/numLines;
    dx2 = (340-200)/numLines;
    dy2 = (151-291)/numLines;

}

function draw() {
    stroke(255);
    // reference: line(100, 50, 100, 250);
    // reference: line(200, 291, 340, 151);

    //line1_top left to bottom center
    var x1 = 100;
    var y1 = 50;
    var x2 = 200;
    var y2 = 291;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += -dx2;
        y2 += dy2;
    }

    //line 2_bottom left to right center
    var x1 = 100;
    var y1 = 250;
    var x2 = 340;
    var y2 = 151;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += -dy1;
        x2 += -dx2;
        y2 += -dy2;
    }

    //line3_bottom right to top center
    var x1 = 300;
    var y1 = 250;
    var x2 = 200;
    var y2 = 10;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += -dy1;
        x2 += dx2;
        y2 += -dy2;
    }

    //line 4_top right to left center
    var x1 = 300;
    var y1 = 50;
    var x2 = 60;
    var y2 = 151;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    noLoop();
    }

     //line 5_top left to top center
    var x1 = 100;
    var y1 = 50;
    var x2 = 200;
    var y2 = 10;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += -dx2;
        y2 += -dy2;
    noLoop();
    }

     //line 6_bottom right to bottom center
    var x1 = 300;
    var y1 = 250;
    var x2 = 200;
    var y2 = 290;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += -dy1;
        x2 += dx2;
        y2 += dy2;
    noLoop();
    }


    
}

I really enjoy creating geometric patterns, so it was really intriguing for me to learn how I can modify the increments and number of lines to create a pattern.