sketch

var r; // red 
var b; // blue
var x;
var y;

function setup() {
    createCanvas(480, 480);
    background(250, 130, 150);
}

function draw() {
	for (y = 0; y < height; y += 80) {
		for (x = 0; x < width; x += 80){
			r = x;
			b = y / 2;
			
			// circles
			noStroke();
			fill(r, 150, 150);
			ellipse(50 + x, 50 + y, 50, 50);
			fill(255, 100, 100, 90);
			ellipse(40 + x, 35 + y, 50, 50);

			// banana body
			fill(200, 230, b);
			noStroke();
			beginShape();
			vertex(30 + x, 20 + y);
			bezierVertex(75 + x, 15 + y, 70 + x, 75 + y, 25 + x, 70 + y);
			bezierVertex(50 + x, 60 + y, 45 + x, 20 + y, 30 + x, 22 + y);
			endShape();

			// banana stem
			stroke(200, 230, b);
			strokeWeight(5.5);
			line(25 + x, 26 + y, 39 + x, 14 + y);

			// curve pattern
			noFill();
			stroke(255, 200, 200, 30);
			strokeWeight(2.5);
			arc(15 + x, 10 + y, 25, 25, HALF_PI, PI);
		}	
	}
}

I’m really glad I got to successfully use the bezier vertex to create a shape that’s not an ellipse this week (a banana 🙂 ).  I also enjoyed incorporating subtle color gradients into the wallpaper and combining that with different opacities. I had fun making this and definitely have a better understanding of nested for loops now.

wallpaper

//Justin Yook
// Section C
// jyook@andrew.cmu.edu
// Project 05

// bear + flower wallpaper
function setup() {
    createCanvas(600, 600);
    background(135, 206, 250);
    noLoop();
}

function draw() {
    var box = 40; // bear original x position
    var boy = 50; // bear original y position
    var bvs = 55; // bear vertical spacing
    var bhs = 110; // bear horizontal spacing

    //draws bears and oranges  
    for (var y = 0; y < 11; y++) {
        for (var x = 0; x < 10; x++) {
            var bpy = boy + y * bvs; // y position of following bears drawn
            var bpx = box + x * bhs; // x position of following bears drawn 
            var fpx = bpx + bhs + (bhs /2); // x position of fruit for even rows
            var fpy = bpy + bvs; // y position of fruit for even rows

            //draw bears on even rows
            if (y % 2 == 0) {
                //draw bear head
                noStroke();
                fill(255);
                ellipse(bpx, bpy, 60, 60);

                //draw bear ears
                fill(255);
                ellipse(bpx + 14, bpy - 26, 15, 15);
                ellipse(bpx - 14, bpy - 26, 15, 15);

                //draw bear nose
                fill(234, 212, 182);
                ellipse(bpx, bpy, 20, 20);
                fill(0);
                ellipse(bpx, bpy - 8, 6, 6);

                //draw bear eyes
                fill(0);
                ellipse(bpx + 8, bpy - 12, 6, 6);
                ellipse(bpx - 8, bpy - 12, 6, 6);

                //draw mouth
                stroke(0);
                line(bpx, bpy - 8, bpx - 4, bpy);
                line(bpx, bpy - 8, bpx + 4, bpy);

                //draw rosy cheeks
                noStroke();
                fill(255, 192, 203);
                ellipse(bpx - 20, bpy, 15, 15);
                ellipse(bpx + 20, bpy, 15, 15);
            }

            //draw oranges on odd rows
            if (y % 2 != 0) {
                //draw orange body
                fill(255, 192, 79);
                ellipse(bpx - bhs - 60, fpy - bvs, 30, 30);

                //draw orange leaves
                fill(50, 205, 50);
                ellipse(bpx - bhs - 60, fpy - bvs - 10, 8, 8);
            }
        }
    }
}

I wanted to create a friendly and cute wallpaper that gives off a refreshing vibe. The blue background is supposed to be comfortable to the eyes, and the orange complements that color. I can imagine the wallpaper pattern to be on stationery products such as tapes, or pencil cases. There is no pen and paper sketch of the design, but my main inspiration was a bear character called Rice from StickyRiceCompany, a handmade-sticker shop; I tried to re-create the character as accurately as possible.

Store Link: https://www.etsy.com/shop/StickyRiceCompany?ref=search_shop_redirect

sketch

// Catherine Coyle
// ccoyle@andrew.cmu.edu
// Section C
// Project - 05 Wallpaper

// https://www.historicnewengland.org/explore/collections-access/gusn/286690/ inspo

var tileW = 75;
var tileH = 100;


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

function draw() {
	background(249, 240, 229);
	for(var row = 0; row < height / tileH; row++) {
		for(var col = 0; col < width / tileW; col++) {
			drawTile(tileW * col, tileH * row);
		}
	}
	noLoop();
}

