Category: Project-05-Wallpaper

Project 5: Wallpaper

sketch-wall

var x = 5
var y = 5
var w = 5
var h = 20
var dx = 8

function setup() {
    createCanvas(500, 500);
    background(220);
}

function draw() {
    for (hirow = 0; hirow < 5; hirow += 1) { // higher rows
        x = 5 + hirow*130
        for (hicol = 0; hicol < 5; hicol += 1) { // higher columns
            squiggle();
            y = 5 + hicol*154
        }
    }
    for (lorow = 0; lorow < 5; lorow += 1) { // lower rows
        x = 53 + lorow*130
        for (locol = 0; locol < 5; locol += 1) { // lower columns
            squiggle();
            y = 100 + locol*154
        }
    }
}

function squiggle() { // diamond of arcs w/ ellipses 
    noFill();
    strokeWeight(1);
    stroke(107, 70, 27);
    for (arccount = 0; arccount < 7; arccount += 1) {
        y += 3
        arc(x + arccount*dx, y, w, h, 3*PI/2, PI/2);
        arc(x + arccount*dx, y+h, w, h, -3*PI/2, -PI/2);
        arc(x + arccount*dx, y+2*h, w, h, 3*PI/2, PI/2);
        arc(x + arccount*dx, y+3*h, w, h, -3*PI/2, -PI/2);
    }
    ellipse(x + 7*dx, y+h, 11, 15);
    ellipse(x + 7*dx, y+3*h, 11, 15)
}

For my wallpaper, I drew inspiration from this design circa 1805. I thought the handmade recurring pattern, most likely created through block printing, would be fun to convert to a digital format. While I took the diamond shape from the original design, I opted for a more minimalist approach that didn’t need to align exactly to be visually interesting.

Project-05: Wallpaper

sketchDownload
//Yeon Lee, Section C
//Project 5: Wallpaper


function setup() {
    createCanvas(500, 500);
    background(220);
    backgroundColor = color(255,251,241);
    cloudColor = color(255, 145, 179); //pink
    cloud_2Color = color(111, 220, 191); //green
    balloonColor = color(255, 141, 102); //orange
    balloon_2Color = color(255, 218, 102); //yellow
    noLoop();
}

function draw() {
    background(backgroundColor);

    //clouds
    for (var a = -30; a < width; a += 150) {
        for (var b = 0; b < height; b += 200) {
            push();
            translate(a, b);
            cloud();
            pop();
        }
    }

    //clouds #2
    for (var c = 50; c < width; c += 150) {
        for (var d = 100; d < height; d += 200) {
            push();
            translate(c, d);
            cloud_2();
            pop();
        }
    }

    //balloon
    for (var e = -20;  e < width; e += 150) {
        for (var f = 50; f < height; f += 200) {
            push();
            translate(e, f);
            balloon();
            pop();
        }
    }

    //balloon #2
    for (var g = 55;  g < width; g += 150) {
        for (var h = 160; h < height; h += 200) {
            push();
            translate(g, h);
            balloon_2();
            pop();
        }
    }
}

function cloud() { //draw cloud 
    fill(cloudColor);
    noStroke();
    ellipse(30, 60, 15, 15);
    ellipse(40, 50, 20, 20);
    ellipse(60, 40, 30, 30);
    ellipse(80, 50, 20, 20);
    ellipse(90, 60, 15, 15);
    rect(30, 50.5, 58, 17);
}

function cloud_2() { //draw cloud again with different color
    fill(cloud_2Color);
    noStroke();
    ellipse(30, 60, 15, 15);
    ellipse(40, 50, 20, 20);
    ellipse(60, 40, 30, 30);
    ellipse(80, 50, 20, 20);
    ellipse(90, 60, 15, 15);
    rect(30, 50.5, 58, 17);
}

function balloon() { //draw balloon
    fill(balloonColor);
    noStroke();
    ellipse(50, 55, 45, 48);
    triangle(45, 84, 50, 50, 55, 84);
    fill(116,71,0);
    rect(50, 84, 1, 30);
}

