paper.js Racing Track

Question

I want to make a graphical output for my racing simulations, so I have found paper.js.

With this code, I can draw each car on a specific course. But I have no idea how I can change every round the speed: speed_car1, speed_car2, speed_car3. So I want to change every round the speed of each car.

Here is my 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

You could use similar calculation to the one you're using to determine location:

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