Category: Section B

Wallpaper

// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Project-05

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

function draw() {
    background(0);
    for (var centerX1 = 25; centerX1 < width; centerX1 += 100) {
        for (var centerY1 = 25; centerY1 < height; centerY1 += 100) {
            // Creates pattern for upper left area
            fill(0, 0, 255);
            ellipse(centerX1, centerY1, 40, 40);
            // Creates blue circle

            fill(255, 0, 0);
            rectMode(CENTER);
            rect(centerX1, centerY1, 22.5, 22.5);
            // Creates red square

            fill(0, 255, 0);
            push();
            translate(centerX1, centerY1);
            rotate(radians(45));
            rectMode(CENTER);
            rect(0, 0, 20, 20);
            pop();
            // Creates green rotated square

            fill(0);
            ellipse(centerX1, centerY1, 10, 10);
            // Creates black circle
        }
    }

    for (var centerX2 = 75; centerX2 < width; centerX2 += 100) {
        for (var centerY2 = 75; centerY2 < height; centerY2 += 100) {
            // Creates pattern for lower right area
            fill(0, 0, 255);
            ellipse(centerX2, centerY2, 40, 40);
            // Creates blue circle

            fill(255, 0, 0);
            rectMode(CENTER);
            rect(centerX2, centerY2, 22.5, 22.5);
            // Creates red square

            fill(0, 255, 0);
            push();
            translate(centerX2, centerY2);
            rotate(radians(45));
            rectMode(CENTER);
            rect(0, 0, 20, 20);
            pop();
            // Creates rotated green sqare

            fill(0);
            ellipse(centerX2, centerY2, 10, 10);
            // Creates black circle
        }
    }

    for (var centerX3 = 75; centerX3 < width; centerX3 += 100) {
        for (var centerY3 = 25; centerY3 < height; centerY3 += 100) {
            // Creates pattern for upper right area
            fill(125);
            push();
            translate(centerX3, centerY3);
            rotate(radians(45));
            rectMode(CENTER);
            rect(0, 0, 30, 30);
            pop();
            // Creates rotated gray square

            fill(0);
            rectMode(CENTER);
            rect(centerX3, centerY3, 20, 20);
            // Creates black square

            fill(255);
            ellipse(centerX3, centerY3, 15, 15);
            // Creates white circle
        }
    }

    for (var centerX3 = 25; centerX3 < width; centerX3 += 100) {
        for (var centerY3 = 75; centerY3 < height; centerY3 += 100) {
            // Creates pattern for lower left area
            fill(125);
            push();
            translate(centerX3, centerY3);
            rotate(radians(45));
            rectMode(CENTER);
            rect(0, 0, 30, 30);
            pop();
            // Creates rotated gray square

            fill(0);
            rectMode(CENTER);
            rect(centerX3, centerY3, 20, 20);
            // Creates black square

            fill(255);
            ellipse(centerX3, centerY3, 15, 15);
            // Creates white circle
        }
    }

    noLoop();
}

Doing this was a bit tricky for me. I don’t have a very good taste in decoration. In addition, I am bad at coming up with patterns. However, in the end I think that I did alright. I thought it would be interesting to give the background a chess board formation, as I find it to be aesthetically appealing. The coding itself wasn’t very difficult. I only needed to set the coordinates as variables in the for loops, and the rest of the assignment practically did itself. I didn’t have much of a sketching phase, mainly because it just feels more natural for me to start coding right away.

sketch

/*
Doo Won Nam
Section B
dnam@andrew.cmu.edu
Project - 05
*/

function setup() {
    createCanvas(600, 600);
    background(142, 4, 2); //red background
}
function draw() {
  var rng = random()
  for (var y = 50; y < height -5; y += 100) { //small rectangles
      for (var x = 50; x < width - 5; x += 100) {
      //x and y increases depending on the line
      noStroke();
      fill(10, 46, 28); //dark green
      rect(x, y, 40, 40);
}
}
for (var y = 40; y < height -5; y += 150) { //big circles
    for (var x = 40; x < width - 5; x += 150) {
    noStroke();
    fill(9, 20, 1); // darker green
    rect(x, y, 70, 70);
}
}
//generate white randomly depending on the refresh
stroke("white");
var lineX = random(20, 400);
for (var lX = 0; lX < width; lX += lineX)
  line(lX, 0, lX, 600);
  noLoop(); // not constantly creating lines
}

