I am trying to build a small slot car racing game with paper.js and I am having trouble with moving the car-object alongside the track I created.
I have searched for other threads, but didnt find explanations for a bezier-curved track.
I have already drawn a racingtrack and a car. The car is positioned on the track, but it's not moving, although I implemented an onFrame-function, which should change its position.
I am guessing that there is something wrong with racingtrack.getPointAt(i*length)
in the onFrame-function at the bottom, but I can't figure out what.
The code makes sense to me and above racingtrack.getPointAt(offset)
is working.
Could somebody please help me?
Thanks a lot!
Here is my code:
//DRAW A RACING TRACK
var racingtrack = new Path();
racingtrack.strokeColor='#DA0734';
racingtrack.strokeWidth=4;
var handleInTop = new Point(-90, 0);
var handleOutTop = new Point(90, 0);
var handleInSide = new Point(0, -90);
var handleOutSide = new Point(0, 90);
Segment1 = new Segment(new Point(230, 100), handleOutTop, handleInTop);
Segment2 = new Segment(new Point(100, 275), handleInSide, handleOutSide);
Segment3 = new Segment(new Point(230, 450), handleInTop, handleOutTop);
Segment4 = new Segment(new Point(435, 450), handleInTop, handleOutTop);
Segment5 = new Segment(new Point(765, 100), handleInTop, handleOutTop);
Segment6 = new Segment(new Point(970, 100), handleInTop, handleOutTop);
Segment7 = new Segment(new Point(1100, 275), handleInSide, handleOutSide);
Segment8 = new Segment(new Point(970, 450), handleOutTop, handleInTop);
Segment9 = new Segment(new Point(765, 450), handleOutTop, handleInTop);
Segment10 = new Segment(new Point(435, 100), handleOutTop, handleInTop);
racingtrack.add(Segment1, Segment2, Segment3, Segment4, Segment5, Segment6, Segment7, Segment8, Segment9, Segment10);
racingtrack.closed=true;
racingtrack.fullySelected=false;
racingtrack.position = view.center;
//DRAW A RACING CAR
var racingcar = new Path();
racingcar.fillColor = '#DA0734';
var handleInRightCar = new Point(0, 13)
var handleOutRightCar = new Point(0, -13)
FirstCorner = new Point(100, 470);
SecondCorner = new Point(100, 496);
ThirdCorner = new Point(140, 496);
FourthCorner = new Segment(new Point(145, 483), handleInRightCar, handleOutRightCar);
FifthCorner = new Point(140, 470);
racingcar.add(FirstCorner, SecondCorner, ThirdCorner, FourthCorner, FifthCorner);
racingcar.closed = true;
//PUT RACINGCAR ON STARTING POINT
var offset = 0;
var startposition = racingtrack.getPointAt(offset);
racingcar.position = startposition;
//MOVE CAR ALONGSIDE RACINGTRACK
//set the number of parts the track is divided into
var amount = 100;
//calculate the length of one part
var length = racingtrack.length / amount;
//animate the car, moving from position to position alongside the racingtrack
var carposition = new Point();
function onFrame(event){
for(var i=0; i < amount+1; i++){
carposition = racingtrack.getPointAt(i * length);
racingcar.position = carposition;
}
}