Category: Project-05-Wallpaper

hyt-Project-05: Wallpaper Drawing

hyt-05-project

// helen tsui
// 15-104 section d
// hyt@andrew.cmu.edu
// project-03-dynamic-drawing


//var x1; // wave left coordinate;
//var x2 = 30; // wave right coordinate

var angleL = -160;
var angleR = -20;
var span = 40;
var wx; // waveX;
var wy; // waveY;
var r = 245; 
var g = 245;
var b = 230;


function setup() {
  createCanvas(400, 400);
  angleMode(DEGREES);
  background(24, 42, 81);
}

// a wallpaper of small fishes swimming down the ocean
function draw() {

    for(var wy = 0; wy < 30; wy ++) { // wave y coordinate increment
            
            for (var wx = 0; wx <= 10; wx++) { // wave x coordinate increment
            
            if (wy % 2 == 0) {
                noFill();
                strokeWeight(1.8);
                stroke(r, g, b);
                arc(15 + wx * span, 25 + wy * 30, 40, 40, angleL, angleR); // first wave
                strokeWeight(1.5);
                stroke(r, g, b - 30);
                arc(18 + wx * span, 30 + wy * 30, 40, 30, angleL + 15, angleR - 10); 
                strokeWeight(1);
                stroke(r, g, b - 60);
                arc(4 + wx * span, 35 + wy * 30, 40, 30, angleL + 5, angleR - 20); 
                strokeWeight(0.8);
                stroke(r, g, b - 90);
                arc(20 + wx * span, 42 + wy * 30, 40, 30, angleL - 5, angleR - 0); 
            }

            if (wy % 2 == 1) {
                noFill();
                strokeWeight(1.8);
                arc(30 + wx * span, 25 + wy * 30, 40, 40, angleL, angleR); // first wave
                strokeWeight(1.5);
                arc(33 + wx * span, 30 + wy * 30, 40, 30, angleL + 15, angleR - 10); 
                strokeWeight(1);
                arc(19 + wx * span, 35 + wy * 30, 40, 30, angleL + 5, angleR - 20); 
                strokeWeight(0.8);
                arc(35 + wx * span, 40 + wy * 30, 40, 30, angleL - 5, angleR); 
            }
        }
        }
    noLoop();
    }

For this project, I started out searching through the wallpaper links provided by the instructions, and i became intrigued by one of the Japanese wave-like prints (which is often used for clothing and paper prints). Inspired by that, I sketched some images down, hoping to create a similar pattern with a bit more dimensionality. For the end result, the most challenging parts were the wave movements created by crossing arc functions, as well as the gradient color choices which took me a while to figure out.

aboyle-Project-05-Wallpaper

aboyle wallpaper

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

function draw() {
    background(191, 220, 249);
//creates light lines in the background
    for(x=10; x<width+50; x+=100){
      strokeWeight(4);
      stroke(238,245,247)
      line(x,0,x,400)
      strokeWeight(2);
      stroke(222,245,252);
      line(x+50,0,x+50,400)
    }
//jellyfish tentacles
    noFill();
    oneTentacles();
    twoTentacles();
    threeTentacles();
    fourTentacles();
//jellyfish bodies
    strokeWeight(0);
    jellyfishOne();
    jellyfishTwo();
    jellyfishThree();
    jellyfishFour();
  }

//orange jellyfish
function jellyfishOne(){
    for (var x=10; x<width+50; x+=100){
      for(var y=25; y<height+50; y+=100){
      //body
      fill(236, 190, 130);
      ellipse(x,y,15);
      triangle(x,y,x-2,y-10,x+12,y-2)
      //highlight
      fill(247, 222, 188);
      ellipse(x-1,y-1,7)
    }
  }
}

//purple jellyfish
function jellyfishTwo(){
  for (var x=15; x<width+50; x+=100){
    for(var y=50; y<height+50; y+=100){
      //body
      fill(182, 137, 212);
      ellipse(x,y,20);
      triangle(x,y,x,y+15,x+15,y+4);
      //highlight
      fill(216, 182, 239);
      ellipse(x, y-4, 9);
    }
  }
}

