paper.js Racing Track

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