laurel – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Project-06-Abstract Clock

var walking = 0;
var rising = 230;
function setup() {
    createCanvas(480, 480);
    background(0);
    
    
}

function draw() {

	background(98, 97, 153);

	noStroke();
    
    fill(135, 154, 206);
  //moon
	ellipse(380, 126, 228, 228);

	var hr = map(hour(), 0, 59, 152, 620);
  //circle eclipses moon at hourly pace
    push();
	fill(98, 97, 153);
	ellipse(hr, 126, 228, 228);
	pop();

  //background graves
  fill(22, 13, 71);
	ellipse(370, 408,1074, 311);

	 for(var g = 304; g < 440; g+=52){
            graves2(g, 225);
        
    }

  //backgroung fence
  fence2(435, 203, 0.4);


  //zombie moves at seconds pace
    push();
    translate(map(second(), 0, 59, -20, width+ 20), walking);
	zombie();
	pop();

	fill(38, 34, 98);
	ellipse(57, 480,1074, 311);

  //foreground fence
	fence1(12, 200);


	

   //foreground graves
   for(var d = 47; d < 370; d+=130){
            graves1(d, 292);
        
    }

  //hand raises from ground at minute pace
  push();
  translate(rising, map(minute(), 0, 59, 500, 410));
	hand();
	pop();

	
	
  //ground in front of hand
  fill(38, 34, 98);
	rect(0, 410, 400, 200);
}

function graves1(x,y) {

           push();
           translate(x,y);
           noStroke();
           


           fill(22, 13, 71);
           rect(-13, 0, 67, 100);
           //grave front
           fill(38, 34, 98);
           rect(0, 0, 67, 100);

           fill(22, 13, 71);
           rect(9, 12, 51, 5);
           fill(22, 13, 71);
           rect(8.5, 24, 51, 5);


           
	       pop();
	              

}

function graves2(x,y) {

           push();
           translate(x,y);
           noStroke();
         


           fill(22, 13, 71);
           rect(0, 0, 27, 41);


           
	       pop();
	              

}

function fence1(x,y) {

           push();
           translate(x,y);
           noStroke();
         

           fill(38, 34, 98);
           rect(-24, 15, 145, 8);

           rect(0, 0, 8, 139);

           rect(30, 0, 8, 139);

           rect(60, -5, 8, 139);

           rect(90, -2, 8, 139);

          

           
	       pop();
	              

}

function fence2(x,y,s) {

           push();
           translate(x,y);
           scale(s);
           noStroke();
         

           fill(22, 13, 71);
           rect(-24, 15, 145, 8);

           rect(0, 0, 8, 139);

           rect(30, 0, 8, 139);

           rect(60, -5, 8, 139);

           rect(90, -2, 8, 139);

          

           
	       pop();
	              

}

function zombie() {

           push();
           
           noStroke();
         

           fill(38, 34, 98);

           //head
           ellipse(7, 238, 14, 20);

           //shoulders
           ellipse(7, 250, 14, 4.5);

           //arm1
           rect(10, 255, 29, 4);
           ellipse(39, 260, 5.5, 10);

           //neck
           rect(4, 246, 5.5, 7.5);

           //torso
           rect(0, 250, 14, 26);

           //leg1
           rect(0, 276, 8, 35);



           //foot1
           rect(0, 311, 16, 3);

           ellipse(8, 311, 16, 6);

           //arm2
           push();
           rotate(radians (-20));
           translate(-86,235);
           rect(5, 5, 29, 4);
           pop();
           ellipse(34, 248, 5.5, 10);

           push();
           rotate(radians (-20));
           translate(-86,235);
           //leg1
           rect(-3, 26, 8, 35);

           //foot1
           rect(-3, 61, 16, 3);

           ellipse(5, 61, 16, 6);
           pop();
	       pop();
	              

}

