Diana Connolly – Project 5

For this project, I wanted to make a wallpaper with a bunch of cute woodland creatures. I added in the sun, tree, and flower to give context to where they might be living. I created for loops for each icon and created the pattern seen below!

Wallpaper

var eyeSize = 5;
var noseUnit = 5;

function setup() { 
    createCanvas(790, 550);
    noLoop(); 
}

function draw() {
    background("LightBlue"); 
    noStroke();
    //Loop sun
    for (var xSun = 135; xSun < width; xSun += 200) {
        for (var ySun = 50; ySun < height; ySun += 800) {
            drawSun(xSun, ySun);}
        }	
    //Loop bear
    for (var xBear = 50; xBear < width; xBear += 200) {
        for (var yBear = 120; yBear < height; yBear += 800) {
            bear(xBear, yBear);}
        }	
    //Loop raccoon
    for (var xRaccoon = 135; xRaccoon < width; xRaccoon += 200) {
        for (var yRaccoon = 190; yRaccoon < height; yRaccoon += 800) {
            raccoon(xRaccoon, yRaccoon);}
        }	
    //Loop tree
    for (var xTree = 50; xTree < width; xTree += 200) {
        for (var yTree = 260; yTree < height; yTree += 800) {
            tree(xTree, yTree);}
        }	
    //Loop deer
    for (var xDeer = 135; xDeer < width; xDeer += 200) {
        for (var yDeer = 360; yDeer < height; yDeer += 800) {
            deer(xDeer, yDeer);}
        }
    //Loop owl
    for (var xOwl = 50; xOwl < width; xOwl += 200) {
        for (var yOwl = 430; yOwl < height; yOwl += 800) {
            owl(xOwl, yOwl);}
        }	
    //Loop flower
    for (var xFlower = 135; xFlower < width; xFlower += 200) {
        for (var yFlower = 500; yFlower < height; yFlower += 800) {
            flower(xFlower, yFlower);}
        }
}




function drawSun(xSun, ySun) {
    fill("yellow");
    var diamSun = 29;
    ellipse(xSun, ySun, diamSun, diamSun); //Center circle
    //Sun rays:
    var rayX = 5;
    var rayY = 20;
    push();
    translate(xSun,ySun);
        triangle(rayX, -rayY, 0, -rayY*1.6, -rayX, -rayY);//Top spike
        triangle(rayX, rayY, 0, rayY*1.6, -rayX, rayY);//Bottom spike
    rotate(radians(45));
        triangle(rayX, -rayY, 0, -rayY*1.6, -rayX, -rayY);//Top spike
        triangle(rayX, rayY, 0, rayY*1.6, -rayX, rayY);//Bottom spike
    rotate(radians(45));
        triangle(rayX, -rayY, 0, -rayY*1.6, -rayX, -rayY);//Top spike
        triangle(rayX, rayY, 0, rayY*1.6, -rayX, rayY);//Bottom spike
    rotate(radians(45));
        triangle(rayX, -rayY, 0, -rayY*1.6, -rayX, -rayY);//Top spike
        triangle(rayX, rayY, 0, rayY*1.6, -rayX, rayY);//Bottom spike
    pop();
}


function bear(xBear, yBear) {
    var bearUnit = 50;
    var bearEar = 15;
    fill(126,85,38);
        ellipse(xBear,yBear,bearUnit,bearUnit); //head
        ellipse(xBear-bearUnit*.4,yBear-bearUnit*.4,bearEar,bearEar); //left ear
        ellipse(xBear+bearUnit*.4,yBear-bearUnit*.4,bearEar,bearEar); //right ear
    fill(158,111,57);
        ellipse(xBear,yBear+7,bearUnit/2.3,bearUnit/2); //snout
    fill(0);
        triangle(xBear-noseUnit,yBear+noseUnit, xBear,yBear+noseUnit*2, xBear+noseUnit,yBear+noseUnit); //nose
        ellipse(xBear-15,yBear-5, eyeSize,eyeSize); //left eye
        ellipse(xBear+15,yBear-5, eyeSize,eyeSize); //right eye
}

