javascript - How do I get the screen coordinates of origin after a bunch of transforms P5.js - Stack Overflow

admin管理员组

文章数量:1315510

I'm trying to track the position of an object so I can draw a trail behind it in p5.js.

I'm moving the object around the screen with the translate() and rotate() functions, and in order to draw a trail I was going to store the object's position after each update in an array. I'm aware there was something like what I'm asking for in processing 3, the model X, Y and Z functions, but as far as I can tell these haven't been implemented in the javascript version yet.

Even accessing the canvas's current transform matrix is proving problematic, and at this point I'm considering a redesign to omit the transform part of the api until this functionality is added.

So my question basically is: is there any way to determine the screen(canvas) coordinates of (0, 0) after applying a bunch of transforms?

I'm trying to track the position of an object so I can draw a trail behind it in p5.js.

I'm moving the object around the screen with the translate() and rotate() functions, and in order to draw a trail I was going to store the object's position after each update in an array. I'm aware there was something like what I'm asking for in processing 3, the model X, Y and Z functions, but as far as I can tell these haven't been implemented in the javascript version yet.

Even accessing the canvas's current transform matrix is proving problematic, and at this point I'm considering a redesign to omit the transform part of the api until this functionality is added.

So my question basically is: is there any way to determine the screen(canvas) coordinates of (0, 0) after applying a bunch of transforms?

• javascript
• p5.js

Share Improve this question Follow edited Apr 30, 2016 at 17:12 Bikee 1,19788 silver badges2121 bronze badges asked Apr 30, 2016 at 16:57 Aaron GreigAaron Greig 8311 silver badge55 bronze badges 2

• Why not use push() and pop() around your transformations and store simply the coordinates in the array. Like it's done in the p5.js interactive example. – michaPau Commented May 3, 2016 at 14:14
• The link to the example pointed by michaPau has changed: p5js/examples/interaction-follow-3.html – Paco Abato Commented Jul 20, 2019 at 16:36

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

I have a solution for this problem here:

https://github./ChristerNilsson/Transformer

The drawingContext actually tracks this, you can query it and map back to p5 coordinates. If you're not needing this in an inner loop it will likely be cheaper than tracking everything in a extra stack paralleling what the Canvas engine is doing anyway. And this is defined by the spec, so you can rely on it.

https://html.spec.whatwg/multipage/canvas.html#transformations (see the end of this chapter where the transformation semantics are defined).

2D version:

// a c e
// b d f
// 0 0 1
// x_new = a x + c y + e
// y_new = b x + d y + f
// origin - current point - is then at:
// x = a.0 + c.0 + e = e
// y = b.0 + c.0 + f = f
// However, the context has media coordinates, not p5. taking
// the distance between points lets use determine the
// scale assuming x and y scaling is the same.
let matrix = drawingContext.getTransform();
let x_0 = matrix['e'];
let y_0 = matrix['f'];
let x_1 = matrix['a'] + matrix['e'];
let y_1 = matrix['b'] + matrix['f'];
let media_per_unit = dist(x_0, y_0, x_1, y_1);
let p5_current_x = x_0 / media_per_unit;
let p5_current_y = y_0 / media_per_unit;

You should make all the transformations inside push() and pop() and store the location inside that itself so the location gets pushed into the array every frame.

And no, you can not get the canvas coordinates of (0,0) after a bunch of transforms because translate shifts the origin(0,0) of the canvas to a new point and then that point bees the new origin.

To draw a trail, you can store the history of the object's location vector in an array. You can implement it in the update function of your animated object class. To do this, you can store P5Vector(this.pos.x, this.pos.y) and push it into an array everytime the function is called in the draw loop, then you can draw a circle or line whatever you want for the trail looping through this array.

Suppose history is an array with last 100 positions(vector objects) of the animated object, in the draw loop you can :

for(var i=0; i<obj.history.length; i++)
{
  var loc = obj.history[i];
  ellipse(loc.x, loc.y, 15, 15);
}

本文标签： javascriptHow do I get the screen coordinates of origin after a bunch of transforms P5jsStack Overflow