function hand() {

           push();
           
           scale(1.7);
           noStroke();
           push();
           
           fill(22, 13, 71);

           beginShape();
           vertex(0, 0);
           vertex(0, -18);
           vertex(-6, -25);
           vertex(-5.8, -30.8);

           vertex(-4.5, -34);
           vertex(-2.7, -33);
           vertex(-3, -28);
           vertex(-0.2, -26);

           vertex(0.2, -36);
           vertex(-1.5, -38);
           vertex(0, -40);
           vertex(3, -36.7);

           vertex(3, -28.5);
           vertex(4.5, -37);
           vertex(2.25, -40.5);
           vertex(3.9, -42.25);

           vertex(6.7, -38);
           vertex(6.7, -30);
           vertex(8.6, -37);
           vertex(7.2, -41);

           vertex(8.6, -42.7);
           vertex(11.2, -37.4);
           vertex(9.8, -28.3);
           vertex(12, -34.8);

           vertex(12, -38);
           vertex(13.5, -38.5);
           vertex(14.1, -34.5);
           vertex(10.8, -20);

           vertex(10.5, 0);


           endShape(CLOSE);
         
           pop();

          

           
	       pop();
	              

}

I really like the columns designed by Michael Hansmeyer. He is an architect which is what compelled him to make these columns. I find it really interesting that he took a very simple architectural form and and embellished it through his generative design. He used Javascript to make each layer’s pattern for the column and cut them out with an industrial mill according to one source, but I could easily see these being laser cut. Each layer is made out of cardboard or graybeard and stacked on top of each other to build the final form. The randomness used for creating this design isn’t “super” random because the program used probably limits how narrow and wide it can get in general and how much each layer can vary from the last so that it can still produce a sturdy column. So even though they’re not completely random, I would say this is very impressive within the realm of architecture in which things are usually very precise that he was able to make pieces that not only were functional/would stand, but also looked very beautiful in a surprisingly precise way.

http://www.michael-hansmeyer.com/subdivided-columns

Looking Outwards-05

https://www.behance.net/gallery/40600473/FREE-BIRD

This collection is named “Free Bird” and is by Mike Campau. He’s a photographer who uses CGI to distort components of reality. Normally, he makes commercial art/graphics for companies like Beats by Dre, Under Armour, Nike, etc., but he also does personal projects like the one shown. In this collection, I like the way that he distorted that he used CGI to distort the bird cages. The statement included with it is “an escape from the odd and dark world we live in… and sometimes there are no doors to get out.” I think that the distortion of the cages helps convey the complexity of the problems people try to escape and creates a very somber and imposing mood. I don’t understand where the doors come in to play though. I’m guessing we are supposed to question how the bird managed to get out of the cage in the first place and wonder why the bird is still sitting on the cage if it managed to get out which I find interesting. He says that he made this in Photoshop to make this. I know that you can make 3D models and texture them in Photoshop, but I’ve never done it before so I couldn’t say exactly how he did it. Also, the bird a real bird and not a 3D model.

Project-05-Wallpaper

sketch Download

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

function draw() {

    	

        
    
    //big pumpkins
    for(var s = 100; s < height-90; s +=400){
    	for(var d = 100; d < width-80; d+=400){
            pumpkin1(d, s);
        
        }
    }

    for(var s = 300; s < height-90; s +=400){
    	for(var d = 300; d < width-80; d+=400){

            pumpkin1(d, s);
        
        }
    }
     //little pumpkins
     for(var m = 300; m < height-90; m +=400){
     	for(var j = 100; j < width-80; j+=400){

       pumpkin2(j, m);
       
        }

    }

    for(var m = 100; m < height-90; m +=400){
     	for(var j = 300; j < width-80; j+=400){

       pumpkin2(j, m);
       
        }

    }
	       

    //star
    for(var s = 100; s < height+50; s +=200){
    	for(var d = 0; d < width+50; d+=200){
            star1(d, s);
        
        }
    }

    //star
    for(var s = 0; s < height+50; s +=200){
    	for(var d = 100; d < width+50; d+=200){
            star2(d, s);
        
        }
    }

}

    
//big pumpkin
	function pumpkin1(x,y) {

        
           
           push();
           translate(x,y);
           rotate(radians(20));
           noStroke();
           //strokeWeight(1.5);

           //stroke(0, 100, 20);
           fill(0, 198, 51);
           rect(-5, -35, 10, 13);

           //stroke(176, 45, 36);
           fill(241, 90, 41);

           ellipse(25, 3, 40, 60);
           ellipse(-25, 3, 40, 60);
           ellipse(13, 3, 40, 62);
           ellipse(-13, 3, 40, 62);
           ellipse(0, 3, 40, 64);

           fill(247, 148, 29);
           triangle(-20, -5, -4, -2, -12, -16);
           triangle(20, -5, 4, -2, 12, -16);
           triangle(-6, 8, 6, 8, 0, -2);

           arc(1, 11.5, 55, 29, radians(0), radians(180), CHORD);

           fill(241, 90, 41);
           
           rect(9, 10, 8, 5.5);
           noStroke();
           rect(8, 7, 9.9, 4);


           
	       pop();
	              

}

