## Hannah K-Project-05

``````var xWidth = 150; // spacing for width
var yHeight = 150; // spacing for height
var startX1 = 80;// x-init pos for circle of L ear
var startY1 = 80; // y-init pos for circle of L ear
var startX2 = 120; // x-init pos for circle of R ear
var startY2 = 80; // y-init pos for circle of R ear
var startX3 = 100; // x-init pos for circle of bear face
var startY3 = 100; // y-init pos for circle of bear face
var eyeLX = 85; // x-init pos of L eye
var eyeLY = 90; // y-init pos of L eye
var eyeRX = 115; // x-init pos of R eye
var eyeRY = 90; // y-init pos of R eye
var noseX = 100; // Nose x-init pos
var noseY = 100; // Nose y-init pos
var lineX1 = 100; // x-init of 1st point of line
var lineY1 = 100; // y-init of 1st point of line
var lineX2 = 100; // x-init of 2nd point of line
var lineY2 = 134 // y-init of 2nd point of line

function setup() {
createCanvas(500, 500);
background(151, 255, 255);
}

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

// These variables change init x and y values of all bear elements
var x1Change = startX1 + x * xWidth;
var y1Change = startY1 + y * yHeight;
var x2Change = startX2 + x * xWidth;
var y2Change = startY2 + y * yHeight;
var x3Change = startX3 + x * xWidth;
var y3Change = startY3 + y * yHeight;
var newEyeLX = eyeLX + x * xWidth;
var newEyeLY = eyeLY + y * yHeight;
var newEyeRX = eyeRX + x * xWidth;
var newEyeRY = eyeRY + y * yHeight;
var newNoseX = noseX + x * xWidth;
var newNoseY = noseY + y * yHeight;
var newLineX1 = lineX1 + x * xWidth;
var newLineY1 = lineY1 + y * yHeight;
var newLineX2 = lineX2 + x * xWidth;
var newLineY2 = lineY2 + y * yHeight;

strokeWeight(2);
line(newLineX1, newLineY1, newLineX2, newLineY2);
fill(255, 211, 155);
ellipse(x1Change, y1Change, 35, 35);
ellipse(x2Change, y2Change, 35, 35);
ellipse(x3Change, y3Change, 68, 68);
fill(0);
ellipse(newEyeLX, newEyeLY, 7, 7);
ellipse(newEyeRX, newEyeRY, 7, 7);
ellipse(newNoseX, newNoseY, 9, 9);
line(newLineX1, newLineY1, newLineX2, newLineY2);

}
}
}

``````

For this project, I knew I wanted to make a pattern involving animals. I think bears are cute, so I decided to make something with bears in it. The bears are pretty minimalistic, but I was going for the graphic look, so I think it works. I could imagine these bears on a shirt, socks, or something like that, and I would gladly wear it!

To figure out where to draw each element of the bear, I drew a picture and calculated out the coordinates ahead of time. I have long since learned that this is the most efficient way to approach projects. Also, I feel that I have slowly been improving in my ability to debug my code!

## ShanWang-Project5-WallPaper

In this project, I got inspiration from the patterns on blue and white pottery from China. By making a function that draws each module, generating multiple patterns became relatively easy.

``````//Shan Wang
//Section A
//shanw1@andrew.cmu.edu
//Assignment-05-Project

function setup() {
createCanvas(700, 480);
background("white");
}
function lockSpiral(cenX,cenY,unitLen,degree,weight){
var startX = cenX;
var startY = cenY;
var len = unitLen
for (var i=0; i<degree;i++){
stroke(30,30,129);
strokeWeight(weight);
if ((i+1)%4 == 1){
line(startX,startY,startX-len,startY);
startX = startX-len
}
if ((i+1)%4 == 2){
line(startX,startY,startX,startY+len);
startY = startY+len
len += unitLen
}
if ((i+1)%4 == 3){
line(startX,startY,startX+len,startY);
startX = startX+len
}
if ((i+1)%4 == 0){
line(startX,startY,startX,startY-len);
startY = startY-len
len += unitLen
}
}
}
function cloud(cenX,cenY,largestR,unitR,num){
for (var i = 0; i<num; i++){
if (i%2 == 0){
//fill("white")
fill(30,30,129);
arc(cenX,cenY,largestR-i*unitR,largestR-i*unitR,PI,TWO_PI,CHORD);
}
if (i%2 == 1){
//fill(30,30,129);
fill("white");
arc(cenX,cenY,largestR-i*unitR,largestR-i*unitR,PI,TWO_PI,CHORD);
}
}
}

