## Project 5: Wallpaper

``````/* Jaclyn Saik
Section E
jsaik@andrew.cmu.edu
Project-05-Wallpaper
Eyeballs
*/

function setup() {
createCanvas(600, 600);
background("CadetBlue");
var xs = 70; //x spacing
var ys = 50 //y spacing
var yo = 30; //y offset
var xo = 30; //x offset

for (var y = 0; y < 20; y++) {
for (var x = 0; x < 20; x++)  {
if (x % 2 > 0) { //odd-numbered rows are offset by 1.5 times the y position
yo = 30 * 1.5;
//sleepy eye
strokeWeight(4);
stroke("DarkSlateGray");
line(px-3, py-3, px-20, py-15);
line(px-4, py-3, px-25, py-10);
line(px-5, py, px-28, py-3);
strokeWeight(2);
line(px+20, py+2, px+10, py+10);
fill("Burlywood");
arc(px, py, 40, 40, PI, 0);
fill("PeachPuff");
arc(px, py, 40, 20, PI, 0);
arc(px, py, 40, 12, 0, PI);
fill("DarkSlateGray");
ellipse(px, py-5, 10, 10);

//accent dots, which are connected to the odd-numbered rows, so sleepy eyeball
strokeWeight(0);
fill("Yellow");
ellipse(px-35, py-35, 2, 4);
fill("gold");
ellipse(px-12, py-30, 3, 3);
fill("Orange");
ellipse(px+45, py-15, 4, 3);
fill("Khaki");
ellipse(px+30, py-20, 3, 3);

} else if (x % 2 == 0) { //even numbered rows stick to original variable values
yo = 30;
//wide awake eye
strokeWeight(2);
line(px-4, py-3, px-28, py-7);
line(px-5, py, px-35, py-3);
fill("PeachPuff");
arc(px, py, 40, 40, PI, 0);
fill("AliceBlue");
arc(px, py, 40, 30, PI, 0);
arc(px, py, 40, 20, 0, PI);
fill("Sienna");
ellipse(px, py-3, 17, 17)
fill("DarkSlateGray");
ellipse(px, py-3, 7, 7);

//some fun text!
textSize(7);
strokeWeight(1);
text("z z . . ", px+12, py-27);

}
var py = yo + y * ys; //position y is y offset plus y multplied by spacing
var px = xo + x * xs; //position x is x offset plus x multplied by spacing

}

}
noLoop(); //so that it is static
}``````

This project was really fun to do, probably because it’s exciting to see what a design looks like when the visual elements repeatedly interact with themselves across a page. I was inspired by wallpapers that were loud and intrusive, since I felt like the broke the classic look of something appealing and ornamental, and would be something I would be more likely to put in my own home. I found an image online from an artist who creates odd, curious designs.

I wanted to see if I could create something on the same subject matter, but with a different, more computed aesthetic. I played a lot with stoke weights and colors to achieve the final look that I wanted, and got to experiment using text as an ornamental feature. I had to be careful with the text and make sure it didn’t say anything that would be irritating if repeated often. I used what I learned Assignment 05-B about offsetting grids in order to alternate the spacing between rows, which I think makes the wallpaper flow better when looking at it from far away.  Here are some of my initial sketches for decided what type of eyes to include.

## Jamie Dorst Project 05 Wallpaper

``````/*
Jamie Dorst
jdorst@andrew.cmu.edu
Section A
Project-05
*/

var xPosition = -25;
var yPosition = -10;
var r = 133;
var g = 198;
var b = 199;

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

function concentricCircle() {
// draw concentric circles with diameter 50
var diam = 50;
// draw circles inside the previous circle until 0
for(var i = 50; i > 0; i -= 10) {
fill(r, g, b);
ellipseMode(CENTER);
ellipse(xPosition, yPosition, diam, diam);
diam -= 10;
}
}

function draw() {
// make an offset grid of concentric circles
for(var j = 0; j < 625; j += 50) {
xPosition += 25;
r += 5;
g -= 2;
for(var k = 0; k < 825; k += 50){
concentricCircle()
yPosition += 25;
b -= 1;
}
yPosition = -10;
}
}``````

This project was pretty cool once I started going. I drew inspiration from this picture, and the scale-like texture it has.