//little pumpkin
	function pumpkin2(x,y) {

        
           
           push();
           translate(x,y);
           rotate(radians(-20));
           noStroke();
           //strokeWeight(1.5);

           //stroke(0, 100, 20);
           fill(0, 198, 51);
           rect(-5, -20, 10, 13);

           //stroke(176, 45, 36);
           fill(241, 90, 41);

           ellipse(20, 5, 30, 40);
           ellipse(-20, 5, 30, 40);
           ellipse(10, 5, 30, 40);
           ellipse(-10, 5, 30, 40);
           ellipse(0, 5, 30, 40);

           fill(247, 148, 29);
           ellipse(-10, 2, 10, 10);
           ellipse(10, 2, 10, 10);
           rect(-2, 2, 4, 4);

           arc(0, 10, 20, 15, radians(0), radians(180), CHORD);

           fill(241, 90, 41);
           
           rect(3, 8.2, 4, 4);
           noStroke();
           rect(2, 7.2, 6, 2.1);


           
	       pop();
	              

}

//big star

function star1(x, y) {


	 push();
           translate(x,y);
           strokeWeight(1.5);
           rotate(radians(-20));

           fill(255, 251, 202);

           beginShape();
           vertex(-16, -3.5);
           vertex(-5, -5);
           vertex(0,-16);
           vertex(5, -5);
           vertex(16, -3.5);
           vertex(8, 4);
           vertex(10, 16);
           vertex(0, 10);
           vertex(-10, 16);
           vertex(-8, 4);
           endShape(CLOSE);
	       pop();


}

//small star

function star2(x, y) {


	 push();
           translate(x,y);
           strokeWeight(1.5);
           rotate(radians(20));

           fill(255, 251, 202);

           beginShape();
           vertex(-8, -1.75);
           vertex(-2.5, -2.5);
           vertex(0,-8);
           vertex(2.5, -2.5);
           vertex(8, -1.75);
           vertex(4, 2);
           vertex(5, 8);
           vertex(0, 5);
           vertex(-5, 8);
           vertex(-4, 2);
           endShape(CLOSE);
	       pop();


}

Project-04-String Art: Maryland Flag

sketch Download

var dx1;
var dy1;
var dx2;
var dy2;
var bx1;
var by1;
var bx2;
var by2;
var cx1;
var cy1;
var cx2;
var cy2;
var ax1;
var ay1;
var ax2;
var ay2;
var numLines = 20;

function setup() {
    createCanvas(400, 300);
    background(200);
    line(50, 50, 150, 300);
    line(300, 300, 350, 100);
    dx1 = (100-0)/numLines;
    dy1 = (50-50)/numLines;
    dx2 = (100-100)/numLines;
    dy2 = (0-50)/numLines;

    bx1 = (100-0)/numLines;
    by1 = (50-50)/numLines;
    bx2 = (100-100)/numLines;
    by2 = (100-50)/numLines;

    cx1 = (100-200)/numLines;
    cy1 = (50-50)/numLines;
    cx2 = (100-100)/numLines;
    cy2 = (100-50)/numLines;

    ax1 = (100-200)/numLines;
    ay1 = (50-50)/numLines;
    ax2 = (100-100)/numLines;
    ay2 = (0-50)/numLines;

}

