Making a trail with an image

Hi,
I have a question about making a trail (which is goin to be an image of a car trail) in my code.
Im working on a project where you can race with a car and I thought it would be a nice idea to leave a trace on the road where you rode with your car.
I tried working with an arraylist with PVector, but I an issue with this. Our car is standing still but the roads move (this makes it feel like the car is driving, but it’s not). We did this because it was easier with the camera etc.
But now I don’t know how to fix this. Do any of you have an idea on how to find a solution to this problem?
I would love to hear it!

If the purpose is to leave a trace, so to display fixed points, why use PVector ? Just display points at the coordinates of your car shoud be right, shouldn’t ? Maybe an example of your code and some images should help, because I don’t really see how you do your path…On a sattelite map, or directly on your images ?

I worked on it a little bit more today and I made some progress:


The tracks can spawn, but the positioning still isn’t right.
Here are some prnts screens from the code:
(I will send more pictures of the code in other replies, because I can only use one image)

Hopefully it’s more clear on what I want to achieve. And thank you for trying to help :smiley:

The track class:

The car class:
image

If you can paste your code, it’s easier to test it :wink:

But as I can see, you display an image for yours tracks, wich is positioned depending on car coordinates. I think that your track image is only two brown squares, right ?
Use an image for that could be more difficult than using rect() method I think, because when your can drift, there are not only two lines, but four, and your image provide only two.
Moreover, even if your car is rotating, if the x and y coordinates stay the same, so your image (of tracks) will not follow this movement, because tracks will have to shift on left or right to follow wheels positions.

I don’t if it was very clear, but the most important is : use an image for this is more difficult than use the simple rect() method I think.

If you define 4 positions on the image for the 4 wheels, and you draw a rect for each one, it will follow yours wheels.

//in car class
void Draw()

//fill, stroke, translate and rotate
//if you consider that your image size is (50,120)
rect(0,30,7,15) //top left
rect(43,30,7,15) //top right
rect(0,90,7,15) //bottom left
rect(43,90,7,15)//bottom right
image(carImage,0,0,size * 2, size);

Value are arbirtrary, you will put correct positions here. Rect will consider rotations and so, if your car rotate, you won’t have only two but the 4 tracks as we can expect it.

PS : the way that you call a new track is wrong :

new Track(car.x, car.y + car.rotate));

doing this, you only the value of your variable rotate to y position, so this why tracks are more behind your car,I think.

And instead of doing this :

fill()
stroke()
translate(x,y);
rotate(value)
//other code
rotate(-value)
translate(-x,-y);

use pushMatrix() and popMatrix() :

pushMatrix()
fill()
stroke()
rotate(value)
translate(x,y)
popMatrix();

Thereby all this changes will be constrain between the two…see https://processing.org/reference/pushMatrix_.html
I hope it will help you,

Thank you so much for your help. i will try to import this feedback in my code tomorrow.
I really appreciate that you took the time to help me!