//large lavender jellyfish
function jellyfishThree(){
  for (var x=65; x<width+50; x+=100){
    for(var y=40; y<height+50; y+=100){
      //body
      fill(212,137,209);
      ellipse(x,y,30);
      triangle(x,y,x-20,y+5,x-12,y-18)
      //highlight
      fill(236,191,235);
      ellipse(x-1,y-6,13);
    }
  }
}

//pink jellyfish
function jellyfishFour(){
  for (var x=-10; x<width+50; x+=100){
    for(var y=-20; y<height+50; y+=100){
      //body
      fill(242, 146, 178);
      ellipse(x,y,25);
      triangle(x,y,x-18,y+3,x-5,y+17)
      //highlight
      fill(250,199,216);
      ellipse(x-3,y-3,11)
    }
  }
}

//orange tentacles
function oneTentacles(){
  for (var x=10; x<width+50; x+=100){
    for(var y=25; y<height+50; y+=100){
      stroke(159,87,24);
      curve(x-85,y+20,x,y,x+5,y-25,x-85,y-20);
      curve(x-90,y+20,x-3,y,x-1,y-25,x-90,y-20);
      curve(x-95,y+20,x-6,y,x-7,y-25,x-95,y-20);
}
}
}

//purple tentacles
function twoTentacles(){
  for (var x=15; x<width+50; x+=100){
    for(var y=50; y<height+50; y+=100){
      stroke(102, 51, 102);
      curve(x-95,y-20,x,y,x+20,y+40,x-95,y+50);
      curve(x-100,y-20,x-5,y,x+14,y+40,x-100,y+50);
      curve(x-105,y-20,x-9,y,x+8,y+40,x-105,y+50);
}
}
}

//large lavender tentacles
function threeTentacles(){
  for (var x=65; x<width+50; x+=100){
    for(var y=40; y<height+50; y+=100){
      stroke(129,73,128);
      bezier(x-15,y-70,x+30,y-60,x-95,y-10,x,y)
      bezier(x-10,y-75,x+35,y-60,x-85,y-15,x+5,y)
      bezier(x-5,y-80,x+40,y-60,x-75,y-20,x+10,y)
    }
}
}

//pink tentacles
function fourTentacles(){
  for (var x=90; x<width+50; x+=100){
    for(var y=-20; y<height+50; y+=100){
      stroke(134,67,89);
      bezier(x,y,x-60,y+20,x+30,y+50,x-12,y+80)
      bezier(x+6,y,x-55,y+20,x+35,y+50,x-7,y+80)
      bezier(x+10,y,x-50,y+20,x+40,y+50,x-2,y+80)
}
}
}

For some reason, when I thought of wallpaper my mind immediately went to jellyfish. I sketched out a grid and mapped four different jellyfish onto it, seen below.

While the bodies of the jellyfish end up in roughly the same position, I changed the position of the tentacles while I was coding. Although I could’ve put the code for the tentacles under the jellyfish body functions, it helped me mentally to organize them separately.

In the end, I had less space than I thought I would so I couldn’t include any shells for decoration. I tried to pick colors that were light and cartoony; I was going for a “child’s bathroom” kind of vibe. I also added some light lines in the background to make it more visually interesting. Overall, I’m pretty happy with how it turned out!

sunmink-Project-05-Wallpaper

sketch

//SunMin Kim 
//Section E
//sunmink@andrew.cmu.edu
//project-05

function setup() {
    createCanvas(480, 480);
    background(222, 141, 148);
    var tw = 50;  
    var th = 50;  
    var y = 100; 
    var x = 100; 

    noStroke(); 

    for (var y = 0; y < 8; y++) {
        for (var x = 0; x < 8 ; x++) {
            var posy = y + y * 1.3 *th + 15; 
            var posx = x + x * 1.1 *tw;  

            //ice cream top 
            fill(240, 230, 180);
            ellipse(posx + 50, posy + 9, 18, 19); 

            //sprinkles 1 on ice cream 
            fill(226, 161, 73);
            rect(posx + 54, posy + 4, 3, 2); 

            //sprinkles 2 on ice cream 
            fill(210, 61, 59);
            rect(posx + 48, posy + 4, 3, 2); 

            //sprinkles 3 on ice cream 
            fill(56, 83, 168);
            rect(posx + 52, posy, 3, 2); 


            //ice cream cone 
            fill(158, 65, 65);
            triangle(posx + 60, posy + 10, posx +40, posy + 10, (tw*sqrt(3)/2) + posx -10 , posy+th);
        }
    }
    noLoop();
}

