drawHeart()

in src/ui/UiSkelAni.js [178:268]


  drawHeart(ctx, w, h, xHeart, yHeart, isMirroredX, scale, animParam) {
    const W_REF = 240.0;
    const H_REF = 200.0;
    const hp = [
      186, 195, 179, 195, 171, 188, 149, 166, 132, 126, 123, 111, 131, 100, 145, 78, 145, 60, 150, 47, 159, 50, 184, 56, 203, 49, 213, 41,
      217, 51, 226, 77, 218, 104, 208, 134, 208, 158, 207, 167, 203, 175, 196, 195, 186, 195,
    ];
    const numLines = Math.floor((hp.length - 1) / 2);
    const vec0 = { x: 0.0, y: 0.0 };
    const vec1 = { x: 0.0, y: 0.0 };

    UiSkelAni.vecTransform(xHeart, yHeart, scale, isMirroredX, hp[0], hp[1], vec0);
    UiSkelAni.vecTransform(xHeart, yHeart, scale, isMirroredX, hp[26], hp[27], vec1);
    const gx0 = Math.floor((w * vec0.x) / W_REF);
    const gy0 = Math.floor((h * vec0.y) / H_REF);
    const gx1 = Math.floor((w * vec1.x) / W_REF);
    const gy1 = Math.floor((h * vec1.y) / H_REF);

    const grad = ctx.createLinearGradient(gx0, gy0, gx1, gy1);
    grad.addColorStop(0.0, 'rgb(86, 0, 0)');
    grad.addColorStop(1.0, 'rgb(255, 170, 170)');
    ctx.fillStyle = grad;

    ctx.beginPath();
    UiSkelAni.vecTransform(xHeart, yHeart, scale, isMirroredX, hp[0], hp[1], vec0);
    const x0 = Math.floor((w * vec0.x) / W_REF);
    const y0 = Math.floor((h * vec0.y) / H_REF);

    ctx.moveTo(x0, y0);
    let j = 2;
    for (let i = 0; i < numLines; i++, j += 4) {
      UiSkelAni.vecTransform(xHeart, yHeart, scale, isMirroredX, hp[j + 0], hp[j + 1], vec0);
      UiSkelAni.vecTransform(xHeart, yHeart, scale, isMirroredX, hp[j + 2], hp[j + 3], vec1);

      const x0 = Math.floor((w * vec0.x) / W_REF);
      const y0 = Math.floor((h * vec0.y) / H_REF);
      const x1 = Math.floor((w * vec1.x) / W_REF);
      const y1 = Math.floor((h * vec1.y) / H_REF);
      ctx.quadraticCurveTo(x0, y0, x1, y1);
    } // for (i) all points
    ctx.stroke();
    ctx.fill();

    // draw blood vessels
    const vessel0 = [151, 75, 154, 68, 155, 61, 151, 55];
    const vessel1 = [145, 89, 156, 86, 165, 82, 172, 77, 177, 69, 177, 61];
    const vessel2 = [143, 100, 157, 101, 168, 98, 179, 94, 186, 87, 192, 80, 197, 76, 205, 75];
    const vessel3 = [146, 109, 160, 107, 172, 107, 183, 112, 192, 119, 199, 125, 200, 130, 198, 137, 195, 142, 189, 144];
    const vessel4 = [145, 123, 160, 124, 171, 128, 178, 138, 183, 151, 184, 160, 181, 168];
    const vessel5 = [149, 142, 161, 146, 167, 153, 171, 158, 171, 164];
    const vessels = [vessel0, vessel1, vessel2, vessel3, vessel4, vessel5];
    const strAlpha = animParam.toFixed(2);
    ctx.strokeStyle = 'rgba(180, 180, 180, ' + strAlpha + ')';
    ctx.lineWidth = 1;

    const numVessels = vessels.length;
    for (let v = 0; v < numVessels; v++) {
      const ves = vessels[v];
      const numPoints = ves.length;
      ctx.beginPath();

      let j = 0;
      for (let i = 0; i < numPoints; i++, j += 2) {
        UiSkelAni.vecTransform(xHeart, yHeart, scale, isMirroredX, ves[j + 0], ves[j + 1], vec0);
        const x0 = Math.floor((w * vec0.x) / W_REF);
        const y0 = Math.floor((h * vec0.y) / H_REF);
        if (i === 0) {
          ctx.moveTo(x0, y0);
        } else {
          ctx.lineTo(x0, y0);
        } // if not first
      } // for (i) all points
      ctx.stroke();

      let xp = -1;
      let yp = -1;
      j = 0;
      for (let i = 0; i < numPoints; i++, j += 2) {
        UiSkelAni.vecTransform(xHeart, yHeart, scale, isMirroredX, ves[j], ves[j + 1], vec0);
        const x0 = Math.floor((w * vec0.x) / W_REF);
        const y0 = Math.floor((h * vec0.y) / H_REF);
        if (i === 0) {
          console.log('');
        } else {
          UiSkelAni.drawLeave(ctx, xp, yp, x0, y0, i);
        }
        xp = x0;
        yp = y0;
      }
    }
  }