function drawTile(x, y) {
	// many tiles have the same thing drawn over each other which is
	// just to account for the edges of the canvas so it looks
	// more continuous

	// short lines through the middle circles
	stroke(237, 186, 85, 95);
	strokeWeight(tileW / 8);
	line(x + tileW / 4, y, x + tileW * 3/4, y);
	line(x + tileW / 4, y + tileH, x + tileW * 3/4, y + tileH);
	line(x, y + tileH / 4, x, y + tileH * 3/4);
	line(x + tileW, y + tileH / 4, x + tileW, y + tileH * 3/4);

	// gold thicker background lines
	strokeWeight(6);
	stroke(237, 186, 85);
	line(x, y + tileH / 2, x + tileW / 2, y);
	line(x, y + tileH / 2, x + tileW / 2, y + tileH);
	line(x + tileW / 2, y, x + tileW, y + tileH / 2);
	line(x + tileW / 2, y + tileH, x + tileW, y + tileH / 2);

	// thinner blue lines between diamonds
	strokeWeight(2);
	stroke(132, 145, 232);
	line(x, y + tileH / 2, x + tileW / 2, y);
	line(x, y + tileH / 2, x + tileW / 2, y + tileH);
	line(x + tileW / 2, y, x + tileW, y + tileH / 2);
	line(x + tileW / 2, y + tileH, x + tileW, y + tileH / 2);
	noStroke();

	// gold background circle
	fill(237, 186, 85);
	ellipse(x, y + tileH / 2, tileW / 4 + 3, tileW / 4 + 3);
	ellipse(x + tileW / 2, y, tileW / 4 + 3, tileW / 4 + 3);
	ellipse(x + tileW / 2, y + tileH, tileW / 4 + 3, tileW / 4 + 3);
	ellipse(x + tileW, y + tileH / 2, tileW / 4 + 3, tileW / 4 + 3);

	// blue circle at corners
	fill(132, 145, 232);
	ellipse(x, y + tileH / 2, tileW / 4, tileW / 4);
	ellipse(x + tileW / 2, y, tileW / 4, tileW / 4);
	ellipse(x + tileW / 2, y + tileH, tileW / 4, tileW / 4);
	ellipse(x + tileW, y + tileH / 2, tileW / 4, tileW / 4);

	// inside circle to show background color
	fill(249, 240, 229);
	ellipse(x, y + tileH / 2, tileW / 8, tileW / 8);
	ellipse(x + tileW / 2, y, tileW / 8, tileW / 8);
	ellipse(x + tileW / 2, y + tileH, tileW / 8, tileW / 8);
	ellipse(x + tileW, y + tileH / 2, tileW / 8, tileW / 8);

	// gold diamonds in middle of some tiles
	fill(237, 186, 85);
	quad(x + tileW / 2, y + tileH / 2 - tileH / 8, x + tileW / 2 + tileW / 8, y + tileH / 2, 
		x + tileW / 2, y + tileH / 2 + tileH / 8, x + tileW / 2 - tileW / 8, y + tileH / 2);
}

I really love looking at kind of antique and elegant designs so this project was a lot of fun for me! I set up my basic grid with nested for loops and then made a ‘helper’ function that would draw the tiles based on the top left corner of each part of the grid.

In coming up with ideas for what to make for this project, I looked a lot at the antique wallpaper link that was provided with the assignment. Rather than doing sketches of my own, I tried to emulate one of my favorite patterns I found there.

I feel like the design I made is a nice mix between retro looking with the rounded edges and the elegant look to this wallpaper. This project was a fun way for me to get refreshed on nested for-loops!

sketch

function setup(){
	createCanvas (480, 480);
	background (170, 220, 250);
	strokeWeight(0);
	noLoop();
}

function draw(){

	//makes a grid for the right facing balloons
    for(var x1 = 70; x1 < width; x1 += 250){
    	for(var y1 = 50; y1 < height; y1 += 230){
	        airBalloonRight(x1, y1);
    	}
    }

    //makes a grid for the left facing balloons
    for(var x2 = 170; x2 < width; x2 += 250){
    	for(var y2 = 150; y2 < height; y2 += 230){
	        airBalloonLeft(x2, y2)
	    }
	}

    //makes a grid of the clouds
	for(var x3 = 170; x3 < width; x3 += 250){
        for(var y3 = 50; y3 < height; y3 += 230){
	       cloud(x3, y3);
        }
	}

	//makes a grid of the sun
	for(var x4 = 50; x4 < width; x4 += 250){
        for(var y4 = 160; y4 < height; y4 += 230){
	       sun(x4, y4);
	   }
	}

}

