Crystal-Xue-Project-05

sketch-379.js

//Crystal Xue
//15104-section B
//luyaox@andrew.cmu.edu
//project-05

var vA = 10; //vertical coordinate change of shorter edge
var hA = 17.32;//horizontal coordinate change of the shorter edge = √3 * vA
var vB = 40; //vertical coordinate change of the longer edge
var hB = 69.28;//vertical coordinate change of the longer edge = √3 * vB

function setup() {
    createCanvas(375, 600);
}

function draw() {
    background(0);
    noStroke();
    scale(0.7);

    for (var x = 0; x < 600 ; x +=  hB + 2 * hA) {
        for (var y = 0; y < 1200 ; y += 2 * vB + 4 * vA) {
            if (x % (2 * (hB + 2 * hA)) == 0) {

                push();
                translate(-85, 0);
                fill(200);

                //top side
                beginShape();
                vertex(x, y); //pt1
                vertex(hA + x, -vA + y);//pt2
                vertex(hA + hB + x, vB - vA + y);//pt3
                vertex(hA + 2 * hB + x, -vA + y);//pt4
                vertex(2 * hA + 2 * hB + x, y);//pt5
                vertex(hA + hB + x, vA + vB + y);//pt6
                endShape(CLOSE);

                //left side
                beginShape();
                fill(120);
                vertex(x, y);//pt1
                vertex(x, 2 * vA + y);//pt7
                vertex(hB + x, 2 * vA + vB + y);//pt8
                vertex(hB + x, 3 * vA + 3 * vB + y);//pt9
                vertex(hB + hA + x, 4 * vA + 3 * vB + y);//pt10
                vertex(hA + hB + x, vA + vB + y);//pt6
                endShape(CLOSE);

                // right side
                beginShape();
                fill(50);
                vertex(hB + hA + x, 4 * vA + 3 * vB + y);//pt10
                vertex(hB + 2 * hA + x, 3 * vA + 3 * vB + y); //pt11
                vertex(hB + 2 * hA + x, 2 * vA + vB + y);//pt12
                vertex(2 * hB + 2 * hA + x, 2 * vA + y);//pt13
                vertex(2 * hA + 2 * hB + x, y);//pt5
                vertex(hA + hB + x, vA + vB + y);//pt6
                endShape(CLOSE);
                pop();

            }
            else {

                push();
                translate(-85, -vB - 2 * vA);

                //top side
                fill(200);
                beginShape();
                vertex(x, y); //pt1
                vertex(hA + x, -vA + y);//pt2
                vertex(hA + hB + x, vB - vA + y);//pt3
                vertex(hA + 2 * hB + x, -vA + y);//pt4
                vertex(2 * hA + 2 * hB + x, y);//pt5
                vertex(hA + hB + x, vA + vB + y);//pt6
                endShape(CLOSE);

                //left side
                beginShape();
                fill(120);
                vertex(x, y);//pt1
                vertex(x, 2 * vA + y);//pt7
                vertex(hB + x, 2 * vA + vB + y);//pt8
                vertex(hB + x, 3 * vA + 3 * vB + y);//pt9
                vertex(hB + hA + x, 4 * vA + 3 * vB + y);//pt10
                vertex(hA + hB + x, vA + vB + y);//pt6
                endShape(CLOSE);

                //right side
                beginShape();
                fill(50);
                vertex(hB + hA + x, 4 * vA + 3 * vB + y);//pt10
                vertex(hB + 2 * hA + x, 3 * vA + 3 * vB + y); //pt11
                vertex(hB + 2 * hA + x, 2 * vA + vB + y);//pt12
                vertex(2 * hB + 2 * hA + x, 2 * vA + y);//pt13
                vertex(2 * hA + 2 * hB + x, y);//pt5
                vertex(hA + hB + x, vA + vB + y);//pt6
                endShape(CLOSE);
                pop();
            }

        }

    }




}

Using trigonometry of 30-degree triangles, I dissected this single unit piece into two sizes of triangles. I nested the units with each other and created this interlocking pattern.