Lissajous Figures

Simple Lissajous Figures plotter with GUI

by IronZaphilith

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.6/jsxgraphcore.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.6/jsxgraph.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectre.css/0.5.3/spectre.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.19/css/uikit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.19/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.19/js/uikit-icons.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>
<div class="columns col-gapless col-oneline">
  <div class="column col-8" id="mainColumn">
    <div id="jxgbox" class="jxgbox centered" style="overflow: hidden; position: relative; width: 60%; height: 0; padding-bottom: 60%"></div>
    <div class="btn-group btn-group-block uk-width-large centered uk-margin-top">
      <button class="btn btn-success uk-border-rounded" id="startButton">Start</button>
      <button class="btn uk-border-rounded hide-sm" uk-toggle="target: #options; animation: uk-animation-scale-up uk-transform-origin-bottom-left; duration: 500" id="optionsToggle"><span class="uk-margin-auto-bottom" uk-icon="icon: cog; ratio: 0.9"></span>  Options</button>
      <button class="btn uk-border-rounded show-sm" uk-toggle="target: #optionsHorizontal; animation: uk-animation-scale-up uk-transform-origin-up; duration: 500" id="optionsToggle"><span class="uk-margin-auto-bottom" uk-icon="icon: cog; ratio: 0.9"></span>  Options</button>

    </div>
    <div class="show-sm">
      <ul class="menu mt-2 mx-2">
        <span class="text-primary text-large">
				Values
			</span>
        <li class="divider"></li>
        <li class="menu-item">
          <label class="form-slider">
					<div...

JavaScript

var brd = JXG.JSXGraph.initBoard('jxgbox', {
  axis: true,
  boundingbox: [-12, 10, 12, -10],
  showCopyright: false
});

var radioButtons = document.getElementsByName("labelRadio");
var startButton = document.getElementById('startButton');
var animationSpeedSlider =
  document.getElementById('animationSpeedSlider');
var curveWidthSlider =
  document.getElementById('curveWidthSlider');
var chooseCurveColorLabel = document.getElementById('chooseCurveColorLabel');
var aTextView = document.getElementById('aTextView');
var bTextView = document.getElementById('bTextView');
var ATextView = document.getElementById('ATextView');
var BTextView = document.getElementById('BTextView');
var aValSlider = document.getElementById('aValSlider');
var bValSlider = document.getElementById('bValSlider');
var AValSlider = document.getElementById('AValSlider');
var BValSlider = document.getElementById('BValSlider');

var a = 3;
var b = 3;
var A = 3;
var B = 3;

var curveColor = '#aa2233';
var curveWidth = 3;
var showLabel = 'Always';
var speedMultiplier = 50;
var isStarted = false;
var delta = 0;
var fun1;
var fun2;

window.onresize = function() {
  console.log('dupa');
  brd.resizeContainer(brd.containerObj.clientWidth, brd.containerObj.clientHeight, true);
  if (window.innerWidth < 600) {
    document.getElementById('mainColumn').classList.remove("col-8");
    document.getElementById('mainColumn').classList.add("col-10");
  } else {
    document.getElementById('mainColumn').classList.remove("col-10");
    document.getElementById('mainColumn').classList.add("col-8");
  }
  brd.fullUpdate();
};

var c = brd.create('curve', [
  function(t) {
    fun1 = String("x=" + A + "*" + "sin(" + a + '*t+' + delta.toFixed(2) + ")");
    return A * Math.sin(a * t + delta);
  },
  function(t) {
    fun2 = String("y=" + B + "*" + "sin(" + b + '*t)');
    return B * Math.sin(b * t);
  },
  0, 2 * Math.PI
], {
  strokeColor: curveColor,
  strokeWidth: curveWidth
});

var label_x = brd.create('text',...