paper.js Racing Track

Question

Я хочу сделать графический вывод для моих гоночных симуляций, поэтому я нашел 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;
    }
}

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