## 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

``````/*
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 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

``````/* Nina Yoo
Section E
nyoo@andrew.cmu.edu
Project- 05 Wallpaper*/
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);

//2nd circle
noStroke();
fill(0);

//middle
noStroke();
fill(238,184,213);
}
}
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

``````// 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

``````// 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

``````//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

``````
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

``````/* 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

``````/*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!