function balloon_2() { //draw balloon with different color
    fill(balloon_2Color);
    noStroke();
    ellipse(50, 55, 45, 48);
    triangle(45, 84, 50, 50, 55, 84);
    fill(116,71,0);
    rect(50, 84, 1, 30);
}

My favorite part of this project was creating shapes like the cloud and balloons, and playing around with colors for better visualization. At first, I tried to illustrate the sky with flying balloons, but later I decided to make it entirely abstract with different colors of clouds just to resemble like a wallpaper on a kid’s room.

Project 05: Wallpaper

sketch
//Julianna Bolivar
//jbolivar@andrew.cmu.edu
//Section D
//Project 05: Wallpaper



function setup() {
    createCanvas(400, 400); //canvas
    background(225, 99, 71); //orange background
}

function draw() {
    for (var row = 0; row < 10; row ++){
        for (var col = 0; col < 10; col ++){
            drawSection(row*45, col*75);
        }
    }
}

function drawSection(x, y){
    push();
    translate(x-55, y-20);
    stroke("black");
    noFill();
    stroke(0);
    //stem 1
    curve(0, 5, 68, 19, 68, 56, 10, 60);
    curve(65, 10, 68, 30, 75, 40, 115, 65); 
    //stem 2
    curve(115, 35, 90, 35, 90, 60, 115, 65); 
    //stem 3
    curve(95, 60, 75, 70, 75, 80, 90, 80); 
    
    //flower 1
    noStroke();
    fill("white");
    circle(70, 20, 5); 
    circle(75, 20, 5);
    circle(66, 22, 5);
    circle(68, 15, 6);
    circle(73, 16, 6);
    circle(64, 18, 4);
    circle(79, 17, 4);
    circle(61, 23, 3);
    //flower 2
    circle(90, 35, 5); 
    circle(86, 32, 5.5);
    circle(95, 34, 5.5);
    circle(89, 29, 4.5);
    circle(93, 31, 4);
    //flower 3
    circle(75, 70, 3); 
    circle(73, 68, 4); 
    circle(77, 68, 3); 
    circle(75, 66, 2);
    circle(78, 71, 2);
    circle(71, 70, 2); 
    pop();
}
Pin from Pinterest.

I was inspired by this wallpaper I found on Pinterest. I did 3 different flowers in a repeating pattern. I’m really proud of myself for this project! I’m happy with how it turned out.

My Background – 05 Project

sketch
//Brandon Yi
//Section A
//btyi@andrew.cmu.edu
//Project-05-A
function setup() {
    createCanvas(600, 600);
    background(0);
    rectMode(CENTER);
}

function draw() {
    //initializing variables 
    var d=width/10;
    var x=d/2
    var y=d/2

    //iterating it over the background size
    for (var row = 0; row < width/d; row++) {
        y=d/2;
        for (var col = 0; col < height/d; col++) {
            tile(x,y,d);
            y+=d;
        }
        x+=d;
    }
    
    noLoop();
}
function tile(x,y,d) {
    //translation requires a push and pop
    push();
    stroke(152,255,255);
    strokeWeight(5);
    translate(x,y)
    fill(0);
    ellipse(0,0,d);
    ellipse(0,0,d-15);
    for (var i = 0; i < d; i+=10) {
        strokeWeight(2);
        stroke(104,0,208);
        noFill();
        rect(0,0,i,i)
    }
    pop();

}

The trickiest part of this program was making a for loop inside the function. On top of that, it was difficult to also make the entire program relative to the background size.

Project 5: Wallpaper

sketch

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