function draw() { 
}

After finishing assignments using for() loops, I was excited to create patterns instead of inputting individual functions. Thus for the wallpaper, I wanted to take benefits of for() loop and create a creative wallpaper I want to purchase. I first created the ice-cream cone and followed by ice-cream and sprinkles on it.

Throughout this project, I struggled the most when coming up with triangle coordinates. I feel good with the outcome that I successfully used triangles for this wallpaper which was the most challenging part during the project.

rkondrup-project-05-wallpaper

sketch

//ryu kondrup
//rkondrup@andrew.cmu.edu
//section d
//project-05-wallpaper

//rectangle width is 120 pixels
var rectHalf = 60;

function setup() {
    createCanvas(480, 480);
    background(155, 213, 198);
}
function draw() {

    //horizontal odd-numbered rows
    for (x = 0; x < 10; x ++ ) {
        for (y = 0; y < 10; y ++) {
            shrimp(x*2*rectHalf, y*4*rectHalf);
        }

    }
    //horizontal even-numbered rows
    for (x = 0; x < 10; x ++ ) {
        for (y = 0; y < 10; y ++) {
            shrimp(x*2*rectHalf-rectHalf, y*4*rectHalf+2*rectHalf);
        }
    }
noLoop();
}

function shrimp(x, y) {
    push();
    translate(x, y);
    darkestRed = color(200, 64, 62);
    darkRed = color(251, 104, 102);
    medRed = color(251, 134, 132);
    white = color(255, 252, 215);
    lightBlue = color(213, 233, 198);
    blue = color(155, 213, 198);

/*    //temporary box
    fill(blue);
    rect(0, 0, 2*rectHalf, 2*rectHalf);
    */

    //background water blue
    strokeWeight(4);
    fill(blue);
    noStroke();
    //left arc
    fill(medRed);
    stroke(white);
    arc(rectHalf, rectHalf,
        2*rectHalf, 2*rectHalf,
        PI/2, 3*PI/2);
    //triangle head
    fill(darkRed)
    triangle(rectHalf, 0,
             2*rectHalf, 0,
             rectHalf, rectHalf);
    //small arc inside
    fill(blue);
    arc(rectHalf, rectHalf+20,
        40, 40,
        PI/2, 3*PI/2);
    //eye
stroke(white);
    fill(darkestRed);
    ellipse(23 + rectHalf, 15, 15);
    //tail polygon
    stroke(white)
    fill(darkRed);
    beginShape();
        vertex(rectHalf, rectHalf + 40);
        vertex(2*rectHalf, rectHalf);
        vertex(2*rectHalf, 2*rectHalf);
        vertex(rectHalf, 2*rectHalf);
    endShape(CLOSE); //still broken
    pop();
}

For this design I wanted to create something simple with mellow colors. In making this, I created a single tile and repeated it in staggered rows. I considered overlapping the tiles but visually the overlaps did not seem comfortable so I left them in a snug edge-to-edge arrangement.

creyes1-Project-05-Wallpaper

creyes1 Project-05

//Christopher Reyes
//Section D
//creyes1@andrew.cmu.edu
//Project-05 (Wallpaper)

var paleyellow = [255, 252, 125];
var clovergreen = [127, 201, 108];
var lightBlue = [232, 242, 247];
var gray = [122, 122, 122];

var circleSize1 = 6;
var circleSize2 = 10;
var petalWidth = 19;
var petalHeight = 46;
var angle = 0;

