Category: Project-05-Wallpaper

siminl-project5

// Simin Li
// Section C
// siminl@andrew.cmu.edu
// Project 5
var d = 40;

function setup() {
    createCanvas(640, 640);
    background("LightSalmon");
}

function draw() {
	colorMode(RGB);
	colorA1 = color(0,1,16);
    colorA2 = color(84,137,207);
    colorB1 = color(62,141,99);
    colorB2 = color(229,188,47);
    colorC1 = color(226,51,50);
    colorC2 = color(254,251,248);
	var gapY = d * sqrt(3) / 2;
    //differnce of x values between two adjacent 
    var gapX = d *  3 / 2;
    //differnce of y values between two adjacent hexagon left corners
    for (var j = -10; j < 15; j++) {
    //to achieve diagonal rows and collums we need two x variables and y variables
	    var X = 18 + gapX * j;
        var Y = gapY * j;
            for (var i = -10; i < 15; i++) {
                cubeX = X + gapX * i;
                //x coordinates of hexagon
                cubeY = Y - gapY * i;
                //y coordinates of hexagon
                lerpA = lerpColor(colorA1,colorA2,dist(cubeX,cubeY,width,height)/ dist(0, 0,width,height));
                lerpB = lerpColor(colorB1,colorB2,dist(cubeX,cubeY,width,height)/ dist(0, 0,width,height));
                lerpC = lerpColor(colorC1,colorC2,dist(cubeX,cubeY,width,height)/ dist(0, 0,width,height));
                cube(cubeX, cubeY,lerpA,lerpB,lerpC);
            }
                //draw cube
            }            
    
    noLoop();
}

function rhombus(x,y,angle){
//create function that draws rhombus at x,y
//rotate by angle
    var h = d * sqrt(3)/2;
    //height of rhombus
    push();
        translate(x, y);
        rotate(radians(angle));
        shearX(radians(30));
        //shifts a rectangle into a parallelogram by 30 degrees
        rect(0, 0, d, h);
    pop();
}
function cube(x,y,lerpA,lerpB,lerpC){
//create function that combines three rhombuses into a cube
	stroke(255);
	strokeWeight(1);
	fill(lerpA);
    rhombus(x,y,0);//draws darkest rhombus
    
    fill(lerpB);
    rhombus(x,y,300);//draws lightest rhombus
    push();
        translate(1.50 * d, d * sqrt(3)/2);
        fill(lerpC);
        rhombus(x,y,240);//draws second darkest rhombus
    pop();
}

I wanted to do this project by using hexagons as the basic tiles because they merge so well. I used value because I liked how they conveyed space so well.

sketch

//Yugyeong Lee
//Section A (9:00AM)
//yugyeonl@andrew.cmu.edu
//Project 05

var len = 30;
var diam = 5;
var offset = 5;

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

function draw() {
	background(225, 155, 180);
	stroke(224, 112, 155);
	noLoop();
	for (var y = 0; y < height; y += 140) {
		for (var x = 0; x < width; x += 140) {
			flower(x, y);
		}
	}
	for (var y = 70; y < height; y += 140) {
		for (var x = 70; x < width; x += 140) {
			flower(x, y);
		}
	}
	for (var y = 0; y < height; y += 140) {
		for (var x = 70; x < width; x += 140) {
			push();
			translate(x, y);
			noFill();
			symbol(0, 0);
			angleMode(DEGREES);
			rotate(90);
			symbol(0, 0);
			rotate(90);
			symbol(0, 0);
			rotate(90);
			symbol(0, 0);
			pop();
		}
	}
	for (var y = 70; y < height; y += 140) {
		for (var x = 0; x < width; x += 140) {
			push();
			translate(x, y);
			noFill();
			symbol(0, 0);
			angleMode(DEGREES);
			rotate(90);
			symbol(0, 0);
			rotate(90);
			symbol(0, 0);
			rotate(90);
			symbol(0, 0);
			pop();
		}
	}			
}
function symbol (x,y) {
	push();
	translate(x, y);
	strokeWeight(5);
	beginShape();
	vertex(-len - offset*2, -offset);
	vertex((-len + offset)/2, -offset);
	vertex((-len + offset)/2, -len + offset * 2);
	vertex(-len + offset*2, -len + offset*2);
	vertex(-len + offset*2, (-len + offset)/2);
	vertex(-len, (-len + offset)/2);
	vertex(-len, -len);
	vertex(-offset/2, -len);
	vertex(-offset/2, -offset);
	endShape();
	pop();
}

