HTML
<html>
<head>
</head>
<body>
<canvas id="canvas" width="1000", height="1000">
</canvas>
</body>
<script>
const data = [
{ "x": -40271, "y":-20082, "velocity": { "x": 4, "y": 2 } },
{ "x": 20372, "y":-50400, "velocity": { "x":-2, "y": 5 } },
{ "x": -50374, "y": 50650, "velocity": { "x": 5, "y":-5 } },
{ "x": -50376, "y": 20337, "velocity": { "x": 5, "y":-2 } },
{ "x": -40270, "y": -9980, "velocity": { "x": 4, "y": 1 } },
{ "x": -40237, "y":-40290, "velocity": { "x": 4, "y": 4 } },
{ "x": -9924, "y": 40554, "velocity": { "x": 1, "y":-4 } },
{ "x": -9955, "y": 10239, "velocity": { "x": 1, "y":-1 } },
{ "x": -40258, "y": -9980, "velocity": { "x": 4, "y": 1 } },
{ "x": -50360, "y":-50398, "velocity": { "x": 5, "y": 5 } },
{ "x": 50677, "y":-20076, "velocity": { "x":-5, "y": 2 } },
{ "x": 50690, "y":-50395, "velocity": { "x":-5, "y": 5 } },
{ "x": 30496, "y":-40286, "velocity": { "x":-3, "y": 4 } },
{ "x": -40231, "y": 10234, "velocity": { "x": 4, "y":-1 } },
{ "x": 20379, "y": 50656, "velocity": { "x":-2, "y":-5 } },
{ "x": -20061, "y":-30182, "velocity": { "x": 2, "y": 3 } },
{ "x": 10270, "y":-40294, "velocity": { "x":-1, "y": 4 } },
{ "x": 20359, "y": 20341, "velocity": { "x":-2, "y":-2 } },
{ "x": 10267, "y":-50399, "velocity": { "x":-1, "y": 5 } },
{ "x": -30155, "y": -9976, "velocity": { "x": 3, "y": 1 } },
{ "x": -50356, "y": 30440, "velocity": { "x": 5, "y":-3 } },
{ "x": -9932, "y":-40286, "velocity": { "x": 1, "y": 4 } },
{ "x": 10278, "y":-40289, "velocity": { "x":-1, "y": 4 } },
{ "x": 10246, "y":-20083, "velocity": { "x":-1, "y": 2 } },
{ "x": -40250, "y": -9977, "velocity": { "x": 4, "y": 1 } },
{ "x": -9932, "y": 40548, "velocity": { "x": 1, "y":-4 } },
{ "x": -30150, "y":-30190, "velocity": { "x": 3, "y": 3 } },
{ "x": 50695, "y":-20084, "velocity": { "x":-5, "y": 2 } },
{ "x": 40571, "y": 10230, "velocity": { "x":-4, "y":-1 } },
{ "x": -50379, "y": 30444, "velocity": { "x": 5, "y":-3 } },
{ "x": -30156, "y":...