var spacingx = 80;
var spacingy = 60;
var offset = 30;


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

    //Light blue circles between main elements
    for (var x = 1; x <=7; x++) {
            for (var y = 1; y <= 9; y++) {
                fill(lightBlue);
                ellipse(x*spacingx-(70), y*spacingy-(60), 20);
            }
    }

    //Draws alternating clovers and flowers down several columns
    for (var x = 1; x <= 7; x++) {
        if (x%2 === 0) {
            for (var y = 1; y <= 8; y++) {
                if (y%2 === 0) {
                    drawFlower(x*spacingx -offset, y*spacingy -offset, .4);
                } else {
                    drawClover(x*spacingx -offset, y*spacingy -offset, .4);
                }
            }
        } else {
            for (var y = 1; y <= 8; y++) {
                if (y%2 === 0) {
                    drawClover(x*spacingx -offset, y*spacingy -offset, .4);
                } else {
                    drawFlower(x*spacingx -offset, y*spacingy -offset, .4);
                }
            }
        }
    }

    noLoop();

}

//Draws a flower at designated coordinates and at selected scale
function drawFlower(x, y, SCALE) {

    //Gray center circle
    fill(122);
    ellipse(x, y, circleSize2 * SCALE);

    //Draws 8 yellow petals rotated around a center point
    for(var i = 0; i < 8; i++) {
        fill(paleyellow);
        push();
        translate(x, y);
        rotate(angle);
        ellipse(0, -35 * SCALE, petalWidth * SCALE, petalHeight * SCALE);
        fill(122);

        //Draws accent circles at top and bottom of flower
        if (i === 0 || i === 4) {
            fill(gray);
            ellipse(0, (-30-petalHeight) * SCALE, circleSize1 * SCALE);
            ellipse(0, (-20-petalHeight) * SCALE, circleSize2 * SCALE);
        }

        //Small gray circles between petals (8)
        pop();
        push();
        translate(x, y);
        rotate(angle+22.5);
        fill(gray);
        ellipse(0, -45 * SCALE, circleSize1 * SCALE);
        pop();

        angle += 45;
    }

}

