Project: String Art

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.