Category: Project-05-Wallpaper

Stefanie Suk – Project 05 – Wallpaper

sketch

//Stefanie Suk
//15-104 D
//ssuk@andrew.cmu.edu
//Project 05 - Wallpaper

var spacing = 25;

function setup() {
    createCanvas (500, 500);
    background(222, 211, 170);
}

function draw() {
    noStroke();

    for(var a = 25; a < width; a += 50) {
        for(var b = 15; b < width; b += 100) {
            tri(a, b);
        }
    }

    for(var e = 25; e < width; e += 90) {
        for(var f = 45; f < height; f += 140) {
            dia(e, f);
        }
    }

    for(var g = 57; g < width; g += 95) {
        for(var h = 60; h < height; h += 120) {
            cir(g, h);
        }
    }


    for (var y = 0; y < height; y++) {
        if(y % 2 == 0){
            for (var x = 0; x < width; x++) {
                fill(120, 107, 37);
                ellipse(spacing * x, spacing * y + 25, 4, 4);
            }
        }
        noLoop();
    }


 //   for(var j = 60; j < width; j += 80) {
 //       for(var k = 70; k < height; k += 110) {
 //           rec(j, k);
 //       }
 //   }

//    for(var c = 25; c < width; c += 50) {
//        for(var d = 15; d < width; d += 100) {
//            tritwo(c, d);
//        }
//    }



}

function tri(a, b) {
    fill(252, 103, 103);
    triangle(a - 20, b + 10, a, b + 40, a + 20, b + 10);
}

function dia(e, f) {
    fill(97, 223, 213);
    circle(e, f, 20, 20);
}

function cir(g, h) {
    fill(254, 123, 250);
    ellipse(g, h, 10, 25);
}

//function rec(j, k); {
//    fill(225, 199, 57);
//   rect(j, k, 10, 10);
//}

//function tritwo(c, d) {
//    fill(252, 103, 103);
//    triange(c - 20, d + 35, c, d - 40, c + 20, d + 45);
//}

For this project, I was inspired by ethical patterns I have in my handkerchief. This handkerchief consists of simple shapes like circles and triangles, but are organized in a beautiful pattern. This is why I used different triangles and circles in my wallpaper, layout them in a simple yet artistic pattern. I also explored different bright neon colors to each shape to make the design pop and lively. I really like the colors I used for this project because the background color and the shape colors really go well together.

Jina Lee – Project 05


sketch

When I first started this project, I was thinking about fruits, particularly oranges. So I created a design that had half oranges everywhere. While doing so, I played around with the color and other ellipses and tried something else.

This was the sketch idea I had for my first iteration.

This was my first iteration with half oranges. On the lines are full oranges.

In the end, I added on to the old design by making it seem more similar to  power buttons. In addition, the colors that I chose gives a tropical feeling that I was looking for. 

Here is my process to getting to my final.

 

//Jina Lee
//Section E
//jinal2@andrew.cmu.edu
//Project-05

var x;
//random colors
var r;
var g;
var b;

function setup() {
    createCanvas(600,600);
    //light blue
    background(119, 158, 203);
}

function draw () {
    //dark green line inbetween the circles
    for (x = 0; x < 5; x ++) {
        stroke(30, 70, 45, 200);
        strokeWeight(5);
        line((x * 100) + 100, 0, (x * 100) + 100, height);
    }

    //vertical forloop for y
    for (var y = 50; y <= height; y += 70) {
        //horizantal forloop for x
        for (var x = 50; x <= width; x += 100) {
            //call drawMain shape which are the circles
            drawMain (x,y);
        }
    }
    noLoop();
}

// cirlces, x y variable coordinates to be called in for loop
function drawMain ( x, y) {
    //r is a random number between 0 - 255
    r = random(255);
    //g is a random number betwen 100 - 200
    g = random(100,200);
    //b is a random number between 0 - 100
    b = random(100);
    //main circles
    noStroke();
    fill(r, g, b);
    ellipse(x, y, 60, 60);
    fill(255);
    ellipse(x, y, 45, 45);
    strokeWeight(3);
    stroke(r, g, b);
    line(x, y - 25, x, y + 25);
    line(x - 20, y - 20, x + 20, y + 20);
    line(x - 20, y + 20, x + 20, y - 20);
    //circles inside the bigger one
    noStroke();
    fill(r, g, b);
    ellipse(x, y, 30, 30);
    //dots on the line
    for (var x = 50; x <= 500; x += 100) {
        noStroke();
        fill(r, g, b);
        ellipse(x + 50, y + 30, 25, 25);
    }
}

