var canvaswidth = 640
var eyehx = 230
var eyehy = 270
var lidh = 255
var face = 0
var r=255
var g=255
var b=255

function setup() {
    createCanvas(canvaswidth, 510);
    background(220);
}

function draw() {

	background(r,g,b);

	//face
	strokeWeight(6)
	stroke(25)
	fill(229,149,95);
	ellipse(150,110,200,200); //left ear 
	ellipse(canvaswidth-150,110,200,200); //right ear
	fill(46,44,44);
	ellipse(150,110,120,120); //left ear inner
	ellipse(canvaswidth-150,110,120,120); //right ear inner
	fill(229,149,95); 
	ellipse(canvaswidth/2,270,500,450); //face
	noStroke();
	fill(242,219,140); 
	ellipse(canvaswidth/2,380,320,230); //mouth/chin

	//eyes
	fill(37,37,41)
	ellipse(220,280,60,60); // left eye
	ellipse(canvaswidth-220,280,60,60); // right eye
	fill(255,255,240);
	ellipse(eyehx,eyehy,20,20); // left eye highlight
	ellipse(canvaswidth-eyehx+20,eyehy,20,20); // right eye highlight

	//eyelids
	stroke(229,149,95); 
	strokeWeight(20);
	line(180,255,256,lidh); // left 
	line(canvaswidth-180,255,canvaswidth-256,lidh); // right



	//moon
	noStroke()
	fill(242,229,196);
	ellipse(canvaswidth/2,180,230,200);
	fill(229,149,95);
	ellipse(canvaswidth/2+40,180,175,143);


    //mouth
	if (face == 0){
		stroke(25);
		line(270,400,canvaswidth-270,400); //flat line
	} else if (face == 1){
		stroke(25);
		strokeWeight(6)
		fill(240,184,163)
		ellipse(canvaswidth/2,400,120,70);
		noStroke();
		fill(230,154,143);
		ellipse(320, 414,96,50);
		noFill();
		stroke(25);
		ellipse(canvaswidth/2,400,120,70); //mouth open


	} else if (face == 2){
		stroke(25);
		strokeWeight(22);
		line(270,440,canvaswidth/2,400);
		line(canvaswidth-270,440,canvaswidth/2,400); //upset
	}
}


function mousePressed() {
	lidh = random(218,264);
	r = random(0,255);
	g = random(0, 255);
	b = random(0, 255);
	if (face == 2){
		face = 0;
	} else {
		face += 1;
	}
	


}

//Julia Steinweh-Adler
//Section D

//Global Variables

var eyesSize = 20
var headWidth = 150;
var eyeWidth= 40;
var mouthSize = 30;
var mouthWidth = 30;
var pupil=20;
var smallX = 600/2    //canvas width divided by 2  
var smallY = 480/2    //canvas height divided by 2
var largeX = 600/3.5   //canvas width divided by 3.5  
var largeY = 480/3.5   //canvas height divided by 3.5
var pupilAngle = 300
var nostrilWidth = 5
var nostrilHeight = 6

    //Water Ripple Dot Background values
var spot = {    //coordinates
    x:100,
    y: 50,
};

var col = {    //color values
    r:0,
    g:0,
    b:255,
};

