Project 5: Wallpaper

A wall paper of metacircles!!!

/*
 * Andrew J Wang
 * ajw2@andrew.cmu.edu
 * Section A
 * Project-05
 *
 * This program draws wallpapaer
 */

//set circle sizes
var sizeCircle=50;


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

function draw() {
//array for the metacircles (both directions)
    for (var x=0; x<=width; x+=sizeCircle*2)
    {
        for (var y=0; y<=height; y+=sizeCircle*2)
        {
            metaCircle(x,y,sizeCircle);
            metaCircle2(x+sizeCircle,y+sizeCircle,sizeCircle);
        }
    }

//filling cirlces that cover the gap between shapes
    for (var x=sizeCircle; x<=width+sizeCircle; x+=sizeCircle*2)
    {
        for (var y=0; y<=height; y+=sizeCircle*2)
        {
            //change color of strokes and fills
            fill(0);
            stroke(0);
            strokeWeight(sizeCircle/8);
            circle(x,y,sizeCircle/3);
            circle(x-sizeCircle,y+sizeCircle,sizeCircle/3);
        }
    }
//noLoop() to prevent refreshing as the patterns is all ramdom
    noLoop();

    
}

// first type of metacircle
function metaCircle(x,y,size,c) {
    //set random values from 0 to 2 to get 3 different colors for the shape
    var guess = Math.floor(Math.random()*3);
    if (guess==0)
    {
        fill (255,125,125,255);
    }
    else if (guess==1)
    {
        fill (125,255,125,255);
    }
    else if (guess==2)
    {
        fill (125,125,255,255);
    }
    //two circles as base
    strokeWeight(0);
    circle(x+size/2,y-size/2,size);
    circle(x-size/2,y+size/2,size);

    //one rotated square fill the middle part 
    rectMode(CENTER);
    push();
    translate(x,y);
    rotate(1/4*Math.PI)
    rect(0,0,size/2,size/2);
    pop();

    //drawing the outline with 4 arcs
    stroke(0);
    strokeWeight(size/8);
    noFill();
    arc(x-size/2, y-size/2, size, size, 0, HALF_PI);
    arc(x+size/2, y+size/2, size, size, PI, PI+HALF_PI);
    arc(x+size/2, y-size/2, size, size, -PI, HALF_PI);
    arc(x-size/2, y+size/2, size, size, 0, PI+HALF_PI);

    //patterns 
    stroke(25);
    strokeWeight(size/16);
    arc(x-size/2, y+size/2, size/3*2, size/3*2, 0, PI+HALF_PI);
    arc(x+size/2, y-size/2, size/3*2, size/3*2, -PI, HALF_PI);
    arc(x-size/2, y+size/2, size/3, size/3, 0, PI+HALF_PI);
    arc(x+size/2, y-size/2, size/3, size/3, -PI, HALF_PI);
}

//second type of metacircle same as above (no further explanations)
function metaCircle2 (x,y,size,c) {
    var guess = Math.floor(Math.random()*3);
    if (guess==0)
    {
        fill (255,125,125,255);
    }
    else if (guess==1)
    {
        fill (125,255,125,255);
    }
    else if (guess==2)
    {
        fill (125,125,255,255);
    }
    strokeWeight(0);
    circle(x+size/2,y+size/2,size);
    circle(x-size/2,y-size/2,size);
    rectMode(CENTER);
    push();
    translate(x,y);
    rotate(1/4*Math.PI)
    rect(0,0,size/2,size/2);
    pop();

    stroke(0);
    strokeWeight(size/8);
    noFill();
    arc(x-size/2, y+size/2, size, size, -HALF_PI, 0);
    arc(x+size/2, y-size/2, size, size, HALF_PI, PI);
    arc(x+size/2, y+size/2, size, size, -HALF_PI, PI);
    arc(x-size/2, y-size/2, size, size, HALF_PI, 2*PI);

    stroke(220);
    strokeWeight(size/16);
    arc(x+size/2, y+size/2, size/3*2, size/3*2, -HALF_PI, PI);
    arc(x-size/2, y-size/2, size/3*2, size/3*2, HALF_PI, 2*PI);
    arc(x+size/2, y+size/2, size/3, size/3, 0, -HALF_PI, PI);
    arc(x-size/2, y-size/2, size/3, size/3, HALF_PI, 2*PI);
}