Project 5 Alison Hoffman

``````
var petalD = 65; // petal depth
var petalW= 60; // petal width
var rotation = 60; // standard rotation
var xspacing = 380; // space between flowers
var yspacing = 270;
function setup() {
createCanvas(800, 400);
background(0);
}

function draw() {
// draw white stripes
for(var i = 40; i <height; i +=100){
stroke(255);
strokeWeight(50);
line(0,i,width,i);
}

//draw the flowers
for(var y = 0; y < height; y+= yspacing){
for(var x = 0; x < width; x+= xspacing){
flower(x,y);
}
}

noLoop();
}

function flower(x,y){     // function to make flower
noStroke();

push();
translate(x,y);

// leaves
fill(179,253,181);
ellipse(petalD,0,120,20);
ellipse(petalD,0,120,20);
ellipse(petalD,0,120,20);
ellipse(petalD,0,120,20);

rotate(radians(0));  // reset to no rotation
for (var i=0; i<9; i++){     // makes up to nine petals
if(i%2==0){
fill(255,191-i,229-i);  // make every other petal darker
petalW = 90;  // vary petal width
petalD = 80; //vary petal depth
}else{
fill(255,200+i,230+i); // make every other petal lighter
petalD = 75;  // vary petal depth
petalW = 90; // vary petal width
}
ellipse(petalD/2,0,petalD,petalW); // makes a petal
rotation += i;   // makes rotations less uniform and circular
fill(0);
ellipse(10,0,15); // center circles
}

pop();

}
``````

For this project I wanted to try to create a wallpaper that combined geometric elements and more organic one. I have been seeing a lot of designs that have been combining stripes with florals, so I decided to try to recreate that in this project.

Kyle Lee Project 5 Duck Wallpaper

``````//Kyle Lee
//Section C

var x = 100;
var y = 100;
var h = 4;
var rowStart = 0;
var columnStart = 60;
var xSpace = 200;
var ySpace = 100;

function setup() {
createCanvas(600, 600);
background("#EBF8FF");//light blue
noStroke();
}

function draw(){
for (var y = 0; y < 6; y++) {
var evenOdd = y%2;//creates even or odd rows
if(evenOdd == 0) {//if row is even make 4 per row
rowStart = 0;
h = 4;
} else if(evenOdd == 1) {//if row is odd make 3 per row
h = 3;
rowStart = ySpace;
}//closes if else
for (var x = 0; x < h; x++) {
px = rowStart + x * xSpace;
py = columnStart + y * ySpace;
duck(px, py);
}//closes forloop
}//closes complete nested forloop
}//closes draw

function duck(x, y) {
push();
translate(x, y);

var bodyW = 40;
var bodyH = 30;
var wingW = 30;
var wingH = 10;
var mouthY = -20;
var mouthW = 13;
var mouthH = 8;
var eyeX = 10;
var eyeY = -35;
var eyeD = 7;
var footX = 7;
var footY = 16;
var footW = 8;
var footH = 4;

ellipse(0, 0, bodyW, bodyH);//body

push();//right wing
ellipse(bodyH/2, 0, wingW, wingH);
pop();
push();//left wing
ellipse(-bodyH/2, 0, wingW, wingH);
pop();

fill("#FF9D14");//orange
ellipse(0, mouthY, mouthW, mouthH);

fill("#534C45");//brown
ellipse(eyeX, eyeY, eyeD, eyeD);
ellipse(-eyeX, eyeY, eyeD, eyeD);
ellipse(footX, footY, footW, footH);
ellipse(-footX, footY, footW, footH);

pop();
noLoop();
}
``````

For my project, I made a repeating pattern of ducks. I could definitely see this pattern on a pair of fun socks, or pj pants, or a short sleeve button up. I created a duck function in which I drew all the individual shapes. I then called upon that function in a for loop to repeat the pattern in a simple pattern.

Project 5: Wallpaper

My original idea for this project was to make a fabric pattern using florals (groundbreaking, I know!). For inspiration, I began by looking at prints from Lilly Pulitzer and Andy Warhol’s floral pop art.  However, as I began playing around with the code, the simple flower I started out with turned into an abstract “centerpiece” surrounded by ellipses that made rectangles around the sides. I ended up with a completely different deliverable, as you can see below.