function drawClover(x, y, SCALE) {
    fill(clovergreen);

    //Middle Leaf
    beginShape();
        vertex(x, y+(38.5*SCALE));

        bezierVertex(x, y+(38.5*SCALE),
                     x+(38*SCALE), y-(52.5*SCALE),
                     x+(27*SCALE), y-(59.5*SCALE));

        bezierVertex(x+(16*SCALE), y-(66.5*SCALE),
                     x, y-(38.5*SCALE),
                     x, y-(38.5*SCALE));

        bezierVertex(x, y-(38.5*SCALE),
                     x-(16*SCALE), y-(66.5*SCALE),
                     x-(27*SCALE), y-(59.5*SCALE));

        bezierVertex(x-(27*SCALE), y-(59.5*SCALE),
                     x-(38*SCALE), y-(52.5*SCALE),
                     x, y+(38.5*SCALE));
    endShape();

    //Middle-Right Leaf
    beginShape();
        vertex(x+(5.4*SCALE), y+(38.5*SCALE));

        bezierVertex(x+(5.4*SCALE), y+(38.5*SCALE),
                     x+(70*SCALE), y+(3.5*SCALE),
                     x+(67*SCALE), y-(5.5*SCALE));

        bezierVertex(x+(65*SCALE), y-(15.5*SCALE),
                     x+(42*SCALE), y-(7.5*SCALE),
                     x+(42*SCALE), y-(7.5*SCALE));

        bezierVertex(x+(42*SCALE), y-(7.5*SCALE),
                     x+(47*SCALE), y-(31.5*SCALE),
                     x+(37*SCALE), y-(33.5*SCALE));

        bezierVertex(x+(28*SCALE), y-(34.5*SCALE),
                     x+(5.4*SCALE), y+(38.5*SCALE),
                     x+(5.4*SCALE), y+(38.5*SCALE));
        endShape();

    //Middle-Left Leaf
    beginShape();
        vertex(x-(5.4*SCALE), y+(38.5*SCALE));

        bezierVertex(x-(5.4*SCALE), y+(38.5*SCALE),
                     x-(70*SCALE), y+(3.5*SCALE),
                     x-(67*SCALE), y-(5.5*SCALE));

        bezierVertex(x-(65*SCALE), y-(15.5*SCALE),
                     x-(42*SCALE), y-(7.5*SCALE),
                     x-(42*SCALE), y-(7.5*SCALE));

        bezierVertex(x-(42*SCALE), y-(7.5*SCALE),
                     x-(47*SCALE), y-(31.5*SCALE),
                     x-(37*SCALE), y-(33.5*SCALE));

        bezierVertex(x-(28*SCALE), y-(34.5*SCALE),
                     x-(5.4*SCALE), y+(38.5*SCALE),
                     x-(5.4*SCALE), y+(38.5*SCALE));
    endShape();

    //Far-Right Leaf
    beginShape();
        vertex(x+(15*SCALE), y+(38.5*SCALE));

        bezierVertex(x+(15*SCALE), y+(38.5*SCALE),
                     x+(75*SCALE), y+(37.5*SCALE),
                     x+(77*SCALE), y+(32.5*SCALE));

        bezierVertex(x+(79*SCALE), y+(27.5*SCALE),
                     x+(60*SCALE), y+(26.5*SCALE),
                     x+(60*SCALE), y+(26.5*SCALE));

        bezierVertex(x+(60*SCALE), y+(26.5*SCALE),
                     x+(74*SCALE), y+(15.5*SCALE),
                     x+(69*SCALE), y+(12.5*SCALE));

        bezierVertex(x+(63*SCALE), y+(9.5*SCALE),
                     x+(15*SCALE), y+(38.5*SCALE),
                     x+(15*SCALE), y+(38.5*SCALE));
    endShape();

    //Far-Left Leaf
    beginShape();
        vertex(x-(15*SCALE), y+(38.5*SCALE));

        bezierVertex(x-(15*SCALE), y+(38.5*SCALE),
                     x-(75*SCALE), y+(37.5*SCALE),
                     x-(77*SCALE), y+(32.5*SCALE));

        bezierVertex(x-(79*SCALE), y+(27.5*SCALE),
                     x-(60*SCALE), y+(26.5*SCALE),
                     x-(60*SCALE), y+(26.5*SCALE));

        bezierVertex(x-(60*SCALE), y+(26.5*SCALE),
                     x-(74*SCALE), y+(15.5*SCALE),
                     x-(69*SCALE), y+(12.5*SCALE));

        bezierVertex(x-(63*SCALE), y+(9.5*SCALE),
                     x-(15*SCALE), y+(38.5*SCALE),
                     x-(15*SCALE), y+(38.5*SCALE));
    endShape();

    //Gray ellipsoidal accents
    fill(gray);
    ellipse(x+(23*SCALE), y+(38.5*SCALE), 40 * SCALE, 12 * SCALE);
    ellipse(x-(23*SCALE), y+(38.5*SCALE), 40 * SCALE, 12 * SCALE);

    ellipse(x, y+(50.5*SCALE), circleSize2 * SCALE);
    ellipse(x, y+(61.5*SCALE), circleSize1 * SCALE);

    ellipse(x, y-(53.5*SCALE), circleSize2 * SCALE);
    ellipse(x, y-(64.5*SCALE), circleSize1 * SCALE);
}

I definitely enjoyed putting this project together and playing around with different elements, which forced me to figure out how to draw more complex forms using p5.js. Before trying to code this right away, I made different possible mockups in Adobe Illustrator, then translated it into Javascript. As for the final result, I’m happy with how it came out – my initial sketches had even more accent dots than the final, but it wound up looking too busy and were therefore removed.

danakim-Project-05

sketch

//Dana Kim
//danakim@andrew.cmu.edu
//Section D
//Project-05

function setup() {
  createCanvas(480, 480);
  background(256);
}

function draw() {
   for ( var i = 0; i < 480; i+=240){ //repeats pattern in y-direction
      for (var x = 0; x < 500; x+=48){ //repeats shapes in x-direction
        var h1 = random(30, 90); //randomized height for lines going down
        var h2 = random(130, 190); //randomized height for lines going up

        stroke((x+20)/.5, x/1.5, x/3);
        strokeWeight(48);
        line(x, 0+i, x, h1+i); //first row of lines
        line(x, 240+i, x, h2+i); //second row of lines

        stroke((x+20)/.5, x/1.5, x/3);
        strokeWeight(1);
        fill(256);
        ellipse(x, (h2-10)+i, 48, 35); //circles that rest on lines
        }
      }
    noLoop();
}

This project was fairly easy. I had the most trouble with figuring out how to get the line colors to be a gradient. I had originally wanted to make each line have a gradient color to make it seem more like cylinders. Instead, I made each line a solid color so it would be easier to distinguish each cylinder. The heights of each cylinder was randomized.

