sketch

function setup() {
    createCanvas(480, 480);
    background(41, 90, 141);
    angleMode(DEGREES);
    noLoop();
    
}

function draw() {

    for (var x = 0; x < 480; x += 96){
        for (var y = 0; y < 480; y += 96){
            push();
            translate(x, y);
            pattern();
            pop();

        }
    }
}

function pattern(){
    var radius = 20;
    var centerX = 40;
    var centerY = 40;

    //main piece
    strokeWeight(1.5);
    stroke(0);
    fill(214, 151, 0);
    arc(centerX, centerY, radius * 2 + 10, radius * 2 + 10, 0, 315); //edge
    fill(243, 210, 132);
    arc(centerX, centerY, radius * 2, radius * 2, 0, 315); //inside

    //separate piece
    push();
    rotate(-45);
    strokeWeight(1.5);
    stroke(0);
    fill(214, 151, 0);
    arc(centerX - 25, centerY + 22, radius * 2 + 10, radius * 2 + 10, 0, 45); //edge
    fill(243, 210, 132);
    arc(centerX - 25, centerY + 22, radius * 2, radius * 2, 0, 45); //inside
    pop();

    //toppings
    strokeWeight(1/2);
    fill(238, 97, 69);
    ellipse(centerX, centerY - 8, 6, 6);
    ellipse(centerX - 3, centerY + 5, 6, 6);
    ellipse(centerX - 10, centerY - 3, 6, 6);
    ellipse(centerX - 10, centerY - 13, 6, 6);
    ellipse(centerX + 8, centerY - 13, 6, 6);
    ellipse(centerX - 18, centerY + 3, 6, 6);
    ellipse(centerX - 12, centerY + 9, 6, 6);
    ellipse(centerX - 3, centerY + 13, 6, 6);
    ellipse(centerX + 7, centerY + 9, 6, 6);
    ellipse(centerX + 17, centerY + 4, 6, 6);
    ellipse(centerX + 27, centerY - 11, 6, 6);

    //division
    for (i = 0; i < 360; i += 45){
        strokeWeight(1);
        line(40, 40, centerX + cos(i) * (radius + 5), centerY + sin(i) * (radius + 5));
    }
    
}

For this project, I wanted to make the wallpaper fun and cute (as always). I thought food that’s partially bitten is very cute. I thought of lollipops, popsicles, donuts, and finally decided to go with pizza because I really wanted to have pizza. I tried creating my own function for the pizza pattern. Then I used for loop to repeat the pattern. I was actually amazed at how easily I could create only one single for loop and put the function inside rather than writing multiple loops for each element.

sketch

// 
// Supawat Vitoorapakorn
// Svitoora@andrew.cmu.edu
// Section E
// 
// Cherry Blossoms: Recusively generate a forest of Sakura.
// Using a Lindenmayer system, each plant grows towards the sun.

var w = 400;
var h = 400;

// Global Variable
var PLANT;
var segment_l = h * .1;
var r = h * .05 * .5;
var common_ratio = .618033 //Golden Ratio
var food;

// Recursively generates a plant model
var max_i = 7; // Max iteration depth
var cur_i = 0;
var DRAW_i = 0; // DRAW's iteration depth

///// MODEL /////
// Creates the sun for plants to grow towards
function food_create(x = w / 2, y = -h * 2) {
	this.x = x;
	this.y = y;
}

// Creates plants node. Nodes that have .child are branches,
// and nodes without .child are leaves.
function create_plant_node(x, y) {
	this.x = x;
	this.y = y;
	this.x0 = this.x;
	this.y0 = this.y;
	this.child = [];
	this.x1 = null;
	this.y1 = null;
}

// Grows plant by making plant seek sunlight
function grow(plant, cur_i) {
	// Using the golden ratio, plant's branch size is a geometric sequence
	l = segment_l * (common_ratio ** (cur_i))
		// Randomly generate the next node via reducing
		// distance from plant ro sun
	do {
		angleMode(DEGREES);
		if (cur_i == 0) {
			angle = 5;
			theta = random(-90 - angle, -90 + angle);
		} else {
			theta = random(0, 360);
		}
		plant.x1 = plant.x0 + (l * cos(theta));
		plant.y1 = plant.y0 + (l * sin(theta));
		d_new = dist(plant.x1, plant.y1, food.x, food.y)
		d_old = dist(plant.x0, plant.y0, food.x, food.y)
	}
	// Keep generating until the new distance is less than the current one
	while (d_new > d_old)
	plant.child = [];
	// Randomly decide how many children(branches) a node should have
	for (var x = 0; x < random(1, 4); x++) {
		plant.child.push(new create_plant_node(plant.x1, plant.y1));
	}
}

