JSFiddle - React, Tailwind, and code Playground

by siddjain

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<h1>Instructions</h1>
<ol>
    <li>Enter some text</li>
    <li>Trace a path in the canvas (mouse down to begin path, mouse up to end path)</li>
</ol>
<div id="drawing" style="border:1px solid black; width:600px; height:500px"></div>
<br/>
<input id="input" data-bind="value: text" type="text" size="45" placeholder="enter some text"></input>
<div>
<label>Number of labels:</label>
<input type="range" min="1" max="100" data-bind="value: numberOfLabels" step = "1"></input>
    <span data-bind="text: numberOfLabels"></span>
</div>
<button id="animateButton">Begin Animation</button>
<label>FPS: </label>
<span id="fps"></span>
<div id="output"></div>

JavaScript

/* create an svg drawing */
var draw = SVG('drawing');
var labels = [];
var motion = null;
var path = null;
var polyline = null;
var text = ko.observable('Hello World!');
var textPath = null;
var stroke = '#fe0';
var fill = '#000';
var font = { family: 'verdana', size: 18 };
var strokeWidth = 1;
var button = document.getElementById('animateButton');
var animationId = null;
var intervalId = null;
var fps = 0;
var zoom = 1.2;
var animate = true;
var motionAmount = 5;
var drawWidth = parseInt(draw.parent.style.width);
var drawHeight = parseInt(draw.parent.style.height);
var numberOfLabels = ko.observable(100);
var viewModel = {
    text: text,
    numberOfLabels: numberOfLabels,   
};
button.addEventListener('click', animateHandler, false);
draw.on('mousedown', mousedown);
ko.applyBindings(viewModel);
function mousedown(e) {
    textPath = null;
    draw.clear();
    stopAnimation();
    var p = getCursorPosition(e);
    path = [];
    path.push([p.x, p.y]);
    draw.on('mousemove', mousemove);
    draw.on('mouseup', mouseup);
}

function mousemove(e) {
    var p = getCursorPosition(e);
    path.push([p.x, p.y]);
    update();
}

function mouseup(e) {
    labels = [];
    polyline && polyline.remove();
    draw.off('mousemove', mousemove);
    draw.off('mouseup', mouseup);
    var string = text();    
    textPath = calculateTextPath(string, path);
    for (var i = 0; i < numberOfLabels() ; i++) {
        var t = createRandomTranslation(-path[0][0], -path[0][1], drawWidth, drawHeight);
        labels.push(createSvgLabel(string, textPath, font, t));        
    }
    motion = createRandomMotion(motionAmount);
}

function createRandomMotion(magnitude) {
    magnitude = magnitude || 5;
    return {
        x: Math.random() > 0.5 ? magnitude * Math.random() : -magnitude * Math.random(),
        y: Math.random() > 0.5 ? magnitude * Math.random() : -magnitude * Math.random()
    };
}

function updateFps(time) {
    document.getElementById('fps').innerHTML = fps;
    fps =...