``````/*Emma Shi
Section B
eyshi@andrew.cmu.edu
Project 5
*/
var petalL = 100;
var petalW = 40;
var rot = 45;

function setup() {
createCanvas(600, 600);
background("navy");
}

function draw() {

for (var x = 0; x < 12; x++) {
for (var y = 0; y < 12; y++) {

var Petal = petalL * x;
var innerL = petalL/x;
var innerW = petalW*y;

stroke("white");
strokeWeight(2);
noFill();

push();
translate(width/2, height/2);

ellipse(0, 0, 25, 25);//center circle

ellipse(Petal, 0, petalL, petalW);//petals of the right half of the inner "diamond"
ellipse(Petal, 0, innerL, innerW);//inner petals of the right half of the inner "diamond"

ellipse(Petal, 0, petalL, petalW);//petals of the upper right half
ellipse(Petal, 0, innerL, innerW);//inner petals of the upper right half

ellipse(Petal, 0, petalL, petalW);//petals of the outer upper right half
ellipse(Petal, 0, innerL, innerW);//inner petals of the outer upper right half

ellipse(Petal, 0, petalL, petalW);//petals of the upper right corner
ellipse(Petal, 0, innerL, innerW);//inner petals of the upper right corner

ellipse(Petal, 0, petalL, petalW);//petals of upper mid right
ellipse(Petal, 0, innerL, innerW);//inner petals of upper mid right

ellipse(Petal, 0, petalL, petalW);//petals of the upper left
ellipse(Petal, 0, innerL, innerW);//inner petals of the upper left

ellipse(Petal, 0, petalL, petalW);//petals of the mid left
ellipse(Petal, 0, innerL, innerW);//inner petals of the mid left

ellipse(Petal, 0, petalL, petalW);//petals of the lower left
ellipse(Petal, 0, innerL, innerW);//inner petals of the lower left
pop();
}
}
noLoop();

}``````

Wallpaper-05-sehenry

``````//Seth Henry

//Tuesday at 10:30

//sehenry@andrew.cmu.edu

//Assignment-05 Wallpaper

function setup() {
createCanvas(660, 340);
}

function draw() {
background(128, 0, 32); //Burgundy
blackDot();
fill('orange'); //Color of Ball
Bball();
fill(240, 248, 255); //Color of Diamonds
diamond();

}

var x = 90;
var y = 50;
for(x = 90; x < 660; x += 120){

for(y = 50; y < 340; y += 80){
ellipse(x, y, 60, 60)

beginShape(); // left curve on basketball

curveVertex(x - 19.5, y - 22.5);
curveVertex(x - 19.5, y - 22.5);
curveVertex(x - 12.5, y - 10);
curveVertex(x - 12.5, y + 10);
curveVertex(x - 19.5, y + 22.5);
curveVertex(x - 19.5, y + 22.5);
endShape();
beginShape(); // right curve on basketball

curveVertex(x + 19.5, y - 22.5);
curveVertex(x + 19.5, y - 22.5);
curveVertex(x + 12.5, y - 10);
curveVertex(x + 12.5, y + 10);
curveVertex(x + 19.5, y + 22.5);
curveVertex(x + 19.5, y + 22.5);
endShape();
line(x, y + 30, x, y-30); //vertical line on basketball
line(x - 30, y, x + 30, y); //horizontal line on basketball
}

}
noLoop();
}

function diamond(){ //Diamond Layout Plus Number 4 Text

var a = 0; //starter variables
var b = 0;

for(a = 0; a < 650; a += 120){ //moves over the diamonds/4 in rows
for(b = 0; b < 340; b += 50){ //moves over the diamonds/4 in columns
quad(a + 30, b + 5, a + 45, b + 20, a + 30, b + 35, a + 15, b + 20);
textAlign(CENTER);

text("#4", a + 30, b + 50); //#4
}
}
noLoop(); //end loop
}

