Category: Section E

sketch

/*Elena Deng
Section E
  edeng1@andrew.cmu.edu
  Project-05
}
*/

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

function draw() {
    background("pink");

//draws background lines (light pink)
    for(var i=-20; i<width; i+=30){
      rect(i,0,20,height);
      fill(250,171,206);
    }

    //draws circles (dough)
    for (var y = 20; y < height; y += 80) {
        for (var x = 20; x < width; x += 70) {
            fill(200,164,118);
            ellipse(x, y, 60, 60);
        }
    }
//draws icing (chocolate)
    for (var y=20;y<height;y+=80){
      for (var x = 10;x<width;x+=70){
        fill(126,87,49);
        ellipse(x+10, y, 48, 48);
      }
    }

//draws donut hole
    for (var y=20;y<height;y+=80){
      for (var x = 10;x<width;x+=70){
        fill("pink");
        ellipse(x+10, y, 15, 15);
      }
    }
//sprinkles (yellow and blue)
    for(var y=10;y<height;y+=80){
    for(var x=10;x<width;x+=70){
      stroke("yellow");
      strokeWeight(2.5);
      line(x,y,x+3,y+3);
      line(x+5,y+20,x,y+23);
      line(x+25,y+10,x+28,y+14);
      line(x+10,y-5,x+14,y-2);
      stroke(126,211,247);
      line(x+22,y+2,x+19,y+6);
      line(x-9,y+13,x-5,y+15);
      line(x+14,y+22,x+20,y+25);

    }
    }
    noLoop();
}

I’m not completely satisfied with this iteration but I’m proud of the overall visual result. As you can see in my sketchbook (will upload soon), I originally wanted to attempt a more complex shape, however after trying multiple times to create Shrek, I was unable to get it to how I wanted it to look, so I changed my idea.

Out of all the projects we’ve done thus far, I am not as proud of this assignment compared to the other ones, I hope in the future I can improve on the skills that can be used through nested functions. I hope by the end of this class I will be able to create Shrek.

sketch

/*
Eliza Pratt
Section E
elpratt@andrew.cmu.edu
Project 05
*/

function setup() {
    createCanvas(600, 500);
    background(103, 196, 92);

    //ladybug placement
    for (y = -5; y < height; y+=35) {
        //even rows
        if (y%2 == 0) { 
            for (x = 15; x < width; x+=30) {
                ladybug(x, y);
            }
        }
        //odd rows
        else {
            for (x = 15; x < width; x+=30) {
                ladybug(x - 15, y);
            } 
        }
    }
    noLoop();
   }

//draws ladybug
function ladybug(x, y) {
    push();
    translate(x, y);

    var headW = 30; //size of head
    var bodyY = y + 20; //body origin
    var bodyW = 50; //size of body

    //head and antenna
    noFill();
    strokeWeight(2);
    arc(x, y - headW*(2/3), headW, headW, 0, PI);
    fill(0);
    ellipse(x, y, headW, headW);

    //body
    noStroke();
    fill(255, 0, 0);
    ellipse(x, bodyY, bodyW, bodyW);

    //wing line
    stroke(0);
    strokeWeight(2);
    line(x, bodyY - bodyW/2, x, bodyY + bodyW/2);
    
   //spots 
    fill(0);
    ellipse(x - 15, bodyY, 8, 8);
    ellipse(x - 10, bodyY - 15, 8, 8);
    ellipse(x - 8, bodyY + 15, 8, 8);
    ellipse(x + 15, bodyY, 8, 8);
    ellipse(x + 10, bodyY - 15, 8, 8);
    ellipse(x + 8, bodyY + 15, 8, 8);

    pop();

}

This was the first time I’ve created a function to help with my code! I was trying to find a way to have the individual ladybugs rotate at random angles, but I got too confused. I probably wouldn’t put this wallpaper in my house, but maybe it would make a nice paper napkin print?

Early sketches:

sketch

/* Jaclyn Saik 
Section E
jsaik@andrew.cmu.edu
Project-05-Wallpaper
Eyeballs
*/

function setup() {
    createCanvas(600, 600);
    background("CadetBlue");
    var xs = 70; //x spacing
    var ys = 50 //y spacing
    var yo = 30; //y offset
    var xo = 30; //x offset

    
    for (var y = 0; y < 20; y++) {
        for (var x = 0; x < 20; x++)  {
            if (x % 2 > 0) { //odd-numbered rows are offset by 1.5 times the y position 
                yo = 30 * 1.5;
                //sleepy eye
                strokeWeight(4);
                stroke("DarkSlateGray"); 
                line(px-3, py-3, px-20, py-15);
                line(px-4, py-3, px-25, py-10);
                line(px-5, py, px-28, py-3);
                strokeWeight(2);
                line(px+20, py+2, px+10, py+10);
                fill("Burlywood");
                arc(px, py, 40, 40, PI, 0);
                fill("PeachPuff");
                arc(px, py, 40, 20, PI, 0);
                arc(px, py, 40, 12, 0, PI);
                fill("DarkSlateGray");
                ellipse(px, py-5, 10, 10);

                //accent dots, which are connected to the odd-numbered rows, so sleepy eyeball
                strokeWeight(0);
                fill("Yellow");
                ellipse(px-35, py-35, 2, 4);
                fill("gold");
                ellipse(px-12, py-30, 3, 3);
                fill("Orange");
                ellipse(px+45, py-15, 4, 3);
                fill("Khaki");
                ellipse(px+30, py-20, 3, 3);

            } else if (x % 2 == 0) { //even numbered rows stick to original variable values
                yo = 30;
                //wide awake eye 
                strokeWeight(2);
                line(px-4, py-3, px-28, py-7);
                line(px-5, py, px-35, py-3);
                fill("PeachPuff");
                arc(px, py, 40, 40, PI, 0);
                fill("AliceBlue");
                arc(px, py, 40, 30, PI, 0);
                arc(px, py, 40, 20, 0, PI);
                fill("Sienna");
                ellipse(px, py-3, 17, 17)
                fill("DarkSlateGray");
                ellipse(px, py-3, 7, 7);

                //some fun text! 
                textSize(7);
                strokeWeight(1);
                text("z z . . ", px+12, py-27);

            }
            var py = yo + y * ys; //position y is y offset plus y multplied by spacing
            var px = xo + x * xs; //position x is x offset plus x multplied by spacing
            

        }

    }
    noLoop(); //so that it is static
}