function flower (x, y) {
	push();
	translate(x, y);
	rectMode(CENTER);
	noFill();
	strokeWeight(5);
	rect(0, 0, 2*len, 2*len);
	strokeWeight(2);
	line(0, -len, 0, len);
	line(-len, 0, len, 0);
	angleMode(DEGREES);
	rotate(45);
	fill(224, 112, 155);
	ellipse(0, len, diam, diam);
	noFill();
	quad(0, 0, -len/2, 0, -2*len/3, -2*len/3, 0, -len/2);
	rotate(90);
	fill(224, 112, 155);
	ellipse(0, len, diam, diam);
	noFill();
	quad(0, 0, -len/2, 0, -2*len/3, -2*len/3, 0, -len/2);
	rotate(90);
	fill(224, 112, 155);
	ellipse(0, len, diam, diam);
	noFill();
	quad(0, 0, -len/2, 0, -2*len/3, -2*len/3, 0, -len/2);
	rotate(90);
	fill(224, 112, 155);
	ellipse(0, len, diam, diam);
	noFill();
	quad(0, 0, -len/2, 0, -2*len/3, -2*len/3, 0, -len/2);
	pop();
}

I was inspired by Korean traditional pattern to create this wallpaper. Flower and the symbol are both important symbols in Buddhism which dominated ancient Korean times.

sketch

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

function draw() {
    background(255,228,196);
    var tw = 30;
    var th = 30;
    var oy = 0;
    var ox = 0;
    var rows = 3*height/30;
    //draws a staggered circle pattern
    for (var y = 0; y < rows; y++) {
        if (y%2 == 0){
            var cols = width/30;
        }else{
            var cols = width/30-1;
        }
        //changes behavior based on which row it's on
        for (var x = -1; x < cols+1; x++) {
            if (cols == width/30){
                var py = oy + y / 2 * th;
                var px = ox + x * tw;
                fill(222);
                ellipse(px, py, 5, 5);
                drawSquare(px, py);
                zigZag(px,py,1);
                zigZag(px,py,0);
            }else{
                var py = oy + y / 2 * th;
                var px = ox + x * tw + tw/2;
                fill(135);
                ellipse(px, py, 5, 5);
                drawSquare(px, py);
                zigZag(px,py,0);
            }
        }
    }
    noLoop();
}
// draws squares
function drawSquare(x,y){
    rectMode(CENTER);
    fill(123,213,132);
    rect(x+15, y, 5, 5);
}

function zigZag(x,y,mode){
    x-=2;
    y-=1;
    var a = x;
    var b = y;
    //draws zig zagging lines
    for (var n = 0; n<15; n++){
        if (n%2==0){
            x+=2;
            line(a, b, x, y);
            a = x;
        }else{
            //draws lines going left
            if (mode == 1){
                y+=2;
                line(a, b, x, y);
                b = y;
            //draws lines going right
            }else {
                y-=2;
                line(a, b, x, y);
                b = y;
            }
        }
    }
}

I created an alternating grid of circles with rectangles filling the spaces in between. I then created a function that created zig zagging lines to link together the circles in a rectangular way. I tried connecting the circles so that they are somewhat hidden by the lines even though their shapes are still visible so that the attention is drawn onto the brighter colored squares that stand out in the center of the peach background.

sketch

//Mairead Dambruch
//Section C
//mdambruc
//Project-05

function setup() {
  createCanvas(590, 500);
  background("Turquoise");
}