function draw() {
noLoop();
//draw spiral pattern
var intervS = width/30;
var spiralSize = width/60;

for (var i=0; i<20; i++){
lockSpiral((i+1)*intervS+i*spiralSize-5,height/2,5,13,2.5);
}

for (var i=0; i<10;i++){
lockSpiral((i+1)*intervS*2+i*spiralSize*2-10,height/2+50,10,13,4);
}
for (var i=0; i<20;i++){
lockSpiral((i+1)*intervS+i*spiralSize-5,height/2+100,5,13,2.5);
}

for (var i=0; i<20; i++){
lockSpiral((i+1)*intervS+i*spiralSize-5,height/4+15,5,13,2.5);
}

for (var i=0; i<20; i++){
lockSpiral((i+1)*intervS+i*spiralSize-5,50,5,13,2.5);
}

//draw wave pattern
var intervC = width/60;
var arcSizeS = 40;
var arcSizeB = 60;
for (var i=0; i<13; i++){
noStroke();
cloud((i+1)*intervC+i*arcSizeS+arcSizeS/3,height,50,7,8);
}
for (var i=0; i<13; i++){
noStroke();
cloud((i+1)*intervC+(i+1)*arcSizeS,height,50,7,8);
}

for (var i=0; i<10; i++){
noStroke();
cloud((i+1)*intervC+i*arcSizeB+arcSizeB/3,height/2-20,60,9,9);
}
for (var i=0; i<10; i++){
noStroke();
cloud((i+1)*intervC+(i+1)*arcSizeB,height/2-20,60,9,9);
}

push();
for (var i=0; i<26; i++){
translate((i+1)*intervC+(i+1)*arcSizeS,height*3/4);
rotate(PI);
cloud(0,0,60,9,9);
}
pop();

push();
for (var i=0; i<26; i++){
translate((i+1)*intervC+i*arcSizeS+arcSizeS/3,height*3/4);
rotate(PI);
cloud(0,0,60,9,9);
}
pop();

//draw linear pattern
stroke(30,30,129);
strokeCap(SQUARE);
strokeWeight(5);
line(0,height*4/5+18,width*2/3,height*4/5+18);
line(width*2/3+15,height*4/5+18,width,height*4/5+18);

strokeWeight(30);
line(0,height*4/5+40,width*2/3,height*4/5+40);
line(width*2/3+15,height*4/5+40,width,height*4/5+40);

strokeWeight(3);
line(0,height*12/13, width*2/3,height*12/13);
line(width*2/3+15,height*12/13, width,height*12/13);

strokeWeight(10);
line(0,height/3,width/3,height/3);
line(width/3+10,height/3,width,height/3);

strokeWeight(40);
line(0,height/5-5,width/3,height/5-5);
line(width/3+10,height/5-5,width,height/5-5);

strokeWeight(3);
line(0,10, width*2/3,10);
line(width*2/3+15,10, width,10);

strokeWeight(8);
line(0,20, width*2/3,20);
line(width*2/3+15,20, width,20);

}
``````

## Jinhee Lee; Project-05

``````//Jinhee Lee
//Section C
//jinheel1@andrew.cmu.edu
//Project-05

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