Angela Lee – Project 05 – Wallpaper

sketch

/*
 * Angela Lee
 * Section E
 * ahl2@andrew.cmu.edu
 * Project 5 Wallpaper
 */

// spacing between circles
var spacing = 200;

function setup() {
    createCanvas(600, 600);
    var orangeBack = color(241, 94, 39); // orange color
    var blueBack = color(69, 95, 172); // blue color
    setGradient(orangeBack, blueBack); // background gradient
}

function draw() {
    // y position for loop
    for (var y = 50; y <= height - 50; y += spacing) {
        // x position for loop
        for (var x = 50; x <= width - 50; x += spacing) {
            // calling the two functions for drawing the circles
            orangeCircles(x, y);
            blueCircles(x, y);
        }
    }
}

// Function for creating my gradient background
function setGradient(color1, color2) {
    for(var a = 0; a <= height; a++) {
      var amount = map(a, 0, height, 0, 1);
      var back = lerpColor(color1, color2, amount);
      stroke(back);
      line(0, a, width, a);
    }
}

// Orange circle function
function orangeCircles(x, y) {
    noStroke();
    //outer circle
    fill(241, 94, 39);
    ellipse(x, y, 100, 100);

    // second-most outer circle
    fill(243, 109, 66);
    ellipse(x, y, 75, 75);

    // third-most outer circle
    fill(241, 135, 101);
    ellipse(x, y, 50, 50);

    // inner circle
    fill(248, 161, 117);
    ellipse(x, y, 25, 25);
}

// Blue circle function
function blueCircles(x, y) {
    noStroke();
    // blue circles are shifted right and down
    x = x + 100;
    y = y + 100;

    //outer circle
    fill(69, 95, 172);
    ellipse(x, y, 100, 100);

    // second-most outer circle
    fill(87, 114, 183);
    ellipse(x, y, 75, 75);

    // third-most outer circle
    fill(114, 141, 199);
    ellipse(x, y, 50, 50);

    // inner circle
    fill(147, 173, 218);
    ellipse(x, y, 25, 25);
}

I personally love playing with complementary colors, so I wanted to experiment more with complementary contrasts in the wallpaper. In my initial plan, I sketched out semicircles, but I didn’t like how they created harsh edges in the composition. I chose the colors blue and orange and created circular patterns with them. I also wanted to try playing with gradients, so for the background, I created a smooth gradient and for the circles, I created gradient intervals of colors. I alternated between orange and circle to create a balance of colors.

Claire Lee – Project 05 – Wallpaper

project05

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

function draw() {
    background(140, 180, 155, 200);

    for (x = 0; x < 10; x ++) {
        stroke(30, 70, 45, 200);
        strokeWeight(2);
        line((x*60) + 30, 0, (x*60) + 30, height);
        //stem  
    }

    for (x = 0; x < 15; x ++) {
        for (y = 0; y < 62; y += 3) {
            noStroke();
            fill(30, 70, 45, 200); 
            quad((x*60) + 30, y*10 - 5, (x*60) + 40, y*10 - 5, (x*60) + 50, y*10 - 15, (x*60) + 40, y*10 - 15);
            quad((x*60) + 30, y*10 - 5, (x*60) + 20, y*10 - 5, (x*60) + 10, y*10 - 15, (x*60) + 20, y*10 - 15);
            //leaves
        }
    }

    for (x = 0; x < 10; x ++){
        for (y = 0; y < 30; y += 3) {
            noStroke();
            fill(255, 250, 220);
            ellipse((x*120) + 40, y*40 + 4.5, 5, 5);
            ellipse((x*120) + 37, y*40 + 10, 5, 5);
            ellipse((x*120) + 43, y*40 + 10, 5, 5);
            //flowers (odd)
            ellipse((x*120) + 20, (y*40 + 60) + 4.5, 5, 5);
            ellipse((x*120) + 23, (y*40 + 60) + 10, 5, 5);
            ellipse((x*120) + 17, (y*40 + 60) + 10, 5, 5);
            //flowers (even)

        }
    }
    noLoop();

}

This project was a great way to keep playing around with for() loops. I wanted to go for something simple and plant-inspired, so this is what I came up with. I think if I were to make this a little more complex, I’d try using bezier curves instead of straight lines, and implement a little more randomness. However, since it was supposed to be a “wallpaper” type project, I decided to keep it basic.

The planning process

Timothy Liu — Project 05 — Wallpaper

