Category: Project-05-Wallpaper

sketch-2.js

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!

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.

sketch

//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);

}

jinheel1_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.

bdarreff_project_05

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

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();
}

sketch

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

sketch

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

sketch

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);
				quad(x1,y2,x2,y4,x1,y5,x4,y3);//blue
				x1+=100;
				x2+=100;
				x4+=100;
				fill(242, 238, 193);
				quad(x4-100,y3,x1,y2,x2,y4,x1-100,y5);//yellow
				fill(242, 209, 193)
			    quad(x1-100,y2,x2,y1,x1,y2,x4-100,y3);//pink
			}
		}
	println();
	noLoop();

}

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

sketch

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

sketch

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

}

function draw() {
  background ("#F5ACAD");
    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();
    }


}