let jawX, jawY, jawHeight, jawWidth; //skull jaw

let cheekX, cheekY, cheekDia; // skull left cheek

let leftEyeX, leftEyeY, rightEyeX, rightEyeY, eyeDia; // eye

let n, angle, teethX, teethY, teethWidth, teethHeight, noseWidth;

let petalNum = 6,

  triNum = 6;

let dia1, dia2, dia3, r, g, b, bgPosX;

let rectNewX, bgR, bgG, bgB;

var song;

​

function setup() {

  createCanvas(400, 400);

  background(0);

}

​

// function bgColour(){

// bg = random(0, 255);

// background(bg)

// }

​

function draw() {

  // push();

  // fill(64, 30, 0);

  // square(width / 2, height / 2, width);

  // pop();

​

  // push();

  // noStroke();

  // fill(0);

  // rectNewX = random(width);

  // rect(rectNewX, 0, 5, height * 2);

  // pop();

​

  push();

  skullR = 242;

  skullG = 68 + mouseX / 5;

  skullB = 5;

  hatR = 2 + mouseX / 22;

  hatG = 120;

  hatB = 55 + mouseX / 8;

​

  rimR = 242;

  rimG = 5 + mouseX / 4.4;

  rimB = 90 + mouseX / 40;

​

  angleMode(DEGREES);

​

  // console.log(hatG)

  //   fill(100)

  //   rect(width/3,0,width/10,height*2)

​

  //   MOTION RECTANGLE

  push();

  square(width / 2, height / 2, width);

  fill(skullR,skullG,skullB);

  noStroke();

  blendMode(OVERLAY);

  rect(mouseX, 0, mouseX / 50, height * 2);

  rect(mouseX - 70, 0, mouseX / 25, height * 2);

  rect(mouseX - 200, 0, mouseX / 4, height * 2);

  rect(mouseX - 50, 0, mouseX / 8, height * 2);

  rect(mouseX - 350, 0, mouseX / 14, height * 2);

  rect(mouseX - 10, 0, mouseX / 16, height * 2);

  rect(mouseX - 380, 0, mouseX / 50, height * 2);

  rect(mouseX - 500, 0, mouseX / 36, height * 2);

  rect(mouseX - 750, 0, mouseX / 60, height * 2);

  rect(mouseX - 780, 0, mouseX / 30, height * 2);

  rect(mouseX - 620, 0, mouseX / 70, height * 2);

  pop();

​

  headX = width / 2;

  headY = height / 2 - 20;

  headWidth = mouseX / 3 + 20;

  headHeight = mouseY / 3 + 40;

​

  jawX = headX;

  jawY = headY + headY / 5;

  jawWidth = headWidth - headWidth / 4;

  jawHeight = headHeight + headHeight / 4;

​

  leftEyeX = width / 2 - headWidth / 5;

  leftEyeY = height / 2 - headHeight / 6;

  rightEyeX = width / 2 + headWidth / 5;

  rightEyeY = height / 2 - headHeight / 6;

  eyeDia = headWidth / 4 + 10;

​

  teethX = jawX;

  teethY = jawY + jawHeight / 4;

  teethWidth = jawWidth / 2;

  teethHeight = jawHeight / 8;

  noseWidth = rightEyeX - leftEyeX;

  dia1 = eyeDia / 3;

  dia2 = eyeDia / 5;

  dia3 = eyeDia / 7;

​

  push();

  //   drawing the hat

​

  //   hat extension base

  push();

  // rotate(180)

  noStroke();

  fill(17 + mouseX / 13, 71 + mouseX / 6, 140 + mouseX / 8);

  quad(

    leftEyeX + 3,

    mouseY / 2 + 20,

    rightEyeX - 3,

    mouseY / 2 + 20,

    rightEyeX + eyeDia / 2,

    rightEyeY - rightEyeY / 2,

    leftEyeX - eyeDia / 2,

    leftEyeY - leftEyeY / 2

  );

  pop();

​

  //   hat ellipse base

  noStroke();

  fill(rimR, rimG, rimB);

  ellipse(jawX, jawY - jawY / 2, mouseX, mouseY / 2 + 20);

  fill(hatR, hatG, hatB);

  ellipse(

    jawX,

    jawY - jawY / 2,

    mouseX - mouseX / 20,

    mouseY / 2 + 20 - mouseY / 8

  );

​

  // drawing the skull

  noStroke();

​

  // skull jaw

  fill(skullR, skullG, skullB);

  rectMode(CENTER);

  rect(jawX, jawY, jawWidth, jawHeight, mouseX + 5);

​

  // skull face

  fill(skullR, skullG, skullB);

  ellipse(headX, headY, headWidth, headHeight);

​

  if ((jawWidth > 75, jawHeight > 130)) {

    // skull cheeks

    cheekX = width / 2 + jawWidth / 2;

    cheekY = headY + width / 8;

    cheekDia = jawWidth / 3;

    // right cheek

    fill(skullR, skullG, skullB);

    circle(cheekX, cheekY, cheekDia);

​

    // left cheek

    circle(width - cheekX, cheekY, cheekDia);

​

    // console.log(jawWidth,jawHeight);

  }

​

  //   diamond

​

  push();

  noStroke();

  // fill('red')

  fill(77 + mouseX / 5, 140 + mouseX / 8, 80 + mouseX / 30);

  quad(

    leftEyeX + 20,

    leftEyeY - eyeDia * 0.75,

    headX,

    headY,

    rightEyeX - 20,

    rightEyeY - eyeDia * 0.75,

    headX,

    headY - eyeDia * 1.5

  );

  pop();

​

  //flower in diamond

  push();

  circle(headX, leftEyeY - (eyeDia * 3) / 4, eyeDia / 8);

  // flower petals

  fill(17 + mouseX / 13, 71 + mouseX / 6, 140 + mouseX / 8);

  circle(headX + eyeDia / 8, leftEyeY - eyeDia * 0.75, eyeDia / 6);

  circle(headX - eyeDia / 8, leftEyeY - eyeDia * 0.75, eyeDia / 6);

  circle(headX, leftEyeY - eyeDia * 0.75 + eyeDia / 8, eyeDia / 6);

  circle(headX, leftEyeY - eyeDia * 0.75 - eyeDia / 8, eyeDia / 6);

  pop();

​

  //    circle under diamond

  fill(217 + mouseY / 8, 214 + mouseY / 8, 169 + mouseY / 8);

  circle(headX, headY, eyeDia / 7);

  circle(headX, headY + eyeDia / 7, eyeDia / 9);

  circle(headX, headY + eyeDia / 7 + eyeDia / 9, eyeDia / 11);

​

  //circle on flower top

  circle(headX, headY - eyeDia * 1.5, dia1);

  circle(headX, headY - eyeDia * 1.5 - dia1, dia2);

  circle(headX, headY - eyeDia * 1.5 - dia1 - dia2 - dia3 / 2, dia3);

​

  //circle on flower right

  push();

  translate(headX, headY - eyeDia * 1.5);

  rotate(90);

  circle(0, -dia1, dia2);

  circle(0, -dia1 - dia2 - dia3 / 2, dia3);

  pop();

​

  //   //circle on flower left

  push();

  translate(headX, headY - eyeDia * 1.5);

  rotate(-90);

  circle(0, -dia1, dia2);

  circle(0, -dia1 - dia2 - dia3 / 2, dia3);

  pop();

​

  //circle on flower diagonal left

  push();

  translate(headX, headY - eyeDia * 1.5);

  rotate(-45);

  circle(0, -dia1, dia2);

  circle(0, -dia1 - dia2 - dia3 / 2, dia3);

  pop();

​

  //circle on flower diagonal right

  push();

  translate(headX, headY - eyeDia * 1.5);

  rotate(45);

  circle(0, -dia1, dia2);

  circle(0, -dia1 - dia2 - dia3 / 2, dia3);

  pop();

​

  //   eye base

  fill(64, 30, 0);

  // left eye base

  circle(leftEyeX, leftEyeY, eyeDia);

  // right eye base

  circle(rightEyeX, rightEyeY, eyeDia);

​

  if (eyeDia < 20) {

    n = 5;

  } else if ((eyeDia > 20, eyeDia < 30)) {

    n = 6;

  } else if ((eyeDia > 30, eyeDia < 40)) {

    n = 7;

  } else if ((eyeDia > 40, eyeDia < 50)) {

    n = 8;

  } else if ((eyeDia > 50, eyeDia < 60)) {

    n = 9;

  } else {

    n = 10;

  }

​

  //   eye star

  push();

​

  noStroke();

  fill(217 + mouseY / 8, 214 + mouseY / 8, 169 + mouseY / 8);

  // left eye

  push();

  translate(leftEyeX, leftEyeY);

  angle = 45;

  rotate(frameCount * 3);

  star(0, 0, eyeDia / 2, eyeDia / 3, n);

  pop();

​

  // right eye

  push();

  translate(rightEyeX, rightEyeY);

  angle = -45;

  rotate(frameCount * 3);

  star(0, 0, eyeDia / 2, eyeDia / 3, n);

  pop();

​

  angle = angle + 1;

  pop();

  push();

​

  push();

  // left eye stroke

  noFill();

  stroke("red");

  circle(leftEyeX, leftEyeY, eyeDia + 3);

  // right eye stroke

  circle(rightEyeX, rightEyeY, eyeDia + 3);

​

  // left eye stroke

  circle(leftEyeX, leftEyeY, eyeDia + 3);

  // right eye stroke

  circle(rightEyeX, rightEyeY, eyeDia + 3);

  pop();

​

  //   eye pupil

  fill("red");

  // left eye pupil

  circle(leftEyeX, leftEyeY, eyeDia / 4);

  // right eye pupil

  circle(rightEyeX, rightEyeY, eyeDia / 4);

  pop();

​

  if (mouseY > height / 4 && mouseX > width / 4) {

    //   CHIN

    push();

    rectMode(CENTER);

    fill(217 + mouseY / 8, 214 + mouseY / 8, 169 + mouseY / 8);

    circle(teethX, teethY + teethY / 8, teethWidth / 4);

    pop();

​

    push();

    strokeCap(ROUND);

    strokeWeight(teethHeight / 10);

    stroke(217 + mouseY / 8, 214 + mouseY / 8, 169 + mouseY / 8);

    noFill();

    ellipseMode(CENTER);

    arc(

      teethX + 10,

      teethY + teethY / 8,

      teethWidth / 4 - 5,

      teethWidth / 4,

      280,

      80

    );

    arc(

      teethX + 20,

      teethY + teethY / 8,

      teethWidth / 4 - 10,

      teethWidth / 4,

      280,

      80

    );

    arc(

      teethX - 10,

      teethY + teethY / 8,

      teethWidth / 4 - 5,

      teethWidth / 4,

      100,

      260

    );

    arc(

      teethX - 20,

      teethY + teethY / 8,

      teethWidth / 4 - 10,

      teethWidth / 4,

      100,

      260

    );

    pop();

    pop();

  }

​

  push();

  //   teeth base

  rectMode(CENTER);

  fill(hatR, hatG, hatB);

  rect(teethX, teethY, teethWidth, teethHeight, mouseX + 1);

​

  //   teeth partitions

  stroke(skullR, skullG, skullB);

  strokeWeight(teethHeight / 10);

  if (teethWidth > 50) {

    // centre line

    line(teethX, teethY - teethHeight / 2, teethX, teethY + teethHeight / 2);

    circle(teethX, teethY - teethHeight / 2, teethHeight / 10);

    circle(teethX, teethY + teethHeight / 2, teethHeight / 10);

​

    // right line 1

    line(

      teethX + teethWidth / 4,

      teethY - teethHeight / 2,

      teethX + teethWidth / 4,

      teethY + teethHeight / 2

    );

    circle(teethX + teethWidth / 4, teethY - teethHeight / 2, teethHeight / 10);

    circle(teethX + teethWidth / 4, teethY + teethHeight / 2, teethHeight / 10);

​

    // left line 1

    line(

      teethX - teethWidth / 4,

      teethY - teethHeight / 2,

      teethX - teethWidth / 4,

      teethY + teethHeight / 2

    );

    circle(teethX - teethWidth / 4, teethY - teethHeight / 2, teethHeight / 10);

    circle(teethX - teethWidth / 4, teethY + teethHeight / 2, teethHeight / 10);

  }

  if (teethWidth > 60) {

    // right line 2

    line(

      teethX + teethWidth / 8,

      teethY - teethHeight / 2,

      teethX + teethWidth / 8,

      teethY + teethHeight / 2

    );

    circle(teethX + teethWidth / 8, teethY - teethHeight / 2, teethHeight / 10);

    circle(teethX + teethWidth / 8, teethY + teethHeight / 2, teethHeight / 10);

​

    // left line 2

    line(

      teethX - teethWidth / 8,

      teethY - teethHeight / 2,

      teethX - teethWidth / 8,

      teethY + teethHeight / 2

    );

    circle(teethX - teethWidth / 8, teethY - teethHeight / 2, teethHeight / 10);

    circle(teethX - teethWidth / 8, teethY + teethHeight / 2, teethHeight / 10);

​

    // right line 3

    line(

      teethX + (teethWidth * 3) / 8,

      teethY - teethHeight / 2,

      teethX + (teethWidth * 3) / 8,

      teethY + teethHeight / 2

    );

    circle(

      teethX + (teethWidth * 3) / 8,

      teethY - teethHeight / 2,

      teethHeight / 10

    );

    circle(

      teethX + (teethWidth * 3) / 8,

      teethY + teethHeight / 2,

      teethHeight / 10

    );

​

    // left line 3

    line(

      teethX - (teethWidth * 3) / 8,

      teethY - teethHeight / 2,

      teethX - (teethWidth * 3) / 8,

      teethY + teethHeight / 2

    );

    circle(

      teethX - (teethWidth * 3) / 8,

      teethY + teethHeight / 2,

      teethHeight / 10

    );

    circle(

      teethX - (teethWidth * 3) / 8,

      teethY - teethHeight / 2,

      teethHeight / 10

    );

  }

  pop();

​

  push();

  //   nose

  push();

  fill(64, 30, 0);

  noStroke();

  triangle(

    headX,

    headY + eyeDia / 2,

    leftEyeX + 18,

    leftEyeY + leftEyeY * 0.25,

    rightEyeX - 18,

    rightEyeY + rightEyeY * 0.25

  );

  pop();

​

  //   nose heart

  fill(64, 30, 0);

  ellipse(

    leftEyeX + noseWidth / 4 + noseWidth / 8,

    leftEyeY + leftEyeY * 0.25,

    noseWidth / 3,

    noseWidth / 4

  );

​

  ellipse(

    rightEyeX - noseWidth / 4 - noseWidth / 8,

    rightEyeY + rightEyeY * 0.25,

    noseWidth / 3,

    noseWidth / 4

  );

  pop();

​

  push();

  //   cheek flower

  if ((jawWidth > 75, jawHeight > 130)) {

    noStroke();

    fill(17 + mouseX / 13, 71 + mouseX / 6, 140 + mouseX / 8);

    circle(cheekX, cheekY, dia2);

    circle(width - cheekX, cheekY, dia2);

​

    push();

    translate(cheekX, cheekY);

    // triangle right cheek

    for (let i = 0; i < triNum; i++) {

      angle = 60;

      rotate(angle);

      push();

      angle = 90;

      rotate(frameCount * 2);

      triangle(

        dia1 / 2,

        0,

        (dia2 * 3) / 2,

        0 + dia2 / 2,

        (dia2 * 3) / 2,

        -dia2 / 2

      );

      pop();

    }

    pop();

​

    push();

    translate(width - cheekX, cheekY);

    //       triangle left cheek

    for (let i = 0; i < triNum; i++) {

      angle = 60;

      rotate(angle);

      push();

      angle = 90;

      rotate(frameCount * 2);

      triangle(

        dia1 / 2,

        0,

        (dia2 * 3) / 2,

        0 + dia2 / 2,

        (dia2 * 3) / 2,

        -dia2 / 2

      );

      pop();

    }

    pop();

  }

  pop();

​

  // console.log(mouseX,mouseY);

  // fill('green')

  // circle(rightEyeX, rightEyeY,20)

​

  // creating the star function

  function star(x, y, radius1, radius2, npoints) {

    let angle = 360 / npoints;

    let halfAngle = angle / 2.0;

    beginShape();

    for (let a = 0; a < 360; a += angle) {

      let sx = x + cos(a) * radius2;

      let sy = y + sin(a) * radius2;

      vertex(sx, sy);

      sx = x + cos(a + halfAngle) * radius1;

      sy = y + sin(a + halfAngle) * radius1;

      vertex(sx, sy);

    }

    endShape(CLOSE);

  }

}

​

function mouseClicked() {

  bgR = random(0, 255);

  bgG = random(0, 255);

  bgB = random(0, 255);

  fill(bgR, bgG, bgB);

  square(width / 2, height / 2, width);

  // background(bgR,bgG,bgB);

}

​