Gatini

Gatini.markdown

Gatini

A Pen by cybermarinella on CodePen.

License.

index.html

<script src="http://cdn.jsdelivr.net/p5.js/latest/p5.min.js"></script>

script.js

var radius = 115*2

function setup(){
  createCanvas(1024, 768);
  noStroke();
}

function draw(){
  background(13,13,15);
  //base();
  occhioDx();
  occhioSx();
  push();
  scale(0.6, 0.5);
  translate(width/2+40, height/2-10)
  palpebra_dx();
  translate(width/2+40, 0)
  palpebra_sx();
  sopraPalpebra()
  pop();
  maschera()
  nasino();
}

// maschera
function maschera(){
  noStroke();
  fill(13, 13, 15);
  triangle(100,0,width/2,height-200,width-100,0);
  triangle(0,0,width/2-50,0,0,height/2-10);
  triangle(width/2-50, 0, width, height/2-10, width,0);
  triangle(width/2,0,width/2+150,height-200,width/2-200,height-200);

}

//// occhi
function occhioDx(){
  push();
  limiteMovimento();
  iride();
  pop();
  //noStroke();
  stroke(255, 255, 255, 60);
  fill(255, 255, 255, 10);
  ellipse(width/2+270, height/2-50, radius+100, radius+125);
  fill(255)
  ellipse(width/2+320, height/2-50, 60, 60);
  ellipse(width/2+280, height/2, 20, 20);
}
function occhioSx(){
  push();
  limiteMovimento();
  translate(-width/2, 0);
  iride();
  pop();
   stroke(255, 255, 255, 60);
  fill(255, 255, 255, 10);
  ellipse(width/2-290, height/2-50, radius+100, radius+125);
  noStroke();
  fill(255);
  ellipse(width/2-220, height/2-50, 60, 60);
  ellipse(width/2-260, height/2, 20, 20);
}
//// palpebre 
function sopraPalpebra(){
  scale(1, 1.6);
  translate(width/2-520, -128)
  beginShape();
  vertex(width/2, height/2+150);
  fill(13,13,15);
  bezierVertex(300, 10, 900, 0,  width/2+510, height/2-80);
  bezierVertex(width/2+510, height/2-80,  600, 0, width/2+9, height-135-90);
  endShape(CLOSE);
  
  scale(-1, 1);
  translate(-width/2-40, 0)
  beginShape();
  vertex(width/2, height/2+150);
  //fill(13,13,15);
  bezierVertex(300, 10, 900, 0,  width/2+510, height/2-80);
  bezierVertex(width/2+510, height/2-80,  600, 0, width/2+9, height-135-90);
  endShape(CLOSE);
}
function palpebra_dx(){
  beginShape();
  vertex(width/2, height/2+80);
  noStroke();
  fill(5,5,5, 250)
  bezierVertex(450, 100, 900, 0,  width/2+510, height/2-80);
  bezierVertex(width/2+510, height/2-80,  mouseY+30, 0, width/2+9, height-135);
  endShape();
  beginShape();
  vertex(width/2, height/2-80);
  noStroke();
  fill(20,20,20, 250);
  bezierVertex(300, 10, 900, 0,  width/2+510, height/2-80);
  bezierVertex(width/2+510, height/2-80,  mouseY+30, 0, width/2+9, height-135-90);
  endShape();
}
function palpebra_sx(){
  scale(-1, 1);
  palpebra_dx();

}

/// limiteMovimento
function limiteMovimento(){
  var leftWall = width/2+180;
  var rightWall = width/2+300;
  var topWall = height/2-100;
  var bottomWall = height/2;
  stroke(150);
  /*line(leftWall, -height, leftWall, height);
  line(rightWall, -height, rightWall, height);
  line(-width, topWall, width, topWall);
  line(-width, bottomWall, width, bottomWall);*/
  var xc = constrain(mouseX+radius+50, leftWall, rightWall);
  var xm = constrain(mouseY, topWall, bottomWall);
  translate(xc, xm);

}
//// iride
function iride(){
  noStroke()
  fill(255, 240, 0);
  ellipse(0, 0, radius, radius);
  for (var i = 0; i < 40; i ++) {
    fill(0, 255, 0, 150);
    triangle(0, 0, 20, 30, 80, 70);
    fill(0, 255, 240, 60);
    triangle(0, 0, 60, 30, 60, 70);
    rotate(PI/20);
  }
  pupilla();
  
}
//// pupilla
function pupilla(){
  fill(0);
  ellipse(0, 0, radius-radius/1.5, radius-30);
}
//// puntoluce