function draw() {
  var buffer = 70;
  var ybuffer = 60;
  for (var px = 0; px < width; px = px + buffer){
  for (var py = 0; py < height; py = py + ybuffer){
  toilet(px, py);
  man(px, py);// for loop to create groupings of man on toilet
}
}

function toilet(px, py){
  var px;
  var py;
  push();
  translate(px, py);
  fill(255);
  arc(50, 50, 15, 15,0, PI, CHORD);
  rect(58, 35, 8, 15);
  quad(55, 63, 60, 50, 66, 50, 66, 63);
  pop();

}

function man(px, py){
  var px;
  var py;
  push();
  translate(px, py);
  noFill();
  beginShape();
  curveVertex(30, 26);
  curveVertex(49, 40);
  curveVertex(52, 48);
  curveVertex(39, 48);
  curveVertex(41, 60);
  curveVertex(36, 62);
  endShape();//torso

  line(48, 37, 40, 45);
  line(35, 40, 40, 45);
  line(48, 37, 42, 32);
  line(40, 60, 36, 63);
  line(34, 38, 40, 41);//body

  fill(0);
  ellipse(40, 31, 9, 9);//head
  pop();
}
}

In this project I wanted to illustrate the “Demographic of the Internet”, which is essentially people going to the bathroom using their smartphones. I really enjoyed the illustrative part of this assignment and I learned more about for loops.

For this project, I wanted to make a wallpaper with a bunch of cute woodland creatures. I added in the sun, tree, and flower to give context to where they might be living. I created for loops for each icon and created the pattern seen below!

Wallpaper

var eyeSize = 5;
var noseUnit = 5;

function setup() { 
    createCanvas(790, 550);
    noLoop(); 
}

function draw() {
    background("LightBlue"); 
    noStroke();
    //Loop sun
    for (var xSun = 135; xSun < width; xSun += 200) {
        for (var ySun = 50; ySun < height; ySun += 800) {
            drawSun(xSun, ySun);}
        }	
    //Loop bear
    for (var xBear = 50; xBear < width; xBear += 200) {
        for (var yBear = 120; yBear < height; yBear += 800) {
            bear(xBear, yBear);}
        }	
    //Loop raccoon
    for (var xRaccoon = 135; xRaccoon < width; xRaccoon += 200) {
        for (var yRaccoon = 190; yRaccoon < height; yRaccoon += 800) {
            raccoon(xRaccoon, yRaccoon);}
        }	
    //Loop tree
    for (var xTree = 50; xTree < width; xTree += 200) {
        for (var yTree = 260; yTree < height; yTree += 800) {
            tree(xTree, yTree);}
        }	
    //Loop deer
    for (var xDeer = 135; xDeer < width; xDeer += 200) {
        for (var yDeer = 360; yDeer < height; yDeer += 800) {
            deer(xDeer, yDeer);}
        }
    //Loop owl
    for (var xOwl = 50; xOwl < width; xOwl += 200) {
        for (var yOwl = 430; yOwl < height; yOwl += 800) {
            owl(xOwl, yOwl);}
        }	
    //Loop flower
    for (var xFlower = 135; xFlower < width; xFlower += 200) {
        for (var yFlower = 500; yFlower < height; yFlower += 800) {
            flower(xFlower, yFlower);}
        }
}




function drawSun(xSun, ySun) {
    fill("yellow");
    var diamSun = 29;
    ellipse(xSun, ySun, diamSun, diamSun); //Center circle
    //Sun rays:
    var rayX = 5;
    var rayY = 20;
    push();
    translate(xSun,ySun);
        triangle(rayX, -rayY, 0, -rayY*1.6, -rayX, -rayY);//Top spike
        triangle(rayX, rayY, 0, rayY*1.6, -rayX, rayY);//Bottom spike
    rotate(radians(45));
        triangle(rayX, -rayY, 0, -rayY*1.6, -rayX, -rayY);//Top spike
        triangle(rayX, rayY, 0, rayY*1.6, -rayX, rayY);//Bottom spike
    rotate(radians(45));
        triangle(rayX, -rayY, 0, -rayY*1.6, -rayX, -rayY);//Top spike
        triangle(rayX, rayY, 0, rayY*1.6, -rayX, rayY);//Bottom spike
    rotate(radians(45));
        triangle(rayX, -rayY, 0, -rayY*1.6, -rayX, -rayY);//Top spike
        triangle(rayX, rayY, 0, rayY*1.6, -rayX, rayY);//Bottom spike
    pop();
}


