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.