function draw() {
    background(195, 230, 241);

    //steam
    for (var yUp = 85; yUp <= 500; yUp += 127) {
        for (var xUp = 75; xUp <= 600; xUp += 148) {
            steam(xUp, yUp);
        }
}

    //pan
    for (var yYah = 43; yYah <= 450; yYah += 128) {
        for (var xYah = 24; xYah <= 580; xYah += 148) {
            pan(xYah, yYah);
        }
    } 

    //egg
    for (var y = 80; y <= 500; y += 128) {
        for (var x = 47; x <= 550; x += 148) {
            egg(x, y);
        }
    }

    //handle
    for (var yUp = 85; yUp <= 500; yUp += 127) {
        for (var xUp = 94; xUp <= 600; xUp += 148) {
            handle(xUp, yUp);
        }
}
    
function egg(x, y) {
    //whites
    noStroke();
    fill("white")
    circle(x + 3, y, 35)
    circle(x + 8, y + 5, 35)
    circle(x + 2, y + 7, 30)

    //shadow on whites
    //gray
    noStroke();
    fill(215, 215, 215)
    circle(x + 11.5, y + 8.5, 17)
    //white
    fill("white")
    circle(x + 8.5, y + 5.5, 21)

    //yolk shadow
    fill(222, 181, 67)
    circle(x - 2, y - 3, 13)

    //yolk
    noStroke();
    fill(237, 193, 72)
    circle(x -3, y - 3, 11)

    //yolk highlight
    noStroke();
    fill("white")
    circle(x - 4, y - 5, 3)
}

function pan (x, y) {
    //outer
    fill(161, 161, 161)
    circle(x + 30, y + 40, 76.5)

    //inner
    fill(0)
    circle(x + 30, y + 40, 72)

    //most inner
    fill(80, 80, 80)
    circle(x + 30, y + 40, 54)
}

function handle(x, y) {
    push();
    //translate(x,y)
    rectMode(CENTER);
    //rotate(radians(40))
    //handle
    fill(0)
    rect(x + 26, y, 55, 13, 10)
    //connector
    fill(196, 196, 196)
    rect(x, y, 6, 18, 2)
    pop();
    //hole
    fill(195, 230, 241)
    ellipse(x + 42, y, 10, 5)
}
}

function steam(x, y) {
    noStroke();
    //positive space
    fill(245, 250);
    ellipse(x + 5, y - 40, 35, 15)
    ellipse(x - 5, y - 50, 35, 14)
    ellipse(x - 3, y - 59, 30, 10)

    //negative space
    fill(195, 230, 241)
    ellipse(x - 3, y - 39, 28, 10)
    ellipse(x + 6, y - 50.5, 28, 9)
    ellipse(x - 13, y - 60, 28, 8)
}

This project was really fun. The hardest part was understanding what details should be added to make the wallpaper seem more dimensional and dynamic. The process was very additive in that I had to iterate a few times to see what was missing in the wallpaper compositionally.

Project 5: Wallpaper

czo-05-project
var x = 75;
var y = 75;
function setup() {
    createCanvas(600, 600);
    background(207, 241, 252);
    rectMode(CENTER);
    ellipseMode(CENTER);
}

function module(x, y) { //creating the individual circular modules
    noStroke();
    fill(255);
    ellipse(x, y, 150, 150);
    fill(207, 241, 252); //alternating fills of white and blue to create a visual pattern
    rect(x, y, (150/sqrt(2)),(150/sqrt(2)));
    fill(255);
    ellipse(x, y, 100, 100);
    fill(207, 241, 252);
    ellipse(x, y, 100, 50);
    ellipse(x, y, 50, 100);
    fill(255);
    ellipse(x, y, 80, 30);
    ellipse(x, y, 30, 80);
    fill(207, 241, 252);
    ellipse(x, y, 40, 40);
    fill(255);
    rect(x, y, (40/sqrt(2)),(40/sqrt(2)))
    fill(207, 241, 252);
    ellipse(x, y, 40, 10);
    ellipse(x, y, 10, 40);

}

function draw() {
    for (x = 75; x <= 725; x += 150) { // creating a grid to make a patterned wallpaper
        for (y = 75; y <= 725; y += 150){
            module(x, y);
        }
    }
}

I really like playing with geometry and colors, so I wanted to create something that can resemble a pattern or even a visual illusion when looked at from a distance.

Project 5 – Wallpaper

In this work I tried to incorporate the four colors of the Korean flag: red, blue, black and white, in addition to the rectangles present on the flag, and a brief geometric shape of the national flower (Mugunghwa). 

