Monday 12 June 2017

Variable doesnt start from zero

I'm trying to paint on canvas using setInterval, but by looking the canvas it's starting from 1.06 and goes unbelievable fast. Issue what I would love to get solved: X Wont start from 1.06 it will start from 1.00 and go from there.

Here is the Fiddle: https://jsfiddle.net/r49naghf/

$(document).ready(function() {
    var canvas = $('#crashGraphic')[0];
    var graphStep = 0.1;
    var startX = 0;
    var context = canvas.getContext('2d');
    var canvasWidth;
    var canvasHeight;
    var scaleX = 30;
    var scaleY = 200;
    var border = 5;
    var drawX, drawY;

    function paintCrashGraphic(curentX, randomNumber, timeLeft) {
        canvasWidth = canvas.width;
        canvasHeight = canvas.height;
        context.lineWidth = 2;
        if ((border * 2 + curentX * scaleX) > canvasWidth) {
            scaleX = (canvasWidth - border * 2) / curentX;
        }
        if ((border * 2 + getCrashGraphicY(curentX) * scaleY) > canvasHeight) {
            scaleY = (canvasHeight - border * 2) / getCrashGraphicY(curentX);
        }
        context.strokeStyle = '#a5a5a5';
        context.clearRect(0, 0, canvasWidth, canvasHeight);
        context.beginPath();
        context.moveTo(border, canvasHeight - border);
        context.lineTo(border, border);
        context.moveTo(border, canvasHeight - border);
        context.lineTo(canvasWidth - border, canvasHeight - border);

        drawX = startX;
        var isFirst = true;
        context.stroke();
        context.beginPath();
        context.lineWidth = 3;

        context.strokeStyle = '#0d9b50';
        while (drawX <= curentX) {
            drawY = getCrashGraphicY(drawX);
            drawX += graphStep;
            if (isFirst) {
                isFirst = false;
                context.moveTo(border + drawX * scaleX, canvasHeight - border - (drawY - 1) * scaleY);
            } else {
                context.lineTo(border + drawX * scaleX, canvasHeight - border - (drawY - 1) * scaleY);
            }
        }
        if (timeLeft) {
            context.font = "100px Ubuntu-Regular,Helvetica,Arial,sans-serif";
            context.textAlign = "center";
            context.fillStyle = "#929292";
            drawString(context, 'Next round in \n ' + timeLeft, canvas.width / 2, canvas.height / 2, '#bf1c2d', '0', 'Ubuntu-Regular,Helvetica,Arial,sans-serif', '50');
        } else if (!randomNumber) {
            context.stroke();
            context.font = "100px Ubuntu-Regular,Helvetica,Arial,sans-serif";
            context.textAlign = "center";
            context.fillStyle = "#929292";
            context.fillText(drawY.toFixed(2) + 'x', canvas.width / 2, canvas.height / 2);
        } else if (randomNumber) {
            context.stroke();
            context.font = "50px Ubuntu-Regular,Helvetica,Arial,sans-serif";
            context.textAlign = "center";
            context.fillStyle = "red";
            drawString(context, 'Busted \n@ ' + parseFloat(randomNumber).toFixed(2) + 'x', canvas.width / 2, canvas.height / 2, '#bf1c2d', '0', 'Ubuntu-Regular,Helvetica,Arial,sans-serif', '50');
        }
    }

    function drawString(ctx, text, posX, posY, textColor, rotation, font, fontSize) {
        var lines = text.split("\n");
        if (!rotation) rotation = 0;
        if (!font) font = "'serif'";
        if (!fontSize) fontSize = 16;
        if (!textColor) textColor = '#000000';
        ctx.save();
        ctx.font = fontSize + "px " + font;
        ctx.fillStyle = textColor;
        ctx.translate(posX, posY);
        ctx.rotate(rotation * Math.PI / 180);
        for (var i = 0; i < lines.length; i++) {
            ctx.fillText(lines[i], 0, i * fontSize);
        }
        ctx.restore();
    }

    function getCrashGraphicY(x) {
        return Math.pow(1.06, x);
    }

    function getCrashGraphicX(y) {
        return Math.log(y) / Math.log(1.06);
    }
    paintCrashGraphic(startX);
    var timer;
    var x = 1;
    var speed = 1000/200;
    timer = setInterval(function(){
        x += 0.01;
      paintCrashGraphic(x);
    }, speed);


})



via Jordn

No comments:

Post a Comment