Inspired from CMU’s tartan pattern, I wanted to make a background wallpaper that resembles the red, green, and white rectangles and line. I wanted to make the pattern lines refresh and have a new look everytime. The small rectangles change positions each line to make it more visually interesting.

sketch

// atraylor
// Section B
// Project 05


function setup() {
    createCanvas(480, 480);
    background(13, 150, 255);
}

function draw() {

    moreThings(); // yellow spots



    var move = 8; // the amount move in x per line segment
    var lastX = -1; // beginning values
    var lastY = -1;
    var y = 1;
    var borderX = 0; // translates to edge
    var borderY = -1;
    stroke(127, 199, 255);

    for(var moveY = 0; moveY < 1000; moveY += 10){ // lines in the background
        for(var x = borderX; x <= width-borderX; x+= move){
            y = moveY + borderY + random(1, 20);

            line(x, y, lastX, lastY);

            lastX = x; //place the "new" x y values into last
            lastY = y;
        }
    }
    noLoop();
    things();//orange and purple circles
    noLoop();


}

function things(x, y){ //orange and purple circles
    for(var y = 0; y < width; y+= 100){
        for(var x = 0; x < height; x+= 100){
            var n = random(1, 5);
            var m = random(-5, 5);
            stroke(255, 183, 87);
            fill(255, 146, 0);
            ellipse(40 + x + n, 40 + y + n, 40, 40);
            stroke(108, 108, 244);
            noFill();
            strokeWeight(5);
            ellipse(41 + x + m, 48 + y + m, 40 + m, 40 + m);
        }
    }
}

function moreThings(x, y){ // yellow spots
    for(var y = 0; y < height; y += 100){
        for(var x = 0; x < width; x += 100){
            var n = random(1, 5);
            noStroke();
            fill(255, 230, 154);
            ellipse(x + n, y + n, 10, 10);
        }
    }
}

For this project, I wanted to practice making noisy lines. I used a for loop that drew sections of the line, using previous coordinates as starting points. Then I added another loop that translates the y coordinates of the line through each iteration. An improvement that I would make would be to remove the connecting lines between the rows. The result of the loop looked like primitive waves or mountains to me. I decided to pursue this concept by using bright and sunny colors. I don’t think I would wear this pattern, but it gave me a chance to try something new.

sketch

//Brandon Hyun
//15-104 Section B
//bhyun1@andrew.cmu.edu
//Project 05

function setup() {
    createCanvas(460, 460);
    background(100,200,300); // blue background
    noLoop();
}

function draw() {

//Red Circle
  for(var row = 0; row <= width; row += 50){
    for (var col = 0; col <= height; col += 50){
      fill(255,0,0);
      noStroke();
      ellipse (row,col,50,50);
    }
  }
//white Circle#1
  for(var row = 0; row <= width; row += 50){
    for (var col = 0; col <= height; col += 50){
      fill(209,234,254);
      ellipse (row+11,col+11,21,21);
    }
  }
  //Blue Circle #1
  for(var row = 0; row <= width; row += 50){
    for (var col = 0; col <= height; col += 50){
      fill(72,98,163);
      ellipse (row+10,col-10,21,21);
    }
  }
//white circle #2
  for(var row = 0; row <= width; row += 50){
    for (var col = 0; col <= height; col += 50){
      fill(72,98,163);
      ellipse (row-10,col+10,21,21);
    }
  }
//blue circle#2
  for(var row = 0; row <= width; row += 50){
    for (var col = 0; col <= height; col += 50){
      fill(209,234,254);
      noStroke();
      ellipse (row-11,col-11,21,21);
    }
  }
}

For this project, I wanted to create something that is simple but interesting. I necessarily did not have a set design that I wanted to pursue but I wanted to play around with the shapes in p5 js. and create an interesting composition.  I used only circles in my patterns but interestingly, the combinations of circles created a star shape.

I also wanted to color code my shapes so I used color combinations that would match well with the blue background. My reference came from this image from google.

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.

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.