function airBalloonRight(x, y){ //draws the right facing balloons
	push();
	translate(x, y);
    rotate(radians(30));
   
    //balloon
	fill(250, 90, 90);
    ellipse(0, 0, 60, 55);
    quad(-30, 5, 30, 5, 6, 38, -6, 38);
   
    //basket
    fill(150,110,90);
    rect(-5, 45, 10, 8);
   
    //ballon decor
    strokeWeight(2);
    stroke(200, 60, 60);
    line(18, 20, -18, 20);
    line(28, 0, -29, 0);
    line(19, -20, -19, -20);
    
    //basket connectors
    strokeWeight(1);
    stroke(150,110,90);
    line(-15, 25, -5, 45);
    line(14, 25, 4, 45);
    
    pop();

}

function airBalloonLeft(x, y){ // draws the left facing balloons
	push();
	translate(x, y);
    rotate(radians(-30));

    // balloon
	fill(250, 90, 90);
    ellipse(0, 0, 60, 55);
    quad(-30, 5, 30, 5, 6, 38, -6, 38);

    // basket
    fill(150,110,90);
    rect(-5, 45, 10, 8);

    // basket connectors
    strokeWeight(1);
    stroke(150,110,90);
    line(-15, 25, -5, 45);
    line(14, 25, 4, 45);

    //ballon decor
    strokeWeight(2);
    stroke(200, 60, 60);
    line(18, 20, -18, 20);
    line(28, 0, -29, 0);
    line(19, -20, -19, -20);
    
    pop();

}

function cloud (x, y){ // draws the cloud
	push();
    fill(250);
    translate(x, y);
    ellipse(5, -5, 40, 35);
    ellipse(28, -2, 40, 28);
    rect(-28, -5, 85, 20, 10);
    pop(); 
}

function sun(x, y){ // draws the sun
	push();
    translate(x,y)
    push();
    for(var r = 0; r < 800; r += 90){ //rotates the rays around the center ellipse
    	rays();
    	rotate(radians(r));
    }
    pop();
    ellipse(0, 0, 30, 30)
    fill(245, 225, 10)
    ellipse(0, 0, 30, 30)
	pop();
}

function rays(x, y) { // draws the rays
	fill(250, 200, 10);
	triangle(0, 13, -30, 25, -15, 0);
	triangle(-5, 10, - 30, 0, -5, -10)
}

I had a lot of fun with this project, coming up with a repeating design by using for() loops and declaring my own functions. I came up with the idea of hot air balloons because I thought that they would be cute and simple. I like my final design, I think it would be good for a backpack, computer desktop screen, or wallpaper for a child’s room. In future projects, I will work on incorporating more variables into the drawings of the specific objects.

sketch

// Sophia S Kim
// Section C 1:30
// sophiaki@andrew.cmu.edu 
// Project-05-Wallpaper



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

function draw() {
  background (255, 232, 187);
  //arc for RED part of rainbow
  for(var i = 20; i < height+40; i += 65) {
    for(var a = 20; a < width+30; a += 105) {
      strokeWeight(7);
      stroke(255, 67, 67);
      noFill(); 
      arc(a, i, 80, 85, PI, 0, OPEN);
    }
  }
  //arc for ORANGE part of rainbow
  for(var i = 20; i < height+40; i += 65) {
    for(var a = 20; a < width+30; a += 105) {
      strokeWeight(7);
      stroke(255, 177, 56);
      noFill(); 
      arc(a, i, 70, 75, PI, 0, OPEN);
    }
  }
  //arc for YELLOW part of rainbow
  for(var i = 20; i < height+40; i += 65) {
    for(var a = 20; a < width+30; a += 105) {
      strokeWeight(7);
      stroke(247, 238, 82);
      noFill(); 
      arc(a, i, 60, 65, PI, 0, OPEN);
    }
  }
  //arc for GREEN part of rainbow 
  for(var i = 20; i < height+40; i += 65) {
    for(var a = 20; a < width+30; a += 105) {
      strokeWeight(7);
      stroke(112, 232, 160);
      noFill(); 
      arc(a, i, 50, 55, PI, 0, OPEN);
    }
  }
  //arc for BLUE part of rainbow 
  for(var i = 20; i < height+40; i += 65) {
    for(var a = 20; a < width+30; a += 105) {
      strokeWeight(7);
      stroke(124, 209, 232);
      noFill(); 
      arc(a, i, 40, 45, PI, 0, OPEN);
    }
  }
  //arc for INDIGO part of rainbow 
  for(var i = 20; i < height+40; i += 65) {
    for(var a = 20; a < width+30; a += 105) {
      strokeWeight(7);
      stroke(124, 142, 229);
      noFill(); 
      arc(a, i, 30, 35, PI, 0, OPEN);
    }
  }
  //arc for VIOLET part of rainbow 
  for(var i = 20; i < height+40; i += 65) {
    for(var a = 20; a < width+30; a += 105) {
      strokeWeight(7);
      stroke(154, 125, 226);
      noFill(); 
      arc(a, i, 20, 25, PI, 0, OPEN);
    }
  }
  for(var i = 23; i < height+40; i += 65) {
    for(var a = 20; a < width+30; a += 105) {
      fill(0);
      noStroke();
      textStyle(BOLD);
      textSize(8);
      text("HAPPY", a-14, i + 10);
    }
  }
}