function blackDot(){ //Makes black dots behind the balls, numbers, and diamonds
var v = 0;
var w = 0;

for(v=0; v<660; v+=5){ //moves over the dots in rows
for(w=0; w<340; w+=5){ //moves over the dots in columns
ellipse(v,w,1,1);
}

}
noLoop();
}

``````

I decided to cut off one row of the basketballs because when I embed the wallpaper into my post, it cannot capture all of the extra row. So I decided to just remove it from the preview even though it is in my code.

Making this project would have actually been finished relatively fast if I didn’t have a hard time with the curves on the basketball and getting the diamonds to move over by certain amounts without distorting their shape. I drew a sketch to begin with and toyed with the idea of having basketballs all over the picture. I later added the number 4 to the wallpaper because it is my current number on the basketball team and I decided to add the black dots because I thought it would make the wallpaper pop out even more! I had fun with this project and it showed me that I am actually getting better at coding.

JihoonPark_Project_05

sketch
I was inspired by islamic geometric patterns as well as oriental window seals that overlapped and intersected perpetually. There are three components in this pattern, a vertical line and two zigzag lines. I created my own functions, “vertStrip” and “zigzag” to reduce redundancy in coding the overlapping strips.

``````//Jihoon Park
//Section A
//jihoonp@andrew.cmu.edu
//project-05
var i; //horizontal loop value for vertical strips
var j; //vertical loop value for vertical strips
var k; //horizontal loop value for black zigzag
var l; //vertical loop value for black zigzag
var m; //horizontal loop value for gray zigzag
var n; //vertical loop value for gray zigzay

function setup() {
createCanvas(800, 400);
background(236, 245, 255); //lightblue
//WHITE VERTICAL STRIPS
for (j=0; j<height+20; j+=20) {
strokeWeight(0.5);
fill(255, 142, 84); //orange red
for (i=0; i<width+20; i+=20) {

if ((i%40)==0) {					//odd number columns
vertStrip(i, j);
} else {							//even number columns
vertStrip(i, j-10);
}
}
}

// HORIZONTAL ZIGZAG
for (l=0; l<height+20; l+=20) {

for(k=0; k<width+80; k+=80) {

if ((l%40)==0) {				//ODD ROWS
fill(160, 255, 99);//green			//draws green zigzag strips
zigzag(k, l);

fill(78, 232, 194);					//draws turquois zigzag strips
zigzag(k+20, l+10);
} else {						//EVEN ROWS
fill(160, 255, 90);					//draws green zigzag strips
zigzag(k-40, l);

fill(78,232,194);
zigzag(k+-20, l+10);			 	//draws turquois zigzag strips
}
}
}
noLoop();
}

function vertStrip(i,j) {
beginShape();						//function that draws vertical strips
vertex(i, j+5);
vertex(i+5, j+2.5);
vertex(i+5, j+17.5);
vertex(i, j+20);
endShape(CLOSE);
}

function zigzag(k, l) {					//function that draws zigzag strips
beginShape();						//all vertex of shapes are listed clockwise
vertex(k-15, l+2.5);
vertex(k-10, l+5);
vertex(k-15, l+7.5);
endShape(CLOSE);

beginShape();
vertex(k-10, l+5);
vertex(k+5, l-2.5);
vertex(k+10, l);
vertex(k-5, l+7.5);
endShape(CLOSE);

beginShape();
vertex(k+10, l);
vertex(k+15, l-2.5);
vertex(k+20, l);
vertex(k+20, l+5);
endShape(CLOSE);

beginShape();
vertex(k+25, l+2.5);
vertex(k+30, l+5);
vertex(k+50, l-5);
vertex(k+60, l);
vertex(k+60, l+5);
vertex(k+50, l);
vertex(k+30, l+10);
vertex(k+25, l+7.5);
endShape();
}
``````

Sarita Chen – Project 05 – Wallpaper

``````// Sarita Chen
// Section A
// slchen@andrew.cmu.edu
// Project: Wallpaper
function setup() {
createCanvas(600, 600);
noLoop();
}