// Recursively generates plant
function generate_plant(PLANT, cur_i, max_i) {
	// Break Base
	if (cur_i == max_i) {
		return
		// Continue case
	} else {
		grow(PLANT, cur_i);
		cur_i++;
		for (i in PLANT.child) {
			generate_plant(PLANT.child[i], cur_i, max_i)
		}
	}
}

///// DRAW /////
// Recursively draws plant
function draw_PLANT(plant, DRAW_i) {
	DRAW_i++; // Increases DRAW's Depth counter
	stroke(255 * .3);
	strokeCap(SQUARE);
	strokeWeight((h * .0125) * (common_ratio ** DRAW_i))
		// Break case: Flowers
		// If node has no children; draw leaf.
	if (plant.child.length == 0) {
		fill(255, 255, 255);
		ellipse(plant.x, plant.y, (2 / 600) * w, (2 / 600) * w);
		return
	} // If node has chldren; draw branches
	else {
		r = r ** common_ratio;
		for (i in plant.child) {
			line(plant.x, plant.y,
				plant.child[i].x, plant.child[i].y)
			draw_PLANT(plant.child[i], DRAW_i);
		}
	}
}

///// SETUP /////
function setup() {
	createCanvas(w, h);
	background("#a5d3e5");
	food = new food_create();

	// Row Cols Controller
	num_tree = 3;
	num_row = 3;
	y_pos = 0;

	// Translates Row and Col of Trees
	push();
	translate((w / num_tree) * .5, (h / num_row)*.825);
	// Rows
	for (var x = 0; x < num_row; x++) {
		y_pos = x * (h / num_row);
		// Cols
		for (var i = 0; i < num_tree; i++) {
			PLANT = new create_plant_node(i * (w / num_tree), y_pos);
			generate_plant(PLANT, cur_i, max_i);
			draw_PLANT(PLANT, DRAW_i);
		}
	}
	pop();
    textAlign(RIGHT);
    textSize(10);
    fill(255 * .3);
    text("Please click to regnerate",w*.975,h*.985)
	print("Final:", PLANT);
}

function mouseClicked() {
	setup()
}

Using a Lindenmayer system, each plant grows towards the sun. Every plant starts with a seed, and randomly generates branches to reduce its distance towards the sun at (width/2, -height*2) for a maximum recursion depth of 7. A number of sub-branches (children) each branch (node) generates is random between 1-4.

sketch

/*Rachel Park
rsp1@andrew.cmu.edu
Section B @ 10:30AM
Project 05: Wallpaper Art*/

var SIZE = 25;

function setup() {
    createCanvas(480, 480);
      noStroke();
}

function draw() {

    drawGrid();
    drawPetal1();
    drawPetal2();
    drawPetal3();
    drawPetal4();
    drawMiddle();
    drawSquare();

    noLoop();
}


function drawGrid() {
  for (var y = 0; y < height + SIZE; y += SIZE) {
    for (var x = 0; x < width + SIZE; x += SIZE) {
      fill('lightblue');
      ellipse(x,y,SIZE, SIZE);
    }
  }
}

function drawPetal1() {
  for (var y = 0; y < height + SIZE; y += SIZE) {
    for (var x = 0; x < width + SIZE; x += SIZE) {
      fill(255,178,178);
      rectMode(CENTER);
      rect(x+5,y,7,7);
    }
  }
}

function drawPetal2() {
  for (var y = 0; y < height + SIZE; y += SIZE) {
    for (var x = 0; x < width + SIZE; x += SIZE) {
      fill(255,178,178);
      rectMode(CENTER);
      rect(x-5,y,7,7);
    }
  }
}

function drawPetal3() {
  for (var y = 0; y < height + SIZE; y += SIZE) {
    for (var x = 0; x < width + SIZE; x += SIZE) {
      fill(255,178,178);
      rectMode(CENTER);
      rect(x,y+5,7,7);
    }
  }
}

function drawPetal4() {
  for (var y = 0; y < height + SIZE; y += SIZE) {
    for (var x = 0; x < width + SIZE; x += SIZE) {
      fill(255,178,178);
      rectMode(CENTER);
      rect(x,y-5,7,7);
    }
  }
}

function drawMiddle() {
  for (var y = 0; y < height + SIZE; y += SIZE) {
    for (var x = 0; x < width + SIZE; x += SIZE) {
      fill(255);
      rectMode(CENTER);
      rect(x,y,4,4);
    }
  }
}

