y = [],

  segNum = 20,

  segLength = 18;

​

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

  x[i] = 0;

  y[i] = 0;

}

​

let osc;

function setup() {

  createCanvas(400, 400);

  osc = new p5.Oscillator();

  osc.setType('triangle');

  osc.freq(220);

  osc.amp(0.5);

  osc.start();

}

function draw() {

  background(128);

  osc.freq(map(mouseX, 0, width, 100, 1000));

  osc.amp(map(mouseY, 0, height, 0, 1));

  //head&ears

  fill(250, 160, 80);

  triangle(110, 155, 180, 100, 110, 75);

  triangle(290, 155, 220, 100, 300, 75);

  circle(200, 200, 200);

  fill(255, 150, 180);

  ellipse(130, 105, 20, 30);

  fill(255, 150, 180);

  ellipse(275, 105, 20, 30);

  //nose&mouth

  fill(255, 150, 180);

  triangle(200, 230, 190, 220, 210, 220);

  line(220, 250, 200, 230);

  line(180, 250, 200, 230);

​

  //eyes

  fill(250, 250, 250);

  ellipse(150, 180, 55, 30);

  ellipse(250, 180, 55, 30);

  fill(50, 220, 50);

  circle(145+winMouseX/50, 177+winMouseY/60, 22);

  circle(240+winMouseX/50, 177+winMouseY/60, 22);

  fill(0, 0, 0);

  circle(145+winMouseX/50, 177+winMouseY/60, 16);

  circle(240+winMouseX/50, 177+winMouseY/60, 16);

  fill(260, 260, 260);

  circle(148+winMouseX/50, 175+winMouseY/60, 6);

  circle(238+winMouseX/50, 175+winMouseY/60, 6);

​

  //line

    strokeWeight(9);

    stroke(51, 100);

    dragSegment(0, mouseX, mouseY);

  for (let i = 0; i < x.length - 1; i++) {

    dragSegment(i + 1, x[i], y[i]);

  }

  strokeWeight (1);

  stroke(0);

}

​

function dragSegment(i, xin, yin) {

  const dx = xin - x[i];

  const dy = yin - y[i];

  const angle = atan2(dy, dx);

  x[i] = xin - cos(angle) * segLength;

  y[i] = yin - sin(angle) * segLength;

  segment(x[i], y[i], angle);

}

​

function segment(x, y, a) {

  push();

  translate(x, y);

  rotate(a);

  line(0, 0, segLength, 0);

  pop();

}