function draw() {
background(20);

var scale = Math.sqrt(3)/2; //helps make equilateral triangle
var triDistX = 60; //increments triangle on x-axis
var triDistY = 60 * scale; //increments triangle on y-axis
var triOffset = 30; //for making bottom vertices of triangles

var fro = color(100,20,100); //color for stripes
var to = color(150,20,150);

var fro2 = color(20,20,100); //color for triangles
var to2 = color(20,20,255);

for (var y = 0; y < height; y += 2 * triDistY) { //for each row
var amt = map(y,0,height,0,1);
var col = lerpColor(fro,to,amt);

fill(col); //fills the stripes
stroke(col);

rect(0,y + triDistY,width,triDistY); //draws the stripes
for (var x = 0; x < width; x += triDistX) { //for each "column"
var amt2 = map(x,0,width,0,1);
var col2 = lerpColor(fro2,to2,amt2);

fill(col2); //fills the triangles
stroke(col2);

triangle(x + triOffset, y, //each line is a coordinate pair
x, y + triDistY,
x + 2 * triOffset, y + triDistY);
}
}
noLoop(); //as per instructions
}``````

I wanted to go for cooler colors on the color spectrum, to give more of a subdued tone to the wallpaper. Drawing nested for() loops is, in itself, not difficult, but it did present a bunch of restrictions I wasn’t aware of. I previously tried to use variables defined locally, before the for() loop, for incrementation. However, with such a configuration I ended up with only a single row of triangles that I had intended to repeat down the canvas. I had to change it later so that the variables for incrementation were defined inside the for() loop arguments.

P.S., if this were a shirt, I would NOT wear this in public.

## Brandon Darreff – Project 05 – Wallpaper

``````//Brandon Darreff

//Section A

//bdarreff@andrew.cmu.edu

//Project-05

var bl; //background line x positions
var cv; //bezier curve y positions
var lcir; //large circle diameter
var scir; //small circle diameter
var cy; //circle y position
var cx; //circle x position

function setup() {

createCanvas(500, 700);
}

function draw() {

background(25);

for(bl = -100; bl < width; bl += 50) { //background white slanted lines

stroke(255, 40);
strokeWeight(1);
line(bl, 0, bl + 100, height);
}

for (var cv = -50; cv < height + 50 ; cv += 45) { //background bezier curves

noFill();
stroke(200, 50);
strokeWeight(random(0.25, 2));
bezier(0, cv - 50, 150, cv - 160, 300, cv + 190, width, cv);

stroke(231, 181, 144, 70);
strokeWeight(random(0.25, 5));
bezier(0, cv, 150, cv - 150, 300, cv + 200, width, cv - 50);
}

for (cy = 95; cy < height; cy += 170){  //large foreground circles
for (var z = 100; z < width; z += 150) {
for (lcir = 15; lcir <= 125; lcir *= 1.1) {
strokeWeight(1);
fill(255, 5);
ellipse(z, cy, lcir, lcir);
}
}
}

for (cy = 140; cy < height; cy += 170){ // circles bottom right quadrant
for (cx = 130; cx < width; cx += 150) {
for (scir = 15; scir <= 50; scir *= 1.1) {
ellipse(cx, cy, scir, scir);
}
}
}
for (cy = 50; cy < height; cy += 170){ // circles upper left quadrant
for (cx = 70; cx < width; cx += 150) {
for (scir = 15; scir <= 50; scir *= 1.1) {
ellipse(cx, cy, scir, scir);
}
}
}
noLoop();
}
``````

My initial idea for this project was to explore arraying flowers across the canvas but as I kept working I became more interested in using geometric elements. The resultant wallpaper is a more contemporary version of my starting sketch.

## Owen Fox Wallpaper

``````//constants
var mult = 250;
var c = 50;
var ellD = 25;

function setup() {
createCanvas(800, 640);
}

function draw() {
background("lightPink");
//iterates sine waves made up of circles
for (var y = 0; y < c + height; y ++) {
for (var x = 0; x < c + width; x ++) {
//color changes based on size of y
var r = 230 - y * 5;
var g = 255 - y * 5;
var b = 247 - y * 5;
fill(r,g,b);
ellipse(x,2 *height- (mult * sin(radians(x)) + y*c),ellD,ellD);
}
}
noLoop();
}
``````