kyungak-project-05-wallpaper

sketch

//Kyunga Ko
//15104B
//kyungak@andrew.cmu.edu
//Project-05

var rows = 8;
var collums = 8;
var cirdia = 85;
var disX = 60;
var disY = 60;
var disX2 = 30;
var disY2 = 30;

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

function draw() {
    bloomingbackground();
}

function bloomingbackground() {
    background(255);
    for (var r=0; r<=rows; r++) {
        for (var c=0; c<=collums; c++) {

            if ((r+c)%2 == 0) {
                fill(135,47,40,50);
            } 

            else {
                fill(240,177,173,100);
            }
            //creates flower shaped pedals and the star shaped background
            ellipse(disX*c,disY*r,cirdia,cirdia); //overlap of bigger ellipse
        }

    }

    for (var r=1; r<=15; r++) {
        for (var c=1; c<=15; c++) {

            if((r+c)%2 == 0 & r%2 == 1) { 
                fill(255,255,255,200);
                noStroke();
                ellipse(disX2*r,disY2*c,20,20); // white center of the flowers

                strokeWeight(2);
                stroke(255,255,255,100);
                line(disX2*r,disY2*c-20,disX2*r,disY2*c-10); //upper pedal line
                line(disX2*r,disY2*c+10,disX2*r,disY2*c+20); //lower pedal line
                line(disX2*r-20,disY2*c,disX2*r-10,disY2*c); //left pedal line
                line(disX2*r+10,disY2*c,disX2*r+20,disY2*c); //right pedal line
            }
        }
    }

    noLoop();
}

The theme of this wallpaper is blooming flowers. I created pedals by playing with the transparency of the for looped ellipses. The overlapping parts became more saturated than the background and thus looked like pedals from the screen. I then added white pedal marks on each pedals to emphasize the flowers over the pink and brownish background. The results were satisfying and the process allowed me to thoroughly practice the for loop function once again. It was fun.

ashleyc1-SectionC-Project-05-Wallpaper

sketch

//Ashley Chan
//Secion C
//ashleyc1@andrew.cmu.edu
//Project-05-Wallpaper


var slant; //diagonal angle of line
var offsetX; //line space of x
var x; //x-value of gold lines


//setup is executed once at the launch
function setup() {
    createCanvas(400, 400);
    background(10, 51, 80);


    x = 0;
    slant = 500;
    offsetX = -800;

  
}


function draw() {
  
    drawDiagonalLines();

    drawMiddleGoldLines();

    drawTopGoldLines();

    drawBottomGoldLines();

    drawOrnaments();
  
}




function drawDiagonalLines() {
     //outer white diagonal lines going up
    for (var i = 0; i <= width; i = i + 1){

      stroke(219, 179, 2);
      line (offsetX, 0, offsetX + slant, height);
      line(offsetX, 0, offsetX - slant, height);
      offsetX += 200;

    }

}




function drawMiddleGoldLines() {

    
   for (var x = 0; x <= 50; x += 1){
      for (var y = 240; y <= height; y += 40){

      stroke(219, 179, 2);
      strokeWeight(1);
    
    //cone part of lines  
      line (x, 240, (x + slant) - 450, height/5);
      line (x, 240, (x + slant) - 550, height/5);
      line (x - 50, 240, (x + slant) - 600, height/4);
      line (x - 150, 240, (x + slant) - 600, height/4);

    //top of diamond cones
      line (x - 100, 280, (x + slant) - 550, 240);
      line (x - 100, 280, (x + slant) - 650, 240);
      line (x - 150, 240, (x + slant) - 450, height/5);
      line (x - 50, 240, (x + slant) - 750, height/5);
      
    //diamond criss-cross
      line (x, 40, (x + slant) - 450, height/5);
      line (x - 50, 80, (x + slant) - 500, height/10);
      line (x, 120, (x + slant) - 450, height/5);
      line (x, 120, (x + slant) - 550, height/5); 
   
      x += 200;

    } 
   }

}


function drawTopGoldLines() {
    push();
    translate(0, -158);
    drawMiddleGoldLines();
    pop();

}


