Month: October 2016

project-05.js

//Mercedes Reys

//Section C 

//mreyes@andrew.cmu.edu

//Project-03


// back pattern variables 
var cH1 = 40; // larger circle height 
var cW1 = 20; // larger circle width
var cX = 0; // circles x cordinate 
var cY = 0; // circles y cordinate 

var cH2 = cH1/2; // smaller circle height
var cW2 = cW1/2; // smaller circle height

var spaceingX = cW1*2; // pattern spacing 
var spaceingY = cH1; // pattern spacing 

// front pattern variables 

function setup() {
  createCanvas(700, 700);
  background(255, 204, 204); 
}

function draw() {  
// back pattern loop
for (var x = 0; x < height; x += 1){
        for (var y = 0; y < width ; y += 1){
         
            backPattern(x,y);

        }
    }
//front pattern loop 
for (var x = 0; x < height; x += 1){
        for (var y = 0; y < width ; y += 1){

            frontPattern(x,y);
            
            //ghosty effect 
            push()
            translate(5,10)
            frontPattern(x,y);
            pop()

        }
    }
noLoop()//draw once
}


function backPattern(x,y){ // circle patern

    cX = x * spaceingX; // x spacing between circles
    cY = y * spaceingY; // y spacing between circles

    //outer circle 
    strokeWeight(3);
    stroke(255, 128, 128);
    fill(255, 204, 204);
    ellipse(cX,cY,cW1,cH1);

    // inner circle 
    fill(255, 128, 128);
    ellipse(cX,cY,cW2,cH2);

noLoop();
}

function frontPattern(x,y){
    spaceingX = 200
    spaceingY = 200

    x = x * spaceingX // x spacing between triangles 
    y = y * spaceingY // y spacing between 

  
    noStroke()

    //larger tiangle 
    fill(128, 191, 255)  
    triangle(60+x, 160+y, 60+x, 40+y, 160+x, 80+y);

    //smaller triangles
    push()
    translate(10,20)
    fill(255,200)
    triangle(30+x, 80+y, 30+x, 20+y, 80+x, 40+y);
    translate(10,20)
    fill(255,200)
    triangle(30+x, 80+y, 30+x, 20+y, 80+x, 40+y);
    pop()

noLoop()// draw once 
}

Inspired by my old shower curtain, I wanted to combine two patterns that had two separate own there own but, together would create a harmonious rhythm. I was hoping more interesting things would happen with layering the transparent blue over the pink, but the patterns just kinda got confusing so I ended up having the blue triangles solid.

Looks pretty close to the sketch honestly (minus the rat).

sketch

//Lydia Jin
//Section B
//jialuj@andrew.cmu.edu
// Project 5
var flag = false;
function setup() {
    createCanvas(600, 600); //setup canvas
    background('black');
}

function draw() {
    for (var y = 50; y<=550; y+=100){ 
    //iterate loop for rows until hits botton
        if (flag == false){ 
    //use a boolean to alternate between two sets of shape
            for (var x = 0; x<522; x+=30){ //iterate set A for columns
                if (x==0){ 
            //draw a PAC MAN at each beginning of the iteration
                    fill('yellow');
                    noStroke();
                    arc(50, y, 50, 50, QUARTER_PI*0.7, -QUARTER_PI*0.7);
                }
                noStroke();                
                fill(random(255), random(255),random(255)); //random color of the dots
                ellipse(x+80, y, 8); //draw the PAC-dots

            }
            flag = true; 
            //change the state of boolean
        }
        else{
            for (var x = 600; x>78; x-=30){ 
            //to iterate the another set of shape
                if (x==600){ 
                //draw a PAC MAN at each beginning of the iteration
                    fill('yellow');
                    noStroke();
                    arc(550, y, 50, 50, PI + QUARTER_PI*0.7, PI -QUARTER_PI*0.7);
                }
                noStroke();
                fill(random(255), random(255),random(255)); //random color of the dots
                ellipse(x-80, y, 8); //draw the PAC-dots
            }
            flag=false; 
            //change the state of boolean
        }
    }   
    noLoop();//Stop all loops, make static wallpaper

}

At first, I wanted random PAC MANs to appear in every row. But later on I decided to make it look more dynamic by putting in the beads along with the Pac Man to make the wallpaper more colorful. This would be a cool wall paper for a kid’s bedroom. 🙂

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.