Month: September 2016

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


}

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.