Perf Testing SVG1

by siddjain

HTML

<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.draggable.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.clock.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.import.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.filter.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.export.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.easing.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.shapes.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.topath.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.parser.js"></script>
<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 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 animate = true;
var animationStep = 5.0;
var rotation = 0;
var motionAmount = 5;
var drawWidth = parseInt(draw.parent.style.width);
var drawHeight = parseInt(draw.parent.style.height);
var labels = [];
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;
    labels = [];
    rotation = 0;
    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);
    for(var i = 0; i < numberOfLabels(); i++)
    {
        labels.push(createLabel(string, textPath, font, motionAmount));
    }
}

function createLabel(text, path, font, motion)
{
    return {
        svg: createSvgLabel(text, textPath, font),
        motion: createRandomMotion(motion)
    };
}
        
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()
          ...