I know this mightmight be silly, but I am finding it difficult for me.
I have a canvas 708px x 420px
I loaded an image texture using a sprite. My image size is 348px x 623px.
I set my sprite position at B(world coordinate). I want to scale my Spritr such that it meets point A.
Distance between A, B is constant in real world. But they may have diffrent angle.
Although this is not a solution for your request, this is just to encourage you to be more specific. This might increase the chance for someone to answer you.
What exactly is difficult? How to scale a sprite? How to calculate the scale factor? How to implement scaling with code?
I truly struggle to understand what does it mean for a point to have different angle.
Also, it is impressively helpful when you have some working (more or less) demo in CodePen, JSFiddle or CodeSandBox.
Hi, thanks for replying.
Difficulties:
- Finding the scale factor of the sprite
- How i map any arbitary point of a sprite to any point on the screen. (So far I know if i set sprite.position, the center of sprite is set/placed to that point)
Different angle means:
I have 3 points B, A, C. Lets say same as like human hand from shoulder to wrist. I have a pointB(starting of shoulder), pointA(elbowPoint), and pointC(wrist point). I have twi image, one from shoulder to elbow, another from elbow to wrist.
Now, both of these image should be connected at elbow point right? To look like a full human hand. But they can rotate independently, like the rotation angle between pointB-PointA may be different then PointA-PointC. But the distance of these points are always constant right, coz a human hand is always of fixed size.
For rotation:
pointB_NDC = pointB.clone().project(camera)
pointA_NDC = pointA.clone().project(camera)
diff = pointB_NDC.clone().sub(pointA_NDC)
sprite.material.rotation = Math.atan2(diff.y, canvasRatio*diff.x)
For scaling:
midNDC = pointB.clone().lerp(0.5, pointA)
mid = midNDC.unproject(camera)
sprite.position.copy(mid)
sprite.scale.y = pointB.distanceTo(pointA)
See since the pointB to pointA is the length of human hand from shoulder to elbow, I only scale the Y value of the sprite. (I do the scaling for once)
Similarly i do same calculation for pointA to pointC(from elbow ro wrist)
So, my both sprite should always be connected at elbowPoint(pointA) like a human hand should.
Thank you. I could create a JS Fiddle, but however the data comes from an external source. Without seeing that exact data, it will be hard for anyone to comment, so i thought if someone could suggest the in general approach.
Attached my points in the screen. (Didnt put the sprite yet). Green point is the shoulderPoint(pointB), red is tge elbow(pointA), yellow is the pointC(wrist point). I want my shoulder-elbow sprite start from green and end atred point. And elbow-wrist sprite start from red point and end at yellow point. So that these two sprites are always seems connected at red point.
There is no need to use the exact data. You could always make a demo, even using some arbitrary fake data. Here is an example of three red points A, B, C and two rhomboid sprites AB and BC. The sprites are positioned, scaled and rotated so that they are always connected.
https://codepen.io/boytchev/full/gOQrjmQ
Hi, thank you so much for the effort. I will share my fiddle as well.
But I have a question for your solution, it does matter if the sprite shaoe is ramboid or not right? Because, in my case my sprite(image) shape is rectangle. Where the red poins you show for each sprite should match the top-rght and bottom-right vertices of the rectangle for each sprite. (Or may be i can create image such that where the points should match the middle point of top-edge and middle point of bottom edge).
I already using the same technique you are showing. Just for rotation i am using the NDC coordinates and also considering the canvas aspect ratio. However it doesnt work as expected. Sometimes i find that the distance between any two point is changing in the screen (though their length gives the same result, but their visual distance in the screen is not same. I guess its for the camera positioning)
Sprites are rectangles. The area around the rhomboids is transparent. Please, edit my CodePen in this way: find line 44 with strokeRect, add another strokeRect below it:
context.strokeRect( 50, 256-30, 412, 60 ); // line 44
context.strokeRect( 0, 0, 512, 512 ); // add this line
The result should show the actual size of the sprite:
If you want to connect vertices (not midpoints), then just shift the sprites into perpendicular direction:
1 Like
Hi, thank you for your suggestions. It works when the points are edge of the sprites. However please see the image attached
I have these two svg images for wrist and shoulder. The world coordinates that I know are coordinate of a specific point in the svg image. For sprite1 I know coordinates of A, B and for sprite2 I know C, B. B is common for both of them. See the mid point of A-B or B-C may not be the mid point of the image. However I created the SVG images in such a way that, the whole svg image mid point and my two desired points mid point is same. So when I position the images(sprite) on the mid point of those two known points my sprite sits at correct position. However, my scale doesnt work. I want to map my sprites(SVG’s) A, B, C point on the corresponding my know A, B, C world coordinates.
And also you used 2D point. But points are from 3D coordinates. You used a static camera, but my camera also updates in the loop to see the points accordingly. And also your sprite visual perception(size) changes when rotate. But consider you are seeing a human hand from front/side. You will always see their size constant, human hand size will not change during rotation(I mean camera is also updated such a way)
My demo showed how to rotate and scale a sprite so that it starts from one point and ends in another point. This is the main topic of this thread.
It is entirely up to your program to move points A, B, C and the camera is such a way, as to preserve the visual distances between points. And also it is up to your program to map the positions of control points onto the image of the body parts.
Here is another snapshot, where points are inside the sprites. It is done by extending the sprites along their local y-directions by 0.7 units.
AB.scale.y = v.length()+0.7;
BC.scale.y = v.length()+0.7;
1 Like
Yeah I understood, Thank you for the effort. I was just wondering what am I doing wrong. I have the same implementation, so i was thinking I missed something or done something wrong. Now I strongly believe the problem lies within my camera positioning. Thank you.
1 Like