JSFiddle - React, Tailwind, and code Playground

by Konstantin Cryman

HTML

<input id="secretKey" type="number" placeholder="secretKey">:
<input id="TextureLoader" type="file" />
<br>
<br>
    <button id="init"> run </button>
<br>
<br>
<canvas id="monitor"></canvas>
<br>
<br>
<textarea style="width: 100%; height: 400px;" id="scriptReadingResult"></textarea>

JavaScript

var scriptString = '', scriptData = [], loadedScript = '', loadedData = [], lockedSc = '', IMGDATA = '', EVALRESULT = {};
var dataConverter = new function () {
        var self = this;
        self.lock = function (key, dataArr) {
            var result = [];
            var keyI = 0;
            for (var i = 0; i < dataArr.length; i++) {
                result.push(parseInt(dataArr[i]) + parseInt(key[keyI]));
                keyI = (keyI === key.length-1) ? 0 : keyI+=1 ;
            }
            return result;
        }
        self.unlock = function (key, dataArr) {
            var result = [];
            var keyI = 0;
            for (var i = 0; i < dataArr.length; i++) {
                result.push(parseInt(dataArr[i]) - parseInt(key[keyI]));
                keyI = (keyI === key.length-1) ? 0 : keyI+=1 ;
            }
            return result;
        }
        self.from4to3 = function (x4data) {
            var result = [];
            for (var i = 0; i < x4data.length; i += 4) {
                result.push(x4data[i]);
                result.push(x4data[i + 1]);
                result.push(x4data[i + 2]);
            }
            return result;
        }
        self.from3to4 = function (x3data) {
            var result = [];
            for (var i = 0; i < x3data.length; i += 3) {
                result.push(x3data[i]);
                result.push(x3data[i + 1]);
                result.push(x3data[i + 2]);
                result.push(255);
            }
            return result;
        }
    };

$('#TextureLoader').on('change', function (e) {
    handleFileSelect();
});

function handleFileSelect() {
    if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
        console.log('The File APIs are not fully supported in this browser.');
        return;
    }

    function switchFileType(file, callback) {
        var fr = new FileReader();
        var fileName = file.name.split('.');
        var fileExt = fileName[fileName.length...