function drawSquare() {
  for (var y = 0; y < height + SIZE; y += 50) {
    for (var x = 0; x < width + SIZE; x += 50) {
      fill(178);
      rectMode(CENTER);
      rect(x,y,SIZE,height);
    }
  }
}

For my design, I wanted something simple and to the point. So as I was looking for inspiration, I noticed a lot of wall designs with stripes and such. To add a bit more, I added in flowers into the design as well.

rainyday

function setup() {
    createCanvas(480, 480);
    noLoop();
    
}

function draw() {
    background(22, 79, 119);
    noStroke();
    //rain
    for (var y = 0; y < 480; y += 5){
        for (var x = 0; x < 480; x += 5){
            fill(30, 190, 177);
            ellipse(x, y, 1, 1);
        }
    }

    for (var x = 0; x < 480; x += 96){
        for (var y = 0; y< 480; y+= 96){
            push();
            translate(x,y);
            drawTile();
            pop();

        }
    }
}

function drawTile(){


    //umbrella
    fill(60, 56, 68);
    quad(18, 66, 42, 34, 45, 35, 21, 67);
    rect(18, 66, 7, 3, 20);
    fill(151, 17, 55);
    triangle(24, 30, 60, 12, 36, 36);
    fill(151, 59, 86);
    triangle(36, 36, 60, 12, 48, 51);
    fill(151, 17, 55);
    triangle(48, 51, 60, 12, 54, 54);
    fill(243, 207, 118);
    triangle(60, 10, 64, 9, 63, 13);
    triangle(60, 10, 57, 12, 55, 8);
    triangle(58, 10, 55, 16, 63, 13);
    triangle(59, 14, 66, 16, 63, 12);
    fill(108, 13, 40);
    ellipse(60, 12, 3.5);

    
}

I wanted to make a cute wallpaper with umbrellas to signify my deep seated hope that maybe Pittsburgh will start cooling down for Fall and stop cooking us alive at 80 – 90 degrees. Let the rain fall.

Coding the loop was pretty simple, coding the shapes is still the most finicky part. However, using graph paper to sketch out things first helps.

sketch

//Min Young Jeong
//Section A 9:30am
//mjeong1@andrew.cmu.edu
//Project-05

function setup() {
    createCanvas(500, 500);
    noLoop();
    
}

function draw() {
    background(254,218,0);
    noStroke();

    for (var x = 0; x <= 500; x += 50){
    	for (var y=0;y<=500;y+=50){
    	fill(0);
    	ellipse(x,y,2,4);
    	}
    }
    //yellow background with black seed grid (spacing 50,50)

    for (var x = 0; x < 500; x += 200){
        for (var y = 0; y< 500; y+= 100){
            push();
            translate(x,y);
            drawTile();
            pop();

        }
    }

    //half watermellon concave spacing 200
    
    for (var x = 100; x < 500; x += 200){
        for (var y = 0; y< 500; y+= 100){
            push();
            translate(x,y);
            drawTile2();
            pop();

        }
    }
    //eaten half watermellon convex spacing 200
}

function drawTile(){
	fill(2,130,115)
	arc(50,50,70,70,0,PI,CHORD);
	fill(255);
	arc(50,50,60,60,0,PI,CHORD);
	fill(255,64,108);
	arc(50,50,50,50,0,PI,CHORD);
	fill(0);
	ellipse(60,60,3,6);
	ellipse(40,65,3,6);
	ellipse(45,55,3,6);    
}
//half watermellon tile

function drawTile2(){
	fill(2,130,115)
	arc(50,70,70,70,PI,0,CHORD);
	fill(255);
	arc(50,70,60,60,PI,0,CHORD);
	fill(255,64,108);
	arc(50,70,50,50,PI,0,CHORD);
	fill(0);
	ellipse(60,65,3,6);
	ellipse(40,55,3,6);
	ellipse(45,65,3,6);  
	fill(254,218,0);
	ellipse(65,70,20,20);
	ellipse(55,70,15,15);
}
//helf watermeelon with bite tile

For this project, I started with two different types of tile, one with half watermelon and the other with eaten watermelon.  And I created pattern with two tiles with yellow background with seed pattern.

sketch            

//Hannah Kim
//Section A
//hannahk2@andrew.cmu.edu
//Project-05

function setup() {
    createCanvas(590, 390);
    noStroke();
}
 
