JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<canvas id="c" width="240" height="320"></canvas>
<input type="range" id="dist" min="0" max="500" step="0.01"/>
<input type="range" id="Xc" min="-1000" max="1000" step="0.01"/>
<input type="range" id="Yc" min="-1000" max="1000" step="0.01"/>

JavaScript

const ctx = c.getContext('2d')
const data = [
  [313, 313, 722],
  [304, 304, 723],
  [295, 295, 725],
  [286, 286, 726],
  [277, 277, 728],
  [268, 268, 729],
  [259, 259, 731],
  [250, 250, 732],
  [241, 241, 734],
  [231, 231, 736],
  [222, 222, 737],
  [213, 213, 739],
  [204, 204, 740],
  [195, 195, 742],
  [186, 186, 743],
  [177, 177, 745],
  [168, 168, 746],
  [159, 159, 748],
  [150, 150, 749],
  [140, 140, 751],
  [131, 131, 752],
  [122, 122, 754],
  [113, 113, 755],
  [104, 104, 757],
  [95, 95, 758],
  [86, 86, 760],
  [77, 77, 761],
  [68, 68, 763],
  [59, 59, 764],
  [50, 50, 766],
  [40, 40, 768],
  [31, 31, 769],
  [22, 22, 771],
  [13, 13, 772],
  [4, 4, 774],
  [156, 156, 887],
  [152, 152, 884],
  [147, 147, 880],
  [143, 143, 877],
  [138, 138, 874],
  [134, 134, 871],
  [129, 129, 867],
  [125, 125, 864],
  [120, 120, 861],
  [115, 115, 857],
  [111, 111, 854],
  [106, 106, 851],
  [102, 102, 848],
  [97, 97, 844],
  [93, 93, 841],
  [88, 88, 838],
  [84, 84, 835],
  [79, 79, 831],
  [75, 75, 828],
  [70, 70, 825],
  [65, 65, 822],
  [61, 61, 818],
  [56, 56, 815],
  [52, 52, 812],
  [47, 47, 809],
  [43, 43, 805],
  [38, 38, 802],
  [34, 34, 799],
  [29, 29, 796],
  [25, 25, 792],
  [20, 20, 789],
  [15, 15, 786],
  [11, 11, 783],
  [6, 6, 779],
  [2, 2, 776],
  [162, 162, 885],
  [166, 166, 880],
  [171, 171, 876],
  [176, 176, 871],
  [180, 180, 866],
  [185, 185, 861],
  [189, 189, 856],
  [194, 194, 851],
  [199, 199, 846],
  [203, 203, 841],
  [208, 208, 837],
  [213, 213, 832],
  [217, 217, 827],
  [222, 222, 822],
  [227, 227, 817],
  [231, 231, 812],
  [236, 236, 807],
  [241, 241, 802],
  [245, 245, 797],
  [250, 250, 793],
  [255, 255, 788],
  [259, 259, 783],
  [264, 264, 778],
  [268, 268, 773],
  [273, 273, 768],
  [278, 278, 763],
  [282, 282, 758],
  [287, 287, 753],
  [292, 292, 749],
  [296, 296, 744],
  [301, 301, 739],
  [306, 306, 734],
  [310, 310, 729],
  [315, 315, 724],
  [671, 671, 557],
  [666, 666, 562],
  [662,...