JSFiddle - React, Tailwind, and code Playground

by antyrat

HTML

<body style="margin:0;">
    <div style="position: relative; z-index: 1">
        <canvas id="src" width="512" height="512">DIE IE!</canvas>
        <canvas id="dst" width="128" height="128" style='position: absolute; z-index: 2'>DIE IE!</canvas>
    </div>
    <div style="position: relative; z-index: 2">
        <input type="button" id="spherize" value="spherize"/>
        <input type="button" id="zoom" value="zoom"/>
        <input type="button" id="twirl" value="twirl"/>
        <input type="button" id="reflect" value="reflect"/>
        <input type="button" id="pyramid" value="pyramid"/>
        <input type="button" id="flower" value="flower"/>
    </div>
</body>

JavaScript

'use strict';
var Mapper = function(width,height,filter) {
    
    var map = [];
    
    this.flower = function(px,py) {
        var x = px-width/2;
        var y = py-height/2;
        var r = Math.sqrt(x*x+y*y);
        var maxr = width/2;
        var a = Math.atan2(y,x);
        var d = r*Math.sin(a*7);
        // if (d>0) return {'x':px,'y':py}
        return {
            'x': px+Math.cos(a)*d*0.4,
            'y': py+Math.sin(a)*d*0.4
        }
    }
    
    this.pyramid = function(px,py) {
        px = px - height/2;
        py = py - height/2;
        var distance = Math.max(Math.abs(px),Math.abs(py));
        px *= distance/width*2;
        py *= distance/height*2;
        return {
            'x': px+width/2,
            'y': py+height/2
        }
    }
    
    this.zoom = function(px,py) {
        return {
            'x': (px+width/2)*0.5,
            'y': (py+height/2)*0.5
        }
    }
    

    this.reflect = function(px,py) {
        if (py<height/2) return {
            'x': px,
            'y': py
        }
        var dx = (py-height/2)*(-px+width/2)/width;
        return {
            'x': px+dx,
            'y': height-py
        }
    }
    
    this.twirl = function(px,py) {
        var x = px-width/2;
        var y = py-height/2;
        var r = Math.sqrt(x*x+y*y);
        var maxr = width/2;
        if (r>maxr) return {'x':px,'y':py}
        var a = Math.atan2(y,x);
        a += 1-r/maxr;
        var dx = Math.cos(a)*r;
        var dy = Math.sin(a)*r;
        return {
            'x': dx+width/2,
            'y': dy+height/2
        }
    }
    
    this.spherize = function(px,py) {
        var x = px-width/2;
        var y = py-height/2;
        var r = Math.sqrt(x*x+y*y);
        var maxr = width/2;
        if (r>maxr) return {'x':px,'y':py}
        var a = Math.atan2(y,x);
        var k = (r/maxr)*(r/maxr)*0.5+0.5;
        var dx = Math.cos(a)*r*k;
        var dy = Math.sin(a)*r*k;
        return {
            'x': dx+width/2,
  ...