paper.js Racing Track

paper.js Racing Track

本文关键字：Track Racing js paper      更新时间：2023-09-26

我想为我的赛车模拟制作一个图形输出，所以我找到了paper.js.

使用这段代码，我可以绘制特定路线上的每辆车。但我不知道如何改变每一轮的速度:speed_car1, speed_car2, speed_car3。所以我想每轮改变每辆车的速度。

下面是我的例子:

var car1 = new Shape.Rectangle({
    from: [0, 0],
    to: [10, 5],
    fillColor: 'red'
});
var car2 = new Shape.Rectangle({
    from: [0, 0],
    to: [10, 5],
    fillColor: 'blue'
});
var car3 = new Shape.Rectangle({
    from: [0, 0],
    to: [10, 5],
    fillColor: 'yellow'
});
var speed_car1 = 1.0;
var speed_car2 = 1.2;
var speed_car3 = 1.5;
var diagonal = new Point(view.size).length;
var path = new Path();
path.strokeColor = 'black';
path.add(new Point(60, 130));
path.add(new Point(100, 100));
path.add(new Point(200, 50));
path.add(new Point(280, 60));
path.add(new Point(340, 70));
path.add(new Point(500, 250));
path.add(new Point(470, 320));
path.add(new Point(100, 320));
path.add(new Point(60, 130));
path.smooth();
car1.onFrame = function(event) {
    var offset = event.count * speed_car1;
    var loc = path.getLocationAt(offset % path.length);
    if (loc) {
        this.position = loc.point;
        this.rotation = loc.tangent.angle;
    }
}
car2.onFrame = function(event) {
    var offset = event.count * speed_car2;
    var loc = path.getLocationAt(offset % path.length);
    if (loc) {
        this.position = loc.point;
        this.rotation = loc.tangent.angle;
    }
}
car3.onFrame = function(event) {
    var offset = event.count * speed_car3;
    var loc = path.getLocationAt(offset % path.length);
    if (loc) {
        this.position = loc.point;
        this.rotation = loc.tangent.angle;
    }
}

您可以使用类似的计算方法来确定位置:

var car1 = new Shape.Rectangle({
    from: [0, 0],
    to: [10, 5],
    fillColor: 'red'
});
var car2 = new Shape.Rectangle({
    from: [0, 0],
    to: [10, 5],
    fillColor: 'blue'
});
 
var car3 = new Shape.Rectangle({
    from: [0, 0],
    to: [10, 5],
    fillColor: 'yellow'
});
var speed_car1 = 1.0;
var speed_car2 = 1.2;
var speed_car3 = 1.5;
var diagonal = new Point(view.size).length;
var path = new Path();
path.strokeColor = 'black';
path.add(new Point(60, 130));
path.add(new Point(100, 100));
path.add(new Point(200, 50));
path.add(new Point(280, 60));
path.add(new Point(340, 70));
path.add(new Point(500, 250));
path.add(new Point(470, 320));
path.add(new Point(100, 320));
path.add(new Point(60, 130));
path.smooth();
car1.onFrame = function(event) {
    var offset = event.count * speed_car1;
    var loc = path.getLocationAt(offset % path.length);
    if (loc) {
        this.position = loc.point;
        this.rotation = loc.tangent.angle;
    }
}
car2.onFrame = function(event) {
    var offset = event.count * speed_car2;
    var loc = path.getLocationAt(offset % path.length);
    if (loc) {
        this.position = loc.point;
        this.rotation = loc.tangent.angle;
    }
}
car3.onFrame = function(event) {
    var offset = event.count * speed_car3;
    var loc = path.getLocationAt(offset % path.length);
    if (loc) {
        this.position = loc.point;
        this.rotation = loc.tangent.angle;
    }
    // compare offset with some epsilon
    if ((offset % path.length) < 1) {
      // adjust speed
      speed_car3 = speed_car3 *2 };
}

相关文章：