function setup() {
    createCanvas(600, 480);
    angleMode(DEGREES);    //Change angle mode to degrees to make arcs easier
    frameRate(2)    //Change framerate to 2 frames per second
  
}
  function draw() {
    noStroke();

//BACKGROUND
    background(49, 30, 220); //Light Blue
    
    
    //Water Ripple Dot Pattern Background
    spot.x= random (0, width);
    spot.y= random (0, height);

    noStroke();
    col.r = random (0);
    col.g = (0);
    col.b = random (100, 200);
    
    fill (col.r, col.g, col.b, 120);
    ellipse (spot.x, spot.y, 1600, 400);    //Change dot dimensions and coordinates
    
    //Water Ripple
    stroke(60, 30, 220);
    strokeWeight(4);
    noFill();
    ellipse(smallX, smallY-90, 200, 100)
    ellipse(smallX, smallY-90, 250, 120)

    
//FROG
    //Face
    noStroke();
    fill(44, 94, 76); // Face Color, Green
    arc(smallX, smallY - 90, headWidth, 80, 0, 180, PIE);    //Head top arc
    arc(smallX, smallY - 89, headWidth, 100, 180, 0, PIE);   //Head bottom arc
    circle(smallX+50, smallY-125, eyesSize+10);    //right eyelid
    circle(smallX-50, smallY-125, eyesSize+10);    //left eyelid
      
    //Eyeball
    fill(124, 84, 30);     //Brown eyeball color
    arc(smallX + 50, smallY-125, eyesSize, eyesSize, 210, 120, CHORD);    //right eye arc
    arc(smallX - 50, smallY-125, eyesSize, eyesSize, 60, 330, CHORD);    //left eye arc
    
    //Eye Pupil   
    fill(0);     //Black pupil
    stroke(204, 168, 18);    //Change stroke to yellow
    strokeWeight(2);
    arc(smallX + 50, smallY-125, eyesSize, eyesSize, pupilAngle, pupilAngle-255, PIE);    // right eye pupil
    arc(smallX - 50, smallY-125, eyesSize, eyesSize, (-pupilAngle)+435,(-pupilAngle)+540, PIE);    //left eye pupil
    
    //Nostril
    noStroke();
    ellipse(smallX + 10, smallY - 90, nostrilWidth, nostrilHeight)    //Right Nostril
    ellipse(smallX - 10, smallY - 90, nostrilWidth, nostrilHeight)    //Left Nostril   
    
    
    //Mouth
    noStroke();
    fill(109, 165, 144); //top lip color, Green (same as face to integrate shape)
    arc(smallX, smallY-70, mouthWidth, mouthSize, 0, 180, PIE);    //top lip arc 
    fill(44, 94, 76);    //mouth color, light green
    arc(smallX, (smallY)-75, mouthWidth, mouthSize, 0, 180, PIE);    //mouth arc
    
    
//Foreground Grass
    beginShape();
    fill(10,60,4);
    vertex(0,height);
    vertex(width*1/24,height*3/4);//peak 1
    vertex(width*2/24,height*1/2);
    vertex(width*3/24,height*5/9);//peak 2
    vertex(width*4/24,height*27/32);
    vertex(width*5/24,height*3/4);//peak 3
    vertex(width*6/24,height*29/32);
    vertex(width*7/24,height*2/3);//peak 4
    vertex(width*8/24,height);
    vertex(width*9/24,height*1/2);//peak 5
    vertex(width*10/24,height*30/32);
    vertex(width*11/24,height*5/9);//peak 6
    vertex(width*12/24,height*27/32);
    vertex(width*13/24,height*3/4);//peak 7
    vertex(width*14/24,height*29/32);
    vertex(width*15/24,height*2/3);//peak 8
    vertex(width*16/24,height);
    vertex(width*17/24,height*2/3);//peak 9
    vertex(width*18/24,height*29/32);
    vertex(width*19/24,height*3/4);//peak 10
    vertex(width*20/24,height*30/32);
    vertex(width*21/24,height*5/9);//peak 11
    vertex(width*22/24,height*27/32);
    vertex(width*23/24,height*3/4);//peak 12
    vertex(width,height);
  endShape();
}



function mousePressed() {
    smallX = random(100,500);
    smallY = random(280,310);
    largeX = random(190, 200);
    largeY = random(140,150);
    headWidth = random(130, 170);
    pupilAngle = random(250,350);
    mouthWidth = random(60, 100)
    eyesSize = random(30, 50);
    mouth = random(2,5);
    nostrilWidth = random(4,15);
    nostrilHeight = random(4,15)
}

var eyeSize = 10;
var foreheadWidth = 200;
var foreheadHeight = 100;
var cheekWidth = 300;
var cheekHeight = 120;
var chinWidth = 30;
var chinHeight = 30;
var mouthWidth = 120;
var mouthHeight = 3;
var hairColor = 0;
var earSize = 57;
var fill = 67;
var noseWidth = 20;
var noseHeight = 15;
var eyebrowAngle = 0; //shifts eyebrow up and down to create expressions

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

