Project – 05 – Wallpaper

Since the loop is not difficult, I spend a lot of time figuring the individual shape to make them look interesting together. Especially for the polygon shape. I learned the cos() and sin() and vertex() to draw that shape. Also, I consider the color to be consistent with the visual.

sketchDownload
    // Fangzheng Zhu
    // Section D
    // jtimczyk@andrew.cmu.edu
    // Project-05-wall paper

var a=20;
var l=50;

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

}



function draw(){
    
    background(221,209,183);
    
    //background
    var sparkle = {
        locationX: random(width),
        locationY: random(height),
        size: random(1, 5)
    }
    fill (0);
    noStroke();
    ellipse(sparkle.locationX, sparkle.locationY, sparkle.size, sparkle.size);
   
    // flower
    for (var x1=50; x1 < 600; x1+=150) {
      for (var y1=50 ; y1 < 600 ; y1+=150){
        flower(x1,y1);
      }
    }

    // eye
    for (var x2=60; x2 < 250; x2+=75) {
      for (var y2=25 ; y2 < 400 ; y2+=75){
        eye(x2,y2);
      }
    }

    // shape1
    for (var x3=120; x3 < 500; x3+=150) {
        for (var y3=120 ; y3 < 500 ; y3+=150){
        shape1(x3,y3);
      }
    }

}


function flower(x,y){
      push();
      fill(229, 148, 183);
      circle(x-a/2, y-a/2, a);
      circle(x+a/2, y-a/2, a);
      circle(x-a/2, y+a/2, a);
      circle(x+a/2, y+a/2, a);
      fill(27, 85, 155);
      circle(x, y, a);
      pop();
}


function eye(x,y) {
    push();
    translate(x, y);
    fill(255);
    arc(x, y-l/4.5, l, l, 0.5, PI-0.5);
    arc(x, y+l/4.5, l, l, PI+0.5, -0.5);
    //fill(22,125,88);
    fill(random(22),125,random(225));
    ellipse(x, y, l/2, l/2); 
    pop();

}

function shape1(x,y){
    push();
    translate(x, y);
    var spacing = 360 / 7;
    beginShape();
    fill(0);
    for(let i = 0; i <= 7; i++) {
        var angle = i * spacing;
        var b = cos(radians(angle)) * 10;
        var c = sin(radians(angle)) * 10;
        if (i==0) {
            vertex(b,c);
    }
         else {
             var cAngle = angle - spacing/2;
             var cX = cos(radians(cAngle)) * 40;
             var cY = sin(radians(cAngle)) * 40;
             quadraticVertex(cX, cY, b, c)
      }
    }
    endShape();
    pop();
}

Leave a Reply