Month: October 2020

Project-05

sketch
//Shaun Murray, Section B

var x = 100
var y = 100

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

function draw() {
    background(0, 200, 255);

    //cloud set 1
    for (x = -40; x <= width - 95; x += 190) {
    	for (y = -35; y <= height - 100; y += 75){
    		cloud(x, y);
    	}

        noLoop();
    }
	
	//cloud set 2
	for (x = 50; x <= width - 95; x += 190) {
    	for (y = 8; y <= height - 100; y += 75){
    		cloud(x, y);
    	}

    	noLoop();
    }
    

}

function cloud(x, y) {
	push();
    translate(x, y);

    //cloud 
	noStroke();

	fill(255);
	ellipse(95, 83, 43, 43);
	fill(245);
	ellipse(97, 85, 40, 40);

	fill(255);
	ellipse(118, 88, 30, 30);
	fill(245);
	ellipse(120, 90, 27, 27);

	fill(255);
    ellipse(80, 91, 25, 23);
    fill(245);
    ellipse(83, 94, 23, 20);

	fill(255);
	ellipse(100, 100, 80, 10);
	fill(245);
    ellipse(105, 101, 75, 8);

    pop();
}

When I heard wallpaper, I thought of Andy’s room.

Project-05

sketch
//dmclaugh, Diana McLaughlin, Section A

var s = 60;
var x = 90;
var y;

function setup() {
    createCanvas(600, 600);
    background(52, 225, 235); //light blue
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    //little background rectangles
	for(var y1 = 2; y1 <= height; y1 += 5) {
		for(var x1 = 2; x1 <= width; x1 += 5) {
		noStroke();
		fill(0, 0, 255);
        rect(x1, y1, 2, 2);
		}
	}
    //pattern
	for (y = 40; y <= height; y += 90){
		for (x = 30; x <= width; x += 90)
		pattern(x, y);
	}
    
}

function pattern(x, y){
	push();
	rectMode(CENTER);
	translate(x, y);
    stroke(255);
    strokeWeight(4);
    fill(random(0, 256), random(0, 256), random(0, 256));
    rect(0, 0, s, s); //background rectangle
    rotate(radians(45));
    rect(0, 0, s, s); //rotated rectangle
    fill(255);
    ellipse(0, 0, 5, 5); //white dots
    ellipse(0, 8, 5, 5);
    ellipse(0, -8, 5, 5);
    ellipse(8, 0, 5, 5);
    ellipse(-8, 0, 5, 5);
    pop();

    noLoop();
}

I made this wallpaper based off of something you might see on Animal Crossing patterns. I played around with which colors to use for the rectangles’ fill, and ended up selecting random colors because I liked how bright and colorful it was and thought it worked best with what I was looking for. I tried doing more subtle shades of blue and purple, but it seemed too dull for what I was looking for.

Project 5 – Wallpaper

For this project, I was feeling the spooky, Halloween theme so I decided to make some pumpkins. 🎃

sketchDownload
var s = 20;

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

function draw() {
    background(255, 174, 0);
    for (var row = 1; row < 15; row += 2){
        for (var col = 1; col < 20; col += 3){
            blackCircle(row * 40, col * 40);

        }
    }

    for (var row = 1; row < 8; row += 2){
        for (var col = 1; col < 8; col += 2){
            pumpkin(row * 70, col * 70);

        }
    }
}

//pumpkin
function pumpkin(x, y){
    push();
    translate(x,y);
    noStroke();
    fill(54, 102, 51);
    rect(10, -30, 15, 20);
    fill(255, 85, 0);
    ellipse(20, 20, 100, 80);
    fill(0);
    triangle(0, 10, 5, 0, 10, 10);
    triangle(30, 10, 35, 0, 40, 10);
    arc(20, 20, 70, 60, 0, PI);
    fill(255, 85, 0);
    rect(20, 20, 10, 10);
    pop();
}


//blackcircle
function blackCircle(x, y){
    push();
    translate(x, y);
    noStroke();
    fill(237, 230, 9);
    circle(0, 0, 30);
    fill(0);
    circle(0, 0, 10);
    pop();
}

LO 5

One of my favorite places to explore and browse art is on Behance, an Adobe site that’s partially a job search site, partially a portfolio site, and an all-around great place to find great art. One of my favorite artists is Roman Bratschi, a 3D designer whose rendered art is filed with textures and materials that captivate the eye.