function draw() {
	noStroke();
    fill(255,255,0);
    rect(0, 0, 400, 300);

//top left black lines
    stroke(0);
    for (var i = 2; i < width/2; i += 4) { 

      if (i < 80 || i > 130) { 
    
        line(i, i * .7 - 20, i, i - 400);
    }

      noLoop();
   
    }

    for (var i = 0; i < width/2; i += 4) {

    	if (i < 80 || i > 130) { 

          line(i, i + 400, i, i * .7 + 40);
      }
      noLoop();
  
    }

    for (var i = 0; i < width/2; i += 4) {

    	if (i > 80 & i < 130) { 

          line(i, i *.7 -20, i, i * .7 +40);
      }
      
      noLoop();
  
    }

//bottom right black lines
  for (var i = 200; i < width; i += 4) {

    	if (i < 280 || i > 330) { 

          line(i, i *.7 -20, i, i * .7 +40);
      }
      
      noLoop();
  
    }

  for (var i = 200; i < width; i += 4) { 

      if (i > 280 & i < 330) { 
    
        line(i, i * .7 - 20, i, i - 400);
    }

      noLoop();
   
    }

  for (var i = 200; i < width; i += 4) {

    	if (i > 280 & i < 330) { 

          line(i, i + 400, i, i * .7 + 40);
      }
      noLoop();

    }


 



    noStroke();

    fill(255, 0, 0); 
    rect(0, 150, 200, 150); //red rectangle bottom left
    rect(200, 0, 200,150); //red rectangle top right
    fill(255);
    rect(0, 150, 100, 75); //white rectangles bottom left 
    rect(100, 225, 100, 75);
    rect(200, 0, 100, 75);//white rectangles top right
    rect(300, 75, 100, 75);


    
    push();
    noFill();
    stroke(255);
//bottom right ellipses and arcs
    ellipse(107, 175, 15, 15);
    arc(100, 167, 15, 15, -PI / 2, 3 * -PI / 2, CHORD);
    
    ellipse(28, 233, 15, 15);
    arc(20, 225, 15, 15, radians(0), radians(180), CHORD);

    ellipse(92, 275, 15, 15);
    arc(100, 283, 15, 15, PI / 2, 3 * PI / 2, CHORD);

    ellipse(174, 217, 15, 15);
    arc(182, 225, 15, 15, radians(180), radians(0), CHORD);
    

    stroke(255,0,0);
    ellipse(92, 175, 15, 15);
    arc(100, 167, 15, 15, PI / 2, 3 * PI / 2, CHORD);

    ellipse(28, 217, 15, 15);
    arc(20, 225, 15, 15, radians(180), radians(0), CHORD);

    ellipse(107, 275, 15, 15);
    arc(100, 283, 15, 15, -PI / 2, 3 * -PI / 2, CHORD);

    ellipse(174, 233, 15, 15);
    arc(182, 225, 15, 15, radians(0), radians(180), CHORD);
  
//top right elliplses and arcs
    push;
    noFill();
    stroke(255);
    translate(200, -150);
    ellipse(107, 175, 15, 15);
    arc(100, 167, 15, 15, -PI / 2, 3 * -PI / 2, CHORD);
    
    ellipse(28, 233, 15, 15);
    arc(20, 225, 15, 15, radians(0), radians(180), CHORD);

    ellipse(92, 275, 15, 15);
    arc(100, 283, 15, 15, PI / 2, 3 * PI / 2, CHORD);

    ellipse(174, 217, 15, 15);
    arc(182, 225, 15, 15, radians(180), radians(0), CHORD);
    

    stroke(255,0,0);
    ellipse(92, 175, 15, 15);
    arc(100, 167, 15, 15, PI / 2, 3 * PI / 2, CHORD);

    ellipse(28, 217, 15, 15);
    arc(20, 225, 15, 15, radians(180), radians(0), CHORD);

    ellipse(107, 275, 15, 15);
    arc(100, 283, 15, 15, -PI / 2, 3 * -PI / 2, CHORD);

    ellipse(174, 233, 15, 15);
    arc(182, 225, 15, 15, radians(0), radians(180), CHORD);
    pop();



//bottom left red bend1
    push();
    translate(0, 175);
    stroke(255, 0, 0);
    var x1 = 0;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    noLoop();
    }

    pop();


