// 

// 2D primitives

// fill() and blendMode()

// Translate(), Rotate(), Push(), Pop()

​

​

// Main Sizes

var canvasWidth = 400;

​

// Colors

var backgroundColor = 180;

var baseColor = 60;

var faceColor = '#d9d6d0';

​

​

function setup() {

  createCanvas(canvasWidth, canvasWidth);

  background(backgroundColor);

}

​

function draw() {

  // make bat a little bigger overall

  scale(1.4);

  translate(-55, -20);

​

  // set x start to center axis to easily mirror elements

  translate(width / 2, 0); 

  noStroke();

​

  // Wings ———————————————————————————————————————————————————

  push();

  // adjust size and position of wings

  scale(0.8);

  translate(0,50);

  fill(baseColor-20);

  circle(0, height/2, width*0.75);

  push();

  noFill();

  stroke(220);

  strokeWeight(2);

  blendMode(MULTIPLY);

  circle(0, height/2, width*0.48); // Add lines for wings

  pop();

  fill(backgroundColor);

  circle(0, -90, 500); // top

  circle(0, 480, 500); // bottom

  circle(70, 250, 80); // right wing hole 1

  circle(120, 250, 80); // right wing hole 2

  circle(-70, 250, 80); // left wing hole 1

  circle(-120, 250, 80); // left wing hole 2

  pop(); // pop wings

  // Body ————————————————————————————————————————————————————

  noStroke();

  fill(baseColor);

​

  ellipse(0, 200, 100, 120);

  push();

  fill(backgroundColor);

  rect(-200,250,400,400); // cut off the hole for the pencil

  fill(baseColor-40);

  ellipse(0, 250, 54, 6);

  pop();

  // Head ————————————————————————————————————————————————————

  push();

  translate(0, 100); // set new center of head

  // Head — Ears

  triangle(20,10,70,10,70,-40);

  triangle(-20,10,-70,10,-70,-40);

  fill(baseColor+40);

  triangle(60,10,70,10,70,-40);

  triangle(-60,10,-70,10,-70,-40);

  fill(baseColor+20);

  arc(0, 0, 160, 120, 0.2, PI-0.2);

  translate(0, 31);

  rotate(PI);

  arc(0, 0, 160, 120, 0.2, PI-0.2);

  pop(); // pop head

  // Head — Face

  push();

  translate(0, 110); // set new center of face

  fill(faceColor);

  ellipse(0, 10, 100, 70);

  // Head — Eyes  

  stroke('#111');

  strokeWeight(6);

  point(20, 0);

  point(-20, 0);

  // Head — Fangs

  noStroke();

  fill('white')

  triangle(20,25,20,35,5,15);

  triangle(-20,25,-20,35,-5,15);

  // Head — Smile

  fill(faceColor); // to cover part of the fangs

  stroke('#111');

  strokeWeight(1);

  arc(0, 0, 100, 60, HALF_PI-0.7, HALF_PI+0.7);

  line(0, 20, 0, 30);

  // Head — Nose

  fill('#a39c93');

  noStroke();

  ellipse(0, 20, 10, 6);    

  pop(); // pop head-face

  // Legs —————————————————————————————————————————————————————

  stroke(baseColor);

  strokeWeight(14)

  noFill();

  arc(-10, 250, 70, 70, radians(-20), radians(10) );

  arc(10, 250, 70, 70, radians(-10+180), radians(20+180) );

}