0

私はキャンバスとデルタ時間の更新に非常に慣れていないので、無知を許してください。心拍数モニターを再作成しようとしています (jsfiddle に示されているスクリーンショット、https://www.youtube.com/watch?v=ew6Jp74vaN4に一致する理想的な最終レンダリング)

特にブラウザのサイズを変更したり、他のアクションを実行したりするときに、なぜ散発的に動作するように見えるのかわかりません（デルタタイミングの背後にあるアイデアは、ラグをなくすことだと思いました）

http://jsfiddle.net/alexcroox/CjCkV/

次のポイントに移動する必要があるときに、dt を使用して解決しています

var distance = Math.sqrt(
    (nextPosition.x-lastPosition.x)*(nextPosition.x-lastPosition.x) +
    (nextPosition.y-lastPosition.y)*(nextPosition.y-lastPosition.y)
);

var duration = distance/this.speed;
var t = this.totalTime/duration;
var x = (1.0 - t)*lastPosition.x + t*nextPosition.x;
var y = (1.0 - t)*lastPosition.y + t*nextPosition.y;

カウンターと sin だけを使ったよりスムーズなバージョンもありましたが、それほどスムーズでも柔軟でもないと言われました (最終的には「テール」をフェードアウトしたいと考えています)。

http://jsfiddle.net/alexcroox/AZ9zC/

4

1 に答える 1

1

以下のコードを少し簡略化しました。これがデモです（乱雑なコードを使用）http://jsfiddle.net/CjCkV/19/

Game.prototype.renderBeat = function()
{
    // Get our current/target positions
    var position = this.points[this.nextPoint];
    var lastPosition = this.points[this.currentPoint] || position;

    var x = 0;
    var y = position.y;

    this.context.beginPath();
    this.context.moveTo(x+1, lastPosition.y);
    this.context.lineTo(x, position.y);
    this.context.closePath();

    this.context.stroke();

    if (this.points[this.currentPoint]){        
         this.nextPoint = this.currentPoint;
    }

    // slowly fade out trail
    this.context.fillStyle = "rgba(0,0,0,.01)";
    this.context.fillRect(-this.translated, 0, this.canvas.width, this.canvas.height);

    // this allows us to only care about the amplitude of the wave. 
    this.context.translate(1,0);
    this.translated += 1;

    this.currentPoint++;

    // if we've reached the last point in our array, loop around
    if(this.currentPoint > this.points.length)
    {   
        // random death (this randomly unsets any point except the first, slowing eliminating the "pulse"
        this.points[Math.floor(Math.random()*(this.points.length-2)+1)] = undefined;

        this.currentPoint = 0;
        this.nextPoint = 0;

        if (this.translated > this.canvas.width){
            this.context.translate(-this.translated, 0);
            this.translated = 0;
        }
    }
};
于 2012-12-20T22:32:38.560 に答える