let shape = [{
        "x": 0.04,
        "y": 0.46430333455403644
      },
      {
        "x": 0.11380900382995605,
        "y": 0.3257950146993001
      },
      {
        "x": 0.13240699768066405,
        "y": 0.18728583653767902
      },
      {
        "x": 0.3311690139770508,
        "y": 0.03333333333333333
      },
      {
        "x": 0.7106759643554688,
        "y": 0.03333333333333333
      },
      {
        "x": 0.8193560028076172,
        "y": 0.12213333447774251
      },
      {
        "x": 0.8960710144042969,
        "y": 0.35668166478474933
      },
      {
        "x": 0.7821600341796875,
        "y": 0.5477949778238932
      },
      {
        "x": 0.7821600341796875,
        "y": 0.8016475041707357
      },
      {
        "x": 0.96,
        "y": 1
      },
      {
        "x": 0.42822498321533203,
        "y": 1
      },
      {
        "x": 0.405,
        "y": 0.7292558034261067
      },
      {
        "x": 0.2427669906616211,
        "y": 0.7198350270589192
      },
      {
        "x": 0.18,
        "y": 0.6875
      },
      {
        "x": 0.15268500328063964,
        "y": 0.6397216796875
      },
      {
        "x": 0.13240699768066405,
        "y": 0.49181251525878905
      },
      {
        "x": 0.05278580188751221,
        "y": 0.4807125091552734
      }
    ];

    function getShape(points, x, y, w, h) {

      let source_ratio = 100 / 120,
        target_ratio = w / h;

      let image_width, image_height;

      let side = source_ratio > target_ratio;

      if (side) {
        image_width = w;
        image_height = image_width / source_ratio;
      } else {
        image_height = h;
        image_width = image_height * source_ratio;
      }

      let offset_x = x + w / 2 - image_width / 2,
        offset_y = y + h - image_height;

      return points.map((p, i) => {
        return {
          x: offset_x + p.x * image_width,
          y: offset_y + p.y * image_height
        };
      });

    }

    function getDistance(points) {
      let result = [];
      for (var i = 0; i < points.length; i++) {
        let p = points[i],
          past_p = points[mod(i - 1, points.length)],
          next_p = points[(i + 1) % points.length];
        let last_dist = dist(past_p.x, past_p.y, p.x, p.y),
          next_dist = dist(p.x, p.y, next_p.x, next_p.y);
        result.push(min(last_dist, next_dist));
      }
      return result;
    }
    let faces = [];

    function setup() {
      createCanvas(windowWidth, windowHeight);
      noStroke();
      init();
    }

    function windowResized() {
      resizeCanvas(windowWidth, windowHeight);
      init();
    }

    function init() {
      let f1 = {
        color: "#FD86FF",
        origin: getShape(shape, -width * 0.1, 0, width, height)
      };
      f1.point_dist = getDistance(f1.origin);

      let f2 = {
        color: "#FFEB35",
        origin: getShape(shape, 0, height * 0.1, width, height)
      };
      f2.point_dist = getDistance(f2.origin);

      let f3 = {
        color: "#2CB3FF",
        origin: getShape(shape, width * 0.1, 0, width, height)
      };
      f3.point_dist = getDistance(f3.origin);
      faces = [f1, f2, f3];
    }

    function draw() {
      background("#FFFAEF");
      blendMode(MULTIPLY);
      faces.forEach((f, i) => {
        fill(f.color);
        beginShape();
        f.origin.forEach((p, p_i) => {
          let t = millis() / 1000;
          let s = map(mouseX, 0, width, 0.1, 0.5),
            s_cos = map(mouseY, 0, height, 0.1, 0.5);
          vertex(p.x + sin(t + (i + p_i)) * f.point_dist[p_i] * s_cos, p.y + cos(1000 + t - (i + p_i)) * f.point_dist[p_i] * s);
        });
        endShape(CLOSE);
      });
      blendMode(BLEND);
    }


    function mod(n, m) {
      return ((n % m) + m) % m;
    }