function bear(xBear, yBear) {
    var bearUnit = 50;
    var bearEar = 15;
    fill(126,85,38);
        ellipse(xBear,yBear,bearUnit,bearUnit); //head
        ellipse(xBear-bearUnit*.4,yBear-bearUnit*.4,bearEar,bearEar); //left ear
        ellipse(xBear+bearUnit*.4,yBear-bearUnit*.4,bearEar,bearEar); //right ear
    fill(158,111,57);
        ellipse(xBear,yBear+7,bearUnit/2.3,bearUnit/2); //snout
    fill(0);
        triangle(xBear-noseUnit,yBear+noseUnit, xBear,yBear+noseUnit*2, xBear+noseUnit,yBear+noseUnit); //nose
        ellipse(xBear-15,yBear-5, eyeSize,eyeSize); //left eye
        ellipse(xBear+15,yBear-5, eyeSize,eyeSize); //right eye
}

function raccoon (xRaccoon, yRaccoon) {
    var wRaccoon = 45;
    var hRaccoon = 40;
    var eye = 10;
    fill(150);
        ellipse(xRaccoon, yRaccoon, wRaccoon, hRaccoon); //head
        triangle(xRaccoon-wRaccoon/4,yRaccoon-wRaccoon/3, xRaccoon-wRaccoon/2,yRaccoon-hRaccoon/2, xRaccoon-wRaccoon/2.1,yRaccoon-5); //left ear
        triangle(xRaccoon+wRaccoon/4,yRaccoon-wRaccoon/3, xRaccoon+wRaccoon/2,yRaccoon-hRaccoon/2, xRaccoon+wRaccoon/2.1,yRaccoon-5); //right ear
    fill(0);
        ellipse(xRaccoon, yRaccoon+8, noseUnit*2,noseUnit); //nose
    fill(100);
        ellipse(xRaccoon-eye, yRaccoon, eye*1.5, eye); //left eye patch
        ellipse(xRaccoon+eye, yRaccoon, eye*1.5, eye); //right eye patch
    fill(0);
        ellipse(xRaccoon-eye, yRaccoon, eyeSize,eyeSize); //left eye
        ellipse(xRaccoon+eye, yRaccoon, eyeSize,eyeSize); //right eye
}

function tree (xTree, yTree) {
    var wLeaves = 70;
    var hLeaves = 90;
    var branch = 20;
    fill(28,118,108);
        ellipse(xTree, yTree, wLeaves, hLeaves); //leaves
    fill(86,58,36);
        triangle(xTree-5,yTree+hLeaves, xTree, yTree-branch, xTree+5,yTree+hLeaves); //trunk
        triangle(xTree-2,yTree+5, xTree,yTree+branch*.75, xTree-branch, yTree-branch); //left branch
        triangle(xTree+2,yTree+branch, xTree,yTree+branch*1.5, xTree+branch, yTree-5); //right branch
}

function deer(xDeer, yDeer) {
    fill(188,140,85);
        ellipse(xDeer, yDeer, 35,50); //head
        quad(xDeer-4,yDeer-18, xDeer-14,yDeer-30, xDeer-24,yDeer-32, xDeer-20, yDeer-23); //left ear
        quad(xDeer+4,yDeer-18, xDeer+14,yDeer-30, xDeer+24,yDeer-32, xDeer+20, yDeer-23); //right ear
    fill(158,111,57);
        ellipse(xDeer,yDeer-15, 12,20); //forehead patch
    fill(0);
        ellipse(xDeer-10,yDeer+2, eyeSize,eyeSize); //left eye
        ellipse(xDeer+10,yDeer+2, eyeSize,eyeSize); //right eye
        triangle(xDeer-noseUnit,yDeer+noseUnit*3, xDeer,yDeer+noseUnit*4, xDeer+noseUnit,yDeer+noseUnit*3); //nose
}

