​

let img;

​

function setup() {

  createCanvas(400, 400);

  noStroke();

  dim = width;

  frameRate(50);

  img = loadImage('eyes.png');

}

​

function draw() {

  let bg = random (0,100);

  background(79,144,219);

  for (var x = 0; x <= width; x+=dim) {

    drawGradient(x, height/2);

  } 

​

​

  //background gradient effect

  function drawGradient(x, y) {

  var radius = dim/2;

  var h = random(0, 360);

  for (r = radius; r > 0; --r) {

    fill(h, 214, 79);

    ellipse(x, y, r, r);

    h = (h + 1) % 360;

  }

  //define color

  b1 = color(253,153,167); //body

  b2 = color(235,104,150); //cheek

  c1 = color(8, 19, 255); //eye blue

  c2 = color(0); //eye black

  d1 = color(105,19,0); //mouth

  d2 = color(160,21,0); //tongue

  //body

  let bodyWidth = 330;

  noStroke()

  fill(b1)

  circle(height/2, width/2, bodyWidth)

  //define eyes size

  let eyeWidth = 34;

  let eyeHeight = 61;

  //eyes

  noStroke()

  fill(0)

  ellipse(156,98,eyeWidth,eyeHeight)

  ellipse(243,98,eyeWidth,eyeHeight)

  //eye gradient image

  image(img, 139,66);

  image(img, 225,66);

  //define eyelight position and size

  let lightSize = random(eyeWidth/3,eyeHeight/2.3)

 //eye highlight

  fill(255)

  circle(156,83,lightSize) 

  circle(243,83,lightSize) 

  //define cheek size

  let cheekSize = random(bodyWidth/10, bodyWidth/4);

  //cheek

  noStroke()

  fill(b2)

  //ellipse(99,143,53.5,25.4)

  //ellipse(305,143,53.5,25.4)

  ellipse(99,143,cheekSize,25.4)

  ellipse(305,143,cheekSize,25.4)

  //define mouth position and size

  let mouthWidth = mouseX/1.8+50

  let mouthHeight = mouseY/1.8+80

  let mouthPositionX = 200;

  let mouthPositionY = 245.8;

  let mouthSize = random(bodyWidth/10, bodyWidth/4);

​

  //mouth

  noStroke()

  fill(d1)

  //ellipse(200,245.8,157,217.6)

  ellipse(mouthPositionX,mouthPositionY,mouthWidth,mouthHeight)

  //define tongue position and size

  let tongueWidth = mouseX/3+20;

  let tongueHeight = mouseY/3+20;

  let tonguePositionX = 200;

  let tonguePositionY = 265;

  //tongue

  noStroke()

  fill(d2)

  ellipse(tonguePositionX,tonguePositionY,tongueWidth,tongueHeight)

}}