Lingfan Jiang – Project 05 – Wallpaper

lingfanj-project05

//Lingfan Jiang
//Section B
//lingfanj@andrew.cmu.edu
//Project-05

var tx; //triangle positions
var tw = 60; //triangle width

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

function draw(){
    background(229, 249, 224);
    translate(-150, -200); //make sure the pattern fills canvas

    for (var tx = 0; tx < 800; tx += (1.25 * tw)){ //make sure the distance between the triangles stays 1.25 in x axis
        for (var j = 0; j < 20; j++){ //make the pattern repeats in the y axis

            fill(163, 247, 181);
            stroke(229, 249, 224);
            strokeWeight(10); //create a different visual effect where one group of triangles has lineweight and the other don't
            //calculating the positions of each points using tw and tx
            //basically all the triangles are based on the first triangle created in the left up corner
            triangle(tx + (j * tw / 4), (sqrt(3) * tx / 5) + (j * 3 * sqrt(3) / 4 * tw),
                    tx + tw + (j * tw / 4), (sqrt(3) * tx / 5) + (j * 3 * sqrt(3) / 4 * tw),
                    tx + tw / 2 + (j * tw / 4), (sqrt(3) * tx / 5) + (sqrt(3) * tw / 2) + (j * 3 * sqrt(3) / 4 * tw));


            fill(64, 201, 162);
            noStroke();
            //calculating the other group of triangles using tw and tx
            triangle(tx + 0.75 * tw + (j * tw / 4), (sqrt(3) * tx / 5) + (sqrt(3) * tw) / 4 + (j * 3 * sqrt(3) / 4 * tw), 
                    tx + 1.75 * tw + (j * tw / 4), (sqrt(3) * tx / 5) + (sqrt(3) * tw) / 4 + (j * 3 * sqrt(3) / 4 * tw), 
                    tx + 1.25 * tw + (j * tw / 4), (sqrt(3) * tx / 5) - (sqrt(3) * tw) / 4 + (j * 3 * sqrt(3) / 4 * tw));
        }
    }
}

This is the starting idea of my wallpaper, and I really liked how triangles form the hexagon in the middle. However, when I get into the codes, I realized the difficulties to code triangles. In order to form the triangles, I have to calculate the positions of each point and the distance with other ones so that they could form the hexagon perfectly. It is also hard to lay out those triangles since they do not array in the x or y-axis directly. Instead, they move diagonally. Therefore, it is harder to use the nested loop. In the end, I played a little bit with line weights and color to make it look nicer and more interesting.