var col;
var row;
var col1;
var row1;
function setup() {
    createCanvas(600, 600);
}

function draw() {
    background(0);
    rectangles();
    for(col = 60; col <= 600; col += 200) {
        for(row = 60; row <=600; row += 200) {
            flowers(col,row);
            print(row);
        }
        print(col);
    }
    noLoop();
    for(col1 = 150; col1 <= 600; col1 += 200) {
        for(row1 = 150; row1 <= 600; row1 += 200) {
            flowers(col1, row1);
        }
    }
}

function rectangles(){
    for(var x = 0; x<=600; x +=90){
        for (var y=20; y<=600; y +=50){
        fill(255);
        rect(x,y,55,15);    
        }
    
    }
}


function flowers(x,y) {
    push();
    translate(x,y);
    fill(255,0,0);
    ellipse(25,0,30,30);
    rotate(PI/3);
    fill(0,0,153);
    ellipse(25,0,30,30);
    rotate(PI/3);
    fill(255,0,0)
    ellipse(25,0,30,30);
    rotate(PI/3);
    fill(0,0,153);
    ellipse(25,0,30,30);
    rotate(PI/3);
    fill(255,0,0);
    ellipse(25,0,30,30);
    rotate(PI/3);
    fill(0,0,153);
    ellipse(25,0,30,30);
    fill(230,230,250);
    ellipse(0,0,15,15);
    pop();
}

Project 5 Wallpaper

It was really hard doing this becuase of translate as it took alot of calculation to figure out where the origin is.

sketch


function setup() {
    createCanvas(600, 600, WEBGL);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
  
  //for the color
  colorMode(RGB);
  let from = color(random(0,255),random(0,255),random(0,255));
  let to = color(random(0,255), random(0,255), random(0,255));
  colorMode(RGB); 
  let interA = lerpColor(from, to, 0.33);
  let interB = lerpColor(from, to, 0.66);
 
 //for the pattern 
  
  for (var col = 0; col < 2; col += 1){
    translate(-200,0);
    for (var row = 0; row < 2; row += 1){
      //translate(0,-150);
      fill(from);
      design();
    }
  }
  
  for (var col = 0; col < 4; col += 1){
    translate(200,0);
    for (var row = 0; row < 4; row += 1){
      //translate(0,150);
      fill(interA);
      design();
    }
  }
  
  for (var col = 0; col < 2; col += 1){
    translate(-200,0);
    for (var row = 0; row < 2; row += 1){
      //translate(0,-150);
      design();
    }
  }
  
  for (var col = 0; col < 2; col += 1){
    translate(0,-200);
    for (var row = 0; row < 2; row += 1){
      //translate(0,-150);
      fill(interB);
      design();
    }
  }
  
  for (var col = 0; col < 4; col += 1){
    translate(0,200);
    for (var row = 0; row < 4; row += 1){
      //translate(0,-150);
      fill(to);
      design();
    }
  }
    
 
  noLoop();
}



function design(){
  fill
  ellipsoid(30, 40, 30);
  torus(60,20);
}

Project 5 Wall Paper

sketch
function setup() {
    createCanvas(600, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    noLoop();
}

var s = 5
var xstar = [50, 61, 83, 69, 71, 50, 29, 31, 17, 39];
var ystar = [18, 37, 43, 60, 82, 73, 82, 60, 43, 37];
function draw() {
// background hexagons
    push()
    background(255)
    for(var x = 0; x <= 600; x += 15){
        for (var y = 0; y <= 600; y += 2*s*sqrt(3)/2){
            fill(random(100,160),random(200,220),random(220,255))
            hexagon(x,y)
            noLoop();
        }
    }
    for (var x = 7.5; x <= 600; x += 15){
        for (var y = s*sqrt(3)/2; y <= 600; y += 2*s*sqrt(3)/2){
            fill(random(100,160),random(150,200),random(150,255))
            hexagon(x,y)
        }
    }
// stars
    push()
    translate(random(0,100),random(0,300))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()
    push()
    translate(random(100,200),random(0,300))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()

    push()
    translate(random(200,300),random(0,300))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()
    push()
    translate(random(300,400),random(0,300))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()

    push()
    translate(random(400,500),random(0,300))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()
    push()
    translate(random(500,600),random(0,300))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()

    push()
    translate(random(0,100),random(300,580))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()
    push()
    translate(random(100,200),random(300,580))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()

    push()
    translate(random(200,300),random(300,580))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()
    push()
    translate(random(300,400),random(300,580))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()

    push()
    translate(random(400,500),random(300,580))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(40,200))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()
    push()
    translate(random(500,600),random(300,580))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(40,200))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()
