Project 4 – String Art

// Tsz Wing Clover Chau
// Section E

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

var counter = 0;
var showCounter = 0;
var m = 1;
var n = 10;
var n2 = n*2;


function draw() {
    noFill();

    var cx = width/2;
    var cy = height/2;

    var dy1 = (height/n2)*m;      // dimensions for drawing 1
    var dx1 = (width/n2)*m;

    var dx2 = width/(2*n);        // dimensions for drawing 2
    var dy2 = height/(6*n);
    var dx3 = width/(6*n);
    var dy3 = height/(2*n);
    
    var size1 = min(width, height)*(4/5);         // dimensions for drawing 3
    var sx1 = width/5;
    var sy1 = height/10;
    var sx2 = width*4/5;
    var sy2 = height*9/10;

    var dx4 = size1/(2*n);
    var dy4 = dx4;

    var size2 = min(width, height)*(3/5);
    var sx3 = (width-size2)/2;
    var sy3 = (height-size2)/2;
    var sx4 = width-sx3;
    var sy4 = height - sy3

    var dx5 = size2/(2*n);
    var dy5 = dx5;

    if (counter %3 == 0){         // drawing 1
        background(255);
        for (var i = 0; i <= n2; i++){
            stroke(231, 111, 81);
            line(dx1*i, 0, width, dy1*i);
            stroke(233, 196, 106);
            line(width, dy1*i, width-(dx1*i), height);
            stroke(42, 157, 143);
            line(width - (dx1*i), height, 0, height - (dy1*i));
            stroke(38, 70, 83);
            line(0, height-(dy1*i), dx1*i, 0);
        }

    } else if (counter % 3 == 1){         // drawing 2
        background(255);

        for (var j = 0; j <= n; j++){
            stroke(38, 70, 83);
            line(cx+(dx2*j), cy+(dy2*j), width*(2/3)-(dx3*j), dy3*j);
            line(cx-(dx2*j), cy-(dy2*j), width*(2/3)-(dx3*j), dy3*j);
            stroke(233, 196, 106);
            line(cx-(dx2*j), cy-(dy2*j), (width/3)+(dx3*j), height-(dy3*j));
            line(cx+(dx2*j), cy+(dy2*j), (width/3)+(dx3*j), height-(dy3*j));
        }
    } else {                              // drawing 3
        background(255);
        for (var k = 0; k < n; k++){

            stroke(42, 157, 143);
            line(cx-(dx5*k), cy+(dy5*k), sx3+(dx5*k), sy4);
            line(cx-(dx5*k), cy+(dy5*k), sx3, sy4-(dy5*k));
            line(cx+(dx5*k), cy-(dy5*k), sx4-(dx5*k), sy3);
            line(cx+(dx5*k), cy-(dy5*k), sx4, sy3+(dy5*k));
            line(cx, sy3, sx4, sy3);
            line(sx4, sy3, sx4, cy);
            line(cx, sy4, sx3, sy4);
            line(sx3, cy, sx3, sy4);
            
            stroke(244, 162, 97);
            line(cx-(dx4*k), cy-(dy4*k), sx1+(dx4*k), sy1);
            line(cx-(dx4*k), cy-(dy4*k), sx1, sy1+(dy4*k));
            line(cx+(dx4*k), cy+(dy4*k), sx2, sy2-(dy4*k));
            line(cx+(dx4*k), cy+(dy4*k), sx2-(dx4*k), sy2);
            line(cx, sy1, sx1, sy1);
            line(sx1, sy1, sx1, cy);
            line(cx, sy2, sx2, sy2);
            line(sx2, cy, sx2, sy2);
        }
    }

    showAll();
    if (showCounter > 15){                // all 3 drawings
        background(255);
        stroke(38, 70, 83);
        for (var i = 0; i <= n2; i++){
            line(dx1*i, 0, width, dy1*i);
            line(width, dy1*i, width-(dx1*i), height);
            line(width - (dx1*i), height, 0, height - (dy1*i));
            line(0, height-(dy1*i), dx1*i, 0);
        }

        for (var k = 0; k <= n; k++){
            stroke(142, 202, 230);
            line(cx+(dx2*k), cy+(dy2*k), width*(2/3)-(dx3*k), dy3*k);
            line(cx-(dx2*k), cy-(dy2*k), width*(2/3)-(dx3*k), dy3*k);
            stroke(42, 157, 143);
            line(cx-(dx2*k), cy-(dy2*k), (width/3)+(dx3*k), height-(dy3*k));
            line(cx+(dx2*k), cy+(dy2*k), (width/3)+(dx3*k), height-(dy3*k));

            stroke(233, 196, 106);
            line(cx-(dx5*k), cy+(dy5*k), sx3+(dx5*k), sy4);
            line(cx-(dx5*k), cy+(dy5*k), sx3, sy4-(dy5*k));
            line(cx+(dx5*k), cy-(dy5*k), sx4-(dx5*k), sy3);
            line(cx+(dx5*k), cy-(dy5*k), sx4, sy3+(dy5*k));
            line(cx, sy3, sx4, sy3);
            line(sx4, sy3, sx4, cy);
            line(cx, sy4, sx3, sy4);
            line(sx3, cy, sx3, sy4);
            
            stroke(231, 111, 81);
            line(cx-(dx4*k), cy-(dy4*k), sx1+(dx4*k), sy1);
            line(cx-(dx4*k), cy-(dy4*k), sx1, sy1+(dy4*k));
            line(cx+(dx4*k), cy+(dy4*k), sx2, sy2-(dy4*k));
            line(cx+(dx4*k), cy+(dy4*k), sx2-(dx4*k), sy2);
            line(cx, sy1, sx1, sy1);
            line(sx1, sy1, sx1, cy);
            line(cx, sy2, sx2, sy2);
            line(sx2, cy, sx2, sy2);
        }
    } 
}


function mouseClicked(){
    counter ++;
}


function showAll(){
    if (mouseIsPressed){
        showCounter ++;
    } else {
        showCounter = 0;
    }
}