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();
}
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(){
	var vec = makeVector(mouseX, mouseY);
  
  // shift + rotation + scaling
  var shifted1 = matrixMultiply(makeTransform(10, 10), makeIdentity());
  var rotated1 = matrixMultiply(shifted1, makeIdentity());
  var scaled1 = matrixMultiply(rotated1, makeIdentity());
  drawVector(imgA, multiply(scaled1, vec));
  console.log(scaled1);
  // scaling + rotation + shift
  var scaled2 = matrixMultiply(makeScaling(2, 2), makeIdentity());
  var rotated2 = matrixMultiply(scaled2, makeIdentity());
  var shifted2 = matrixMultiply(rotated2, makeIdentity());
  drawVector(imgB, multiply(shifted2, vec));
  console.log(shifted2);
  
}
function makeIdentity(){
	return [
  					[1, 0, 0],
            [0, 1, 0],
            [0, 0, 1]
         ];
}
function makeTransform(x, y){
	return [
  					[1, 0, x],
            [0, 1, y],
            [0, 0, 1]
         ];
}
function makeScaling(x, y){
	return [
  					[x, 0, 0],
            [0, y, 0],
            [0, 0, 1]
   ...