Infinite Scroll2

Works by periodicizing the labels along direction of motion

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:500px; 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 group = null;
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 animate = true;
var motionAmount = 5;
var drawWidth = parseInt(draw.parent.style.width);
var drawHeight = parseInt(draw.parent.style.height);
var period = null;
var numberOfLabels = ko.observable(50);
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) {
    group = draw.group();
    polyline && polyline.remove();
    draw.off('mousemove', mousemove);
    draw.off('mouseup', mouseup);
    var string = text();
    textPath = calculateTextPath(string, path);
    motion = createRandomMotion(motionAmount);
    // one of motion.x, motion.y can be zero and this will still work
    var k = period = Math.min(Math.abs(drawWidth / motion.x), Math.abs(drawHeight / motion.y));
    for (var i = 0; i < numberOfLabels() ; i++) {
        var t = {x:0, y:0};
        if (i !== 0)
        {
            // we choose to render first label along curve traced by user             
            t = createRandomTranslation(-path[0][0], -path[0][1], drawWidth, drawHeight);
        }
        group.add(createSvgLabel(string, textPath, font, t));
        // periodicize the labels along direction of...