let pink1 = ['#F7D5E2'];

let pink2 = ['#FBBAD6'];

let pink3 = ['#FF69B4'];

let L, A;

​

let serial;

let latestData = "waiting for data";

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  L = windowWidth;

  A = windowHeight;

  // serial constructor

  serial = new p5.SerialPort();

​

  // serial port

  serial.open('/dev/tty.usbmodem141201');

​

  // serial data

  serial.on('data', gotData);

}

​

function gotData() {

  let currentString = serial.readLine(); 

  trim(currentString); 

  if (!currentString) return; 

  console.log(currentString);

  latestData = currentString;

}

​

function draw() {

  background(255);

  text(latestData, 10, 10);

  // Base ellipse, hidden until mouse hovers

  new Base();

  // Blush function

  let outer = color(pink1);

  let inner = color(pink3);

  blush(L * 0.435, A * 0.525, L / 12, L / 16, inner, outer);

  blush(L * 0.565, A * 0.525, L / 12, L / 16, inner, outer);

  // Eyes and smile

  new Face();

  // Cover ellipse, visible until mouse hovers

  new Cover();

}

​

class Face {

  constructor() {

    this.color = color(pink3);

    this.color.setAlpha(255 - latestData);

    noFill();

    stroke(this.color);

    bezier(L * 0.45, A * 0.55, L * 0.49, A * 0.575, L * 0.51, A * 0.575, L * 0.55, A * 0.55);

    noStroke();

    fill(this.color);

    ellipse(L * 0.45, A * 0.485, L / 50);

    ellipse(L * 0.55, A * 0.485, L / 50);

  }

}

​

class Base {

  constructor() {

    this.w = L / 2;

    this.h = A / 2;

    this.d = L / 4;

    fill(pink1);

    strokeWeight(5);

    stroke(pink2);

    ellipse(this.w, this.h, this.d);

  }

}

​

class Cover {

  constructor() {

    noStroke();

    this.w = L / 2;

    this.h = A / 2;

    this.d = L / 4;

    let c1 = color(220);

    c1.setAlpha(latestData);

    fill(c1);

    ellipse(this.w, this.h, this.d + 5);

    let c2 = color(240);

    c2.setAlpha(latestData);

    fill(c2);

    ellipse(this.w, this.h, this.d - 5);

  }

}

​

function blush(x, y, w, h, inner, outer) {

  // Radial gradient from: https://editor.p5js.org/owenmcateer/sketches/H1L08HrdQ

  noStroke();

  for (let i = Math.max(w, h); i > 0; i--) {

    let step = i / Math.max(w, h);

    let color = lerpColor(inner, outer, step);

    fill(color);

    ellipse(x, y, step * w, step * h);

  }

}