function draw() {
    background(224, 206, 163);
    drawGrid();
    noLoop(); 
}
function drawGrid() {
        //ears
        for (var y = 50; y < height + 50; y += 100) {
        for (var x = 50; x < width + 50; x += 100) {
            var r = map(y, 0, 400, 100, 200);
            var g = map(x, 0, 600, 200, 100);
            strokeWeight(5);
            stroke(r, g, 8);
            fill(224, 206, 163);
            //left ear
            triangle(x-30, y, x-40, y-45, x-10, y-20);
            //right ear
            triangle(x+10, y, x+20, y-45, x-10, y-20);
        }
    }
        //drop shadow
        for (var y = 50; y < height + 50; y += 100) {
        for (var x = 50; x < width + 50; x += 100) {
            //gradates color using mapping
        	var r = map(y, 0, 400, 200, 100);
        	var g = map(x, 0, 600, 200, 100);
            noStroke();
        	fill(r, g, 200);
            ellipse(x, y, 70, 70);
        }
    }
        //face
        for (var y = 50; y < height + 50; y += 100) {
        for (var x = 50; x < width + 50; x += 100) {
        	var r = map(y, 0, 400, 100, 200);
        	var g = map(x, 0, 600, 200, 100);
        	fill(r, g, 8);
            ellipse(x-10, y-10, 70, 70);
        }
    }
        //left eye
        for (var y = 50; y < height + 50; y += 100) {
        for (var x = 50; x < width + 50; x += 100) {
        	var r = map(y, 0, 400, 100, 200);
        	var g = map(x, 0, 600, 100, 200);
        	fill(0);
            ellipse(x-20, y-10, 10, 10);
            //pupil
            fill(255);
            ellipse(x-21, y-12, 2, 2);

            //right eye
            fill(0);
            ellipse(x, y-10, 10, 10);
            //pupil
            fill(255);
            ellipse(x-1, y-12, 2, 2);
        }
    }
        //nose
        for (var y = 50; y < height + 50; y += 100) {
        for (var x = 50; x < width + 50; x += 100) {
            fill(0);
            arc(x-10, y, 5, 5, 0, PI, PIE);
        }
    }

}

This project was kind of fun for me but not really because I dont really enjoy making pattern-based work, but it got me even more familiar with loops which I still seem to be struggling with.

//Fon Euchukanonchai
//15-104 SECTION A
//keuchuka@andrew.cmu.edu

function setup() {
    createCanvas(480, 480);
    background(255);
    var angle1 = 0;
    var angle2 = 2;

// setting up for loops for x and y values
    for (var y = 0; y < 5; y++) {
        for (var x = 0; x < 6; x++) {
        	// if the row is even then angle of arc, the circle poxition changes
       		if (x % 2 == 0){
    			angle1 = 3;
    			angle2 = 5;
    			pop=60
    			arcStroke=(50);
    			circleX = -30

    		// conditions if row is odd
   			} else {
    			angle1 = 0;
    			angle2 = 2;
    			arcStroke=(0);
    			circleX =0
    		}

    		// array of arcs
        	stroke(255, arcStroke, 255);
        	strokeWeight(5);
        	noFill();
        	arc(90+x*60, 50+ y*120, 80, 80, angle1, angle2);

        	// array of circles with gradient
        	var circstrokeMap = map(x, pop+90+x*105, width, 230, 255);
        	stroke(255, circstrokeMap, 0);
        	strokeWeight(4);
        	ellipse(x*90+190, y*120+circleX+30, 50, 50);

        	// array of rectangles with gradient
        	var rectstrokeMap = map(x, x*100+240, width, 220, 230);
        	strokeWeight(6);
        	stroke(0, rectstrokeMap, 255);
        	rect(x*100+240, y*94+80, 50, 30, 3);
        	}
        }
    noLoop();    
}

function draw() {
    // draw is not called due to noLoop() in setup()
}

I wanted to experiment with how different arrays of shapes interacting with each other would look with different colors and gradients in a minimal setting.

sketch

// Robert Managad
// Section E
// rmanagad@andrew.cmu.edu
// Project-05-Wallpaper


//colors

var petalGR = 47;
	petalGG = 168;
	petalGB = 144;
var petalRR = 239;
	petalRG = 119;
	petalRB = 99;

var petalXL = 15; // left petal X-co
	petalYLR = 21.5; // left petal Y-Co; right petal Y-Co
	petalXM = 21.5; // middle petals X-Co
	petalYMT = 15.5; // top middle petal Y-co
	petalYMB = 27.5; // bottom middle petal Y-co
	petalXR = 27; // right petal X-co

//size of petals

var petalW = 4.6
var petalH = 12.3

var spacingX = 30; // x-displacement between row elements
	spacingY = 30; // y-displacement between row elements