function owl(xOwl, yOwl) {
    var wOwl = 50;
    var hOwl = 40;
    var ear = 20;
    fill(80,110,132);
        ellipse(xOwl, yOwl, wOwl,hOwl);
        triangle(xOwl-ear*.7,yOwl-ear*.75, xOwl-ear,yOwl-ear, xOwl-22,yOwl-ear*.25); //left ear
        triangle(xOwl+ear*.7,yOwl-ear*.75, xOwl+ear,yOwl-ear, xOwl+22,yOwl-ear*.25); //right ear
    fill(236,236,163);
        ellipse(xOwl-10,yOwl-2, hOwl/2,hOwl/2); //left eye patch
        ellipse(xOwl+10,yOwl-2, hOwl/2,hOwl/2); //left eye patch
    fill(0);
        ellipse(xOwl-10,yOwl-2,eyeSize,eyeSize); //left eye
        ellipse(xOwl+10,yOwl-2,eyeSize,eyeSize); //right eye
    fill("orange");
        triangle(xOwl-noseUnit,yOwl+noseUnit, xOwl,yOwl+noseUnit*3, xOwl+noseUnit,yOwl+noseUnit) //beak
}

function flower(xFlower, yFlower) {
    var wPetal = 10;
    var hPetal = 20;
    var yPetal = 15;
    var rotatn = 45;
    //Petals
    push();
    fill(179,91,134);
    translate(xFlower,yFlower);
        ellipse(0,-yPetal, wPetal,hPetal);
        ellipse(0,yPetal, wPetal,hPetal);
    rotate(radians(rotatn));
        ellipse(0,-yPetal, wPetal,hPetal);
        ellipse(0,yPetal, wPetal,hPetal);
    rotate(radians(rotatn));
        ellipse(0,-yPetal, wPetal,hPetal);
        ellipse(0,yPetal, wPetal,hPetal);
    rotate(radians(rotatn));
        ellipse(0,-yPetal, wPetal,hPetal);
        ellipse(0,yPetal, wPetal,hPetal);
    pop();
    //Center of Flower
    fill("orange");
        ellipse(xFlower,yFlower, yPetal,yPetal);
}

And here’s my initial sketch for the design:

sketch-246.js

//Victor Tavarez
//Section D
//vtavarez@andrew.cmu.edu
//Assignment-05-B

function setup() {
    createCanvas(500, 500);

}


function draw() {
    background(100,100,255);
    for (var x=0; x<=width; x+=50){
        for(var y=0; y<=height; y+=50) {
            drawT(x,y);
            drawV(x,y);
            
        }
    }
    for(var x=0; x<=width; x+=50){
        for(var y=-25; y<=height+25; y+=50){
            drawDot(x,y);
        }
    }
    for(var x=0; x<=width; x+=50){
        for(var y=0;y<=height;y+=50){
            drawSquares(x,y);
        }
    }
}

function drawSquares(x,y){
    noStroke();
    fill(255,100,100);
    if (x/50%2==1){ //50 since x is in terms of pixels
        rect(x-10,y-10,5,5);
        rect(x+5,y-10,5,5);
    } else{
        rect(x-10,y+5,5,5);
        rect(x+5,y+5,5,5);
    }
}

function drawDot(x,y){ //creates a dot before T/V figure
    noStroke();    
    fill(0,100,240);
    ellipse(x,y,5,5);
}

function drawV(xV1,yV1){ //draws V shape at every T
    var xV2 = xV1-5;
    var xV3 = xV1+5;  
    var yV2 = yV1-15;//arrow up
    var yV3 = yV1+15;//arrow down
    
    stroke(220,100,245);
    strokeWeight(2)
    if (xV1/50%2==1) {//depending on the column the figure flips
        line(xV1,yV1,xV3,yV3);
        line(xV1,yV1,xV2,yV3);
    } else{
        line(xV1,yV1,xV2,yV2);
        line(xV1,yV1,xV3,yV2);
    }
}

function drawT(xT1,yT1){
    var xT2 = xT1-15;
    var yT2 = yT1;
    var xT3 = xT1+15;
    var yT3 = yT1;
    var xT4 = xT1;
    var yT4 = yT1-15;
    //upsidedownT
    var xT5 = xT1;
    var yT5 = yT1+15;

    stroke(220,100,245);
    strokeWeight(2);
    // if statment will alternate the direction of the T's
    if ((xT1/50)%2==1){
        line(xT2,yT2,xT3,yT3);
        line(xT1,yT1,xT4,yT4);
    } else{
        line(xT2,yT2,xT3,yT3);  
        line(xT1,yT1,xT5,yT5);

    }
}