tcliu-openended-05

// Timothy Liu
// 15-104 Section C
// tcliu@andrew.cmu.edu
// OpenEnded-05

var yStart = 60; // y coord of first flower's origin; a reference spot for other petals
var xStart = 60; // x coord of first flower's origin; a reference spot for other petals

function setup() {
    createCanvas(600, 600);
    noLoop(); // making the image static
}

function draw() {

    noStroke(); // no strokes for a cleaner, more geometric feel

    for (var dx = 0; dx < width; dx++) {
        for (var dy = 0; dy < height; dy += 60) { // setting the spacing between lines to 60; 10 total stripes on canvas
            
            if (dy % (60 * 2) === 0) { // odd # stripes
                fill(235, 251, 255); 
                rect(dx, dy, width, 60); // stripes are a pale pastel blue

            } else { // for even # stripes
                fill(210, 239, 247);
                rect(dx, dy, width, 60); // stripes are a slightly darker pastel blue
            }
        }
    }

    fill(171, 215, 235); // making the flowers dark blue
    for (var y = 0; y < 10; y++) { // this for statement dictates the 5 rows of flowers that appear on the canvas
        if (y % 2 === 0 || y === 0) { // this conditional ensures that a blank row is left between rows of flowers
           
            for (var x = 0; x < 10; x += 2) { // the upper left petal on each flower
                var py = (yStart - 10) + y * yStart; // variable that determines starting y coord of this petal
                var px = (xStart - 10) + x * xStart; // variable that determines tarting x coord of this petal
                quad(px - 10, py - 10, px + 10, py, px, py - 20, px - 20, py - 30); // actual petal shape (quadrilateral)
            }
           
            for (var a = 0; a < 10; a += 2) { // the upper right petal on each flower
                var py2 = (yStart - 10) + y * yStart;
                var pa = (xStart - 10) + a * xStart;
                quad(pa + 20, py2, pa + 40, py2 - 10, pa + 50, py2 - 30, pa + 30, py2 - 20);
            }
           
            for (var b = 0; b < 10; b += 2) { // the lower right petal on each flower
                var py3 = (yStart - 10) + y * yStart;
                var pb = (xStart - 10) + b * xStart;
                quad(pb + 20, py3 + 10, pb + 30, py3 + 30, pb + 50, py3 + 40, pb + 40, py3 + 20);
            }
           
            for (var c = 0; c < 10; c += 2) { // the lower left petal on each flower
                var py4 = (yStart - 10) + y * yStart;
                var pc = (xStart - 10) + c * xStart;
                quad(pc - 20, py4 + 40, pc, py4 + 30, pc + 10, py4 + 10, pc - 10, py4 + 20);
            }
            
            for (var d = 0; d < 10; d += 2) { // the center of each flower
                var py5 = (yStart - 10) + y * yStart;
                var pd = (xStart - 10) + d * xStart;
                ellipse(pd + 15, py5 + 5, 5, 5);
            }
        }
    }
}

I enjoyed this project because it allowed me to work with tessellations and arrays, patterns I don’t usually utilize often in my design work. My piece is meant to offer a geometric interpretation of the classic floral wallpaper found in homes. To me, wallpaper should feel warm, inviting, and interesting — all foundations of a fun home environment. In my piece, each flower is comprised of quadrilateral petals and an ellipse center, giving the wallpaper the desired modernistic yet comforting feeling. I also utilized a pastel blue analogous color scheme; I personally really like pastel colors (similar to the ones utilized in the Pixas movie Up), and I think my color scheme added to the feeling of comfort. Interestingly, although blue is typically a “cold” color, I think the pastel nature makes it feel more cozy than cold.

In terms of actual designing, it took me a long time to figure out the exact coordinate needed for each petal. The quad() function in p5.js requires all 4 endpoints to be mapped out, so that took me ample time and trial-and-error to nail down. As seen in my sketchbook below, I actually mapped out the coordinate plane to make sure all my petals were symmetrical and congruent. In the end, it was worth it and I was very happy with my piece.

Some of the ideation sketches I did in my notebook. The bottom section depicts the slope calculations and mapping I had to do to place the endpoints of quad() in the right place in each for loop!

lee chu – project 05 – wallpaper

lrchu

// lee chu
// section c
// lrchu@andrew.cmu.edu
// project - 05


var spacing;
var size;
var raus;
var x;
var y;

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

    spacing = 150;
    size = 21;
}