function raccoon (xRaccoon, yRaccoon) {
    var wRaccoon = 45;
    var hRaccoon = 40;
    var eye = 10;
    fill(150);
        ellipse(xRaccoon, yRaccoon, wRaccoon, hRaccoon); //head
        triangle(xRaccoon-wRaccoon/4,yRaccoon-wRaccoon/3, xRaccoon-wRaccoon/2,yRaccoon-hRaccoon/2, xRaccoon-wRaccoon/2.1,yRaccoon-5); //left ear
        triangle(xRaccoon+wRaccoon/4,yRaccoon-wRaccoon/3, xRaccoon+wRaccoon/2,yRaccoon-hRaccoon/2, xRaccoon+wRaccoon/2.1,yRaccoon-5); //right ear
    fill(0);
        ellipse(xRaccoon, yRaccoon+8, noseUnit*2,noseUnit); //nose
    fill(100);
        ellipse(xRaccoon-eye, yRaccoon, eye*1.5, eye); //left eye patch
        ellipse(xRaccoon+eye, yRaccoon, eye*1.5, eye); //right eye patch
    fill(0);
        ellipse(xRaccoon-eye, yRaccoon, eyeSize,eyeSize); //left eye
        ellipse(xRaccoon+eye, yRaccoon, eyeSize,eyeSize); //right eye
}

function tree (xTree, yTree) {
    var wLeaves = 70;
    var hLeaves = 90;
    var branch = 20;
    fill(28,118,108);
        ellipse(xTree, yTree, wLeaves, hLeaves); //leaves
    fill(86,58,36);
        triangle(xTree-5,yTree+hLeaves, xTree, yTree-branch, xTree+5,yTree+hLeaves); //trunk
        triangle(xTree-2,yTree+5, xTree,yTree+branch*.75, xTree-branch, yTree-branch); //left branch
        triangle(xTree+2,yTree+branch, xTree,yTree+branch*1.5, xTree+branch, yTree-5); //right branch
}

function deer(xDeer, yDeer) {
    fill(188,140,85);
        ellipse(xDeer, yDeer, 35,50); //head
        quad(xDeer-4,yDeer-18, xDeer-14,yDeer-30, xDeer-24,yDeer-32, xDeer-20, yDeer-23); //left ear
        quad(xDeer+4,yDeer-18, xDeer+14,yDeer-30, xDeer+24,yDeer-32, xDeer+20, yDeer-23); //right ear
    fill(158,111,57);
        ellipse(xDeer,yDeer-15, 12,20); //forehead patch
    fill(0);
        ellipse(xDeer-10,yDeer+2, eyeSize,eyeSize); //left eye
        ellipse(xDeer+10,yDeer+2, eyeSize,eyeSize); //right eye
        triangle(xDeer-noseUnit,yDeer+noseUnit*3, xDeer,yDeer+noseUnit*4, xDeer+noseUnit,yDeer+noseUnit*3); //nose
}

function owl(xOwl, yOwl) {
    var wOwl = 50;
    var hOwl = 40;
    var ear = 20;
    fill(80,110,132);
        ellipse(xOwl, yOwl, wOwl,hOwl);
        triangle(xOwl-ear*.7,yOwl-ear*.75, xOwl-ear,yOwl-ear, xOwl-22,yOwl-ear*.25); //left ear
        triangle(xOwl+ear*.7,yOwl-ear*.75, xOwl+ear,yOwl-ear, xOwl+22,yOwl-ear*.25); //right ear
    fill(236,236,163);
        ellipse(xOwl-10,yOwl-2, hOwl/2,hOwl/2); //left eye patch
        ellipse(xOwl+10,yOwl-2, hOwl/2,hOwl/2); //left eye patch
    fill(0);
        ellipse(xOwl-10,yOwl-2,eyeSize,eyeSize); //left eye
        ellipse(xOwl+10,yOwl-2,eyeSize,eyeSize); //right eye
    fill("orange");
        triangle(xOwl-noseUnit,yOwl+noseUnit, xOwl,yOwl+noseUnit*3, xOwl+noseUnit,yOwl+noseUnit) //beak
}

function flower(xFlower, yFlower) {
    var wPetal = 10;
    var hPetal = 20;
    var yPetal = 15;
    var rotatn = 45;
    //Petals
    push();
    fill(179,91,134);
    translate(xFlower,yFlower);
        ellipse(0,-yPetal, wPetal,hPetal);
        ellipse(0,yPetal, wPetal,hPetal);
    rotate(radians(rotatn));
        ellipse(0,-yPetal, wPetal,hPetal);
        ellipse(0,yPetal, wPetal,hPetal);
    rotate(radians(rotatn));
        ellipse(0,-yPetal, wPetal,hPetal);
        ellipse(0,yPetal, wPetal,hPetal);
    rotate(radians(rotatn));
        ellipse(0,-yPetal, wPetal,hPetal);
        ellipse(0,yPetal, wPetal,hPetal);
    pop();
    //Center of Flower
    fill("orange");
        ellipse(xFlower,yFlower, yPetal,yPetal);
}

And here’s my initial sketch for the design: