JSFiddle - React, Tailwind, and code Playground

by linoskoczek

HTML

<style>
  body {
    background-color: #ccc;
  }
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>

<body>

  <button onclick="show()">Show</button>
  <button onclick="reset()">Reset</button>
  <button onclick="apply()">Apply</button>
  <button onclick="change()">Change</button><br><br>

  <div id="matrices"></div>
  <div id="inputs"></div>
  <div id="consequentMatrices"></div><br><br>

  <script type="text/javascript">
    var imgA;
    var imgB;
    var vec = [];
    var currentMatrix = makeIdentity();
    var sequence = [];
    var consequentMatrices = [];
    var consequentTransformations = [];
    function setup() {
      createCanvas(512, 512);
      background(255);
      imgA = createImage(512, 512);
      imgB = createImage(512, 512);
      imgA.loadPixels();
      imgB.loadPixels();
      var d = pixelDensity();
      for (var i = 0; i < 512 * 512 * 4 * d; i += 4) {
        imgA.pixels[i] = 240;
        imgA.pixels[i + 1] = 250;
        imgA.pixels[i + 2] = 240;
        imgA.pixels[i + 3] = 255;
        imgB.pixels[i] = 240;
        imgB.pixels[i + 1] = 240;
        imgB.pixels[i + 2] = 250;
        imgB.pixels[i + 3] = 255;
      }
      imgA.updatePixels();
      imgB.updatePixels();
    }
    function draw() {
      if (!keyIsDown(32)) {
        image(imgA, 0, 0);
        text('Image A', 10, 20);
      } else {
        image(imgB, 0, 0);
        text('Image B', 10, 20);
      }
    }
    function makeVector(x, y) {
      return [x, y, 1];
    }
    function drawVector(img, vec) {
      img.set(vec[0], vec[1], 0);
      img.updatePixels();
    }
    function mouseDragged() {
      vec = makeVector(mouseX, mouseY);
      sequence = sequence.concat([vec]);
      drawVector(imgA, vec);
    }
    function makeIdentity() {
      return [
        [1, 0, 0],
        [0, 1, 0],
        [0, 0, 1]
      ];
    }
    function makeTranslate(x, y) {
      return [
        [1, 0, x],
        [0, 1, y],
        [0, 0, 1]
      ];
  ...