Month: September 2017

sketch

var black = 0;

//dimension of the very first square
var a = 400/1.618;

//dimension of the margin on the top and bottom
var b = 150 - 200/1.618;

//dimensions of each squares
var dim1 = 400/1.618;
var dim2 = 400 - a;
var dim3 = 2 * a - 400;
var dim4 = 800 - 3 * a;
var dim5 = 5 * a - 1200;
var dim6 = 2000 - 8 * a;
var dim7 = 13 * a - 3200;

//color of each string
var color = 255;

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

function draw() {
    var color = 255;
    background(black); //sets up the background color
    
    
    //strings sprouting out from the corner of the biggest square
    for (var i = 0; i <= a; i += a/20) {
        stroke(color);
        line(a, a + b, i, a + b - i);
    }
    
    //within the square there are always two corners facing each other that are sprouting the strings 
     for (var i = 0; i <= a; i += a/20) {
        stroke(color);
        line(0, b, i, a + b - i);
    }
    
    //strings sprouting out from the corner of the second biggest square
    for (var i = 0; i <= dim2; i += dim2 /20) {
        stroke(color);
        line(a, b + 400 - a, a + i, b + i);
    }
    
    //the opposite corner
    for (var i = 0; i <= dim2; i += dim2 /20) {
        stroke(color);
        line(400, b, a + i, b + i);
    }
    
    //strings sprouting out from the corner of the third biggest square
    for (var i = 0; i <= dim3; i += dim3/20) {
        stroke(color);
        line(width - 2 * a + 400, b + 400 - a, width - 2 * a + 400 + i, 300 - b - i)
    }
    
    //oppotiste corner
    for (var i = 0; i <= dim3; i += dim3/20) {
        stroke(color);
        line(400, height - b, width - 2 * a + 400 + i, 300 - b - i)
    }
    
    //strings sprouting out from the corner of the fourth biggest square
    for (var i = 0; i <= 800 - 3 * a; i += (800 - 3 * a)/20)
        {
        stroke(color);
        line(a + 800 - 3 * a, height - b - 800 + 3 * a, width - 2 * a + 400 - i, 300 - b - i)
        }
    
    //opposite corner
    for (var i = 0; i <= 800 - 3 * a; i += (800 - 3 * a)/20)
        {
        stroke(color);
        line(a, height - b, width - 2 * a + 400 - i, 300 - b - i)
        }
    
    //strings sprouting out from the corner of the fifth biggest square
    for (var i = 0; i <= 5 * a - 1200; i += (5 * a - 1200)/20)
        {
        stroke(color);
        line(a + 5 * a - 1200, 300 - b - 800 + 3 * a, a + i, b + 400 - a - i + 5 * a - 1200)
        }
    
    //opposite corner
        for (var i = 0; i <= dim5; i += dim5/20)
        {
        stroke(color);
        line(a, b + 400 - a, a + i, b + 400 - a - i + 5 * a - 1200)
        }
    
    //strings sprouting out from the corner of the sixth biggest square
    for (var i = 0; i <= dim6; i += dim6/20)
        {
        stroke(color);
        line(a + dim5 + dim6, b + dim2, a + dim5 + i, b + dim2 + i)
        }
    
    //opposite corner
        for (var i = 0; i <= dim6; i += dim6/20)
        {
        stroke(color);
        line(a + dim5, b + dim2 + dim6, a + dim5 + i, b + dim2 + i)
        }
    
    //strings sprouting out from the corner of the seventh biggest square
        for (var i = 0; i <= dim7; i += dim7/20)
        {
        stroke(color);
        line(width - dim3 - dim7, b + dim2 + dim6, width - dim3 - dim7 + i, b + dim2 + dim6 + dim7 - i)
        }
    
    //opposite corner
        for (var i = 0; i <= dim7; i += dim7/20)
        {
        stroke(color);
        line(width - dim3, b + dim2 + dim6 + dim7, width - dim3 - dim7 + i, b + dim2 + dim6 + dim7 - i)
        }
}

For this project I wanted to create a drawing based on golden ratio. It would have been nice if I could figure out a way to make the spiral-y shape made of sets of lines but I’m satisfied with what I have.

The most challenging part of this project was to figure out a logic that would make the strings loop around the pattern you want. Instead of making an array of lines I had to figure out a way to make the lines rotate around a fixed coordinate point. But other than, the project was farily do-able. I wish I planned something more challenging.sketch