JSFiddle - React, Tailwind, and code Playground

by pbuzin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.7/jsxgraphcore.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.7/jsxgraph.css">
<div id="jxgbox" class="jxgbox" style="width:600px; height:600px;">
</div>

JavaScript

board = JXG.JSXGraph.initBoard('jxgbox', {
  boundingbox: [-4, 40.5, 95.5, -3.5],
  axis: true,
  grid: false,
  showCopyright: false
});

alpha_slider = board.createElement('slider', [
  [10.0, 38.5],
  [20.0, 38.5],
  [0.0, 0.3, 1.0]
], {
  name: '&alpha;',
  strokeColor: 'black',
  fillColor: 'black'
});
alpha_text = board.createElement('text', [10, 37.5, "alpha"], {
  fixed: true
});

beta_slider = board.createElement('slider', [
  [30.0, 38.5],
  [40.0, 38.5],
  [0.0, 0.28, 1.0]
], {
  name: '&beta;',
  strokeColor: 'black',
  fillColor: 'black'
});
beta_text = board.createElement('text', [30, 37.5, "beta"], {
  fixed: true
});

gamma_slider = board.createElement('slider', [
  [50.0, 38.5],
  [60.0, 38.5],
  [0.0, 0.7, 1.0]
], {
  name: '&gamma;',
  strokeColor: 'black',
  fillColor: 'black'
});
gamma_text = board.createElement('text', [50, 37.5, "gamma"], {
  fixed: true
});

delta_slider = board.createElement('slider', [
  [70.0, 38.5],
  [80.0, 38.5],
  [0.0, 0.3, 1.0]
], {
  name: '&delta;',
  strokeColor: 'black',
  fillColor: 'black'
});
delta_text = board.createElement('text', [70, 37.5, "delta"], {
  fixed: true
});

startprey = board.createElement('glider', [0, 10, board.defaultAxes.y], {
  name: 'Preys',
  strokeColor: 'blue',
  fillColor: 'blue'
});
startpred = board.createElement('glider', [0, 5, board.defaultAxes.y], {
  name: 'Predators',
  strokeColor: 'red',
  fillColor: 'red'
});


var g3 = null;
var g4 = null;

function solve_ode(x0, I, N, f) {
  var data = [x0];
  var dt = (I[1] - I[0]) / N;
  for (let i = 1; i < N; ++i) {
    var dx_dt = data[i - 1][0] + dt * f(0, data[i - 1])[0];
    var dy_dt = data[i - 1][1] + dt * f(0, data[i - 1])[1];
    data.push([dx_dt, dy_dt]);
  }

  return data
}

function ode() {
  var I = [0, 100];
  var N = 1000;

  var f = function(t, x) {
    var alpha = alpha_slider.Value();
    var beta = beta_slider.Value();
    var gamma = gamma_slider.Value();
    var delta = delta_slider.Value();

    var y = [];
   ...