Project 05: Wallpaper

/*
Lauren Kenny
lkenny
Section A

This program draws a repeating geometric pattern.

*/

var x;
var y;
var circleX;
var circleY;
var circleX2;
var circleY2;

function setup() {
    noLoop();
    createCanvas(600, 600);
    background(0);
    noStroke();
    x=50;
    y=50;
    w=100;
    h=100;
    circleX=20;
    circleY=20;
    circleX2=80;
    circleY2=80;
}

function draw() {
    drawGrid();
}

//////////////////////////////
// THIS CREATES THE CIRCLES
/////////////////////////////
function drawBottomLeft() {
    fill(255, 0, 0);
    arc(x, y, w, h, HALF_PI, PI);
    fill(255, 255, 0);
    arc(x, y, w-50, h-50, HALF_PI, PI);
}

function drawBottomRight() {
    fill(0, 255, 0);
    arc(x, y, w, h, 0, HALF_PI);
    fill(0, 0, 255);
    arc(x, y, w-50, h-50, 0, HALF_PI);
}

function drawTopLeft() {
    fill(0, 0, 255);
    arc(x, y, w, h, PI, PI+HALF_PI);
    fill(0, 255, 0);
    arc(x, y, w-50, h-50, PI, PI+HALF_PI);
}

function drawTopRight() {
    fill(255, 255, 0);
    arc(x, y, w, h, PI+HALF_PI, 0);
    fill(255, 0, 0);
    arc(x, y, w-50, h-50, PI+HALF_PI, 0);
}

//////////////////////////////
// THIS CREATES THE TINY DOTS
/////////////////////////////
function drawTopCircles() {
    fill(0, 255, 0);
    circle(circleX, circleY, 5);
    circle(circleX+5, circleY-5, 5);
    circle(circleX-5, circleY+5, 5);
}

function drawBottomCircles() {
    fill(0, 0, 255);
    circle(circleX2, circleY2, 5);
    circle(circleX2+5, circleY2-5, 5);
    circle(circleX2-5, circleY2+5, 5);
}

//////////////////////////////
// THIS DRAWS THE REPEATING PATTERN
/////////////////////////////
function drawGrid() {
    //PURPLE DOTS IN BACKGROUND
    var d=5;
    var e=5;
    for (var o=0; o<width; o+=10) {
        for (var p=0; p<height; p+=10) {
            fill(80, 0, 195);
            ellipse(d, e, 8);
            e+=10;
        }
        e=5;
        d+=10;
    }

    //LARGE CIRCLES
    for (var i=0; i<width; i+=100) {
        for (var j=0; j<height; j+=100) {
            drawBottomRight();
            drawBottomLeft();
            drawTopLeft();
            drawTopRight();
            y+=100;
        }
        y=50;
        x+=100;
    }

    //WHITE OUTLINED CIRCLES IN FRONT
    var f=5;
    var g=5;
    for (var q=0; q<width; q+=10) {
        for (var r=0; r<height; r+=10) {
            noFill();
            stroke(255);
            strokeWeight(.35);
            ellipse(f, g, 10);
            g+=10;
        }
        g=5;
        f+=10;
    }

    //TINY GREEN DOTS
    var greenCounter=0;
    for (var k=0; k<width; k+=100) {
        greenCounter+=1;
        if (greenCounter%2==0) {
           circleY=120; 
        } 
        else {
            circleY=20;
        }
        for (var l=0; l<height; l+=200) {
            drawTopCircles();
            circleY+=200;
        }
        circleX+=100;
    }

    //TINY BLUE DOTS
    var blueCounter=0;
    for (var m=0; m<width; m+=100) {
        blueCounter+=1;
        if (blueCounter%2==0) {
            circleY2=80;
        }
        else {
            circleY2=180;
        }
        for (var n=0; n<height; n+=200) {
            drawBottomCircles();
            circleY2+=200;
        }
        circleX2+=100;
    }
}