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>
  <script type="text/javascript">
    var imgA;
    var imgB;

    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();

      console.log("identity:");
      showMatrix(makeIdentity(3, 5, 5));
      console.log("translation:");
      showMatrix(makeTranslation(3, 5, 5));
      console.log("scaling:");
      showMatrix(makeScale(3, 5, 5));
      console.log("rotation:");
      showMatrix(makeRotation(3, 5));
      console.log("shear:");
      showMatrix(makeShear(3, 5, 5));
      console.log("multiply regular:");
      showMatrix(multiply(makeShear(3, 5, 5), makeScale(3, 5, 5)));
      console.log("vector:");
      tv = testVector(3);
      showMatrix(tv);
      console.log("multiply by vector:");
      showMatrix(multiply(makeShear(3, 5, 5), tv));
      console.log("multiply many:");
      showMatrix(multiplyByMany([
        makeShear(3, 5, 5),
        makeScale(3, 5, 5)
      ], tv));
    }

    function testVector(size) {
      let matrix = [];
      for (let i = 0; i < size; i++) {
        let temp = [1];
        temp[0] = 2 + i;
        matrix.push(temp);
      }
      return matrix;
    }

    function draw() {
      if (!keyIsDown(32)) {
        image(imgA, 0, 0);
        text('Image A', 10, 20);
      } else {
        image(imgB, 0, 0);
        text('Image B', 10, 20);
    ...