Gatini_programmatora

Gatini_programmatora.markdown

Gatini_programmatora

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
var ludino = 13;
var milla = 215;
var gaetano = 230;

var gatino = ludino;

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

function draw(){

  if( mouseX <= width/3.33){
    var gatino = milla;
  }else if(mouseX <= width/3.33*2){
    var gatino = ludino;
  }else{
    var gatino = gaetano;
  } /// i know this is worst but how to do it?

  background(gatino);
  occhioDx();
  occhioSx();
  push();
  scale(0.6, 0.5);
  translate(width/2+40, height/2-10)
  palpebra_dx();
  palpebra_sx();
  sopraPalpebraDx();
  sopraPalpebraSx();
  pop();
  maschera()
  nasino();
  micetto()
  
  function micetto(){
  if( gatino == ludino){
  }else if( gatino == milla){
    drawMilla()
  }else{
    drawGaetanoX2()
  }
}
}

// maschera
function maschera(){
  if( mouseX <= width/3.33){
    var gatino = milla;
  }else if(mouseX <= width/3.33*2){
    var gatino = ludino;
 }else{
    var gatino = gaetano;
  } /// i know this is worst but how to do it?
  
  noStroke();
  fill(gatino);
  triangle(0,0,width/2, height/1.618, width,0);
  triangle(width/2,0,width/2+200,height-200,width/2-200,height-200);
  triangle(width/2,0,width, height/2+10, width,0);
  triangle(0,0,0, height/2+10, width/2,0);
  //drawLucine()
}
//// occhi
function occhioDx(){
  push();
  limiteMovimento();
  iride();
  pop();
}
function occhioSx(){
  push();
  translate(-width/2, 0)
  occhioDx()
  pop();
}
//// palpebre 
function sopraPalpebraDx(){
  if( mouseX <= width/3.33){
    var gatino = milla;
  }else if(mouseX <= width/3.33*2){
    var gatino = ludino;
 }else{
    var gatino = gaetano;
  } /// i know this is worst but how to do it?
  push();
  scale(1, 1.7);
  translate(width/2-510, -128)
  beginShape();
  vertex(width/2, height/2+150);
  fill(gatino);
  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);
  pop();
}
function sopraPalpebraSx(){
  scale(-1, 1);
  translate(-width/2-90, 0)
  sopraPalpebraDx();

}
function palpebra_dx(){
  if( mouseX <= width/3.33){
    var gatino = milla;
  }else if(mouseX <= width/3.33*2){
    var gatino = ludino;
 }else{
    var gatino = gaetano;
  } /// i know this is worst but how to do it?
  beginShape();
  vertex(width/2, height/2+80);
  noStroke();
  fill(5,5,5, 250)
  bezierVertex(450, 100, 900, 0,  width/2+510, height/2-80);
  var maxY = constrain(mouseY+200, 600, height);
  bezierVertex(width/2+510, height/2-80,  maxY, 0, width/2+9, height-135);
  endShape();
  beginShape();
  vertex(width/2, height/2-80);
  noStroke();
  if(gatino==gaetano){
    fill(50);
  }else{
    fill(gatino+5);
  }
  
  bezierVertex(300, 10, 900, 0,  width/2+510, height/2-80);
  bezierVertex(width/2+510, height/2-80,  maxY, 0, width/2+9, height-135-90);
  endShape();
}
function palpebra_sx(){
  scale(-1, 1);
  translate(-width/2-90, 0)
  palpebra_dx();
}
/// limiteMovimento
function limiteMovimento(){
  var leftWall = width/2+190;
  var rightWall = width/2+320;
  var topWall = height/2-100;
  var bottomWall = height/2;
  stroke(150, 0, 0);
  /*line(-width, topWall+10, width, topWall);
  line(-width, bottomWall, width, bottomWall);
  line(leftWall, -height, leftWall, height);
  line(rightWall, -height, rightWall, height);*/

  var xc = constrain(mouseX+radius, leftWall, rightWall);
  var xm = constrain(mouseY, topWall+10, bottomWall);
  translate(xc, xm);

}
//// iride
function iride(){
  noStroke()
  
  fill(255, 200, 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, mouseX, mouseY, 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);
}

