paper.js 赛道

Question

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

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

这是我的 example:

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;
    }
}

Answer 1

您可以使用与您用来确定位置的计算类似的计算：

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 };
}

paper.js 赛道

paper.js Racing Track

html

javascript

path

racing