## Shannon Case – Project 05 – Wallpaper

``````//Shannon Case
//Section D
//scase@andrew.cmu.edu
//project 05

//sets global variables
var RingSize = 50;
var spacing = 125;
var innerRing = RingSize-10;
var x = 50;
var y = 50;
var bitX = 0;
var bitY = 0;

function setup() {
createCanvas(600,600);
background(0);
}

function draw() {

for(var bitX=0; bitX < width; bitX+=90) { //sets x location of bits
for(var bitY= 0; bitY < height; bitY+=30){ //sets y location of bits
bit(bitX, bitY); //draw bits
}

}

}

function bit(x,y) {
push();
translate(x,y);
fill(150); //creates left and right rings
ellipse(x,y,RingSize,RingSize);
ellipse(x+spacing,y,RingSize,RingSize);

fill(0); //fills the inner part of the rings
ellipse(x,y,innerRing,innerRing);
ellipse(x+spacing,y,innerRing,innerRing);

fill(150); //creates the mouth piece
rect(x+10,y-5,105,10,20);
ellipse(x+60,y,20,20);
pop();
}

``````

For this project I was inspired by a horse bit, which is a piece of equipment used in a horse’s mouth to aid in steering when they are ridden.  So I chose to make a loop that creates a pattern out of these bits. Below is a reference photo:

## Project-05

``````/*
* Rachel Griswold
* rgriswol@andrew.cmu.edu
* Section B
* Project 05
*
*/

var v1x = -300;
var v1y = -70;
var v2x = -100;
var v2y = -110;
var v3x = 0;
var v3y = -300;
var v4x = 100;
var v4y = -110;
var v5x = 300;
var v5y = -70;
var v6x = 160;
var v6y = 90;
var v7x = 190;
var v7y = 300;
var v8x = 0;
var v8y = 210;
var v9x = -190;
var v9y = 300;
var v10x = -160;
var v10y = 90;

x0 = 80;
y0 = 60;

x02 = 160;
y02 = 140;

x03 = 130;
y03 = 110;

function setup() {
angleMode(DEGREES);
createCanvas(600, 730);
}

function draw() {
background(42, 38, 64);

noStroke();
fill(72, 40, 62);
ellipse(400, 140, 300, 200);
ellipse(300, 200, 400, 200);
ellipse(440, 250, 300, 150);
ellipse(175, 600, 300, 200);
ellipse(230, 550, 300, 200);
ellipse(300, 600, 400, 200);
ellipse(350, 550, 200, 200);

fill(254, 254, 164);

rotate(3);
for (var q = 0; q < 600; q += 200){
for (var i = 0; i < 600; i += 250){
beginShape();
vertex((v1x/10) + x0 + q, ((v1y/10) + y0)+i);
vertex((v2x/10) + x0 + q, ((v2y/10) + y0)+i);
vertex((v3x/10) + x0 + q, ((v3y/10) + y0)+i);
vertex((v4x/10) + x0 + q, ((v4y/10) + y0)+i);
vertex((v5x/10) + x0 + q, ((v5y/10) + y0)+i);
vertex((v6x/10) + x0 + q, ((v6y/10) + y0)+i);
vertex((v7x/10) + x0 + q, ((v7y/10) + y0)+i);
vertex((v8x/10) + x0 + q, ((v8y/10) + y0)+i);
vertex((v9x/10) + x0 + q, ((v9y/10) + y0)+i);
vertex((v10x/10) + x0 + q, ((v10y/10) + y0)+i);
endShape();
}
}

for (var q = 0; q < 600; q += 200){
for (var i = 0; i < 900; i += 250){
beginShape();
vertex((v1x/10) + x02 + q, ((v1y/10) + y02)+i);
vertex((v2x/10) + x02 + q, ((v2y/10) + y02)+i);
vertex((v3x/10) + x02 + q, ((v3y/10) + y02)+i);
vertex((v4x/10) + x02 + q, ((v4y/10) + y02)+i);
vertex((v5x/10) + x02 + q, ((v5y/10) + y02)+i);
vertex((v6x/10) + x02 + q, ((v6y/10) + y02)+i);
vertex((v7x/10) + x02 + q, ((v7y/10) + y02)+i);
vertex((v8x/10) + x02 + q, ((v8y/10) + y02)+i);
vertex((v9x/10) + x02 + q, ((v9y/10) + y02)+i);
vertex((v10x/10) + x02 + q, ((v10y/10) + y02)+i);
endShape();
}
}

for (var q = 0; q < 600; q += 200){
for (var i = 0; i < 900; i += 250){
beginShape();
vertex((v1x/20) + x03 + q, ((v1y/20) + y03)+i);
vertex((v2x/20) + x03 + q, ((v2y/20) + y03)+i);
vertex((v3x/20) + x03 + q, ((v3y/20) + y03)+i);
vertex((v4x/20) + x03 + q, ((v4y/20) + y03)+i);
vertex((v5x/20) + x03 + q, ((v5y/20) + y03)+i);
vertex((v6x/20) + x03 + q, ((v6y/20) + y03)+i);
vertex((v7x/20) + x03 + q, ((v7y/20) + y03)+i);
vertex((v8x/20) + x03 + q, ((v8y/20) + y03)+i);
vertex((v9x/20) + x03 + q, ((v9y/20) + y03)+i);
vertex((v10x/20) + x03 + q, ((v10y/20) + y03)+i);
endShape();
}
}
noLoop();
}