function draw() {
    background(249, 246, 219);
    polkadots();
    for (var y = 0; y <= height; y += spacing / 2) {
        if ((y / spacing / 2 * 4) % 2 == 0) {
            for (var x = 0; x <= width; x += spacing) {
                rose(x, y, 1);
            }
        }
        else {
            for (var x = spacing / 2; x <= 3.5 * spacing; x += spacing) {
                rose(x, y, 0);
            }
        }  
    }
}

function polkadots() {
    for (var x = 0; x <= width; x += spacing / 2) {
        for (var y = 0; y <= height; y += spacing / 2) {
            strokeWeight(0);
            fill(168, 218, 220);
            ellipse(x, y, 8, 8);
        }
    }
    /*
    x = 0;
    y = 0;
    */
}

function rose(a, b, raus) {
    // leaves
    fill(26, 158, 81);
    beginShape();
    vertex(a, b);
    bezierVertex(a - 0.5 * size, b - 0.25 * size, a - 0.5 * size, b, a - 0.75 * size, 
    b + 0.5 * size);
    endShape();
    beginShape();
    vertex(a, b);
    bezierVertex(a + 0.5 * size, b - 0.25 * size, a + 0.5 * size, b, a + 0.75 * size, 
    b + 0.5 * size);
    endShape();

    // red
    if (raus == 0) {
        fill(107, 39, 55);
    }

    // blue
    else {
        fill(0, 57, 119);
    }

    // flower
    push();
    translate(a, b - 5);
    rotate(PI/4);
    for (h = 0; h < PI; h += PI / 8) {
        ellipse(0, 0, 28, 6);
        rotate(h);
    }
    fill(249, 246, 219);
    ellipse(0, 0, 4, 6);
    pop();
}

I wanted to create a simple floral repeating pattern.

Sean Meng-Project 05- Wall paper

hmeng-project 05

//Sean Meng
//Section C
//hmeng@andrew.cmu.edu
//Project-05-Wall paper

var xS = 55;//define x spacing for each feather
var yS = 65;//define y spacing for each feather

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

function draw() {
	background(0);
    
    for(var x = 1; x <= 8; x += 1){
        for(var y = 1; y <= 7; y += 1){           
            //draw feathers on the even number rows
            if(y % 2 == 0){
                stroke(255);
                strokeWeight(0.5);
                //the branches of the feather
                line(x * xS, y * yS + 30, x * xS, y * yS + 500)
                //outter green part of the feather
                fill(31, y * 30, 111);//color gradiant from blue to green
                ellipse(x * xS, y * yS, 30, 60);
                //inner yellow layer of the feather
                fill(242, 250, 130);
                ellipse(x * xS, y * yS + 8, 20, 40);
                //inner orange layer of the feather
                fill(255, 163, 51);
                ellipse(x * xS, y * yS + 8, 15, 30);
                //inner light blue layer of the feather
                fill(51, 228, 255);
                ellipse(x * xS, y * yS + 14, 10, 10);
                //inner dark blue layer of the feather
                fill(17, 24, 214);
                ellipse(x * xS, y * yS + 12, 7, 7);

            } 
            //draw feathers on the odd number rows
            else if(x <= 9){
                stroke(255);
                strokeWeight(0.5);
                //the branches of the feather
                line(x * xS + xS / 2, y * yS - 20, x * xS + xS / 2, y * yS - 500)
                fill(y * 50, 196, 111);//color gradiant from green to orange
                ellipse(x * xS + xS / 2, y * yS, 20, 40);
            }            
        }
    }

    
}

The drawing is inspired by the repeating pattern of peacock feather. By adding layers of color, gradient and shape, the form of the feather can be abstracted as wall paper

Sammie Kim–Project-05-Wallpaper

sketch

//Sammie Kim
//Section D
//sammiek@andrew.cmu.edu
//Project 05 - Wallpaper

function setup() {
    createCanvas(600, 480);
    background("black");
    }