The wallpaper was inspired by a design online (shown below). I used multiple layers of elements to construct the interlocking frame effect.

As a side note, WordPress seems to be interfering with my code. There’s no margin on the left when I ran it.

sihand – wallpaper

//Sihan Dong
//sihand@andrew.cmu.edu
//Section B
//Week 05 project: wall paper

//the weight of each frame
var colorWid = 12;
//the width of each set of frames
var unitWid = 7*colorWid;

function setup() {
    createCanvas(480, 480);
    background(230, 236, 244);
  //translate the coordinates so that the pattern
  //fills the entire canvas
    translate(-600, 0);
}

function drawElement () {
	noStroke();
	rect (0, 0, colorWid, colorWid*3);
	rect (0, colorWid*2, colorWid*2, colorWid);
	push();
	translate (colorWid*3, colorWid*3);
	rotate(-PI/2);
	rect (0, 0, colorWid, colorWid*3);
	rect (0, colorWid*2, colorWid*2, colorWid);
	pop();

}

function drawUnit() {
  var c1 = color(200, 220, 153);
  var c2 = color(159, 170, 81);
  var c3 = color(111, 135, 3);
  var c4 = color(50, 69, 1); //green palette

	push();
	for (i = 0; i<4; i++){
	 if(i % 4 == 0) {
		fill(c1);
	 	drawElement();
	 }
	 if(i % 4 == 1){
	 	fill(c2);
	 	translate (0, unitWid);
	 	rotate (-PI/2);
	 	drawElement();
	 }

	 if(i % 4 == 2){
	 	fill(c3);
	 	translate (0, unitWid);
	 	rotate (-PI/2);
	 	drawElement();
	 }

	 if(i % 4 == 3){
	 	fill(c4);
	 	translate (0, unitWid);
	 	rotate (-PI/2);
	 	drawElement();
	 	}
	}
	pop();
}

function drawPattern() {
	for (var j = 0; j<4; j++) {
		push();
		if(j % 2 == 0) {
      translate(j/2*(8*colorWid), j/2*(6*colorWid));
      drawUnit();
		}

		if(j % 2 == 1) {
      //these simple j functions generate the respective coordinates
      //for j = 1 and j = 3
			translate((17-3*j)*colorWid, (2+4*j)*colorWid);
			rotate(j*PI);
			drawUnit();
		}
    pop();
	}
}

function draw() {
	for (var x = 0; x < 10; x++) {
		for (var y = 0; y < 10; y++) {
      var dx = 2*x*unitWid;//2*x*colorWid;
			var dy = 2*y*unitWid;

      push();
  //generate rows and columns of units
      translate(dx, dy);
  //translate the coordinates so that the units fit together
      translate(y*2*colorWid, -x*2*colorWid);
      drawPattern();
      pop();
    }
	}
  noLoop();

}

jkatungyproject05wallpaper

//James Katungyi
//Section A 0900
//jkatungy@andrew.cmu.edu
//Assignment-Project-05
var x = 400;
var y = 400;

