Project-05-Wallpaper – Page 2 – [OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice

Robert Oh Project-05-Wallpaper

//Robert Oh
//Section C
//rhoh@andrew.cmu.edu
//Project-05-Wallpaper

//assigning variables
var x = 0;
var y = 0;

function tile(x, y) {
    //creating the top border of each tile
    strokeWeight(5);
    stroke(6, 54, 132);
    fill(0);
    rect(x*250, y*100 + 2, 250, 10);

    stroke(0);
    //this x + y % 2 alternates every tile 
    if ((x + y) % 2 == 0){
        //creates gap
        rect(x*250, y*100, 70, 20);
        
        //making pacman
        fill(235, 255, 58);
        arc(x*250 + 45, y*100 + 53, 50, 50, PI/4, -(PI/4));

        //making the smaller dots
        fill(255);
        ellipse(x*250 + 85, y*100 + 53, 12, 12);
        ellipse(x*250 + 125, y*100 + 53, 12, 12);
        ellipse(x*250 + 165, y*100 + 53, 12, 12);

        //making the larger "power-up" dot
        ellipse(x*250 + 205, y*100 + 53, 20, 20);
    }
    else {
        //creating the gap
        rect(x*250 + 175, y*100, 70, 20);

        //pacman
        fill(235, 255, 58);
        arc(x*250 + 205, y*100 + 53, 50, 50, PI+PI/4, PI-(PI/4));

        //creating the smaller dots
        fill(255);
        ellipse(x*250 + 85, y*100 + 53, 12, 12);
        ellipse(x*250 + 125, y*100 + 53, 12, 12);
        ellipse(x*250 + 165, y*100 + 53, 12, 12);

        //creating the power-up dot
        ellipse(x*250 + 45, y*100 + 53, 20, 20);
    }
}

function setup() {
    createCanvas(500, 500);
    background(0);
    //nested for loop to fill up my wallpaper with my pacman tiles
    for (y = 0; y < 5; y ++){
        for (x = 0; x < 2; x++){
            tile(x, y);
        }
    }

    //creating borders and middle line
    fill(0);
    strokeWeight(5);
    stroke(6, 54, 132);
    rect(245, 0, 10, 500);
    rect(0, 487, 500, 10);
    rect(0, 0, 10, 500);
    rect(488, 0, 10, 500);

    //creating a gap on the bottom
    stroke(0);
    rect(245, 417, 20, 65);

    noLoop();
}

function draw() {
    //nothing here because noLoop is called
}

When I started this project, I was brainstorming for ideas to create my tiles with. I am a huge video gamer, and so I thought a cute little Pacman “maze” would be cute to code. I designed the background and details to match those of the actual original game (with the blue walls, black background, white pellets and bigger “power-up pellets”. All in all, I love how it ended up looking!

Project-05-Wallpaper-Veronica

sketch

/*
Veronica Wang
Section B
yiruiw@andrew.cmu.edu
Project-05
*/

function setup() {
    createCanvas(600, 780);
    background('pink');   

    var tw = 50; // x spacing
    var th = 50; // y spacing
    var newTh = th * sqrt(3) / 2; // new y spacing

    var ang = radians(60); //radians to degrees
    var offset = tw / 2; // new x shift

    
    var ox = 0; // ellipse center y
    var oy = 0; // ellipse center x
    var num = 10; //elements per row

    for (var y = 0; y < 80; y++) {
        
        //if its an even number row, have one less element
        if (y % 2 == 1){
            var z = offset;
            num = 20;
        }
        //if its an odd number row draw all elements
        else{
            var z = 0;
            num = 20;
        }

        //draw circle grid
        for (var x = 0; x < num; x++) {

            var py = oy + y * newTh;
            var px = ox + x * tw + z;
    
            noFill();
            stroke('white');
            ellipse(px - 50, py, 100, 100);
            fill('white');
            ellipse(px - 50, py, 10, 10);
            stroke(5);
            strokeWeight(2.5);
         
        }

     
        
    }
    noLoop();
}


function draw() {
    // draw is not called due to noLoop() in setup()
}

In this assignment I was inspired by Japanese origami paper patterns and decided to play with repeated patterns of simple geometry.

I altered the hex grid code so that the circles start overlapping and then I added nodes to the connection points. I am happy with the result and wouldn’t mind using this as a wallpaper in my room.

Nina Yoo Project-05-Wallpaper Section E

sketch

/* Nina Yoo
Section E
nyoo@andrew.cmu.edu
Project- 05 Wallpaper*/
var head = 30
var eyes = 15
var eye =  30
var space = 50

function setup() {
    createCanvas(600, 400);
    background(216,117,28);
   

    for (var y = 25; y < height; y+=space) { //y position of wall paper
        for (var x = 25; x < width; x+=space) { //x position of wall paper

            //outercircle
            noStroke();
            fill(215,185,119);
            ellipse(x, y, head, head);

            //2nd circle
            noStroke();
            fill(0);
            ellipse(x,y,head*.5,head*.5);  //have to base i off of head variable

            //middle
            noStroke();
            fill(238,184,213);
            ellipse(x,y,head*.2,head*.2);
        }
    }
    for (var a = 40; a<width; a+=space){
        for (var b = 40; b<height;b +=space){ //offset spacing
                //tan overlayering
            stroke(200,200,124);
            noFill();
            ellipse(a,b, eye,eye); // create new variable eye to separate from the other loop
            
            //black center circle
            stroke(0);
            noFill();
            ellipse(a,b,eye*.5,eye*.5);

        }


    }

        }
        
    

        
        
           






function draw() {
    // draw is not called due to noLoop() in setup()
    noLoop()
}

I wanted to play with circles and the colors to mess with someones eyes on a lower scale and it was fun trying to trip myself up while also deciding where to have fill versus not. The spacing took some time to figure out where I wanted the nofill circles to be, but was worth.

Jisoo Geum – Project 05 – Wallpaper

sketch

// Jisoo Geum
// Section B
// jgeum@andrew.cmu.edu 
// Project-05
var rect1y = 50;
var rect1x = 10;
var rect2xy = 25; 
var rect3y = 81;
var rect3x = 0;
var rect4y = 0;
var rect4x = 50;

function setup (){
	createCanvas(600,600);
	background(1,59,255);  
}

function draw(){
    // red lines 
    for (var redvertX =5; redvertX<width; redvertX+=10){
            stroke(252,59,69);
            line( redvertX, 0, redvertX, height ); 
    }
    // yellow lines 
    for (var yellowY = 40; yellowY < height; yellowY +=100){
        stroke(255,190,8);
        line(0,yellowY, width, yellowY);
    }
    //first rect layer (3rd one from the right top)
    for (var numbY= 0; numbY < 6; numbY++){ // the y number of squares increase till 6 
        for (var numbX = 0; numbX < 6; numbX++){ // the x number of squares also increase till 6
            var r1y= rect1y +numbY * 100; // position of y increases by each tile
            var r1x = rect1x +numbX * 100; // position of x also increses
        fill(1,59,255);
        stroke(255);
        rect(r1x,r1y,40,40);
    // 2nd rect layer (2nd one from the right top)
            var r2y= rect2xy +numbY * 100;
            var r2x = rect2xy +numbX * 100;
        fill(1,59,255);
        stroke(255);
        rect(r2x,r2y,50,50);
    // 3rd rect layer (bottom left corner)
            var r3y= rect3y +numbY * 100;
            var r3x = rect3x +numbX * 100;
        noFill();
        stroke(255);
        rect(r3x,r3y,19,19);
    // 4th rect layer (top right)
            var r4y= rect4y +numbY * 100;
            var r4x = rect4x +numbX * 100;
        noFill();
        stroke(255);
        rect(r4x,r4y,50,50);
     }
    }
}

I decided to create a geometric pattern that looks interconnected.

The final pattern turned out to be more simple than my initial design because I could not create a big gap between every 10 or 3 lines as shown above.

I tried to reduce the number of lines like the picture above, but I ended up creating dense lines using the for-loop.

Joanne Lee – Project 05

Project-05

// Joanne Lee
// Section C
// joannele@andrew.cmu.edu
// Project-05

function setup() {
  createCanvas(500,600);
  background (135,206,236);
  noLoop();
}

function draw() {
  var x = 0;
  var y = 0;
  var shiftX = width / 5;
  var shiftY = height / 4;

  // diamond repeating background (creating this using repeating X shapes)
  for (var a = 0; a < 4; a++) { // rows
    for (var b = 0; b < 5; b++) { // columns
      stroke(243,250,253);
      strokeWeight(3);
      line(x, y, x + shiftX, y + shiftY);
      line(x + shiftX, y, x, y + shiftY);
      x += shiftX;
    }
    y += shiftY;
    x = 0; // reset x
  }
  
  // variables for ryan's face
  var face = 50;
  var earSize = 15;
  var eyeSize = 2;
  var noseSize = 5;
  var stacheSize = 10;
  x = 0;
  y = shiftY * 0.5;

  // rybear in every other diamond, every other row
  for (var c = 0; c < 4; c++) { // rows
    for (var d = 0; d < 3; d++) { // columns
      // ears
      stroke(0);
      strokeWeight(2.5);
      fill(223,155,58);
      ellipse(x - 16, y - 17, earSize, 0.85*earSize); // left
      ellipse(x + 16, y - 17, earSize, 0.85*earSize); // right

      // face
      ellipse(x, y, face, 0.85*face);

      // eyebrows
      line(x + 6, y - 8, x + 14, y - 8); // left
      line(x - 14, y - 8, x - 6, y - 8); // right

      // eyes
      fill(0);
      ellipse(x - 9.1, y - 2, eyeSize, eyeSize); // left
      ellipse(x + 9.9, y - 2, eyeSize, eyeSize); // right

      // nose
      ellipse(x, y + 4, noseSize, noseSize);

      // mustache
      strokeWeight(0);
      fill(255);
      ellipse(x - 4.5, y + 8, stacheSize, 0.75 * stacheSize); // left
      ellipse(x + 4.5, y + 8, stacheSize, 0.75 * stacheSize); // right


      x += 2 * shiftX; // in order to put in every other diamond
    }

    y += shiftY; // put ryan in every other row

    // start ryan at different spots for different rows

    if (c % 2 == 0) {
        x = shiftX;
    }

    else if (c % 2 == 1) {
        x = 0;
    }
  }
}

For this week’s project, I revisited my favorite cartoon character / emoji. I created a repeating diamond background pattern and placed ryan in every other column / row. While creating this wallpaper, I had phone wallpapers in mind and tried to create a simple look because it may look cluttered with phone apps on the screen as well.

Hannah Cai—Project 05—Wallpaper

/* Hannah Cai
Section C
hycai@andrew.cmu.edu
Project-05-Wallpaper
*/

var x;
var y;
var x1;
var y1;
var x2;
var y2;
var x3;
var y3;
var x4;
var y4;

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

function draw() {
    noLoop();
    smooth();
    angleMode(DEGREES);
    scale(1);
    translate(-90, 90);
    //dot grid
    for (x = 20; x < 1000; x += 50) {
        for (y = -99; y < 5000; y += 50) {
            stroke(0); 
            strokeWeight(1);
            point(x, y);
        }
    }

//yellow leaf
    for (x2 = 80; x2 < 2000; x2 += 320) {
        for (y2 = 70; y2 < 5000; y2 += 200) {
            //leaf
            fill(239, 211, 94);
            noStroke();
            push();
            translate(x2, y2 - 115);
            rotate(45);
            rect(0, 0, 55, 55, 15, 75, 0, 75);
            pop();
            //spot1
            stroke(192, 119, 50); 
            strokeWeight(5);
            point(x2 - 10, y2 - 85);
            //spot 2
            strokeWeight(2);
            point(x2 + 10, y2 - 73);
            //spot 3
            point(x2 - 12, y2 - 55);
            //stem
            strokeWeight(1);
            line(x2, y2 - 108, x2, y2 - 10);
        }
    }

//purple leaves
    for (x4 = 160; x4 < 1000; x4 += 320) {
        for (y4 = -90; y4 < 5000; y4 += 200) {
            //leaf 1
            noStroke();
            fill(149, 84, 90);
            ellipse(x4 + 0.5, y4 - 90, 12, 22); 
            //right leaves/branches
            for (i = 0; i < 3; i ++) {
                push();
                noStroke();
                translate(x4 + 9, y4 - (80 - 25 * i));
                rotate(45);
                ellipse(0, 0, 12, 22); 
                pop();
                stroke(89, 37, 37); 
                strokeWeight(1);
                line(x4, y4 - (72 - 25 * i), x4 + 15, y4 - (88 - 25 * i));
            }
            //left leaves/branches
            for (i = 0; i < 3; i ++) {
                push();
                noStroke();
                translate(x4 - 8, y4 - (80 - 25 * i));
                rotate(-45);
                ellipse(0, 0, 12, 22); 
                pop();
                line(x4, y4 - (72 - 25 * i), x4 - 15, y4 - (88 - 25 * i));
            }
            //stem
            line(x4, y4 - 100, x4, y4);
            //spot 1
            stroke(239, 211, 94); 
            strokeWeight(1);
            point(x4 + 13, y4 - 80);
            //spot 2
            point(x4 - 6, y4 - 33);
        }
    }

    //green leaves
    for (x1 = 250; x1 < 1000; x1 += 320) {
        for (y1 = -240; y1 < 5000; y1 += 200) {
            //leaf 1
            fill(159, 193, 64);
            noStroke();
            ellipse(x1, y1 - 75, 8, 52); 
            //leaf 2
            push();
            translate(x1 + 17, y1 - 60);
            rotate(208);
            ellipse(0, 0, 5, 35); 
            pop();
            //leaf 3
            push();
            translate(x1 - 18, y1 - 50);
            rotate(337);
            ellipse(0, 0, 4, 35); 
            pop();
            //branch for leaf 2
            stroke(104, 140, 27); 
            strokeWeight(1);
            line(x1, y1 - 30, x1 + 25, y1 - 75);
            //branch for leaf 3
            line(x1, y1 - 10, x1 - 25, y1 - 65);
            //stem
            line(x1, y1 - 100, x1, y1);
        }
    }

//purple flowers
    for (x3 = 330; x3 < 5000; x3 += 390) {
        for (y3 = -260; y3 < 5000; y3 += 200) {
            //stem
            stroke(159, 193, 64); 
            line(x3, y3 - 108, x3, y3);
            //flower 1
            fill(250, 204, 255);
            noStroke();
            ellipse(x3, y3 - 108, 5);
            ellipse(x3 - 2.5, y3 - 105.5, 5);
            ellipse(x3 + 2.5, y3 - 105.5, 5);
            ellipse(x3, y3 - 103, 5);
            //flower 1 center
            push();
            fill(149, 84, 90);
            rect(x3 - 0.5, y3 - 106, 1, 1);
            //flower 2
            x3 -= 2;
            y3 += 7;
            fill(250, 204, 255);
            ellipse(x3, y3 - 108, 5);
            ellipse(x3 - 2.5, y3 - 105.5, 5);
            ellipse(x3 + 2.5, y3 - 105.5, 5);
            ellipse(x3, y3 - 103, 5);
            //flower 2 center
            fill(149, 84, 90);
            rect(x3 - 0.5, y3 - 106, 1, 1);
            //flower 3
            x3 += 6;
            y3 += 7;
            fill(250, 204, 255);
            ellipse(x3, y3 - 108, 5);
            ellipse(x3 - 2.5, y3 - 105.5, 5);
            ellipse(x3 + 2.5, y3 - 105.5, 5);
            ellipse(x3, y3 - 103, 5);
            //flower 3 center
            fill(149, 84, 90);
            rect(x3 - 0.5, y3 - 106, 1, 1);
            //flower 4
            x3 -= 7;
            y3 += 5;
            fill(250, 204, 255);
            ellipse(x3, y3 - 108, 5);
            ellipse(x3 - 2.5, y3 - 105.5, 5);
            ellipse(x3 + 2.5, y3 - 105.5, 5);
            ellipse(x3, y3 - 103, 5);
            //flower 4 center
            fill(149, 84, 90);
            rect(x3 - 0.5, y3 - 106, 1, 1);
            //flower 5
            x3 += 8;
            y3 += 8;
            fill(250, 204, 255);
            ellipse(x3, y3 - 108, 5);
            ellipse(x3 - 2.5, y3 - 105.5, 5);
            ellipse(x3 + 2.5, y3 - 105.5, 5);
            ellipse(x3, y3 - 103, 5);
            //flower 5 center
            fill(149, 84, 90);
            rect(x3 - 0.5, y3 - 106, 1, 1);
            //flower 6
            x3 -= 8;
            y3 += 6;
            fill(250, 204, 255);
            ellipse(x3, y3 - 108, 5);
            ellipse(x3 - 2.5, y3 - 105.5, 5);
            ellipse(x3 + 2.5, y3 - 105.5, 5);
            ellipse(x3, y3 - 103, 5);
            //flower 6 center
            fill(149, 84, 90);
            rect(x3 - 0.5, y3 - 106, 1, 1);
            pop();
            //leaves
            fill(149, 84, 90);
            push();
            translate(x3 + 7, y3 - 90);
            rotate(-45);
            ellipse(0, 0, 10, 3);
            pop();
            push();
            fill(149, 84, 90);
            translate(x3, y3 - 90);
            rotate(45);
            ellipse(0, 0, 10, 3);
            pop();
        }
    }
    noLoop();
}

I knew I wanted to do something with plants for this project, so I made a few sketches in Illustrator:

I then sketched how I generally wanted the different designs to piece together:

Figuring out how to orient everything on the canvas was the hardest and most time-consuming part, but I feel like it got me a lot more comfortable with for loops and spacing.

Yingyang Zhou-Project-05-Wallpaper

Wallpaper

//Yingyang Zhou
//yingyanz
//Assignment-05-b

function setup() {
    createCanvas(600, 600);
    background(98, 140, 178);


    for (var y = 0; y <= 600; y+=60) {
        for (var x = 0; x <= 600; x+=60) {
          var n = x/60 % 2;
          if (n == 1){
            noStroke();
            fill(255, 179, 5);
            bezier(
            x-15, y,
            x, y-25,
            x+20, y+30,
            x-15, y);
          }
          else {
            for(i = 10; i < 180; i +=10){
              noFill();
              stroke(255, 75, 27);
              strokeWeight(0.5);
              ellipse(x, y, i, i);
            }
          }
          stroke(0, 0, 255);
          bezier(x-60, y-60, x, y-60, x, y, x+60, y);
        }
    }
    noLoop();
}


function draw() {
    // draw is not called due to noLoop() in setup()
}

This wall paper are consist of small ’tiles’ and it could be a tile of a larger part, The elements are repeat not only horizontally and vertically but also diagonally.

Project 5

sketch.js


var d = 20

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

}

function draw() {
    background(0);
    for (var i=0;i<50;i+=1){
        for(var j =-10; j < 50;j +=1){
            fill (255,140);
            rect((50 + j *d * 1.5) + i * 15, 25 +(i *d *1.5), d+20, d); //offsets 

        }
    }
}

I created an optical allusion using for loop and offsetting the rectangles so when you look far away you can’t tell if the black negative spaces are straight or not.

Jason Zhu Project 05

sketch

/* Jason Zhu
jlzhu@andrew.cmu.edu
Section E
Project 5
*/

// setup variables
function setup() {
    createCanvas(600, 400);
    background(10, 15, 35);
    var tw = 60/sqrt(3); //triangle width (adjusted)
    var th = 60; //triange height
    var oy = 50; //origin y of circles
    var ox = 50; //origin x of circles
    var r = 0;

    for (var y = 0; y < 6; y++) {
        //distinguishes even rows
        if (y % 2 == 0){
                //even rows: create 6 moon shapes
                for (var x = 0; x < 6; x++) {
                //position of moons x and y
                noStroke()
                fill(255);
                var py = oy + y * th;
                var px = ox + x * 103;
                ellipse(px, py, 50, 50);
                // create moon shadows and positions x and y
                push()
                fill(10, 15, 35)
                var py = oy + y * th;
                var px = ox + x * 93.5;
                ellipse(px+50, py, 50, 50);
                pop()
                }

             } else {
                //odd rows: create 5 main rectangle lines
                for (var x = 0; x < 5; x++) {
                var py = oy + y * th;
                push()
                //set random color and position variables
                var r = random(-50,50);
                var r2 = random(1, 5);
                var red = random(100, 255);
                var blue = random(100, 255);
                var green = random(100, 255);
                //offset origin x by an additional tw
                var px = ox + tw + x * 100;
                push()
                stroke(red, blue, green);
                // create 5 offset rectangle lines
                rect(px, py, 50, 1);
                rect(px +25, py +10, 45, 1)
                rect(px -25, py -10, 45, 1)
                pop()
                // create stars and set color
                fill(red, blue, green);
                ellipse(px+r, py+r, r2, r2);
                }
            }
        }
    noLoop();
}

function draw() {
    // draw is not called due to noLoop() in setup()
}

For this project I was inspired to create something that reminded me of stargazing as a child. When prompted to create something I would wear I interpreted that as to create something that I found meaningful to me and my own human experience. I wanted to create a wallpaper that conveyed a sense of time and wonder. Thus, I chose to demonstrate a very implied version of the moon cycle along with some colorful lines and stars that would tie the composition together. In terms of code, I tried to incorporate features from past classes–I added a basic random function to help create a slightly different experience upon each reload. Overall, I am fairly satisfied with the outcome and what I was able to learn from this project.

Carley Johnson Project 05

sketch

/*Carley Johnson
Section E
cbjohnso@andrew.cmu.edu
Project 05
*/

var d = 25;

function setup() {
    createCanvas(640, 480);
    background(255, 228, 233);
}

function draw() {
    for(var y = 0; y < 20; y += 2) {
        for(var x = 0; x < 20; x += 3) {

            // Bird body
            fill(0, 223, 252);
            stroke(0);
            rect((x*d * 1.5 - 185) + y * 25, 
                    25 + y*d * 2, d + 9, d + 2, 
                    0, 20, 20, 20);
            
            //Bird beak
            fill(255, 178, 76);
            stroke(0);
            triangle((x*d * 1.5 - 152) + y * 25, 35 + y*d * 2, 
                   (x*d * 1.5 - 152) + y * 25, 40 + y*d * 2, 
                    (x*d * 1.5 - 140) + y * 25, 35 + y*d * 2)

            //Bird eye
            fill(0);
            stroke(0);
            ellipse((x*d * 1.5 - 160) + y * 25, 33 + y*d * 2, 
                    3, 3)

            //Bird wing
            fill(154, 242, 253);
            stroke(142, 216, 252);
            bezier((x*d * 1.5 - 184) + y * 25, 38 + y*d * 2,
                    (x*d * 1.5 - 175) + y * 25, 55 + y*d * 2,
                    (x*d * 1.5 - 170) + y * 25, 55 + y*d * 2,
                    (x*d * 1.5 - 160) + y * 25, 38 + y*d * 2)

            //Bird food
            fill(255, 178, 76);
            stroke(0);
            ellipse((x*d * 1.5 - 110) + y * 25, 33 + y*d * 2, 
                    5, 5)
            }

      }
      
    }

I knew I wanted to do birds, because I think birds are an adorable and eccentric pattern. (I have a rain jacket with a repeating bird silhouette pattern on it that I love, pictured above) so I chose that. For a while I was trying to create five thousand variables for each individual shape, but that was making different patterns with each shape, not following where the body was. Then I realized that I could simplify the process by using the same variables (which also unified where the objects appeared) and had to live with the retrospective embarrassment of taking so long to figure it out. But I think this is adorable, so, worth it!