``````

For this project I really wanted to create something to do with the night sky/space, because I love clothes with those kinds of patterns. I started with the sketches below. Being able to create the stars ended up being… considerably harder than I thought, but I think I learned a lot from it.

## Denise Jiang-Project 05

``````function setup() {
createCanvas(500,600);
}

function draw() {
background(230);
for (var y1=-150; y1<height+120; y1=120+y1){
for(var x1=0; x1<width+120; x1++){
var x2=x1-30;
var x4=x1+30;
var w=40;
var yspacing=30;
var y2=y1+yspacing;
var y3=y2+yspacing;
var y4=y3+2*yspacing;
var y5=y4+yspacing;
noStroke();
fill(193, 232, 242);
x1+=100;
x2+=100;
x4+=100;
fill(242, 238, 193);
fill(242, 209, 193)
}
}
println();
noLoop();

}

``````

Using nested loops, I made this seamless pattern by drawing quadrilaterals and create an illusion of boxes.

## Christine Kim – Project-05

``````//Christine Kim
//Section A (9:00)
//haewannk@andrew.cmu.edu
//Project-05

var f = 30;
var d = 10;

function setup() {
createCanvas(600, 600);
background("#FFEB94");
noLoop();

}

function draw() {
noStroke();

for(var x1=30; x1<width; x1+=90) {
for(var y1=20; y1<height; y1+=90) {
icecream(x1,y1);
}
}

for(var x2=30; x2<width; x2+=90) {
for(var y2=15; y2<height; y2+=90) {
cones(x2,y2);
}
}

for(var x3=75; x3<width; x3+=90) {
for(var y3=75; y3<height; y3+=90) {
fill("#FFCCAC")
ellipse(x3,y3,d,d);
}
}
}

function icecream(x1,y1) {
fill("#C1E1DC");
ellipse(x1,y1,f,f);
}

function cones(x2,y2) {
fill("#D5C3AA");
triangle(x2-15,y2+10,x2,y2+50,x2+15,y2+10);
}``````

I was inspired by the ice cream cone I was eating at night.

## Janet Lee Project – 05- Wallpaper

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

}

function draw() {
for (var i = 0; i <height -10; i+= 10) {
stroke (255);
line (i,20,width - 30,i);

}
for (var a = 10; a <height-10; a+=10) {
line (a,height-30,40,a);

}

for (var b = 200; b<width; b+=10) {
push();

line(b,0,b,600);
pop();

push();
strokeWeight (3);
stroke ("#F5844C");
line (0,b,400,b);
pop();
}

}
``````