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