function draw() {

background(90,230,255); // Blue.

for(var x = 0; x < width + 4; x +=60){
for(var y = 0; y < height; y += 80){
luigi(x,y); // draws the function "luigi"
}
}
}
// luigi design
function luigi(x,y) {

noStroke();
var hairC = ('YellowGreen');
var skintone = ('Orange');
var clothes = (255);
var buttons = ('Gold');
var pixel = 2.5;

// Note: the side comments refer to the number of squares each line
// produces.

// Line 1

fill(clothes);
rect(x+10*pixel,y,pixel*5,pixel); //

// Line 2

fill(clothes);
rect(x+9*pixel,y+pixel,pixel*9,pixel); // 9 white

//Line 3

fill(hairC);
rect(x+9*pixel,y+pixel*2,pixel*3,pixel); // 3 green

fill(skintone);
rect(x+12*pixel,y+pixel*2,pixel*2,pixel); //2 orange

fill(hairC);
rect(x+14*pixel,y+pixel*2,pixel,pixel); // 2 green

fill(skintone);
rect(x+15*pixel,y+pixel*2,pixel,pixel); // 1 orange

//Line 4

fill(hairC);
rect(x+8*pixel,y+pixel*3,pixel,pixel);  // 1 green

fill(skintone);
rect(x+9*pixel,y+pixel*3,pixel,pixel); // 1 orange

fill(hairC);
rect(x+10*pixel,y+pixel*3,pixel,pixel); // 1 green

fill(skintone);
rect(x+11*pixel,y+pixel*3,pixel*3,pixel); // 3 orange

fill(hairC);
rect(x+14*pixel,y+pixel*3,pixel,pixel); // 1 green

fill(skintone);
rect(x+15*pixel,y+pixel*3,pixel*3,pixel); // 3 orange

//Line 5

fill(hairC);
rect(x+8*pixel,y+pixel*4,pixel,pixel); // 1 green

fill(skintone);
rect(x+9*pixel,y+pixel*4,pixel,pixel); // 1 orange

fill(hairC);
rect(x+10*pixel,y+pixel*4,pixel*2,pixel); // 2 green

fill(skintone);
rect(x+12*pixel,y+pixel*4,pixel*3,pixel); // 3 orange

fill(hairC);
rect(x+15*pixel,y+pixel*4,pixel,pixel); // 1 green

fill(skintone);
rect(x+16*pixel,y+pixel*4,pixel*3,pixel); //3 orange

// Line 6

fill(hairC);
rect(x+8*pixel,y+pixel*5,pixel*2,pixel);  // 2 green

fill(skintone);
rect(x+10*pixel,y+pixel*5,pixel*4,pixel); // 4 orange

fill(hairC);
rect(x+14*pixel,y+pixel*5,pixel*4,pixel);  // 4 green

fill(skintone);
rect(x+10*pixel,y+pixel*6,pixel*7,pixel);  // 7 orange

//Line 8

fill(hairC);
rect(x+9*pixel,y+pixel*7,pixel*2,pixel); // 2 green

fill(clothes);
rect(x+11*pixel,y+pixel*7,pixel,pixel); // 1 white

fill(hairC);
rect(x+12*pixel,y+pixel*7,pixel*3,pixel); // 3 green

//Line 9

fill(hairC);
rect(x+8*pixel,y+pixel*8,pixel*3,pixel); // 3 green

fill(clothes);
rect(x+11*pixel,y+pixel*8,pixel,pixel); // 1 white

fill(hairC);
rect(x+12*pixel,y+pixel*8,pixel*2,pixel); // 2 green

fill(clothes);
rect(x+14*pixel,y+pixel*8,pixel,pixel); // 1 white

fill(hairC);
rect(x+15*pixel,y+pixel*8,pixel*3,pixel); // 3 green

//Line 10

fill(hairC);
rect(x+7*pixel,y+pixel*9,pixel*4,pixel); // 4 green

fill(clothes);
rect(x+11*pixel,y+pixel*9,pixel*4,pixel); // 4 white

fill(hairC);
rect(x+15*pixel,y+pixel*9,pixel*4,pixel); // 4 green

// Line 11

fill(skintone);
rect(x+7*pixel,y+pixel*10,pixel*2,pixel); // 2 orange

fill(hairC);
rect(x+9*pixel,y+pixel*10,pixel,pixel); // 1 green

fill(clothes);
rect(x+10*pixel,y+pixel*10,pixel,pixel); // 1 white

fill(buttons);
rect(x+11*pixel,y+pixel*10,pixel,pixel); // 1 yellow

fill(clothes);
rect(x+12*pixel,y+pixel*10,pixel*2,pixel); // 2 white

fill(buttons);
rect(x+14*pixel,y+pixel*10,pixel,pixel); // 1 yellow

fill(clothes);
rect(x+15*pixel,y+pixel*10,pixel,pixel); // 1 white

fill(hairC);
rect(x+16*pixel,y+pixel*10,pixel,pixel); // 1 green

fill(skintone);
rect(x+17*pixel,y+pixel*10,pixel*2,pixel); // 2 orange

//Line 12

fill(skintone);
rect(x+7*pixel,y+pixel*11,pixel*3,pixel); // 3 orange

fill(clothes);
rect(x+10*pixel,y+pixel*11,pixel*6,pixel); // 6 white

fill(skintone);
rect(x+16*pixel,y+pixel*11,pixel*3,pixel); // 3 orange

// Line 13

fill(skintone);
rect(x+7*pixel,y+pixel*12,pixel*2,pixel); // 2 orange

fill(clothes);
rect(x+9*pixel,y+pixel*12,pixel*8,pixel); // 8 white

fill(skintone);
rect(x+17*pixel,y+pixel*12,pixel*2,pixel); // 2 orange

// Line 14

fill(clothes);
rect(x+9*pixel,y+pixel*13,pixel*3,pixel); // 3 white

fill(clothes);
rect(x+14*pixel,y+pixel*13,pixel*3,pixel); // 3 white

// Line 15

fill(hairC);
rect(x+8*pixel,y+pixel*14,pixel*3,pixel); // 3 green

fill(hairC);
rect(x+15*pixel,y+pixel*14,pixel*3,pixel); // 3 green

// Line 16

fill(hairC);
rect(x+7*pixel,y+pixel*15,pixel*4,pixel); // 4 green

fill(hairC);
rect(x+15*pixel,y+pixel*15,pixel*4,pixel); // 4 green

}