I think because I am a materially oriented person, anything with strong texture, even if it’s just the image of it, captivate my eye. Bratschi creates amazing textures in his renders that I can’t even begin to describe, and his use of vibrant and contrasting colors gives a lot of appeal to the images a well. As far as I am aware, the renders are generated through 3D software that allows for the user to tweak and adjust the form, texture, color, the density of said texture, almost anything imaginable to create renders. In its final form, Bratschi dictates the composition and generation of the art, even though he is using pre-programmed tools to help him create the images.

LO 5

“Platonic solids” by Michael Hansmeyer explores generated geometric 3D shapes that complete a complex form. He has created multiple different final forms which all stem from the same single process with a simple change in variables. I admire how such a subtle change can create a huge different in the final patterns of this 3D design. It influences the branching, fractalization, and build up of the geometric shapes. It’s also worth noting that this system can be applied to multiple scales. The processes at the core of this project have two parts: topological rules and weighting rules. Hansmeyer states that these rules specify how the positions of these vertices are based from the combinations of the vertices and the shapes edges and faces. By introducing parameters that allow for variation, the final result encapsulates a rounded and highly diverse attributes in its body.

Platonic Solids by Michael Hansmeyer

http://www.michael-hansmeyer.com/platonic-solids#:~:text=Platonic%20Solids%20(2008),primitive%20given%20an%20appropriate%20process.

LO-05

Tesla by Toni Bratincevic uses V-Ray to produce its 3D graphics. The project is dedicated to Nikola Tesla and presents a man (Tesla), standing on the control board with the Tesla coil in an arch above him. I originally picked the project because I did not know what it was depicting, but thought it was humorous. Once I found the creator’s description, the image made more sense.
When creating this image, the author knew that he wanted to depict Tesla and the Tesla coil in the image, but that was all that he started with. The rest of the creation, including how the coil and the Tesla figure are displayed, was up to artistic sense.

Tesla (2014) by Toni Bratincevic

Project 5: Wallpaper

For the wallpaper assignment I drew a pattern of corgi faces and dog treat bones. I was inspired by my puppy who would not let me sit down and do this homework assignment. I was not successful and sketching the faces myself so I used some images linked below as references.

sketch

function setup() {
  createCanvas(600, 600);
  rectMode(CENTER);
  noLoop();
}

function draw() {
    background(230, 188, 191);
    strokeWeight(0);
    
    //columns of 3 corgi faces
    for(x=50; x<300; x+=100){
        for(y=50; y<300; y+=100) {
        push();
        translate(x,y);
        corgiFace(x, y, 100);
        pop();
      }
    }
  
    //columns of 2 corgi faces
    for(x=100; x<300; x+=100) {
      for(y=100; y<300; y+=100) {
        push();
        translate(x,y);
        corgiFace(x, y, 70);
        pop();
      }
    }
  
    //columns of 2 dog bones
    for(x=50; x<300; x+=100) {
        for(y=100; y<300; y+=100) {
          push();
          translate(x,y);
          dogBone(x, y, 20);
          pop();
        }
    }
  
    //columns of 3 dog bones
    for(x=100; x<300; x+=100) {
        for(y=50; y<300; y+=100) {
          push();
          translate(x, y);
          dogBone(x, y, 20);
          pop();
        }
    }
}

function dogBone(x, y, size) {
    strokeWeight(0);
    fill(255);
    rect(x, y, size, size/2);
    circle(x-size/2, y+5, size/2);
    circle(x-size/2, y-5, size/2);
    circle(x+size/2, y+5, size/2);
    circle(x+size/2, y-5, size/2);
}


function corgiFace(x, y, size) {
    fill(245, 191, 120);
    //draws head shape
    ellipse(x, y, size, size+10);
    ellipse(x,y+10, size, size-10);
    //left and right ear, respectively
    triangle(x-size/2, y, x-size*4/7, y-size*5/7, x-size/7, y-size*3/7);
    triangle(x+size/2, y, x + size*4/7, y-size*5/7, x+size/7, y-size*3/7);

    fill(255);
    //inside of ear
    triangle(x-size/2, y - size*2/7, x-size/2, y-size*4.5/7, x-size*2/7, y-size*3/7);
    triangle(x+size/2, y - size*2/7, x+size/2, y-size*4.5/7, x+size*2/7, y-3*size/7);
    //face markings
    ellipse(x,y, size/7, size*3/7);
    ellipse(x, y + size*2/7, size*4/7, size*3/7);

    fill(0);
    //eyes
    circle(x - size*2/7, y, size/7);
    circle(x+size*2/7, y, size/7);
    //nose
    ellipse(x, y + size*15/70, size*2/7, size/7);
    //mouth
    arc(x, y+size*25/70, size/7, size/14, 2*PI, PI);
}