function draw() {
	noFill();
	stroke(random(0,255),random(0,255),random(0,255));
	strokeWeight(1);
	circle(random(0,480),random(0,640),random(40,500)); //hypnotic background generator
	circle(random(0,480),random(0,640),random(40,500)); //repetition to increase speed of generator
	var foreheadY = height/2 - (cheekHeight/2);
	var chinY = height/2 + (cheekHeight/2);
	noStroke();
	fill(255,223,64);
	beginShape(); // yellow 
	    vertex(width/2, chinY + 10);
	    curveVertex(width/2 + 150, chinY + 40);
	    curveVertex(width/2 + 220, height);
	    vertex(width/2, height);
	endShape(CLOSE);
	fill(161,156,35,100);
	beginShape(); // yellow cloak shaodw 
	    vertex(width/2, chinY + 15);
	    curveVertex(width/2 + 148, chinY + 43);
	    curveVertex(width/2 + 218, height);
	    vertex(width/2, height);
	endShape(CLOSE);
    fill(207,165,93); 
	beginShape(); //body
	    vertex((width/2-chinWidth/2) -10,height/2 + (cheekHeight/2) - (chinHeight/2) + cheekHeight*.75);
        curveVertex(width - 100, height/2 + (cheekHeight/2) - (chinHeight/2) + cheekHeight*.75);
        vertex(width - 50, height);
    endShape(CLOSE);
	fill(225,204,115);
	ellipse(width/2 - foreheadWidth/2,foreheadY + 20,earSize*1.5,earSize); //left ear
	ellipse(width/2 + foreheadWidth/2,foreheadY + 20,earSize*1.5,earSize); //right ear
	fill(hairColor);
    circle(width/2, foreheadY,foreheadWidth + 25); //hair
	fill(207,165,93);
	rect((width/2-chinWidth/2) -10, height/2 + (cheekHeight/2) - (chinHeight/2), chinWidth + 20, cheekHeight*.75); //neck
	fill(225,204,115);
    ellipse(width/2, foreheadY, foreheadWidth, foreheadHeight); //forehead
    ellipse(width/2, height/2, cheekWidth, cheekHeight); //cheeks
    fill(179,30,90,100);
    circle(width/2 - (cheekWidth/4 + 10), height/2, cheekWidth/8); //left rosy cheek
    circle(width/2 + (cheekWidth/4+ 10), height/2, cheekWidth/8); //right rosy cheek
    var eyeposLX = (width/2 - foreheadWidth/4);
    var eyeposRX = (width/2 + foreheadWidth/4);
    var eyeposY = (height/2 - foreheadHeight/2);
    fill(0);
    circle(eyeposLX,eyeposY,eyeSize); //left eye
    circle(eyeposRX,eyeposY,eyeSize); //right eye
    fill(200,60,20);
    beginShape(); //monk robe
        vertex(0,height);
        curveVertex(width*.25,height*.6875);
        curveVertex(width/2, chinY + 20);
        vertex(width - 50, height - 20);
        vertex(width - 40, height);
    endShape(CLOSE);
    fill(105,40,30,150);
    triangle(0,height, width*.25, height*.6875, width*.25 + -70, height); //red cloak shadow
    triangle(width*.25 + 40,(height*.6875) +30, width*.25 + 20, height, width*.25 - 20, height); //red cloak shadow
    triangle(width*.25 + 70, height, width*.25 + 80,(height*.6875) + 25, width*.25 + 170, height);
    triangle(width*.25 + 230, height, width*.25 + 195, height - 100, width*.25 + 300, height); 
    fill(225,204,115);
    ellipse(width/2, height/2 + (cheekHeight/2), chinWidth, chinHeight); //chin
    fill(0);
    ellipse(width/2,height/2 + cheekHeight/4 ,mouthWidth,mouthHeight); //mouth
    fill(135,108,61);
    beginShape(); //nose
        vertex(width/2 - noseWidth, height/2 - 10);
        curveVertex(width/2, height/2);
        vertex(width/2 + noseWidth, height/2 - 10);
        curveVertex(width/2, height/2 + noseHeight);
    endShape(CLOSE);
    stroke(0);
    noFill();
    strokeWeight(5);
    line(eyeposLX - 10, eyeposY - 15, eyeposLX + 20, (eyeposY - 15) + eyebrowAngle); //left eyebrow
    line(eyeposRX - 20, (eyeposY - 15) + eyebrowAngle, eyeposRX + 10, eyeposY - 15); //right eyebrow
}

function mousePressed() {
	cheekWidth = random(200, 325);
	cheekHeight = random(120,200);
	foreheadWidth = random(150, (cheekWidth - 100));
	foreheadHeight = random(80, (cheekHeight/2));
	chinWidth = random(30,80);
	chinHeight = random(30,70);
	mouthHeight = random(1,30);
	mouthWidth = random (40, cheekWidth/2);
	background(random(0,255),random(0,255),random(0,255));
	hairColor = random(0,250);
	earSize = random(40, 70);
	noseWidth = random(10,30);
	noseWidth = random(10,40);
	eyebrowAngle = random(-10,20);
	eyeSize = random(10,20);
}