function nasino(){
  
  strokeWeight(0.8);
  stroke(35,35,35);
  beginShape();
  fill(25,25,25);
line(512,648,552,640);
line(552,640,552,680);
line(552,680,512,648);

fill(13,13,13);
line(552,640,576,672);
line(576,672,552,680);
line(552,680,552,640);

fill(19,19,19);
line(552,640,576,640);
line(576,640,576,672);
line(576,672,552,640);

fill(25,25,25);
line(576,640,592,648);
line(592,648,576,672);
line(576,672,576,640);

fill(25,23,23);
line(592,648,600,664);
line(600,664,576,672);
line(576,672,592,648);

fill(25,25,25);
line(576,672,592,672);
line(592,672,600,664);
line(600,664,576,672);

fill(19,19,19);
line(512,648,512,720);
line(512,720,552,680);
line(552,680,512,648);

fill(25,25,25);
line(512,720,536,696);
line(536,696,536,720);
line(536,720,536,744);
line(536,744,512,720);

fill(25,25,25);
line(512,720,512,752);
line(512,752,536,744);
line(536,744,512,720);

fill(25,25,25);
line(512,752,536,744);
line(536,744,528,752);
line(528,752,512,752);

fill(25,25,25);
line(536,696,544,728);
line(544,728,536,744);
line(536,744,536,696);

fill(25,25,25);
line(512,648,472,640);
line(472,640,472,680);
line(472,680,512,648);

fill(13,13,13);
line(472,640,448,672);
line(448,672,472,680);
line(472,680,472,640);

fill(19,19,19);
line(472,640,448,640);
line(448,640,448,672);
line(448,672,472,640);

fill(25,25,25);
line(448,640,432,648);
line(432,648,448,672);
line(448,672,448,640);

fill(25,23,23);
line(432,648,424,664);
line(424,664,448,672);
line(448,672,432,648);

fill(25,25,25);
line(448,672,432,672);
line(432,672,424,664);
line(424,664,448,672);

fill(19,19,19);
line(512,648,512,720);
line(512,720,472,680);
line(472,680,512,648);

fill(19,19,19);
line(512,720,488,696);
line(488,696,488,720);
line(488,720,488,744);
line(488,744,512,720);

fill(19,19,19);
line(512,720,512,752);
line(512,752,488,744);
line(488,744,512,720);

fill(25,25,25);
line(512,752,488,744);
line(488,744,496,752);
line(496,752,512,752);

fill(25,25,25);
line(488,696,480,728);
line(480,728,488,744);
line(488,744,488,696);
  endShape();
}


function base(){

stroke(19,18,23);
  beginShape();
  fill(61,61,58);

stroke(19,18,23);
bezier(936,330,936,330,853,226,728,275);
bezier(728,275,613,320,628,486,628,486);
bezier(628,486,628,486,633,510,647,497);
bezier(647,497,651,493,660,449,663,452);
bezier(663,452,708,508,780,538,843,502);
bezier(843,502,946,442,936,330,936,330);

fill(214,232,122);
bezier(894,390,894,452,843,503,781,503);
bezier(781,503,718,503,667,452,667,390);
bezier(667,390,667,327,718,276,781,276);
bezier(781,276,843,276,894,327,894,390);

fill(1,1,1);
bezier(805,390,805,426,781,456,781,456);
bezier(781,456,781,456,756,426,756,390);
bezier(756,390,756,353,781,323,781,323);
bezier(781,323,781,323,805,353,805,390);


stroke(13,13,15);
bezier(839,496,743,552,656,432,656,432);
bezier(656,432,656,432,702,356,758,328);
bezier(758,328,832,289,926,336,926,336);
bezier(926,336,926,336,935,440,839,496);

fill(255,255,255);
bezier(839,375,839,389,827,400,813,400);
bezier(813,400,799,400,787,389,787,375);
bezier(787,375,787,360,799,349,813,349);
bezier(813,349,827,349,839,360,839,375);

fill(255,255,255);
bezier(765,399,765,403,761,407,757,407);
bezier(757,407,752,407,749,403,749,399);
bezier(749,399,749,394,752,390,757,390);
bezier(757,390,761,390,765,394,765,399);

  
  fill(61,61,58);
bezier(199,502,261,538,334,508,379,452);
bezier(379,452,382,449,391,493,395,497);
bezier(395,497,409,510,414,486,414,486);
bezier(414,486,414,486,429,320,314,275);
bezier(314,275,189,226,105,330,105,330);
bezier(105,330,105,330,96,442,199,502);

fill(214,232,122);
bezier(148,390,148,452,199,503,261,503);
bezier(261,503,324,503,375,452,375,390);
bezier(375,390,375,327,324,276,261,276);
bezier(261,276,199,276,148,327,148,390);

fill(1,1,1);
bezier(237,390,237,426,261,456,261,456);
bezier(261,456,261,456,286,426,286,390);
bezier(286,390,286,353,261,323,261,323);
bezier(261,323,261,323,237,353,237,390);


bezier(116,336,116,336,210,289,284,328);
bezier(284,328,340,356,386,432,386,432);
bezier(386,432,386,432,299,552,203,496);
bezier(203,496,107,440,116,336,116,336);

fill(255,255,255);
bezier(293,375,293,389,282,400,268,400);
bezier(268,400,254,400,242,389,242,375);
bezier(242,375,242,360,254,349,268,349);
bezier(268,349,282,349,293,360,293,375);

fill(255,255,255);
bezier(220,399,220,403,216,407,212,407);
bezier(212,407,207,407,203,403,203,399);
bezier(203,399,203,394,207,390,212,390);
bezier(212,390,216,390,220,394,220,399);



  endShape();
}