//bottom left white bend1
    push();
    translate(0, 175);
    stroke(255);
    var x1 = 0;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += bx1;
        y1 += by1;
        x2 += bx2;
        y2 += by2;
    noLoop();
    }
    pop();


//bottom left red bend2
    push();
    translate(0, 175);
    stroke(255, 0, 0);
    var x1 = 200;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += cx1;
        y1 += cy1;
        x2 += cx2;
        y2 += cy2;
    noLoop();
    }

    pop();


//bottom left white bend2
     push();
    translate(0, 175);
    stroke(255);
    var x1 = 200;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += ax1;
        y1 += ay1;
        x2 += ax2;
        y2 += ay2;
    noLoop();
    }

    pop();

    //next one


//top right red bend1
    push();
    translate(200, 25);
    stroke(255, 0, 0);
    var x1 = 0;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    noLoop();
    }

    pop();


//top right white bend1
    push();
    translate(200, 25);
    stroke(255);
    var x1 = 0;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += bx1;
        y1 += by1;
        x2 += bx2;
        y2 += by2;
    noLoop();
    }
    pop();


//top right red bend2
    push();
    translate(200, 25);
    stroke(255, 0, 0);
    var x1 = 200;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += cx1;
        y1 += cy1;
        x2 += cx2;
        y2 += cy2;
    noLoop();
    }

    pop();


//top right white bend2
    push();
    translate(200, 25);
    stroke(255);
    var x1 = 200;
    var y1 = 50;
    var x2 = 100;
    var y2 = 50;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += ax1;
        y1 += ay1;
        x2 += ax2;
        y2 += ay2;
    noLoop();
    }

    pop();



    
}

Looking Outward-04

Since David Cope is a composer, he already had an interest and extensive knowledge in different genres of music which probably compelled him to make this and incorporate jazz, classical and chorale music. After doing some searching, I found that he learned LISP in college which is programming language for AI. I would guess that this (among other things probably) is what he used to make EMMY because EMMY makes music from artificial intelligence. I like that it keeps a consistent melody and harmony I was very surprised by that especially since it incorporates a number of different voices singing in different vocal ranges. It is very consistent and there are no jumps at all, so it is actually very calming to listen to. However, it is strange hearing the choir voices sing words that aren’t real. I’d be interested to hear how EMMY interprets jazz since there are so many instruments involved. I would be curious to see if it incorporates more random and unexpected elements of sound and rhythm since jazz doesn’t always follow a specific rhythm.

Looking Outwards-03

Last week I reviewed, the art made by Jessica Rosenkrantz and Jesse Louis-Rosenberg. I said that although the patterns they made were unique, the forms they applied them onto were very generic. Daniel Widrig also makes functional art (furniture), but the forms he generates seem more abstract and natural than the ones mentioned before. There’s more depth to his designs which I like it’s not all on the surface so you can look at this thing he made from a number of angles and it will still be interesting. It says that he used software/technology used by special effects artists to make his 3D printed art. I would guess that he used Maya for some of it because in his description it says he was named “Maya Master.” My friend is a special effects major and she uses Python to code in Maya so if he does use code to generate his forms rather than make them entirely in Maya, then that’s probably what he’s using.

http://danielwidrig.com

Dynamic Drawing

sketch