Image I referenced for creating the corgi face

Project 5: Wallpaper

For this week’s project, I decided to make a pattern off of 2 animals and the things that they eat! In this case, I chose a rabbit and a bear, and alternated the pattern in between the bigger animal face and smaller food item to create a rhythm both vertically and horizontally that alternates between big and small.

sketchDownload
// Susie Kim, Section A
// susiek@andrew.cmu.edu
// Assignment-05-A

function setup() {
    createCanvas(600, 600);
    background(163, 185, 216);
    noLoop();
}

function draw() {
	background(163, 185, 216);

	// bunnies
	for(var x = 25; x <= 600; x+= 150) {
		for(var y = 0; y <= 600; y+= 200){
			push();
			translate(x, y);
			bunny(x,y);
			pop();
		}
	}

    // carrots
	for(var x = -50; x <= 600; x+= 150) {
		for(var y = 0; y <= 600; y+= 200){
			push();
			translate(x, y);
			carrot(x,y);
			pop();
		}
	}

    // bears
	for(var x = -50; x <= 600; x+= 150) {
		for(var y = 100; y <= 600; y+= 200){
			push();
			translate(x, y);
			bear(x,y);
			pop();
		}
	}

    //fishes
	for(var x = 25; x <= 600; x+= 150) {
		for(var y = 100; y <= 600; y+= 200){
			push();
			translate(x, y);
			fish(x,y);
			pop();
		}
	}
}

function bunny(x,y) {
	// head
	noStroke();
	fill(255);
	ellipse(50, 65, 69, 50); 

	// ears
	ellipse(30, 37, 25, 55); 
	ellipse(70, 33, 23, 55);

	// eyes
	fill(51, 51, 51);
	ellipse(38, 60, 5, 5); 
	ellipse(62, 60, 5, 5);

    //  nose
    ellipse(50, 70, 6, 6) 

	// cheeks
	fill(246, 202, 201);
	ellipse(30, 69, 13, 8); 
	ellipse(70, 69, 13, 8);

	// mouth
	strokeWeight(2);
	noFill();
	stroke(51, 51, 51); 
	curve(50, 30, 50, 70, 40, 75, 40, 60);
	curve(50, 30, 50, 70, 60, 75, 60, 60);
}

function bear(x,y) {
	// head
	noStroke();
	fill(225, 189, 152);
	ellipse(50, 60, 68, 58);

	// ears
	ellipse(25, 35, 24, 24); 
	ellipse(75, 35, 26, 29);

	// cheeks
	fill(239, 163, 163);
	ellipse(30, 65, 13, 8); 
	ellipse(70, 65, 13, 8);

	// eyes
	fill(51, 51, 51);
	ellipse(37, 55, 5, 5); 
	ellipse(63, 55, 5, 5);

    // nose
    ellipse(50, 65, 6, 6); 

    // mouth
    strokeWeight(2);
	noFill();
	stroke(51, 51, 51);
    line(50, 65, 50, 72); 
	curve(45, 60, 45, 71, 55, 71, 55, 60);
}

function carrot(x,y) {
	//leaf1
	noStroke();
	fill(165, 209, 117); 
	ellipse(50, 38, 9, 20); 
	
	// leaf2
	push();
	translate(57, 38);
	rotate(radians(30));
	ellipse(0, 0, 9, 23);
	pop();

	//leaf3
	push(); 
	translate(43, 38);
	rotate(radians(-30));
	ellipse(0, 0, 9, 23);
	pop();


	// carrot body
	fill(253, 195, 117);
	ellipse(50, 60, 17, 35); 
}

function fish(x,y) {
	// body
	noStroke();
	fill(74, 98, 168); 
	ellipse(46, 50, 38, 18); 
	push();

    // back fin 1
    translate(63, 54); 
    rotate(radians(17));
	ellipse(0, 0, 23, 9);
	pop();

    // back fin 2
	push();
	translate(63, 46); 
    rotate(radians(-17));
	ellipse(0, 0, 23, 9);
	pop();

    // eye
	fill(0); 
	ellipse(37, 47, 3, 3); 

    // side fin
	fill(58, 78, 155); 
	ellipse(48, 53, 15, 7)
}

To start, I “sketched” out each animal, as well as the pattern, in illustrator, and coded from there:

Project-05-Wallpaper

I was inspired by one of my favorite prints-cow print, and a fruit I love- cherries. Additionally, when you click on the image, the background will change.

graanak-05
//Graana Khan
//Section B
//graanak@andrew.cmu.edu
//Project-05

function setup() {
    createCanvas(400, 400);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	
	//cow print backdrop 

	background(255);
	noStroke();
	fill(0);
	beginShape();
	curveVertex(40, 45);
	curveVertex(40, 45);
	curveVertex(46, 35);
	curveVertex(76, 26);
	curveVertex(139, 78);
	curveVertex(66, 141);
	curveVertex(36, 123);
	curveVertex(47, 83);
	curveVertex(47, 83);
	endShape();
	beginShape();
	curveVertex(180, 32);
	curveVertex(180, 32);
	curveVertex(197, 19);
	curveVertex(249, 23);
	curveVertex(255, 62);
	curveVertex(232, 62);
	curveVertex(232, 62);
	endShape();
	beginShape();
	curveVertex(276, 45);
	curveVertex(276, 45);
	curveVertex(307, 23);
	curveVertex(361, 26);
	curveVertex(375, 89);
	curveVertex(369, 126);
	curveVertex(318, 141);
	curveVertex(282, 82);
	curveVertex(282, 82);
	endShape();
	beginShape();
	curveVertex(156, 141);
	curveVertex(156, 141);
	curveVertex(152, 120);
	curveVertex(196, 82);
	curveVertex(256, 117);
	curveVertex(316, 197);
	curveVertex(259, 220);
	curveVertex(176, 187);
	curveVertex(176, 187);
	endShape();
	beginShape();;
	curveVertex(344, 182);
	curveVertex(344, 182);
	curveVertex(355, 199);
	curveVertex(355, 231);
	curveVertex(331, 196);
	curveVertex(331, 196);
	endShape();
	beginShape();
	curveVertex(83, 172);
	curveVertex(83, 172);
	curveVertex(56, 170);
	curveVertex(44, 200);
	curveVertex(52, 210);
	curveVertex(87, 200);
	curveVertex(87, 200);
	endShape();
	beginShape();
	curveVertex(168, 253);
	curveVertex(168, 253);
	curveVertex(175, 231);
	curveVertex(196, 228);
	curveVertex(218, 241);
	curveVertex(208, 273);
	curveVertex(180, 273);
	curveVertex(180, 273);
	endShape();
	beginShape();
	curveVertex(78, 253);
	curveVertex(78, 253);
	curveVertex(130, 247);
	curveVertex(180, 331);
	curveVertex(142, 369);
	curveVertex(78, 377);
	curveVertex(36, 317);
	curveVertex(36, 317);
	endShape();
	beginShape();
	curveVertex(250, 253);
	curveVertex(250, 253);
	curveVertex(311, 244);
	curveVertex(354, 259);
	curveVertex(369, 293);
	curveVertex(307, 321);
	curveVertex(237, 324);
	curveVertex(237, 324);
	endShape();
	beginShape();
	curveVertex(214, 341);
	curveVertex(214, 341);
	curveVertex(242, 345);
	curveVertex(248, 365);
	curveVertex(206, 377);
	curveVertex(195, 367);
	curveVertex(195, 367);
	endShape();
	beginShape();
	curveVertex(234, 400);
    curveVertex(234, 400);
    curveVertex(293, 349);
    curveVertex(369, 363);
    curveVertex(388, 400);
    curveVertex(388, 400);
    endShape();
    beginShape();
    curveVertex(23, 348);
    curveVertex(23, 348);
    curveVertex(44, 362);
    curveVertex(52, 388);
    curveVertex(10, 384);
    curveVertex(5, 374);
    curveVertex(5, 374);
    endShape();

    //red cherry columns 

    for(var x = -10; x <= 340; x += 100){
    	for(var y = -60; y <= 372; y += 80){
    		push();
    		translate(x,y);
    		rotate(radians(-15));
    		cherries();
    		pop();
    	}
    }


    // pink cherry columnns

    for(var x = 60; x <= 293; x += 100){
    	for(var y = 45; y <= 352; y += 80){
    		push();
    		translate(x,y);
    		rotate(radians(15));
    		pinkcherries();
    		pop();
    	}
    }
    noLoop();
}