//Calling pattern function in consistent intervals by using for loop
function draw() {
    for (var x = 0; x < width + 50; x += 100) {
        for (var y = 0; y < height + 50; y += 70) {
            pattern(x + 50, y + 30);
        }
    }
}
function pattern(x, y){
    //variables controlling each shape's size
    var size = 50;
    var smallSize = 15;
    var rectSize = 30;

    noStroke();
    //pink ellipse
    fill("pink");
    ellipse(x, y, size, size);
    rectMode(CENTER);
    //rotated center black square to make diamond shape
    push();
    translate(x, y)
    rotate(radians(45));
    fill("black");
    rect(0, 0, rectSize, rectSize);
    pop();
    //inner red diamond inside the black diamond
    push();
    translate(x, y)
    rotate(radians(45));
    fill(255, 125, 122);
    rect(0, 0, size * 0.3, size * 0.3);
    pop();
    //tiny left black ellipse
    fill("black");
    ellipse(x - 20, y, smallSize, smallSize);
    //tiny top black ellipse
    fill("black");
    ellipse(x, y - 20, smallSize, smallSize);
    //tiny right black ellipse
    fill("black");
    ellipse(x + 20, y, smallSize, smallSize);
    //tiny bottom black ellipse
    fill("black");
    ellipse(x, y + 20, smallSize, smallSize);
    //vertical white lines
    stroke("white");
    line(x + 50, 0, x + 50, height);
  }

Brief Sketch of Initial idea

This project combined the materials I have learned so far in lecture regarding for loop and calling a function. I first created the pattern drawing of circles and squares as function “pattern” which I then embedded in the for loop to create repetition. Once again I realized how much more efficient it is to use this for loop rather than drawing all these elements numerous times.

Kimberlyn Cho – Project 05 – Wallpaper

ycho2-05

/* Kimberlyn Cho
Section C
ycho2@andrew.cmu.edu
Project 5 */

function setup() {
    createCanvas(500, 400);
    background(255);
    noLoop();
}

function draw() {
    var ex = 50 // x position of first pupil
    var ey = 40 // y position of first pupil
    var ew = 15 // size of pupil

    for (var y = 0; y < 8; y++) {
        for (var x = 0; x < 6; x++) {
            var eyex = ex + x * 80 // x position of arrayed pupils
            var eyey = ey + y * 45 // y position of arrayed pupils

            //eyeballs
            fill(0, x * 50 + 50, y * 30 + 100);
            strokeWeight(0);
            ellipse(eyex, eyey, ew * 2, ew * 2);

            //pupils
            fill(0);
            ellipse(eyex, eyey, ew, ew);

            //reflection on pupils
            fill(255);
            ellipse(eyex + 3, eyey - 3, ew / 2, ew / 2);
            
            //eye
            noFill();
            stroke(0, x * 30 + 50, y * 50 + 100);
            strokeWeight(3);
            arc(eyex, eyey + 22, ew * 5, ew * 5, PI + QUARTER_PI, -QUARTER_PI, OPEN);
            arc(eyex, eyey - 22, ew * 5, ew * 5, QUARTER_PI, PI - QUARTER_PI, OPEN);
        };
    };
};

I was inspired by the static yet varied nature of human eyes for this project. While every eye in the pattern has the same elements (pupil, reflection, etc.), each eye has its own combination of colors that make it unique, as do humans.

Ian Kaneko Project-05 Wallpaper

ikaneko wallpaper

var sx = 100; // Horizontal position of first column center
var dH = 50; // Height of diamonds
var dW = 50; // Width from center of diamond to outside edge

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

}

function draw() {
    background(250, 230, 230);
    noStroke();

    fill(230, 100, 100);

    for (var a = 0; a < 3; a ++) { // Creates small circles behind the diamonds
        for (var b = 0; b < 12; b ++) {
            ellipse(sx + 200 * a, (dH / 2) + (dH * b), dW, dH);
        }
    }

    // This creates 3 columns of diamonds
    for (var x = 0; x < 3; x ++) {
        for (var y = 0; y < 12; y ++) {
            fill(25 * y, 150, 220);
            quad(sx + 200 * x, dH * y, sx - dW + (200 * x), 
                dH / 2 + dH * y, sx + 200 * x, dH + dH * y,
                 sx + dW + (200 * x), dH / 2 + dH * y); 
        }
    }

    rectMode(CENTER);
    
    for (var z = 0; z < 4; z ++) { // 4 pink stripes
        rect(z * 200, 0, 50, height * 2);
    }

    
    for (var c = 0; c < 4; c ++) { // This creates the lumpy bubble pattern
        for (var d = 0; d < 30; d ++) {
            fill(220, 100, 15 * d);
            circle(c * 200, d * 25, 30);  
        }
        
    }


    noLoop();
}

For this project I was very inspired by the colors of the vaporwave backgrounds. I wanted to keep my design very vertical in nature, so I opted out of creating anything that draws the eyes horizontally. While the background color stays the same, the gradient of the diamonds can sometimes trick the eyes into seeing the lower half of the design as lighter.

A classic vaporwave background