I had trouble figuring out how to get the for loops to work at first, but once I figured that out it went pretty smoothly. I took the concept from the lab this week of making a color gradient, and then also tried defining my own variable to actually make the concentric circles. Overall I’m happy with how it turned out, and I think I learned from this.

## Emily Zhou –– Wallpaper

``````var sideL = 80; // side length of each square tile

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

function draw() {
// blue background
background(142, 154, 175);
// green triangles
for (var y = 0; y <= height; y += sideL) {
for (var x = sideL; x <= width; x += sideL) {
fill(174, 181, 171);
noStroke();
triangle(x, y, x - sideL, y + sideL, x, y + sideL);
}
}
// tan triangles
for (var y = sideL / 2; y <= height; y += sideL) {
for (var x = sideL / 2; x <= width; x += sideL) {
fill(229, 211, 197);
noStroke();
triangle(x, y, x - sideL / 2, y + sideL / 2, x, y + sideL / 2);
}
}
// orange triangles
for (var y = sideL / 2; y <= height; y += sideL) {
for (var x = sideL / 2; x <= width; x += sideL) {
fill(229, 162, 126);
noStroke();
triangle(x, y, x, y + sideL / 2, x + sideL / 2, y + sideL / 2);
}
}
// 3/4 circle
for (var y = sideL / 2; y <= height; y += sideL) {
for (var x = sideL / 2; x <= width; x += sideL) {
fill(237, 238, 192);
noStroke();
arc(x, y, sideL / 2, sideL / 2, 3/4 * PI, 1/4 * PI);
}
}
noLoop();
}
``````

My wallpaper is meant to be an abstract representation of the sun rising behind a pyramid. I vaguely remember seeing a wallpaper at a museum that represented the Pyramid of Giza using two like-toned triangles. Starting with that idea, I played around with layers of overlapping shapes and colours.

In the process, I found it much easier to control the shapes’ position after setting a tile length variable. I am happy with the way it turned out using just triangles and one circle per tile. Even though I like the abstraction and simplicity, I’d like to explore more organic forms in future projects.

## Jenny Hu — Project 05 Wallpaper

``````//Jenny Hu
//Section E
//jjh1@andrew.cmu.edu
//Project 05

var x = 0;
var y = 0;
var tileWidth = 42;
var ellipseW = 10;
var arcW = 2;
var width = 40;
var height = 40;
var ox = 20;

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

for (x = 0; x <12; x++){
var evenOrOdd = x%2;

if(evenOrOdd == 0){
height = width + (sqrt(3)/2);
//ellipse rows
for (y = 0; y<12; y++){
var placex = y*tileWidth;
var placey = x*tileWidth;
noFill();
stroke(255);
strokeWeight(1.2);

for (var e = 0; e<12; e++){
var scale = 5
ellipse(placex+tileWidth/2,placey+tileWidth/2,
ellipseW+(e*scale), ellipseW+(e*scale));

}
}
}

//lace rows
if(evenOrOdd != 0){
height = width + (sqrt(3)/2);
for (y = 0; y<12; y++){
var placex = y*tileWidth + (ox/2);
var placey = x*tileWidth;
var scale = 4;
noFill();
stroke(255);
strokeWeight(1.5);

//upward lace arc
for (var e = 0; e<10; e++){
arc(placex + tileWidth/2, placey + tileWidth/2,
arcW+e*scale, arcW+e*scale, 180, 0, CHORD);
arc(placex, placey + tileWidth/2,
arcW+e*scale, arcW+e*scale, 180, 0, CHORD);
}

//downward lace arcs
for (var s = 0; s<5; s++){
arc(placex + tileWidth/2, placey + tileWidth/2,
arcW+s*scale, arcW+s*scale, 0, 180, CHORD);
arc(placex, placey + tileWidth/2,
arcW+s*scale, arcW+s*scale, 0, 180, CHORD);
}
}

}
}
noLoop();
}

``````

I wanted to replicate and play with a sense of three-dimensional texture by overlaying moire patterns once again. Building off of one of the assignments, I thought it would be nice to replicate fabric, and drew inspiration from lace dresses (see below). For the sake of contrast, the background is black, but I’d love to see this extended into a variety of more complex patterns in the future.

