Recent Changes - Search:

go to the forum

Contents

Site

Help

« jul 2022 · nov 2022 »

add a calendar item

JavaScript / Sawtooth Drawer

JavaScript.SawtoothDrawer History

Hide minor edits - Show changes to output

2013-03-13 22:14 [UTC-7] by Blue Hell -
Added line 1:
{script: jquery-1.9.1.min.js}
Deleted lines 2-4:

<script type='text/javascript' src='http://electro-music.com/wiki/pub/common.js'></script>
<script type='text/javascript' src='http://electro-music.com/wiki/pub/jquery-1.9.1.min.js'></script>
Added lines 1-142:
(:html:)

<script type='text/javascript' src='http://electro-music.com/wiki/pub/common.js'></script>
<script type='text/javascript' src='http://electro-music.com/wiki/pub/jquery-1.9.1.min.js'></script>

<script type="text/javascript">
var sawtoothData = {
    INSET : 80,
    clearCanvas : function(context2D) {
        var canvas = $("#sawAnimCanvas");
        context2D.fillStyle = "#ffffff";
        context2D.fillRect(0, 0, canvas.width(), canvas.height());
    }
};

function SawPainter() {
    this.value = 1.0;
    this.baccellerate = -0.1;
}

SawPainter.prototype.getCurrentY = function() {
    return sawtoothData.INSET - this.value*55;
};

SawPainter.prototype.getCurrentX = function() {
    return 20;
};

SawPainter.prototype.advanceValue = function() {
    if (this.baccellerate > 0.0) {
        this.value += this.baccellerate;
        this.baccellerate *= 2.8;
        if (this.value >= 1) {
            this.value = 1;
            this.baccellerate = -0.1;
        }
    } else {
        this.value -= 0.07;
        if (this.value <= -1) {
            this.value = -1;
            this.baccellerate = 0.3;
        }
    }
};

function SawGraphPainter(initY) {
    this.values = [];
    for (var i = 0; i < 100; i++) {
        this.values[i] = initY;
    }
    this.valueIndex = 0;
}

SawGraphPainter.prototype.addValue = function(value) {
    this.valueIndex++;
    if (this.valueIndex >= this.values.length) {
        this.valueIndex = 0;
    }
    this.values[this.valueIndex] = value;
};

SawGraphPainter.prototype.newIterator = function() {
    var graphPainter = this;
    var iteratorIndex = graphPainter.valueIndex;
    var stopIndex = iteratorIndex + 1;
    if (stopIndex >= graphPainter.values.length) {
        stopIndex = 0;
    }

    var iterator = {
        hasNext : function() {
            return iteratorIndex != stopIndex;
        },
        next : function() {
            if (iterator.hasNext()) {
                var result = graphPainter.values[iteratorIndex];
                iteratorIndex--;
                if (iteratorIndex < 0) {
                    iteratorIndex = graphPainter.values.length-1;
                }
                return result;
            }
            return "error";
        }
    };
    return iterator;
};

SawGraphPainter.prototype.paint = function(context2D, refX) {
    var dx = 4;
    var xOffset = 100;
    var iterator = this.newIterator();
    var firstValue = iterator.next();
    context2D.beginPath();
    context2D.moveTo(refX, firstValue + 0.5);
    context2D.lineTo(xOffset, firstValue + 0.5);
    context2D.strokeStyle = "#ff0000";
    context2D.lineWidth = 1.0;
    context2D.stroke();

    context2D.beginPath();
    context2D.moveTo(xOffset, firstValue);
    while (iterator.hasNext()) {
        xOffset += dx;
        context2D.lineTo(xOffset, iterator.next());
    }
    context2D.strokeStyle = "#000000";
    context2D.lineWidth = 2.0;
    context2D.stroke();
};

var sawPainter = new SawPainter();
var sawGraphPainter = new SawGraphPainter(sawPainter.getCurrentY());

$(function() {
    var animating = false;
    var $sawAnimCanvas = $("#sawAnimCanvas");
    var context2D = $sawAnimCanvas[0].getContext("2d");
    sawtoothData.clearCanvas(context2D);
    context2D.font = "40pt Trebuchet MS";
    context2D.fillStyle = "#aaaaaa";
    context2D.fillText("Click to", 180,70);
    context2D.fillText("Draw Sawtooth!", 100,130);

    setInterval(function() {
        if (animating) {
            var context2D = $("#sawAnimCanvas")[0].getContext("2d");
            sawPainter.advanceValue();
            sawtoothData.clearCanvas(context2D);
            sawGraphPainter.addValue(sawPainter.getCurrentY());
            sawGraphPainter.paint(context2D, sawPainter.getCurrentX());
        }
    }, 1000/30);
    $sawAnimCanvas.click(function() {
        animating = !animating;
    });
});

</script>

        <canvas id="sawAnimCanvas" width="560" height="170"></canvas>
(:htmlend:)

Edit - History - Print - Recent Changes - Search Page last modified on 2013-03-13 22:14 [UTC-7] - 661 views