function drawBottomGoldLines() {

  push();
  translate(0, 160);
  drawMiddleGoldLines();
  pop();

}

function drawOrnaments() {

   for (x=0; x <= width; x = x + 200){
    for (y = 0; y <= height; y = y + 160){
      fill(255);
      strokeWeight(2);
      ellipse(x, y, 10, 10);
      ellipse(x + 100, y + 80, 10, 10);

      //petals
      ellipse(x, y - 20, 10, 20);
      ellipse(x, y + 20, 10, 20);
      ellipse(x - 20, y, 20, 10);
      ellipse(x + 20, y, 20, 10);
  }
  }

}

I tend to enjoy wallpapers/designs with a subtle, floral element over a geometric background. My process for this project was fairly experimental and non-linear. I initially sketched out some diagonals for myself and then figured I’d just play with p5 until I got a floral shape that I enjoyed. In reality, I had fun altering the start and end points of the diagonal lines so much so that I was creating different layering effects with them. I decided then that the floral element that would sit on top had to be very simple otherwise the pattern would be overloaded. Overall, my final result stemmed from a lot of playing and deviating from my initial sketch. I’m content with the final design and if I were to have this printed on fabric, I would sew and wear it.

Initial Sketch

nahyunk1-Wallpaper 05

sketch

function setup() {
    createCanvas(480, 480);
    background("lavender");
}
function draw() {
  for (var x=0; x<7; x++){
   for (var y=0; y<7; y++){
      strokeWeight(0.5);
      stroke("skyblue");
      fill(255);
      push();
      rotate(radians(0));
      arc((x*70)+30, (y*70)+30, 30, 30, 0, PI+QUARTER_PI, PIE);
      pop();
      noStroke();
      fill("lavender");
      ellipse((x*70)+31, (y*70)+27,20,20);
      stroke("pink");
      strokeWeight(0.5);
      fill("white");
      ellipse((x*70)+31, (y*70)+28,10,10);

    }
  }
}

I wanted to create a wallpaper pattern that could potentially look nice as a glow-in-the-dark, so I made a crescent moon shape with the fill and avoided the stroke color with vivid colors.

katieche-project 05

katieche-05

// katie chen
// project 05
// section E
// katieche@andrew.cmu.edu

function setup (){
	createCanvas (480, 480);
	background (230);

	var c = 80; // how close together they are in a row
    var lh = 80; // line height
    var w = 80; // width
    rectMode(CENTER);

    for (var y = 0; y < 9; y++) {
        var z = 9;
        for (var x = 0; x < z; x++) {
            //var z = 10;
            var py = y * lh;
            var px = x * c;

            noFill();
            stroke(220);
            
            if (y % 2) {
                var z = 8;
                strokeWeight(1);
                stroke(240);
                rect(px+(0.5*c), py, w, w);
                rect(px+(0.5*c), py, 50, 50);
                // white horizontal long rectangles
                stroke(250);
                strokeWeight(2);
                rect(px, py, 70, 20);
                // white diagonals
                stroke(250);
                strokeWeight(2);
                //line (px-30, py-30, px+30, py+30);
                //line (px-30+(2*c), py-30, px+30, py+50);
                //line (px-30+(2.2*tw), py-30, px+30, py+50+(2.2*tw));

            }

            else {
            	strokeWeight(1);
            	stroke(240);
                rect(px, py, 70, 30);
                rect(px, py, 30, 60);
                strokeWeight(2);
            	stroke(250);
                rect(px, py, 75, 10);
                rect(px, py, 10, 70);
                // white vertical long rectangles
                stroke(250);
                strokeWeight(2);
                rect(px+(0.5*c), py, 20, 150);
                // white diagonals
                stroke(250);
                strokeWeight(2);
                //line (px-30, py-30, px+30, py+30);
                //line (px-30+(2*c), py-30, px+30, py+50);
                //line (px-30+(2*tw), py-30, px+30, py+50+(2*tw));

             }
        }
    }
    noLoop();

}

function draw (){
		
}

For this project, I started off by looking at existing wallpapers for inspiration. After doing some sketching, I tried to recreate my sketches but then started going into a different direction and doing more guess and check. I knew I wanted to keep a neutral and subtle palette.