Mihika Bansal – Project 05 – Wallpaper

sketch

//Mihika Bansal 
//mbansal@andrew.cmu.edu 
//Section E 
//Project 5

var diam = 66; //diameter
var Cdist = 198; //distance between 3 circles
var rad = 33; //circle radius 



function setup() {
    createCanvas(594, 582);
    background(255, 238, 173); // making my background canvas
    

    for(var i = 0; i < 10; i ++){ //determining # of rows 
        if(i % 2 == 0){ // determining if row is even or odd 
            for(var j = 0; j < 3; j ++){ // three of the first kind of ellipse in each row
                
                //first ellipse pattern 
                var posX1 = rad + Cdist * j; // determing x position of each of the 3 ellipses
                var posY1 = rad + diam * i * (0.5 * sqrt(3)); //determing y position of each of these ellipses
                //var posY1 = 33; 
                strokeWeight(0); 
                fill(150, 206, 180);  
                ellipse(posX1, posY1, diam, diam); //making blue ellipse
                fill(255, 204, 92);
                ellipse(posX1, posY1, 55, 55); //making yellow ellipse
                push(); 
                stroke(255, 238, 173); 
                strokeWeight(2); 
                translate (posX1, posY1); //making center lines
                for (var k = 0; k < 25; k ++){
                    line(0, 0, 27, 0);
                    rotate(PI/9); 
                } 
                pop();
            }
            for(var a = 0; a < 3; a ++){ // will be three of these ellipses

               //second ellipse pattern 
                var posX2 = (3 * rad) + Cdist * a; // the position of the second ellipse, which is 3 * radius
                fill(255, 111, 105); 
                ellipse(posX2, posY1, 66, 66); //making the target like ellipses
                stroke(255, 238, 173);
                strokeWeight(3);
                fill(150, 206, 180);
                ellipse(posX2, posY1, 40, 40); 
                fill(255, 111, 105); 
                ellipse(posX2, posY1, 15, 15);
                strokeWeight(0);
            }

            for(var b = 0; b < 3; b++){

                //third ellipse pattern 
                var posX3 = (5 * rad) + Cdist * b; //the base distance is 5 times the radius
                strokeWeight(0); 
                fill(255, 204, 92);
                ellipse(posX3, posY1, 66, 66); //making the ellipse bases
                fill(150, 206, 180);
                ellipse(posX3, posY1, 54, 54);


                push(); 
                strokeWeight(1); //making the rotated squares
                stroke("white"); 
                rectMode("center"); 
                translate(posX3, posY1);
                for (var m = 0; m < 3; m ++) {
                    rect(0, 0, 34, 34); 
                    rotate(PI/5); 
                }
                pop(); 

                fill(255, 204, 92);
                ellipse(posX3, posY1, 34, 34); //center ellipse
            }
        }
        else{ //if row is odd 
            for(var j = 0; j < 3; j ++){
                
                //first ellipse pattern, which was the third pattern 
                var posX1 = 2 * rad + Cdist * j; //want to fit in the gaps between the circles
                var posY1 = rad + diam * i * (0.5 * sqrt(3)); //using the ratio to make the circles fit exactly with eachother 
                strokeWeight(0); 
                fill(255, 204, 92);
                ellipse(posX1, posY1, 66, 66); 
                fill(150, 206, 180);
                ellipse(posX1, posY1, 54, 54);


                push(); 
                strokeWeight(1); 
                stroke("white"); 
                rectMode("center"); 
                translate(posX1, posY1);
                for (var m = 0; m < 3; m ++) {
                    rect(0, 0, 34, 34); 
                    rotate(PI/5); 
                }
                pop(); 

                fill(255, 204, 92);
                ellipse(posX1, posY1, 34, 34); 
                
            }
            for(var a = 0; a < 3; a ++){

               //second ellipse pattern, which was actually the first ellipse 
                var posX2 = (4 * rad) + Cdist * a; //fits in between the gaps again
                strokeWeight(0); 
                fill(150, 206, 180);  
                ellipse(posX2, posY1, diam, diam); 
                fill(255, 204, 92);
                ellipse(posX2, posY1, 55, 55);
                push(); 
                stroke(255, 238, 173); 
                strokeWeight(2); 
                translate (posX2, posY1); 
                for (var k = 0; k < 25; k ++){
                    line(0, 0, 27, 0);
                    rotate(PI/9); 
                } 
                pop();
                
            }

            for(var b = 0; b < 3; b++){

                //third ellipse pattern, which was actually the second
                var posX3 = (6 * rad) + Cdist * b;
                fill(255, 111, 105); 
                ellipse(posX3, posY1, 66, 66);
                stroke(255, 238, 173);
                strokeWeight(3);
                fill(150, 206, 180);
                ellipse(posX3, posY1, 40, 40); 
                fill(255, 111, 105); 
                ellipse(posX3, posY1, 15, 15);
                strokeWeight(0);

                //drawing first ellipse in the row for even rows, at the position 0 
                fill(255, 111, 105); 
                ellipse(0, posY1, 66, 66);
                stroke(255, 238, 173);
                strokeWeight(3);
                fill(150, 206, 180);
                ellipse(0, posY1, 40, 40); 
                fill(255, 111, 105); 
                ellipse(0, posY1, 15, 15);
                strokeWeight(0);
            }

        }
    }

   
    noLoop(); 
}
   
  
function draw() {

  
}

This project was really fun to do. I really enjoyed coming up with distinct ellipse patterns to start with, then figuring out how to put them together to create a new pattern. I tried multiple iterations of what the circles would look like overlapped, but I realized it looked the cleanest in this manner.