I have a small square sprite, and I need to get the top center of the sprite based on rotation.
Here's an image describing what I want:
The left sprite is the sprite at it's natural position, and the other sprites are rotated. The black dot's position is what I want to get (the position on the sprite).
I know this is probably a dumb question achieved with a basic knowledge of trig, but I can't figure it out.
I got it, here's my solution:
x = (float) (PlayerEntity.getPos().x + Math.cos(Math.toRadians(PlayerEntity.getAngle())));
y = (float) (PlayerEntity.getPos().y + Math.sin(Math.toRadians(PlayerEntity.getAngle())));
Related
I have an object rotated around point (0,0). I can't change the anchor point. The rotation is done by another system and I can't influence that. All I have control of is the position of the element (and I can access the rotation value).
Now, I'd like to adjust the element position to make it appear like it's rotating around a specific pivot point.
How it is:
How I want it to be:
I could be wrong (your description honestly isn't great) but it looks to me like you just want to have the anchor point (that you have no control over) in the center of your image. So you just need to know the anchor point, and then calculate, probably, the top-left corner of your image based on the center of it being at the same point as the anchor. If the anchor point is (a,b), the width and height of your image are w and h, respectively, then the top-left corner of your image should go at the point (a - w/2, b - h/2). That is you need to subtract off half of both dimensions.
Every time I create a sprite to use as css background-image, I have to crunch the math and remind myself how to remember the X and the Y coordinates in pixels. How can I remember it or see it visually to keep it straight?
I came up with this graphic, hope it's helpful to someone else as well.
Think 'Y' rhymes with 'SKY' so thats your top measurement (distance in px) from the top. That leaves 'X' as the remaining distance (distance from left in pixels)
When I say distance from left and distance from top, I am referring to the distance in pixels from the side of your overall image to when the part you want to show, begins.
I usually keep the images anywhere on the Sprite sheet and then check out there co-ordinates by clicking on each graphic element in Fireworks(i use fireworks) and then negating the co-ordinates. For eg:if an element is at x=23px and y=20px, then in the CSS, i use background-position:-23px -20px. This always does the work.
I am fiddling around with CSS3 perspectives & transformations. Starting from this great 3D cube example, I would like to modify the cube such that it does not just rotate around its center, but roll over its edges.
I got the first left tilt working by rotating the cube around the z-axis, with -webkit-transform-origin: bottom left (see fiddle; example limited to left tilts for simplicity). For a subsequent left tilt, I am struggling how to further adjust the origin. Conceptually, I would need to set the origin relative to the parent container (i.e. for consecutive left tilts, it should gradually wander to the left in 200px steps).
Any help is greatly appreciated!
I've had a go at this and I think you'll need to look into the css matrix transformations available to you to get exactly what you want.
Unfortunately it's not as simple as rotate, then move transform origin.
What happens is the cube is rotated around that edge, but then if you move the point of transform it applies the previous transform to the cube using this new point of origin.
What's more you need to also translate the position of the cube. You can't move it along purely using rotations.
Matrices should solve all of this I think (I don't know an awful lot about them I'm afraid)
You can see the modified jsfiddle I created where the cube is rotated and translated.
The point of translation is the center though, so it doesn't look like the cube is "rolling".
here's the crucial extra code:
...
//left
zAngle -= 90;
xPos -= 50;
//rotate and translate the position of the cube
$('#cube')[0].style["WebkitTransform"]="translateX("+xPos+"px) rotateZ("+zAngle+"deg)";
...
js Fiddle here: http://jsfiddle.net/DigitalBiscuits/evYYm/20/
Hope this helps you!
I think this tutorial may help you.
http://desandro.github.io/3dtransforms/docs/cube.html
If you want to roll over its edges, just rotateZ and translateX. but how fast you want rotate, you may have to caculate it.
http://desandro.github.io/3dtransforms/examples/cube-02-show-sides.html
I'm working on a resize and crop workflow to allow images to be resized and then cropped to a specific size. Normally one resize the smallest dimension to fit the destination size, and then crop to get eg. a square.
However, in this case, I have some additional face-detection data: face_x, face_y and face_width and face_height. The X and Y coordinates of the face is top-left point in the original picture of where the face starts.
I want the cropped area to be centered at the face instead of in the center of the image.
Any smart minds out there who can help me out? Thanks!
The center of the face is
(face_x + face_width/2, face_y+face_height/2).
If you want the image to be (w, h) at the end, then the upper left is
(face_x + (face_width - w)/2, face_y + (face_height - h)/2)
I have a rectangle of any arbitrary width and height. I know X,Y, width, and height. How do I solve the upper right hand coordinates when the rectangle is rotated N degrees? I realized if it were axis aligned I would simply solve for (x,y+width). Unforunatly this doesn't hold true when I apply a transform matrix on the rectangle to rotate it around its center.
It's usually easiest and fastest to let Flash's display code do these kinds of things for you. Create an empty Sprite and put it inside the rectangle's display object at the corner you want to track. Then, find the location of that sprite in the coordinate space of your choice:
var p:Point = new Point(0,0);
myRectangle.myCornerSprite.localToGlobal( p );
someDisplayObject.globalToLocal( p ); // for a coord space besides the stage
This gets you out of making any assumptions about the rectangle's design (i.e. registration point), and works even if the rectangle should be skewed or scaled as well as being rotated. Plus, this will be much easier to implement and maintain then a mess of cosines and whatnot.
(Note that the code above assumes that "upper right" refers to a specific corner - if you want to examine whichever corner happens to upper-rightmost at the moment, I'd simply add do the same thing with a sprite at all four corners, and pick whichever is to the upper right in global coords.)
You just have to calculate the point on a circle for the given radius. The center of your rectangle will be the circle's origin and any corner will be a point on the circle's circumference. You need to use trigonometry to calculate the new point using the rotation. I don't have time right now to explain all this, but here is a link to a decent 2D Javascript library I've used in the past and which should give you everything you need (bearing in mind that the math is virtually the same in Javascript and ActionScript) to work it out for yourself.
http://jsdraw2d.jsfiction.com/viewsourcecode.htm