``````

I wanted to make my wallpaper 8bit style, so I decided to recreate an 8bit version of Luigi from the older Super Mario games. I used an image I found here, which made it convenient as I could easily count the number of “pixels” used to create the image. Actually making the Luigi function took up the most time, because I had initially started off by having a for loop generate the squares for each line.That actually made it harder for me to put the function in a for loop to generate the wallpaper, because it was too many variables to handle so I had to go back and reedit everything… Anyways, I’m happy with the final result! I tried to make the colours as vibrant as possible, since Super Mario is a very bright, cheerful game.

Sofia Syjuco – Project-05

Music Box Pattern
sketch

``````// sofia syjuco
// section A
// smsyjuco@andrew.cmu.edu
// Assignment-5-C

function setup() {
createCanvas(400, 200);// create a cavas
}

function draw() {
background(244, 100, 123);//make a pink background

pattern(0, 0); // row 1, grid 1 of pattern
pattern(100, 0); // row 1, grid 2  of pattern
pattern(200, 0);// row 1, grid 3, of pattern
pattern (300, 0); // row 1, grid 4 of pattern

pattern(0, 100); // row 2, grid 1 of pattern
pattern(100, 100); //row 2, grid 2 of pattern
pattern (200, 100);// row 2, grid 3 of pattern
pattern (300, 100); // row 2, grid 4 of pattern

}

function pattern(x,y){
fill("gold"); // fill shapes with gold color
stroke(255); // strokes are colored white

push();
translate(x, y);// place pattern square in designated position
for (var yPos = 10; yPos < 100; yPos +=10){ //draw all the horizontal lines
line(0, yPos, 40, yPos); // lines on left
line (40, yPos, random(41, 59), yPos-(random(2, 9)));// draw random line
line(60, yPos, 100, yPos); // lines on right
ellipse (60, yPos, 5, 5);// draw an ellipse
}
noLoop(); // don't make it repeat. Keep it static
pop();
}``````