//TEXT CMU SCHOOL OF MUSIC
    for (var x = 0; x <= 600; x += 150){
        for (var y = 50; y <= 600; y += 180){
            push()
            translate(x,y)
            rotate(radians(45))
            textSize(15);
            textStyle(ITALIC)
            stroke(0,0,128)
            strokeWeight(1.8)
            fill(0,0,128)
            text("CMU SCHOOL OF MUSIC",-50,-20)
            pop()
        }   
    }
//TEXT ELECTRONIC MUSIC
    for (var x = 0; x <= 800; x += 150){
        for (var y = 50; y <= 800; y += 175){
            push()
            translate(x,y)
            rotate(radians(45))
            textSize(15);
            textStyle(ITALIC)
            stroke(225,112,133)
            strokeWeight(1.8)
            fill(255, 182, 193)
            text("ELECTRONIC MUSIC",-30,-80)
            pop()
        }   
    }
    pop()
}

//self-defined function: hexagon
function hexagon(x,y){
    push();
    translate(x,y)
    noStroke();
    triangle(0,0,-s,0,-s/2,-s*sqrt(3)/2)
    triangle(0,0,-s/2,-s*sqrt(3)/2,s/2,-s*sqrt(3)/2)
    triangle(0,0,s,0,s/2,-s*sqrt(3)/2)
    triangle(0,0,-s,0,-s/2,s*sqrt(3)/2)
    triangle(0,0,-s/2,s*sqrt(3)/2,s/2,s*sqrt(3)/2)
    triangle(0,0,s,0,s/2,s*sqrt(3)/2)
    pop();
}

I started the project by creating a background that consists of many small hexagons, I gave them random colors, but I decided on the general trend of the colors so they seem coherent. Then I drew stars appearing randomly in certain areas with random color(within a hue), random rotation, and random stroke and strokeWeight(within a range). Lastly, I drew the rotated pattern of the texts using for loops. Trying to keep them all rotated within the for loop was challenging for me.

Project 5- Wallpaper

sketch
var col1;
var row1;
var col2;
var row2;
var col3;
var row3;
function setup() {
    createCanvas(600, 400);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(88,24,69);
    for (col2 = 50; col2 <=600; col2 += 100) {
        for(row2 = -50; row2 <= 400; row2 += 100) {
            stroke(218,247,166);
            noFill();
            ellipse(col2, row2 + 50, 100, 100);
        }
        noLoop();
    }
    for(col1 = 50; col1 <= 600; col1 += 200) {
        for(row1 = 50; row1 <=600; row1 += 200) {
            flower(col1,row1);
            print(row1);
        }
        print(col1);
    }
    noLoop();
    for(col3 = 150; col3 <= 600; col3 += 200) {
        for(row3 = 150; row3 <= 600; row3 += 200) {
            flower(col3, row3);
        }
    }
}

function flower(x,y) {
    fill(199,0,57);
    stroke(255,131,105);
    push();
    translate(x,y);
    ellipse(25,0,50,30);
    rotate(PI/3);
    ellipse(25,0,50,30);
    rotate(PI/3);
    ellipse(25,0,50,30);
    rotate(PI/3);
    ellipse(25,0,50,30);
    rotate(PI/3);
    ellipse(25,0,50,30);
    rotate(PI/3);
    ellipse(25,0,50,30);
    fill(199,0,57);
    stroke(199,0,57);
    ellipse(0,0,10,10);
    pop();
}