## Judy Li-Project-05-Wallpaper

``````/*
Judy Li
Section A
judyli@andrew.cmu.edu
Project-05
*/

function setup() {
createCanvas(480, 480);
background("pink");
noStroke();
}

function draw() {
var tw = 60;
var th = 60;
var oy = 60;
var ox = 60;
for (var i = 0; i < width; i = i + 5) {
stroke(255);
line(i, 0, i, height);
}
for (var y = 0; y < 8; y++) {
noStroke();
for (var x = 0; x < 7; x++) {
var py = oy + y * (sqrt(3) * (th / 2));
var px = ox + x * tw;
for (var x = 0; x < 6; x++) {
var py = oy + y * (sqrt(3) * (th / 2));
var px = ox + x * tw;
if (y % 2 != 0) {
py = oy + y * (sqrt(3) * (th / 2));
px = ox + x * tw;
fill(128, 206, 214);
arc(px + (tw / 2), py, 50, 50, PI - QUARTER_PI, TWO_PI - QUARTER_PI);
fill(213, 244, 230);
arc(px + (tw / 2), py, 50, 50, TWO_PI - QUARTER_PI, PI - QUARTER_PI);
}
else {
fill (97, 134, 133);
arc(px, py, 50, 50, QUARTER_PI, PI + QUARTER_PI);
fill (254, 251, 216);
arc(px, py, 50, 50, PI + QUARTER_PI, QUARTER_PI);
}
}
if (y % 2 == 0) {
fill(97, 134, 133);
arc(px + tw, py, 50, 50, QUARTER_PI, PI + QUARTER_PI);
fill (254, 251, 216);
arc(px + tw, py, 50, 50, PI + QUARTER_PI, QUARTER_PI);
}
}
}
noLoop();
}
``````

I found two wallpapers from Pinterest that I really liked. But, the goals of this project was to create one static wallpaper. So, I wanted to combine the two I found to create my own wallpaper. I think that the base of my project can serve to be useful for adding more details to the wallpaper such as making the arcs divide into different rings so that it’s more intricate. I also referred to the code from the assignment to help me with this project. I attached the two inspirations I got from Pinterest below.

## Min Jun Kim- Project 5 Wallpaper

``````/*
Min Jun Kim
minjunki@andrew.cmu.edu
15104-B
Project 5
*/

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

}

function draw() {

noStroke();
background(161,211,234);
fill(250,250,200,220);
//moves the whole position up past left top corner
translate(-10,-20);

//draws the grass lines, triangles and icecream tops
for (var j = 0; j < height+30; j += 60) {
for (var h = 0; h < width+30; h += 80) {
push();
//makes the triangles and the dashes
fill(200,180,100);
translate(h+12,j+10);
triangle(10,28,30,28,20,55);
fill(100,180,100);
text("///", -22, 0);
pop();

push();
//makes more dashes colored differently and calls icecream function
translate(h+12,j+10);
rotate(-1);
text("///", -22, 0);
pop();
drawn(h,j+0.5);

}
}

}

function drawn(e,f) {
push();
//calls the drawIt function to add more complexity to it
for (var z = 0; z < 10; z+=1) {
translate(e,f);
drawIt(25, -30);

}
pop();
}

function drawIt(a,b) {
push();
translate(a,b);
//colors it pink
fill(251,156,180);
for (var x = 0; x < 8; x+= 1) {
//draws ellipses while constantly scaling and translating
translate(x+1,5);
scale(0.45,-0.7);
ellipse(x+15,10,60,43);
}
pop();

}

``````

I wanted to see if I can create unique patterns just by drawing one ellipse, so I messed around with using for loops on scale and translate and came across very unique patterns. First it came out as a thin feather and when I input a negative value in the scale in came out with a very unique and deformed sort of pattern. I thought that it looked a lot like an icecream so I incorporated other elements to make it look more alike and added more patterns to make the wallpaper interesting. Below are other iterations of this project that I’ve made but didn’t feel like elaborating on.

I thought that it was very interesting how just making minor tweaks in the iteration can change the picture as a whole. I thought that this project helped me learn more about calling functions in functions.