JSFiddle - React, Tailwind, and code Playground

by matthewaveryusa

HTML

<script src="https://www.html5canvastutorials.com/libraries/three.min.js"></script>
<div id='instructions'>x, y and z are variables that represent height, width and depth</div>
<input id='logic' size=300 value="x < 20 && (y != 5 || ( z < 20 && z >30 ) )"></input>
<button id='filter'>filter</button>
<button id='regenerate'>regenerate</button>
<div>presets
    <button id='skinny'>skinny</button>
    <button id='big'>big</button>
    <button id='stick'>stick</button>
    <button id='cube'>cubish</button>
    <button id='sbiggy'>skinny & big</button>
    <button id='all'>all</button>
</div>
<div id='message'></div>

JavaScript

//whitelist and return evaluator
function make_logic(logic) {
    var never_to_be_used_sequences_in_vars = ['deadbeef1', 'deadbeef2', 'deadbeef3'];
    var tokens = ['x', 'y', 'z'];
    var white = ['+', '-', '/', '*', '!', '<', '>', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '&', '|', '=', '(', ')', '^', '~', ' ', '.'];
    white = white.concat(tokens);

    for (var c in logic) {
        if (white.indexOf(logic[c]) < 0) {
            return "";
        }
    }
    var tks = tokens.join('');
    var remove_dups = new RegExp("([" + tks + "])[" + tks + "]+", 'g');
    logic = logic.replace(remove_dups, "$1");
    for (var t in tokens) {
        var re = new RegExp(tokens[t], 'g');
        logic = logic.replace(re, never_to_be_used_sequences_in_vars[t]);
    }
    return function (a) {
        return function (deadbeef1, deadbeef2, deadbeef3) {
            //the evil eval
            return eval(logic + ';');
        }(a[0], a[1], a[2]);
    };
}


//graphical stuff, of no interest beyond here
$('#filter').click(function (e) {
    $('#message').text("");
    var make_this_evil = $("#logic").val();
    var evaluator = make_logic(make_this_evil);
    try {
        for (var i in boxes) {
            boxes[i][3] |= evaluator(boxes[i]) ? 1 : 2;
        }
    } catch (err) {
        console.log(err);
        $('#message').text(err.message);
        true;
    }
    draw_boxes();
});

$('#all').click(function (e) {
    $("#logic").val("x || y || z");
    $('#filter').click();
});
$('#stick').click(function (e) {
    $("#logic").val("x/(y+z) > 2 || y/(x+z) > 2 || z/(z+y) > 2");
    $('#filter').click();
});
$('#skinny').click(function (e) {
    $("#logic").val("x < 5 || y < 5 || z < 5");
    $('#filter').click();
});
$('#big').click(function (e) {
    $("#logic").val("x + y + z > 40");
    $('#filter').click();
});
$('#cube').click(function (e) {
    $("#logic").val("((x-y)*(x-y)  + (x-z)*(x-z) + (z-y)*(z-y)) < ((x+y+z) * (x+y+z) * 0.005)");
   ...