Project 05 – Yugyeong Lee (yugyeonl)

sketch

//Yugyeong Lee
//Section B
//yugyeonl@andrew.cmu.edu
//Assigment-05-B

var len = 30;
var d = 5;
var offset = 5;
var spacingX = 140;
var spacingY = 70;

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

function draw() {
    background(155);
    stroke(255, 220, 205);
    noLoop();
    noFill();

    //forloop for the diamond shape; even number lines are shifted
    for (var y = 0; y < 9; y++) {
        stroke(212, 211, 201)
        if ((y+1) % 2 == 0) {
            for (var x = 0; x < 4; x++) {
                diamond(x*spacingX+70, y*spacingY);
            }
        } else {
            for (var x = 0; x < 5; x++) {
                diamond(x*spacingX, y*spacingY);
            }
        }
    }

    //forloop for the curve shape; even number lines are shifted
    for (var y = 0; y < 9; y ++) 
        if ((y+1) % 2 == 0) {
            for (var x = 0; x < 5; x ++) {
                push();
                translate(x*spacingX, y*spacingY);
                stroke(255, 215, 188);
                symbol(0, 0);
                angleMode(DEGREES);
                rotate(90);
                symbol(0, 0);
                rotate(90);
                symbol(0, 0);
                rotate(90);
                symbol(0, 0);
                pop();
            }
        } else {
            for (var x = 0; x < 4; x ++) {
                push();
                translate(x*spacingX+70, y*spacingY);
                stroke(255, 215, 188);
                symbol(0, 0);
                angleMode(DEGREES);
                rotate(90);
                symbol(0, 0);
                rotate(90);
                symbol(0, 0);
                rotate(90);
                symbol(0, 0);
                pop();
            }
        }
    }

function symbol (x,y) {
    push();
    translate(x, y);
    strokeWeight(3);
    beginShape();
    curveVertex(-len-offset*2, -offset);
    curveVertex((-len+offset)/2, -offset);
    curveVertex((-len+offset)/2, -len+offset*2);
    curveVertex(-len+offset*2, -len+offset*2);
    curveVertex(-len+offset*2, (-len+offset)/2);
    curveVertex(-len, (-len+offset)/2);
    curveVertex(-len, -len);
    curveVertex(-offset/2, -len);
    curveVertex(-offset/2, -offset);
    endShape();
    pop();
}

function diamond (x, y) {
    push();
    translate(x, y);
    rectMode(CENTER);
    strokeWeight(0.5);
    line(0, -3*len, 0, 3*len);
    line(-3*len, 0, 3*len, 0);
    strokeWeight(3);
    angleMode(DEGREES);
    rotate(45);
    quad(0, 0, -len/2, 0, -2*len/3, -2*len/3, 0, -len/2);
    rotate(90);
    quad(0, 0, -len/2, 0, -2*len/3, -2*len/3, 0, -len/2);
    rotate(90);
    quad(0, 0, -len/2, 0, -2*len/3, -2*len/3, 0, -len/2);
    rotate(90);
    quad(0, 0, -len/2, 0, -2*len/3, -2*len/3, 0, -len/2);
    pop();
}

For the wallpaper project, I wanted to use two shapes that are iterated alternatively. Modulus was used to call out even number lines to shift them to create the final product. Instead of creating the shape under the for loop, I created a separate function for each shape to simplify code. First the diamond shape laid out the grid for me to work with. Then, I was inspired by traditional Korean shape to create the curve shape. In comparison with the Korean traditional pattern, I made the shape with curveVertex to give a fun element. In emphasizing that, I used toned down color for the background and the diamond shape while adding a pop of color for the curve one.