function setup() {
    createCanvas(300, 300);
    background(252, 241, 235);
    noLoop();
}

function draw() {
	for (var y  = 0; y < 12; y++) { // 12 iterations of rows
        for (var x = 0; x < 12; x++) { // 12 iterations of columns
        	if (y % 2 == 0 & x % 2 == 0) {  // only the even rows of this variant are drawn
        		var Lpy = (petalYLR + y * spacingY) * (sqrt(3)/2); 
        		var Tpy = (petalYMT + y * spacingY) * (sqrt(3)/2);
        		var Bpy = (petalYMB + y * spacingY) * (sqrt(3)/2);
        		var Rpy = (petalYLR + y * spacingY) * (sqrt(3)/2);
            	var Lpx = (petalXL + x * spacingX) - 5; 
            	var	Tpx = (petalXM + x * spacingX) - 5; 
            	var Bpx = (petalXM + x * spacingX) - 5; 
            	var Rpx = (petalXR + x * spacingX) - 5; 
            	var	petalRR = 239;
				var	petalRG = 119;
				var	petalRB = 99;
            }
            else if (y % 2 == 1 & x % 2 == 1) { // only the odd rows of this variant are drawn
            	var Lpy = ((petalYLR + y * spacingY) * (sqrt(3)/2)); 
        		var Tpy = ((petalYMT + y * spacingY) * (sqrt(3)/2));
        		var Bpy = ((petalYMB + y * spacingY) * (sqrt(3)/2));
        		var Rpy = ((petalYLR + y * spacingY) * (sqrt(3)/2));
            	var Lpx = ((petalXL + x * spacingX) - 5); 
            	var	Tpx = ((petalXM + x * spacingX) - 5); 
            	var Bpx = ((petalXM + x * spacingX) - 5); 
            	var Rpx = ((petalXR + x * spacingX) - 5); 
            	var	petalRR = 47;
				var	petalRG = 168;
				var	petalRB = 144;
            }
            	noStroke();
				fill(petalRR, petalRG, petalRB);
				ellipse(Lpx, Lpy, petalH, petalW); //left petal
				ellipse(Tpx, Tpy, petalW, petalH); // top petal
				ellipse(Bpx, Bpy, petalW, petalH); // bottom petal
				ellipse(Rpx, Rpy, petalH, petalW); // right petal
        }
    }
}

I played with several ideas for my background — from merit badges to patchwork — before settling on my final concept: clover petals. I wanted to explore using nested loops and if/else statements to control where elements would appear, and how they can be controlled to do just that. I used Illustrator to plan out my composition beforehand, in addition to primary sketches.

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.

sketch-511.js

//Shariwa Sharada
//Section A
//ssharada@andrew.cmu.edu
//Project-05


function setup(){
	createCanvas(480,480); //background sizing 
	
} 

function draw(){

	background(255);
	
	for(var y = 4; y< height; y+=10){
		strokeWeight(2);
		stroke(255, 188, 0);
		line(0, y, width, y); //background horizontal lines
	}

	for (var a = 7.5; a<width; a+= 100){
		for (var b = 10; b<height; b+= 100){
			fill(0, 152, 255, 190); //using transparencies to show overlaps in shapes 
			noStroke();
			rect(a,b,50,50) //creating the blue coloured squares
		}
	}
	
	for (var s = 16.5; s<width; s+= 100){
		for (var t = 19; t<height; t+= 100){
			fill(255, 0, 0, 150 );
			noStroke();
			rect(s,t,50,50) //creating the red coloured squares
		}
	}

	for (var c = 50.5; c<width; c+= 100){
		for (var d = 1; d<height; d+= 100){
			fill(155, 4, 148, 120);
			noStroke();
			rect(c,d,25,25) //creating the smaller purple coloured squares
		}
	}

	for (var e = 14.5; e<width; e+= 100){
		for (var f = 66; f<height; f+= 100){
			fill(0, 255, 230, 120);
			noStroke();
			ellipse(e,f,25,25) //creating the larger cyan circles 
		}
	}

	for (var g = 20.5; g<width; g+= 100){
		for (var h = 86; h<height; h+= 100){
			fill(0, 255, 0, 120);
			noStroke();
			ellipse(g,h,10,10) //creating the smaller green circles 
		}
	}

	noLoop();
}

For this project I wanted to play with the overlapping of colours and shapes and lines to see what new objects were created. To do this I started off with the idea of the sketch you can see but decided to change some elements because the whole wallpaper ended up coming out to be too symmetrical. I played with the alpha levels of all the colours to allow the overlaps between the shapes to create new colours and additional spaces.