sketch

// Christine Seo
// Section C
// mseo1@andrew.cmu.edu
// Project-05

var shapeSize;
var smallSize;

var r;

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

function mouseClicked(){
   background(255, 250, 220);

//first row set
push();
for(var x = 15; x <= width; x += 110){
  for(y = 30; y <= height; y += 110){
	shapeSize = random(15,25); //randomness of size of shapes with restriction
	smallSize = random(5,7);//randomness of size of shapes with smaller restriction
  
  r = random(255)
  
  noStroke();
	colorMode(HSB,200);//restrict colors
	var c = color(r,30,200);
	fill(c);
  ellipse(x + 5,y - 13,smallSize,shapeSize);//ears
  rect(x,y,shapeSize,shapeSize); //;legs
  ellipse(x,y,shapeSize,shapeSize);//eye
  ellipse(x + 25,y,shapeSize + 12,shapeSize + 12);//body
  fill(50);
  ellipse(x,y,shapeSize / 2,shapeSize / 2);//eye black
  fill(255);
  ellipse(x + 5,y - 3,shapeSize / 3,shapeSize / 3);//eye highlight
  	}
	}
pop();

//hearts pattern
push();
for(var x = 70; x <= width; x += 110){
  for(y = 80; y <= height; y += 115){
  r = random(255)

  noStroke();
  colorMode(HSB,200);
  var c = color(r,30,200);
  fill(c);
  triangle(x,y,x + 20,y + 20,x + 40,y);//bottom of heart
  triangle(x + 15,y,x + 30,y - 10,x + 40,y);//top right of heart
  triangle(x,y,x + 15,y - 10,x + 25,y);//top left of heart
    }
  }
pop();

noLoop() 
}

I was inspired by my baby cousin’s bunny wallpaper. I added hearts to give it a different pattern so it won’t be boring. I wanted to randomize the color and size of the shape of the bunny as well. I tried to stay in certain a color palette that resonates with soft colorful cotton candies. I also made sure the pattern visually stayed within the canvas. This project is something that I would actually use in real life and even in other classes if I need a unique background for other projects! I think the for loop function is very useful to redraw multiple things at once.

sketch

// Kevin Thies
// kthies@andrew.cmu.edu
// Section C
// Project 05 - Sellout Wallpaper

// For reference, my 'brand' is Thies Arch, maybe Thies Art one day.
// my logo is a stylized TA. when TA is referenced in the code, it refers to
// the little TA logos, which can be thought of as a rectangle with corners
// and a center.

var d;              // physical spacing between TAs in pixels
var TAXSpacing;     // x distance from centers of TAs
var TAYSpacing;     // y distance from centers of TAs
var TAXSCALE;       // proportion of width to height
var TAYSCALE;       // 1, establish TA proportions
var SCALE;          // SCALE value, proportions are multiplied by this
var TAx;            // width of TA
var TAy;            // height of TA
var rotation = 0;   // rotates every other TA
var colR;           // R value of gradient
var colG;           // G value of gradient
var colB;           // B value of gradient
var toggle = 1;     // toggles between designs


function setup() {
    // basic style setup
    createCanvas(480,480);
    background(0);
    angleMode(DEGREES);
    strokeWeight(1.5);

    // establish proportions of TAs and spacing
    TAYSCALE = 1;
    TAXSCALE = 0.58;
    SCALE = 40;
    d = SCALE/5;

    // width/height is equal to width/height proportions * SCALE
    TAx = TAXSCALE * SCALE;
    TAy = TAYSCALE * SCALE;

    // spacing is equal to TA size * SCALE + d
    TAXSpacing = TAx + d;
    TAYSpacing = TAy + d;
}



function draw() {
    // set up a basic grid of proportioned TAs TAXSpacing
    // and TAYSpacing apart from each other
    // columns of grid
    for (var y = 0; y < height; y += TAYSpacing) {
    rotation ++;

        // each row should progress a gradient, top being gray, bottom being beige
        // these ensure an even transition
        colR = map(y, 60, height - 60, 135, 174);
        colG = map(y, 60, height - 60, 135, 166);
        colB = map(y, 60, height - 60, 135, 128);
        stroke(colR, colG, colB);

        // rows of grid
        for (var x = 0; x < width; x += TAXSpacing ) {
            rotation ++; // every other TA rotates 180 degrees

            // move origin to the top right corner of each TA
            push()
            translate(x, y);

            if(rotation % 2 === 0) {
                rotate(180);
                drawTA(-TAx, -TAy);
            } else {
                drawTA(0, 0);
            }
            print(rotation);
            pop();
        }
    }
    noLoop();
}


// given top left coords of TA, draw TA to scale and maintain proportions
function drawTA(x, y) {

    if(toggle % 2 === 0) {
        stroke(174,166,128);
    }
    // T - |
    line( x, y,
          x, y + TAy);
    // T - --
    line( x, y,
          x + (0.44 * SCALE), y);


    if(toggle % 2 === 0) {
        stroke(135);
    }

    // A - |
    line( x + TAx, y,
          x + TAx, y + TAy);
    // A - /
    line( x + TAx, y,
          x + (.12 * SCALE), y + TAy)
    // A - -
    line( x + (.35 * SCALE), y + (.75 * SCALE),
          x + (.47 * SCALE), y + (.75 * SCALE) );
}

// I  ended up doing some variations with fixed colors,
// so clicking on the canvas will toggle between designs
function mousePressed() {
    rotation = 0;
    background(0);
    toggle ++;
    redraw();
}

As of today, I’m a sellout to my own brand.
For context, I have a “brand” called ThiesArch, and I have a logo for it. Influenced a little by designer fabrics like Louis Vuitton and Gucci, and with a desire to spice up my portfolio website, I decided to go the route of a simple wallpaper made up of a tiled logo, so that at a distance it doesn’t look like much more than some lines and a gradient, but up close you could make out the logos. It’s all based off the proportions of the logo, so I could just change the scale value to make it look more or less legible. It would be cool to print fabric with this design, with the gradient accounting for the length, and make like a “branded company T-shirt” (it’d be just me).

It actually wasn’t as hard as I thought it would be to get the relative positions of the lines, since there are only five. It’s just tedious to make sure the proportions are correct.
Also if you click the sketch, I did one where the Ts and As form stripes, but that’s only legible on larger scales.

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