createCanvas(600, 400);

  frameRate(10);

}

​

function draw() {

  background(50);

  sparkle();

  disco(300);

  sanjana();

  moveHands();

}

​

function disco(Y) {

  for (let x = 0; x <= 600; x += 30) {

    for (let y = Y; y <= 400; y += 30) {

      drawingContext.shadowBlur = 20;

      drawingContext.shadowColor = color(random(255));

      fill(random(255), random(255), y);

      rect(x, y, 30, 30);

    }

  }

}

​

function sparkle() {

  fill(255);

  noStroke();

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

    ellipse(random(width), random(height), random(1, 6));

  }

}

​

function sanjana() {

  drawingContext.shadowBlur = 0;

  noStroke();

​

  //hair back

  fill("#2C0E0E");

  bezier(260, 300, 220, 30, 380, 30, 340, 300);

​

  //neck

  fill(245, 219, 191);

  rect(280, 120, 40, 50);

​

  //head

  stroke("#D6B876");

  fill(245, 219, 191);

  ellipse(300, 100, 80, 100);

  noStroke();

​

  //body

  rect(260, 170, 80, 50);

​

  //necklace

  fill(255);

  circle(280, 170, 8);

  circle(288, 172, 8);

  circle(296, 174, 8);

  circle(304, 174, 8);

  circle(312, 172, 8);

  circle(320, 170, 8);

​

  //dress

  fill(50, 15, 80);

  fill(0);

  bezier(260, 170, 200, 230, 350, 320, 340, 200);

  bezier(240, 380, 240, 180, 360, 180, 360, 380);

​

  //eyes

  beginShape();

  stroke("#D6B876");

  vertex(270, 100);

  fill(255);

  bezierVertex(275, 90, 285, 90, 295, 100);

  bezierVertex(285, 110, 275, 110, 270, 100);

  endShape();

​

  beginShape();

  vertex(305, 100);

  fill(255);

  bezierVertex(315, 90, 325, 90, 330, 100);

  bezierVertex(325, 110, 315, 110, 305, 100);

  endShape();

​

  //eyeball

  fill(0);

  circle(282, 100, 10);

  circle(317, 100, 10);

​

  //eyebrow

  strokeWeight(3);

  stroke(0);

  curve(270, 100, 275, 90, 285, 90, 305, 100);

  curve(295, 100, 315, 90, 325, 90, 330, 100);

  strokeWeight(1);

​

  //nose

  stroke("#D6B876");

  fill("#F2E4C5");

  triangle(300, 105, 295, 120, 300, 120);

  fill("#D6B876");

  triangle(300, 105, 305, 120, 300, 120);

  triangle(295, 120, 300, 125, 305, 120);

​

  //lips

  strokeWeight(3);

  noFill();

  stroke("#941245");

  curve(280, 125, 295, 135, 305, 135, 325, 125);

  strokeWeight(1);

​

  //hair

  fill("#2C0E0E");

  stroke(0);

  bezier(280, 60, 260, 45, 240, 100, 255, 250);

  bezier(320, 60, 340, 45, 350, 100, 345, 250);

​

  beginShape();

  vertex(230, 150);

  bezierVertex(280, 100, 230, 40, 310, 50);

  bezierVertex(280, 40, 300, 100, 230, 150);

  endShape();

​

  beginShape();

  vertex(370, 150);

  bezierVertex(300, 100, 370, 40, 290, 50);

  bezierVertex(340, 40, 280, 100, 370, 150);

  endShape();

  noStroke();

​

  //legs

  fill(245, 219, 191);

  rect(260, 380, 30, 70);

  rect(310, 380, 30, 70);

}

​

function moveHands() {

  strokeWeight(20);

  stroke(25);

​

  //left arm

  line(245, 180, constrain(mouseX - 70, 175, 325), constrain(mouseY, 150, 250));

  line(

    constrain(mouseX - 70, 175, 325),

    constrain(mouseY, 150, 250),

    constrain(mouseX, 150, 350),

    constrain(mouseY + 10, 50, 300)

  );

​

  //right arm

  line(

    width - 250,

    180,

    constrain(mouseX + 70, 325, 425),

    constrain(mouseY, 150, 250)

  );

  line(

    constrain(mouseX + 70, 325, 425),

    constrain(mouseY, 150, 250),

    constrain(mouseX, 250, 450),

    constrain(mouseY + 10, 50, 300)

  );

​

  strokeWeight(1);

  noStroke();

}

​