Month: October 2022

//Michael Li
//Section C 
var radi = 30
function setup() {
    createCanvas(755, 630);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    background (220);

}

function draw() {
    background(30, 28, 27);

    var color = 0; //set variable color
    //create a line with the for loop
    for (var x = 0; x <= width+80; x += 4.2*radi){
        color += 1; // increment color by 1
            if (color % 2 == 1){ // test color 
                stroke(255, 204, 51); //bright yellow
            } else {
                stroke(182, 156, 129); //grey
            }
        //create a grid
        for(var y = 0; y<= height+80; y += 4.2*radi){
            color += 1;
            //test for color
            if (color % 2 == 1){
                stroke(255, 204, 51); //bright yellow
            } else {
                stroke(182, 156, 129); //grey
            }
            //two if statements in each for loop creates the alternating color pattern
            pattern1(x, y); // call to draw function pattern 1
            print(color.toString());
            
        }
    }
    //draw a grid of pattern two
    //reposition x and y initial position
    for (var x = 63; x <= width + 80; x += 4.2*radi){
        for(var y = 0; y <= height + 80; y += 4.2*radi){

        pattern2(x, y); //draw pattern 2
    }
    }
   
    noLoop();//draw once
}
    var flip1 = 1; //set varibales for  flip
    var flip2 = 1;

function pattern1(x, y){
    strokeWeight(2); 
    noFill();
    //only stroke no fill

    push();

    translate(x, y); // translate object to input x and y

    //top and bottom semi circle
    arc(0, 0, radi*2, radi*2, PI+radians(7), 0-radians(7));
    arc(0, 0, radi*2, radi*2, 0+radians(7), PI-radians(7));
    //middle long line
    line(0-radi/1.3, 0, 0+radi/1.3, 0);

    var xSpaing = 3.5;//set a uniformed spacing

    //draw the same line 4 time
    for (var i = 0; i<= 4; i += 1){
        //test which loop number it is to flip the drawing
        if (i == 1 || i == 3){
            flip1 = -flip1; //on first and third loop, flip the x position
        } else if (i == 2){
            flip2 = -flip2; //on the second loop, flip the y position
        }
        line(0-flip1*radi/1.1, 0-(flip2*6), 
        0-flip1*radi/1.5, 0-(flip2*6)); // horizontal short
        line(0+(flip1*xSpaing), 0+(flip2*radi/1.1), 
        0+(flip1*xSpaing), 0+(flip2*radi/1.3)); //verticle short 1
        line(0+(flip1*xSpaing), 0+(flip2*radi/1.8), 
        0+(flip1*xSpaing), 0+(flip2*radi/2.5)); // verticle short 2, closer to middle
        line(0+(flip1*20), 0+(flip2*radi/2.5), 
        0+(flip1*xSpaing), 0+(flip2*radi/2.5)); // horizontal longer, at 4 corners
    }

    //middle line top and bottom
    line(0+radi/2.2, 0+6, 0-radi/2.2, 0+6); //bottom middle
    line(0+radi/2.2, 0-6, 0-radi/2.2, 0-6); //top middle

    //four small arcs
    arc(0, 0, radi*1.6, radi*1.6, radians(30), radians(63));
    arc(0, 0, radi*1.6, radi*1.6, radians(85+30), radians(85+63));
    arc(0, 0, radi*1.6, radi*1.6, radians(180+30), radians(180+63));
    arc(0, 0, radi*1.6, radi*1.6, radians(265+30), radians(265+63));
    pop();

    push();
    translate(x, y); //translate to input x and y
    rotate(radians(45)); // rotate around x, y by 45 degrees
    rectMode(CENTER); //draw rect around origin
    //draw rectangle to frame the pattern
    rect(0, 0, radi*3, radi*3);
        //draw 4 times
        for(var i = 0; i<=4; i +=1){
        //test for which loop increment
        if (i == 1 || i == 3){ //first and third flip the x position
            flip1 = -flip1;
        } else if (i == 2){ //second loop flip the y position
            flip2 = -flip2;
        }
        //draw 3 small squares by the corner of the big square
        //repeat for each corner using the for loop
        rect(flip1*1.5*radi, flip2*1.5*radi, radi, radi);
        rect(flip1*1.34*radi, flip2*1.34*radi, radi/4, radi/4);
        rect(flip1*0.9*radi, flip2*1.34*radi, radi/4, radi/4);
        rect(flip1*1.34*radi, flip2*0.9*radi, radi/4, radi/4);
   }
   pop()
}


//second pattern, new arguments g and h
function pattern2 (g, h){
    push();
    translate(g, h); // translate origin to g, h
    rotate(radians(45)); //rotate around origin by 45 degrees
    rectMode(CENTER); // set rectMode
    strokeWeight(2);
    stroke(255, 204, 51, 100); // grey line color
    fill(182, 156, 129, 100); // lower transparency
    rect (1.5*radi, 1.5*radi, radi*1.8, radi*1.8); // medium size square
    pop();

    push();
    translate(g, h);
    stroke(182, 156, 129);
    rectMode(CENTER);

    rect(0, 2.1*radi, radi/3, radi/3); // small square inside

    line(0, 0,  0, height); //verticle lines
    pop();
}