function mousePressed(){
    background(213, 238, 247);
    for(var x = 0; x <= 360; x += 145){
        for(var y = 0; y <= 360; y += 105){
        	push();
        	translate(x,y);
        	clouds1();
        	pop();
    		
    	}
    }

    for(var x = 0; x <= 260; x += 145){
    	for(var y = 0; y <= 260; y += 105){
    		push();
    		translate(x,y);
    		clouds2();
    		pop();
    	}
    }

    //red cherry columns 

    for(var x = -10; x <= 340; x += 100){
    	for(var y = -60; y <= 372; y += 80){
    		push();
    		translate(x,y);
    		rotate(radians(-15));
    		cherries();
    		pop();
    	}
    }


    // pink cherry columnns

    for(var x = 60; x <= 293; x += 100){
    	for(var y = 45; y <= 352; y += 80){
    		push();
    		translate(x,y);
    		rotate(radians(15));
    		pinkcherries();
    		pop();
    	}
    }
    noLoop();    
}

//cherries pattern

function cherries(){

	//stems
	stroke(61, 130, 48);
	strokeWeight(2);
	line(35, 40, 44, 22);
	line(53, 40, 44, 22);
	
	//leaf
	noStroke();
	fill(61, 130, 48);
	beginShape();
	curveVertex(44, 22);
	curveVertex(44, 22);
	curveVertex(46, 19);
	curveVertex(50, 19);
	curveVertex(47, 22);
	curveVertex(47, 22);
	endShape();

	//cherry
	noStroke();
	fill(229, 14, 14);
	circle(35, 44, 15);
	circle(52, 44, 15);

}

function pinkcherries(){

	//stems
	stroke(61, 130, 48);
	strokeWeight(2);
	line(35, 40, 44, 22);
	line(53, 40, 44, 22);
	
	//leaf
	noStroke();
	fill(61, 130, 48);
	beginShape();
	curveVertex(44, 22);
	curveVertex(44, 22);
	curveVertex(46, 19);
	curveVertex(50, 19);
	curveVertex(47, 22);
	curveVertex(47, 22);
	endShape();

	//cherry
	noStroke();
	fill(255, 199, 227);
	circle(35, 44, 15);
	circle(52, 44, 15);

}


//clouds1 pattern 
function clouds1(){
	noStroke();
	fill(255);
	rect(21, 23, 51, 28, 30);
	rect(51, 40, 38, 18, 15);
}

//clouds2 pattern 
function clouds2(){
	noStroke();
	fill(255);
	rect(106, 76, 60, 24, 20);
	rect(103, 89, 33, 24, 10);
}

Project 05- Wallpaper

I really like bubble tea, so I created this homage to the drink It was difficult for me to coordinate and organize the spacing in between the different drinks, especially taking into consideration the scaling factor.

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

function draw() {
  background(255, 224, 226);
//mint stripes
  for (var m = 0; m < width; m+=90){
    push();
    translate(0, m-275)
    strokeWeight(7);
      stroke(202, 230, 225)
      line(0,0,width, height)
    pop();
}
//blue bubble tea cups
    for (var i= 0; i < width-60; i+=100){
    push();  
  	translate(i, 0);
  
      for(var j = 20; j< height; j += 50){
        push();
        translate(0, (j*3)-90);
        rotate(PI/8)
        stroke(134, 164, 219)
  		strokeWeight(5)
  noFill();
  //bubble tea cap
  ellipse(122, 30, 40,15);
  //bubble tea cup
      line(100,30,110,80);
      line(144, 30, 135,80);
      line(134,80,110,80);
  //straw
  stroke(65, 95, 150)
  strokeWeight(7);
  	line(122, 15,122, 70)
  //tapioca balls
  stroke(0)
  strokeWeight(6);
    point(132, 70);
    point(127, 67);
    point(114, 66);
    point(115, 74);
    point(122, 69);
    point(127, 74);
    pop();
  }
    pop();
    }
  
  //mango green tea cups
      for (var a= 0; a < width-60; a+=100){
    	push();
  			translate(a-50, 0);
      for(var c = 0; c< height; c += 50){
      push();
        translate(30, (c*3));
        rotate(-PI/8)
        scale(0.5)
          stroke(179, 139, 104)
          strokeWeight(5)
        noFill();
          ellipse(122, 30, 40,15);
            line(100,30,110,80);
            line(144, 30, 135,80);
            line(134,80,110,80);
      noStroke();
      fill(255, 195, 56)
        quad(107, 60, 135, 60, 135, 80, 107, 80);
      strokeWeight(7);
        line(122, 15,122, 70)
    pop();
    }
  pop();
  }
  noLoop();
}