var eyeSize = 20;
var faceWidth = 300;
var faceHeight = 400;
var eyecolor = 0;
var colorRed= 0;
var colorGreen = 0;
var colorBlue = 0;

var hairWidth= 400;
var hairHeight= 600;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(180);

    fill(0);
    stroke(0);
    rect(width/6, height/20, hairWidth, hairHeight); // black hair rect. behind



    fill(246,215,196); // head color
    stroke(246,215,196) 
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);

    fill(0);
    stroke(0);
    triangle(120,25, 500,220,500,25); // side bang


    //EYES VARIABLES
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;

    //2 eye dots
    fill(eyecolor);
    stroke(eyecolor);
    ellipse(eyeLX, height / 2.3, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2.3, eyeSize, eyeSize);

    //eye highlight
    fill (255);
    stroke(255);
    strokeWeight(10);
    ellipse(eyeLX, height/2.35, 1, 1);
    ellipse(eyeRX, height/2.35, 1,1);

    fill(colorRed, colorGreen, colorBlue);
    stroke(colorRed, colorGreen, colorBlue);
    line(eyeLX, height/1.6, eyeRX, height/1.6);

    noFill();
    beginShape();


    curveVertex(eyeLX, height/1.6);
    curveVertex(eyeLX, height/1.6);
    curveVertex(eyeLX+ 40, height/1.35);
    curveVertex(width/2, height/1.3);
    curveVertex(eyeRX- 40, height/1.35);
    curveVertex(eyeRX, height/1.6);
    curveVertex(eyeRX, height/1.6);

    endShape();


}
 
function mousePressed() {
    faceWidth = random(250, 300);
    faceHeight = random(350, 400);
    eyeSize = random(10, 30);
    hairWidth = random (400,450);
    hairHeight = random (600,650);
    eyecolor = random (0,200);
    colorRed = random (0,255);
    colorGreen = random (0,255);
    colorBlue = random (0,255);
}

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

function draw() {
	var w = random(100, 400)
	var h = random(100, 500)
	var eyeWidth = random(10, 50)
	var eyeHeight = random(10, 60)
	var eyeBrow = random(300 - 2*eyeHeight, 320 - 2*eyeHeight)
    background(45);
    fill(190);
    ellipse(240, 320, w, h); //head
    fill(255);
    ellipse(240 - eyeWidth, 320 - eyeHeight, eyeWidth, eyeHeight); //left eye
    ellipse(240 + eyeWidth, 320 - eyeHeight, eyeWidth, eyeHeight); //right eye
    var x = 240 - eyeWidth/2
    var y = 320 - 2*eyeHeight
    var n = 240 + eyeWidth/2
    strokeWeight(4)
    line(x, y, x - eyeWidth, eyeBrow) //left eyebrow
    line(n, y, n + eyeWidth, eyeBrow) //right eyebrow
    if (y > 250) {
    	noFill()
    	stroke(247, 18, 18)
    	strokeWeight(1)
        circle(x - 15, y, 10)
    } else {
    	noFill()
    	stroke(247, 18, 18)
    	strokeWeight(1)
    	circle(n + 15, y, 10)
    }
    noLoop()
}

var eyeSize = 20;
var eyebrowWidth = 40;
var eyebrowHeight = 10; 
var eyeLX = 80;
var eyeRX = 215;
var eyeHeight = 100;
var blushLX = 80;
var blushRX = 215;
var blushY = 138;
var blushWidth = 65;
var blushHeight = 20;
var mouthLX = 110;
var mouthRX = 178;
var mouthY = 175;
var R = 250;
var G = 100;
var B = 60;
 