This project was really fun to do, probably because it’s exciting to see what a design looks like when the visual elements repeatedly interact with themselves across a page. I was inspired by wallpapers that were loud and intrusive, since I felt like the broke the classic look of something appealing and ornamental, and would be something I would be more likely to put in my own home. I found an image online from an artist who creates odd, curious designs.

I wanted to see if I could create something on the same subject matter, but with a different, more computed aesthetic. I played a lot with stoke weights and colors to achieve the final look that I wanted, and got to experiment using text as an ornamental feature. I had to be careful with the text and make sure it didn’t say anything that would be irritating if repeated often. I used what I learned Assignment 05-B about offsetting grids in order to alternate the spacing between rows, which I think makes the wallpaper flow better when looking at it from far away.  Here are some of my initial sketches for decided what type of eyes to include.

sun & pyramid

var sideL = 80; // side length of each square tile

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

function draw() {
    // blue background
    background(142, 154, 175);
    // green triangles
    for (var y = 0; y <= height; y += sideL) {
        for (var x = sideL; x <= width; x += sideL) {
             fill(174, 181, 171);
             noStroke();
             triangle(x, y, x - sideL, y + sideL, x, y + sideL);
        }
    }
    // tan triangles
    for (var y = sideL / 2; y <= height; y += sideL) {
        for (var x = sideL / 2; x <= width; x += sideL) {
             fill(229, 211, 197);
             noStroke();
             triangle(x, y, x - sideL / 2, y + sideL / 2, x, y + sideL / 2);
        }
    }
    // orange triangles
    for (var y = sideL / 2; y <= height; y += sideL) {
        for (var x = sideL / 2; x <= width; x += sideL) {
             fill(229, 162, 126);
             noStroke();
             triangle(x, y, x, y + sideL / 2, x + sideL / 2, y + sideL / 2);
        }
    }
    // 3/4 circle
    for (var y = sideL / 2; y <= height; y += sideL) {
        for (var x = sideL / 2; x <= width; x += sideL) {
             fill(237, 238, 192);
             noStroke();
             arc(x, y, sideL / 2, sideL / 2, 3/4 * PI, 1/4 * PI);
        }
    }
    noLoop();
}

My wallpaper is meant to be an abstract representation of the sun rising behind a pyramid. I vaguely remember seeing a wallpaper at a museum that represented the Pyramid of Giza using two like-toned triangles. Starting with that idea, I played around with layers of overlapping shapes and colours.

In the process, I found it much easier to control the shapes’ position after setting a tile length variable. I am happy with the way it turned out using just triangles and one circle per tile. Even though I like the abstraction and simplicity, I’d like to explore more organic forms in future projects.

sketch

//Jenny Hu
//Section E
//jjh1@andrew.cmu.edu
//Project 05

var x = 0;
var y = 0;
var tileWidth = 42;
var ellipseW = 10;
var arcW = 2;
var width = 40;
var height = 40;
var ox = 20;

function setup() {
    createCanvas(480, 480);
    background(0);
    angleMode(DEGREES);

    for (x = 0; x <12; x++){
        var evenOrOdd = x%2;

        if(evenOrOdd == 0){
            height = width + (sqrt(3)/2);
            //ellipse rows
            for (y = 0; y<12; y++){ 
                var placex = y*tileWidth;
                var placey = x*tileWidth;
                noFill();
                stroke(255);
                strokeWeight(1.2);

                for (var e = 0; e<12; e++){
                    var scale = 5
                    ellipse(placex+tileWidth/2,placey+tileWidth/2, 
                        ellipseW+(e*scale), ellipseW+(e*scale));

                }
        }
    }
        
        //lace rows
        if(evenOrOdd != 0){ 
            height = width + (sqrt(3)/2);
            for (y = 0; y<12; y++){
                var placex = y*tileWidth + (ox/2);
                var placey = x*tileWidth;
                var scale = 4;
                noFill();
                stroke(255);
                strokeWeight(1.5);

                //upward lace arc
                for (var e = 0; e<10; e++){
                    arc(placex + tileWidth/2, placey + tileWidth/2, 
                        arcW+e*scale, arcW+e*scale, 180, 0, CHORD);
                    arc(placex, placey + tileWidth/2, 
                        arcW+e*scale, arcW+e*scale, 180, 0, CHORD);
                }

                //downward lace arcs
                for (var s = 0; s<5; s++){
                    arc(placex + tileWidth/2, placey + tileWidth/2, 
                        arcW+s*scale, arcW+s*scale, 0, 180, CHORD);
                    arc(placex, placey + tileWidth/2, 
                        arcW+s*scale, arcW+s*scale, 0, 180, CHORD);
                }
        }

        }
    }
    noLoop();
}

I wanted to replicate and play with a sense of three-dimensional texture by overlaying moire patterns once again. Building off of one of the assignments, I thought it would be nice to replicate fabric, and drew inspiration from lace dresses (see below). For the sake of contrast, the background is black, but I’d love to see this extended into a variety of more complex patterns in the future.