function nasino(){
  if( mouseX <= width/3.33){
    var gatino = milla;
  }else if(mouseX <= width/3.33*2){
    var gatino = ludino;
 }else{
    var gatino = gaetano;
  } /// i know this is worst but how to do it?
  
  strokeWeight(1);
  if(gatino == ludino){
    stroke(35,35,35);
  }else{
    stroke(255,90,145);
  }

  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 drawLucine(){
  noStroke();
  fill(255);
  ellipse(width/2+320, height/2-50, 60, 60);
  ellipse(width/2+280, height/2, 20, 20);
}
function drawGaetano(){
  beginShape();
  
line(525,200,558,184);
line(558,184,526,167);
line(526,167,525,200);

line(558,184,583,160);
line(583,160,526,167);
line(526,167,558,184);

line(558,184,551,264);
line(551,264,525,200);
line(525,200,558,184);

line(551,264,575,304);
line(575,304,607,248);
line(607,248,551,264);

line(575,304,607,336);
line(607,336,639,280);
line(639,280,575,304);

line(607,336,639,368);
line(639,368,663,320);
line(663,320,607,336);

line(638,367,667,399);
line(667,399,663,320);
line(663,320,638,367);

line(685,353,708,314);
line(708,314,687,312);
line(687,312,685,353);

line(708,314,734,281);
line(734,281,725,272);
line(725,272,708,314);

line(781,260,734,281);
line(734,281,765,256);
line(765,256,781,260);

line(781,260,826,259);
line(826,259,823,240);
line(823,240,781,260);

line(871,275,871,257);
line(871,257,826,259);
line(826,259,871,275);


line(871,275,897,290);
line(897,290,909,264);
line(909,264,871,275);

line(897,290,943,280);
line(943,280,916,304);
line(916,304,897,290);

line(916,304,959,296);
line(959,296,932,320);
line(932,320,916,304);

line(932,320,991,304);
line(991,304,940,336);
line(940,336,932,320);

line(940,336,945,358);
line(945,358,974,344);
line(974,344,940,336);

line(945,360,943,387);
line(943,387,983,387);
line(983,387,945,360);

line(943,386,928,419);
line(928,419,975,417);
line(975,417,943,386);

line(928,420,903,457);
line(903,457,951,457);
line(951,457,928,420);

line(903,457,879,480);
line(879,480,927,488);
line(927,488,903,457);

line(879,480,856,498);
line(856,498,895,512);
line(895,512,879,480);

line(725,272,765,256);
line(765,256,734,281);
line(734,281,725,272);

line(766,256,823,240);
line(823,240,781,260);
line(781,260,766,256);

line(823,240,871,256);
line(871,256,826,259);
line(826,259,823,240);

line(871,256,910,264);

line(909,264,942,280);
line(942,280,897,290);
line(897,290,909,264);

line(943,280,959,296);
line(959,296,916,304);
line(916,304,943,280);

line(932,320,959,296);
line(959,296,991,304);

line(686,312,663,240);
line(663,240,662,320);
line(662,320,686,312);

line(662,320,663,240);
line(663,240,639,280);
line(639,280,662,320);

line(639,280,607,248);
line(607,248,663,240);
line(663,240,639,280);

line(558,184,663,240);
line(663,240,607,248);
line(607,248,558,184);

line(663,240,726,272);
line(726,272,686,312);
line(686,312,663,240);

line(726,272,735,216);
line(735,216,766,256);
line(766,256,726,272);

line(663,240,735,216);
line(735,216,671,168);
line(671,168,663,240);

line(766,256,768,247);
line(768,247,783,192);
line(783,192,823,240);
line(823,240,766,256);

line(783,192,735,216);
line(735,216,743,144);
line(743,144,783,192);

line(823,240,855,176);
line(855,176,871,256);
line(871,256,823,240);

line(871,256,919,192);
line(919,192,910,264);
line(910,264,871,256);

line(910,264,967,224);
line(967,224,943,280);
line(943,280,910,264);

line(943,280,991,264);
line(991,264,959,296);
line(959,296,943,280);

line(895,515,927,491);
line(927,491,935,515);
line(935,515,895,515);

line(935,515,927,530);
line(927,530,895,515);
line(895,515,935,515);

line(932,512,964,512);
line(964,512,964,536);
line(964,536,932,512);

line(927,528,966,536);
line(966,536,934,512);
line(934,512,927,528);

line(963,536,996,544);
line(996,544,996,512);
line(996,512,963,536);

line(996,544,1023,552);
line(1023,552,996,512);
line(996,512,996,544);

line(1023,552,1023,506);
line(1023,506,994,512);
line(994,512,1023,552);

line(966,515,998,515);
line(998,515,951,459);
line(951,459,966,515);

line(927,488,951,456);
line(951,456,966,512);
line(966,512,927,488);

line(951,456,975,416);
line(975,416,1007,464);
line(1007,464,951,456);

line(998,512,1007,464);
line(1007,464,951,456);
line(951,456,998,512);

line(1007,464,1024,506);
line(1024,506,998,512);
line(998,512,1007,464);

line(1004,464,1023,455);
line(1023,455,1023,506);
line(1023,506,1004,464);

line(975,416,1024,455);
line(1024,455,1015,384);
line(1015,384,975,416);

line(983,384,975,416);
line(975,416,1015,384);
line(1015,384,983,384);

line(983,384,975,344);
line(975,344,1015,384);
line(1015,384,983,384);

line(1015,384,1024,341);
line(1024,341,975,344);
line(975,344,1015,384);

line(991,304,975,344);
line(975,344,1024,341);
line(1024,341,991,304);

line(988,304,1023,274);
line(1023,274,988,264);
line(988,264,988,304);

line(990,264,967,224);
line(967,224,1007,208);
line(1007,208,990,264);

line(1004,208,1023,274);
line(1023,274,1023,196);
line(1023,196,1004,208);

line(967,224,919,192);
line(919,192,975,160);
line(975,160,967,224);

line(919,192,855,176);
line(855,176,879,120);
line(879,120,919,192);

line(855,176,783,192);
line(783,192,807,128);
line(807,128,855,176);


line(583,160,607,208);
line(607,208,671,168);
line(671,168,583,160);

line(583,160,591,104);
line(591,104,671,168);
line(671,168,583,160);

line(671,168,743,144);
line(743,144,687,88);
line(687,88,671,168);

line(687,88,591,104);
line(591,104,655,48);
line(655,48,687,88);

line(687,88,807,128);
line(807,128,743,144);
line(743,144,687,88);

line(807,128,879,120);
line(879,120,831,64);
line(831,64,807,128);

line(879,120,975,160);
line(975,160,943,87);
line(943,87,879,120);

line(970,134,1023,196);
line(1023,196,1023,82);
line(1023,82,970,134);

line(687,88,831,64);
line(831,64,751,24);
line(751,24,687,88);

line(831,64,943,87);
line(943,87,919,40);
line(919,40,831,64);

line(943,87,1024,110);
line(1024,110,983,56);
line(983,56,943,87);

line(591,104,526,167);
line(526,167,567,88);
line(567,88,591,104);

line(567,88,655,48);
line(655,48,511,0);
line(511,0,567,88);

line(655,48,693,0);
line(693,0,751,24);
line(751,24,655,48);

line(751,24,784,0);
line(784,0,831,64);
line(831,64,751,24);

line(838,3,831,67);
line(831,67,916,3);
line(916,3,838,3);

line(916,0,919,40);
line(919,40,983,56);
line(983,56,916,0);

line(983,56,1024,0);
line(1024,0,916,0);
line(916,0,983,56);

line(662,320,685,353);
line(685,353,667,399);
line(667,399,662,320);

line(526,167,505,45);

line(505,44,567,88);
line(567,88,511,0);
line(511,0,505,44);
  endShape();
}
function drawGaetanoX2(){
  stroke(ludino*2);
  push();
  drawGaetano();
  scale(-1, 1);
  translate(-width, 0)
  drawGaetano();
  pop()
}
function drawMilla(){
  noFill();
  fill(219, 182, 117);
  stroke(219, 182, 117);
  ellipse(width, 0, 600, 600)
}

style.css

canvas{
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-512px;
  margin-top:-484px;
}