function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    background(R, G, B);
    strokeWeight(5);
    point(280, 70);
    point(150, 40);
    point(50, 60);
    point(35, 100);
    point(20, 150);
    point(90, 260);
    point(180, 255);
    point(250, 270);
    strokeWeight(1);

    noFill();
    beginShape();
    curveVertex(250, 270);
    curveVertex(250, 270);
    curveVertex(280, 70);
    curveVertex(150, 40);
    curveVertex(50, 60);
    curveVertex(35, 100);
    curveVertex(20, 150);
    curveVertex(90, 260);
    curveVertex(180, 255);
    curveVertex(250, 270);
    curveVertex(250, 270);

    endShape(); //shape of the face
    fill(139, 69, 19);
    ellipse(80, 85, eyebrowWidth, eyebrowHeight);
    fill(139, 69, 19);
    ellipse(215, 85, eyebrowWidth, eyebrowHeight); //eyebrow
    fill(0, 0, 0);
    circle(eyeLX, eyeHeight, eyeSize);
    fill(0, 0, 0);
    circle(eyeRX, eyeHeight, eyeSize); //eyes
    fill(250, 128, 114);
    ellipse(blushLX, blushY, blushWidth, blushHeight);
    fill(250, 128, 114);
    ellipse(blushRX, blushY, blushWidth, blushHeight); //blushes
    strokeWeight(5);
    point(mouthLX, mouthY);
    point(148, 200);
    point(mouthRX, mouthY);
    strokeWeight(1);

    noFill();
    beginShape();
    curveVertex(mouthLX, mouthY);
    curveVertex(mouthLX, mouthY);
    curveVertex(148, 200);
    curveVertex(mouthRX, mouthY);
    curveVertex(mouthRX, mouthY);
    endShape(); //mouth
}
 
function mousePressed() {
    eyeSize = random(10, 20);
    eyebrowWidth = random(25, 45);
    eyebrowHeight = random(5, 15); 
    eyeLX = random(60, 80);
    eyeRX = random(200, 220);
    eyeHeight = random(100, 115);
    blushLX = random(70, 95);
    blushRX = random(205, 225);
    blushY = random(130, 140);
    blushWidth = random(30, 70);
    blushHeight = random(20, 35);
    mouthLX = random(100, 140);
    mouthRX = random(170, 210);
    mouthY = random(170, 250); 
    R = color(random(0,255),random(0,255),random(0,255));
    G = color(random(0,255),random(0,255),random(0,255));
    B = color(random(0,255),random(0,255),random(0,255));
    
}

var bodyWidth = 270;
var bodyHeight = 340;
var eyeWidth = 11;
var eyeHeight = 12;
var mouthWidth = 20;
var mouthHeight = 10;
var armLY = 290
var armRY = 280
var legLX = 250
var legRX = 350
var backgroundR = 243;
var backgroundG = 127;
var backgroundB = 135;


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

function draw() {
    background(backgroundR, backgroundG, backgroundB);

    //left arm
    stroke(169, 124, 80);
    line(width/2-200, armRY, width/2, height/2);
    //right arm
    stroke(169, 124, 80);
    line(width/2, height/2+20, width/2+200, armLY);

    //left leg
    stroke(169, 124, 80);
    line(legLX, height/2+200, width/2, height/2);
    //right leg
    stroke(169, 124, 80);
    line(width/2, height/2, legRX, height/2+200);

    //body shape back
    fill(134, 197, 74);
    stroke(30, 69, 37);
    strokeWeight(15);
    ellipse(width/2, height/2, bodyWidth, bodyHeight);
    //body shape front
    noStroke()
    fill(201, 221, 101)
    ellipse(width/2, height/2, bodyWidth-30, bodyHeight-30);

    //seed
    fill(169, 124, 80);
    circle(width/2, height/2+50, 150);

    //eyes
    fill(0)
    var eyeLX = width/2 - bodyWidth*0.15;
    var eyeRX = width/2 + bodyWidth*0.15;
    ellipse(eyeLX, height/2.45, eyeWidth, eyeHeight); //left eye
    ellipse(eyeRX, height/2.45, eyeWidth, eyeHeight); //right eye
    
    //mouth
    var mouthY = height/2 - bodyHeight*0.13
    if (eyeWidth > eyeHeight) {
        arc(width/2, mouthY, mouthWidth, mouthHeight, PI, 2*PI);
    }
    else {
        fill(247, 165, 170)
        arc(width/2, mouthY, mouthWidth, mouthHeight, 2*PI, PI);
    }
}
function mousePressed() {
    bodyWidth = random(220, 345);
    bodyHeight = random(300, 370);
    eyeWidth = random(7, 20);
    eyeHeight = random(6, 20);
    mouthWidth = random(20, 30);
    mouthHeight = random(10, 50);
    armLY = random(280, 360);
    armRY = random(210, 320);
    legLX = random(220, 270);
    legRX = random(320, 370);
    backgroundR = random(180, 270);
    backgroundG = random(130, 200);
    backgroundB = random(135, 160);
}