function setup() {
    createCanvas(450, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
	noCursor();
	
	fromBlue = color( 130, 255, 240);
    toBlue = color(85, 215, 255);
    backColor = lerpColor(fromBlue, toBlue, mouseX/mouseY);
    background(backColor);
	
	noStroke();
	
	
	fill(255, 255, 255);
	ellipse(mouseX-100, 100, 100, 30);
	ellipse(mouseX-100, 90, 50, 30);
	
	ellipse(mouseX+300, 75, 160, 60);
	ellipse(mouseX+300, 55, 80, 50)
	
	ellipse(mouseY-200, 230, 160, 60);
	ellipse(mouseY-200, 210, 80, 50);
	
	ellipse(mouseY, 150, 100, 30);
	ellipse(mouseY, 140, 50, 30);
	
	fill(0, 255, 200);
    fromBlue = color( 90, 255, 90);
    toBlue = color(40, 255, 190);
    blueColor = lerpColor(fromBlue, toBlue, mouseX/mouseY);
    fill(blueColor);
	ellipse(350, 400, 650, 350);
	
	fill(0, 255, 100);
	fromBlue = color( 40, 255, 60);
    toBlue = color(30, 255, 150);
    blueColor = lerpColor(fromBlue, toBlue, mouseX/mouseY);
    fill(blueColor);
	ellipse(100, 475, 625, 350);
	
	fill(0, 255, 0);
	fromBlue = color( 35, 250, 30);
    toBlue = color(20, 245, 140);
    blueColor = lerpColor(fromBlue, toBlue, mouseX/mouseY);
    fill(blueColor);
	ellipse(300, 550, 700, 350);
	

    stroke(220,200,220);
	strokeWeight(2);
	line(mouseX, mouseY+40, 125, 315);
	
	noStroke();
	
	
    fill(255, 0, 255);
    triangle(mouseX, mouseY, mouseX, mouseY-40, mouseX-30, mouseY);
	push();
	
	fill(255, 0, 255);
    triangle(mouseX, mouseY, mouseX, mouseY+40, mouseX+30, mouseY);
	
	fill(255, 0, 200);
    triangle(mouseX, mouseY, mouseX, mouseY+40, mouseX-30, mouseY);
	
	fill(255, 0, 200);
    triangle(mouseX, mouseY, mouseX, mouseY-40, mouseX+30, mouseY);
	
    stroke(40,100,200);
	strokeWeight(20)
	line(30, 450, 30, 550);
	
	stroke(40,100,200);
	strokeWeight(20);
	line(70, 450, 70, 550);
	
	noStroke();
	fill(40, 100, 200);
	ellipse(50, 450, 60, 30);
    rect(20, 380, 60, 70);
	rect(36,365,24,30);
	ellipse(48,350,50);
		 
    stroke(40,100,200);
	strokeWeight(15);
	line(70, 390, 125, 315);
	
	stroke(40,100,200);
	strokeWeight(15);
	line(22.5, 387.5, 1, 470);
	
	
	
	
	
    
	


}

LO-02 (generative art)

Nervous System is a design project by Jessica Rosenkrantz and Jesse Louis-Rosenberg that uses “generative systems, 3D printing, and webGL” to create different household and jewelry products. The randomly generated patterns they use are produced by 2 simulation systems Xylem and Hyphae. Xylem generates 2D patterns and was built using Processing while Hyphae generates 3D patterns and was built using C##. Through the software they produced, people are able to create their own variation of the patterns within a product they’re interested in and have it 3D printed. I like that they give people the opportunity to be more involved in the designing of their products. I also like that they drew inspiration from nature because they were able to create structurally and texturally unique patterns not normally seen in jewelry or home decor. The only critique I have for the products are that some of the products that they apply their patterns onto are fairly generic in form. The dresses they show as well and some of the lamps and cups have very simple silhouettes. It’d be interesting to see if they could make forms for those types of products that looked less uniform and more natural like the patterns.

Variable Face

sketch Download

// Simple beginning template for variable face.
var eyeWidth = 30;
var eyeLength = 38;
var faceWidth = 220;
var faceHeight = 180;
var earWidth = 50;
var inEar = 30
var noseWidth = 22;
var noseHeight = 9;
var blushWidth = 40;
var blushHeight = 21;
var snoutWidth = 73
var BlushR = 159;
var BlushG = 66;
var BlushB = 76;
var OutlineR = 106;
var OutlineG = 44;
var OutlineB = 76;
 
function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    background(180);
	
	//EARS
	fill(139, 94, 60);
	stroke(OutlineR, OutlineG, OutlineB);
	strokeWeight(4)
	var earLX = width / 2 - faceWidth * 0.3;
    var earRX = width / 2 + faceWidth * 0.3;
	var earHt = height / 2 - faceHeight * 0.4;
    ellipse(earLX, earHt, earWidth, earWidth);
    ellipse(earRX, earHt, earWidth, earWidth);
	
	fill(BlushR, BlushG, BlushB);
	stroke(OutlineR, OutlineG, OutlineB);
	strokeWeight(4)
	ellipse(earLX, earHt, inEar, inEar);
	ellipse(earRX, earHt, inEar, inEar);
    
	//FACE
	fill(139, 94, 60);
	stroke(OutlineR, OutlineG, OutlineB);
	strokeWeight(4)
	ellipse(width / 2, height / 2, faceWidth,  faceHeight); 


	//EYES
	stroke(OutlineR, OutlineG, OutlineB);
	strokeWeight(4)
	var eyeLX = width / 2 - faceWidth * 0.25; //EYE
    var eyeRX = width / 2 + faceWidth * 0.25;
    arc(eyeLX, height - 180, eyeWidth, eyeLength, radians(0),radians(180), OPEN);
	arc(eyeRX, height - 180, eyeWidth, eyeLength, radians(0),radians(180), OPEN);
    
	//SNOUT
	fill(169, 124, 80);
	noStroke();
	beginShape();
    vertex(width/2, width / 2 - faceWidth * 0.2);
    vertex(width / 2 + faceWidth * 0.2, width/2);
    vertex(width/2, width / 2 + faceWidth * 0.2);
    vertex(width / 2 - faceWidth * 0.2, width/2);
    endShape(CLOSE);
	
	//MOUTH
	stroke(OutlineR, OutlineG, OutlineB);
	strokeWeight(4)
	beginShape();
    vertex(width/2, height / 2 - faceHeight * 0.1);
	vertex(width/2, height / 2 + faceHeight * 0.02);
    vertex(width / 2 + faceWidth * 0.08, width / 2 + faceWidth * 0.05);
	endShape();
	beginShape();
    vertex(width/2, height / 2 - faceHeight * 0.1);
	vertex(width/2, height / 2 + faceHeight * 0.02);
    vertex(width / 2 - faceWidth * 0.08, width / 2 + faceWidth * 0.05);
	endShape();
	
	//NOSE
	fill(OutlineR, OutlineG, OutlineB);
	noStroke();
	var noseHt = height / 2 - faceHeight * 0.1;
	ellipse(width/ 2, noseHt, noseWidth, noseHeight);
	
	
	//BLUSH
	fill(BlushR, BlushG, BlushB);
	noStroke();
	var blushLx = width / 2 - faceWidth * 0.32;
	var blushRx = width / 2 + faceWidth * 0.32; 
	ellipse(blushLx, height - 150, blushWidth, blushHeight); 
	ellipse(blushRx, height - 150, blushWidth, blushHeight);
}
 
function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(130, 230);
    faceHeight = random(120, 200);
    eyeWidth = random(10, 30);
	eyeLength = random(10, 50);
	earWidth = random(40, 60);
	inEar = random(10, 30);
	noseWidth = random(22, 28);
	noseHeight = random(9,15);
	blushWidth = random(10,40);
	blushHeight = random(10,21);
	BlushR = random(140,180);
    BlushG = random(40,80);
    BlushB = random(60,80);
	OutlineR = random(0,200);
    OutlineG = random(0,200);
    OutlineB = random(0,200);
}

Author: laurel

Project-06-Abstract Clock

LO-06

Looking Outwards-05

Project-05-Wallpaper

Project-04-String Art: Maryland Flag

Looking Outward-04

Looking Outwards-03

Dynamic Drawing

LO-02 (generative art)

Variable Face