Project 04 String Art

For this project, I used the curves generated by the strings to make a sort of landscape. Because the shapes generated were pretty organic, I thought it would be fitting to make the subject matter organic as well.

sketch

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 = 50;

function setup() {
    createCanvas(400, 300);
    background(237, 233, 223);
    dx1 = (150-50)/numLines;
    dy1 = (300-300)/numLines;
    dx2 = (400-400)/numLines;
    dy2 = (100-400)/numLines;
    dx3 = (400-400)/numLines;
    dy3 = (100-400)/numLines;
    dx4 = (500-600)/numLines;
    dy4 = (200-500)/numLines;
    dx5 = (200-400)/numLines;
    dy5 = (0-500)/numLines;
    dx6 = (200-500)/numLines;
    dy6 = (200-500)/numLines;
    dx7 = (200-400)/numLines;
    dy7 = (20-500)/numLines;
    dx8 = (400-500)/numLines;
    dy8 = (200-300)/numLines;
}

function draw() {
    var x1 = 400;
    var y1 = 0;
    var x2 = 0;
    var y2 = 300;
    var x3 = 0;
    var y3 = 300;
    var x4 = 500;
    var y4 = 300;
    var x5 = -175;
    var y5 = 150;
    var x6 = 500;
    var y6 = 700;
    var x7 = 3000;
    var y7 = 300;
    var x8 = 0;
    var y8 = 400;
    for (var i = 0; i <= numLines; i += 1) {
        strokeWeight(1);
        stroke(229,193,208);
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
        stroke(249,199,169);
        line(x3, y3, x4, y4);
        x3 += dx3;
        y3 += dy3;
        x4 += dx4;
        y4 += dy4;
        stroke(241,144,167);
        line(x5, y5, x6, y6);
        x5 += dx5;
        y5 += dy5;
        x6 += dx6;
        y6 += dy6;
        stroke(221,115,81);
        line(x7, y7, x8, y8);
        x7 += dx7;
        y7 += dy7;
        x8 += dx8;
        y8 += dy8;
    }
    noLoop();
    fill(221,81,108);
    strokeWeight(0);
    triangle(300, 150, 325, 220, 275, 220); //tree to the right
    rect(290, 220, 20, 30);
    triangle(0, 100, -50, 290, 50, 290); //big tree in foreground
    rect(0, 290, 20, 300)
    triangle(170, 150, 165, 165, 175, 165); //tiny tree far away
    rect(168, 165, 4, 8)
    fill(255,192,0);
    ellipse(100, 40, 50, 50);
}

Leave a Reply