function setup(){
  createCanvas(800,800);
  background(227,218,186);
}
function draw(){
  for(x=100;x<width;x+=200){//loop pattern along x axis
    for(y=100;y<height;y+=200){//loop pattern along y axis
      //stroke(208,169,97);
      //strokeWeight(6);
      //ellipse(x,y,76,76);
      middleFlower(x,y);
      angularScroll(x,y);
      circularScroll(x,y);
    }
  }
  noLoop();
}
function middleFlower(x,y){
  stroke(208,169,97);
  strokeWeight(1);
  ellipseMode(CENTER);
  noFill();
  ellipse(x,y,8,8);
  push();
  translate(x,y);
  for (i=0;i<360;i+=90){//rotate elements 4 times around x,y
    rotate(radians(90));
    ellipse(18,0,19,8);//side ellipse
    arc(19,-19,24,24,radians(45),radians(215));//big arc
    arc(36,-9,18,18,radians(90),radians(180));//small arc 1
    arc(36,+9,18,18,radians(180),radians(270)); //small arc 2
  }
  pop();
  push();
  translate(x+100,y+100);
  for (i=0;i<360;i+=90){//rotate elements 4 times around x,y
    rotate(radians(90));
    ellipse(18,0,19,8);//side ellipse
    arc(19,-19,24,24,radians(45),radians(215));//big arc
    arc(36,-9,18,18,radians(90),radians(180));//small arc 1
    arc(36,+9,18,18,radians(180),radians(270)); //small arc 2
  }
  pop();
}
function angularScroll(x,y){
  stroke(208,169,97);
  strokeWeight(1);
  ellipseMode(CENTER);
  push();
  translate(x,y);
  for (i=0;i<360;i+=90){//rotate elements 4 times around x,y
    rotate(radians(i));
    arc(20,96,250,250,radians(273),radians(306));//innermost lower arc
    arc(28,87,250,250,radians(273),radians(288));//next to innermost lower arc
    arc(186,-72,250,250,radians(161),radians(176));//next to outermost lower arc
    arc(194,-78,250,250,radians(144),radians(177));//outermost lower arc
    arc(-97,-20,250,250,radians(333),radians(356));//innermost upper arc
    arc(-90,-25,250,250,radians(343),radians(354));//next to innermost upper arc
    arc(62,-181,250,250,radians(93),radians(105));//middle upper arc
    arc(70,-188,250,250,radians(94),radians(116));//next to outermost upper arc
    arc(77,-196,250,250,radians(94),radians(126));//outermost upper arc
    println("angular scroll");
  }
  pop();
}
function circularScroll(x,y){
  stroke(208,169,97);
  strokeWeight(1);
  noFill();
  push();
  translate(x,y);
  for (i=0;i<360;i+=90){
    rotate(radians(i));
    ellipseMode(CENTER);
    ellipse(100,0,6,6);//small end ellipse
    arc(100,-3,12,12,HALF_PI,PI+HALF_PI);//small arc around ellipse
    arc(100,0,18,18,PI+HALF_PI,HALF_PI);//big arc around ellipse
  }
  pop();
}

The inspiration was ‘Provincetown Geometric” pattern by Warner Company. My rendition of pattern grows around a unit made up of three fundamental components – the ‘middle flower’, the ‘4 angular scrolls’ and ‘4 circular scrolls’. Each component was built around a polar loop of arcs and ellipses.

To achieve the proportions, I drew it out using CAD software and measured off the parameters by arc and by ellipse (‘patterns’ below). The colors are true to the original. I would not make a shirt out of it, but as wall paper, it would be okay.

patterns

sketch

// Grace Cha
//Section C
//heajinc@andrew.cmu.edu
//Project 5: Wallpaper

var y = 0;//the pattern starts at the top of canvas
function setup() {
    createCanvas(640, 480);
    noStroke();
}
function draw() {
    background("#D9D4C8");
    //background("#47505A");
    for(y; y < height + 90; y += 50){
    myTriangles();//the blue triangle
    myTriangles1();//the orange outlined triangles
    }
    noLoop(); // save computation -- no animation
}

function myTriangles(){
    for (var x = - 90; x < width; x += 30){
    fill(82,100,129,110);
    beginShape(TRIANGLES);  //This draws 2 blue triangles
    vertex(x + 10, y);
    vertex(x + 30 , y-55);
    vertex(x + 50, y);
    vertex(x + 70, y-55);
    vertex(x + 90, y);
    vertex(x + 110, y-55);
    endShape();
 }
}

function myTriangles1(){
    for (var x = -90; x < width ; x += 20){
    noFill();
    stroke("#F0A321");
    strokeWeight(1);
    beginShape(TRIANGLES); //This draws 2 outlined orange traingles
    vertex(x + 10, y);
    vertex(x + 30 , y-55);
    vertex(x + 50, y);
    vertex(x + 70, y-55);
    vertex(x + 90, y);
    vertex(x + 110, y-55);
    endShape(); 
 }
}

---

Process

Wow!  the for loop and nested for loop really eliminate the need for long code.   I was inspired by the traditional “Cradle Quit” color scene/pointy star pattern and the modern plaid sweater(finally sweater weather!) to design my wallpaper. To add a geometric vibe to it, I tried using triangles and overlapping lines to create visual balance.