Utilizing the ‘wallpaper’/pattern into clothing, I was inspired by the iconic Paul Frank tees and the Happy Bunny t-shirts from my childhood. I wanted to fuse text and graphics together like the Happy Bunny t-shirts. I narrowed down the graphic to look simple so that the viewer can comprehend both the graphic and text together. The main objects I thought of were weather related: rain, clouds, sun, moon, rainbow. I chose to use the rainbow to give a positive mood to the viewer. At first, I had a really hard time spacing each block (graphic+text) from each other. However, after a while I got the hang of spacing and creating arcs for the rainbow. The assignments really assisted me to handle the for loops well for this project!

Project

/*Sharon Yang
Section C
junginny
Project-05
*/


function setup() {
    createCanvas(500,600);
    background(253,254,210);
    noStroke();
    //6 rows of donuts
    for (var y = 0; y < 6; y++) {
        if (y % 2 == 0) { //hexagonal formation
            for (var x = 0; x < 6; x++) { 
                fill(225,182,128);
                noStroke();
                ellipse(30+x*110, 20+y*110, 75, 75); //base of donut
                if (x % 2 == 0) {
                    fill(246,166,199); //strawberry glaze
                }
                else {
                    fill(95,42,22); //chocolate glaze
                }
                noStroke();
                ellipse(30+x*110, 20+y*110, 65, 65);
                fill(253,254,210);
                noStroke();
                ellipse(30+x*110, 20+y*110, 30, 30); //donut hole
                //sprinkles!
                if (x % 2 == 0) {
                    strokeWeight(3); //chocolate sprinkles
                    stroke(95,42,22);
                    line(5+x*110,y*110,12+x*110,3+y*110); //top left sprinkle
                    line(x*110+35,y*110+38,x*110+40,y*110+45); //bottom right sprinkle
                    line(x*110+56,y*110+5,x*110+50,y*110+15); //top right sprinkle
                    line(2+x*110,30+y*110,8+x*110,27+y*110); //bottom left sprinkle
                }
                else {
                    strokeWeight(3); //colorful sprinkles
                    stroke(185,85,130);
                    line(5+x*110,y*110,12+x*110,3+y*110); //top left sprinkle
                    stroke(255);
                    line(x*110+35,y*110+38,x*110+40,y*110+45); //bottom right sprinkle
                    stroke(239,245,174);
                    line(x*110+56,y*110+5,x*110+50,y*110+15); //top right sprinkle
                    stroke(62,170,230);
                    line(2+x*110,30+y*110,8+x*110,27+y*110); //bottom left sprinkle
                }
            }
        }
        else { 
            for (var x = 0; x < 4; x++) {
                fill(225,182,128);
                noStroke();
                ellipse(90+x*110, 20+y*110, 75, 75);
                if (x % 2 == 1) {
                    fill(246,166,199);
                }
                else {
                    fill(95,42,22);
                }
                noStroke();                
                ellipse(90+x*110, 20+y*110, 65, 65);
                fill(253,254,210);
                noStroke();
                ellipse(90+x*110, 20+y*110, 30, 30);
                //sprinkles!
                if (x % 2 == 1) {
                    strokeWeight(3); //chocolate sprinkles
                    stroke(95,42,22);
                    line(65+x*110,y*110,72+x*110,3+y*110); //top left sprinkle
                    line(x*110+95,y*110+38,x*110+100,y*110+45); //bottom right sprinkle
                    line(x*110+116,y*110+5,x*110+110,y*110+15); //top right sprinkle
                    line(62+x*110,30+y*110,68+x*110,27+y*110); //bottom left sprinkle
                }
                else {
                    strokeWeight(3); //colorful sprinkles
                    stroke(185,85,130);
                    line(65+x*110,y*110,72+x*110,3+y*110); //top left sprinkle
                    stroke(255);
                    line(x*110+95,y*110+38,x*110+100,y*110+45); //bottom right sprinkle
                    stroke(239,245,174);
                    line(x*110+116,y*110+5,x*110+110,y*110+15); //top right sprinkle
                    stroke(62,170,230);
                    line(62+x*110,30+y*110,68+x*110,27+y*110); //bottom left sprinkle
                }
            }
        }
    }
    noLoop();
}

While the project was very straightforward and quite easy, it was also a lot of fun and I could understand better the use of for loops and nested for loops. I feel more comfortable declaring the variables I need within the for loops and adjusting the increments.

I have been inspired by the google image attached.