I’ve been thinking about music boxes lately, just as a kind of portable nostalgia, and thought it might be interesting to make a pattern that incorporated elements of music boxes. I wanted to make it a little non-representational, but just enough that someone looking at it wouldn’t immediately guess music box – but they could come to that conclusion if they spent a little time with it. To add subtle variation, and not make it too staid, I added a subtle variation to how the little tines are bent, as if the whole pattern is in the middle of playing some huge song.

Michal Luria – Project 05 – Wallpaper

``````/*  Submitted by: Michal Luria
Section A: 9:00AM - 10:20AM
mluria@andrew.cmu.edu
Assignment-05-B
*/

var marg = 20; //margin for background dots
var start = 195; //starting point of diamond
var step = 100; //margin space in big diamond
var smallStepX = 50; //X margin space in small diamond
var smallStepY = 80; //Y margin space is small diamond

function setup() {
createCanvas(783, 540);
background(236,229,206);
noStroke();

for (var y = 0; y < height/20; y++) {
if(y % 2 == 0){

//draw background dots
for (var x = 0; x < width/20; x++) {
fill(244,142,121);
ellipse(marg*x, 10 + marg*y, 3, 3);
}
} else {
//alternate dot background
for (var x = 0; x < width; x++) {
fill(244,142,121);
ellipse(marg*x + marg/2, 10 + marg*y, 3, 3);
}

}
}

fill(197, 224, 220);

for (var i = 0; i < 5; i++) {
//draw big diamond
i*start+(2*step), height/2, i*start+step, height/4*3);

//draw squares in diamonds
push();
fill(224, 142, 121);
rect((i*start + i*start+step)/2, (height/2+height/4)/2, 100, 130);
pop();

//draw small diamond
i*start+(2*step)-smallStepX, height/2, i*start+step, height/4*3-smallStepY);

//draw center circle
push();
fill(231,202,145);
ellipse(i*start+2*smallStepX, height/2, 50, 50);
pop();

}

noLoop();

}

``````

In the process I wanted to create a wallpaper that I would enjoy (for my computer) as well. I wanted to use some geometrical/tribal inspired forms and organic colors for this project. Starting with an initial sketch (attached), programming the pattern and previewing it allowed me to iterate and modify according to my preference and esthetic taste as I went.

Isabella Hong – Project 05 – Wallpaper

For this project, I imagined that I was creating a design that would be printed on canvas bags and pouches. The design is clean, simple, and whimsical. I could also see the design being used for stationary paper or stickers as well.

``````// Isabella Hong
// Section A
// ijhong@andrew.cmu.edu
// Project-05

function setup() {
createCanvas(600, 780);
//save computation
noLoop();
}

function draw() {
//tan
background(221, 198, 168);
//loop cawfee function
for (var x = -150; x < width + 200; x += 100) {
for (var y = 0; y < height; y += 100) {
cawfee(x, y);
}
}
//loop bean function
for (var x = -5; x < width; x += 97) {
for (var y = 20; y < height + 100; y += 100) {
bean(x, y);
}
}
}

//coffee cup
function cawfee(x, y) {
noStroke();
angleMode(DEGREES);
fill(54, 40, 21);
ellipse(x + 50, y + 20, 60, 8);
fill(255);
arc(x + 50, y + 20, 60, 60, 0, 180, OPEN);
noFill();
stroke(255);
strokeWeight(2);
arc(x + 60, y + 30, 60, 15, 315, 100, OPEN);
}

//coffee bean
function bean(x, y) {
push();
noStroke();
angleMode(DEGREES);
fill(54, 40, 21);
arc(x + 20, y + 60, 15, 30, 250, 120, CHORD);
arc(x + 15, y + 60, 30, 30, 110, 250, CHORD);
pop();
}

``````

I didn’t have much process work to show, just a page of initial doodles that I drew while brainstorming potential design ideas.