I've built a 3D icosahedron in AS3 that I'm going to use as a 20-sided die. With rotationX, rotationY, and rotationZ all set to 0, it looks like the top left picture. Now I'm trying to find the proper rotations for each number so that the face is perpendicular to the screen, like in the top right picture for #1. The problem is that when I rotate it one way, the axes of rotation are changed as well. For example, in the bottom left picture when I was trying to do #2, I set rotationZ to 108, but now rotationX will not turn it straight downwards as it did before.
I could just eyeball it and get approximate rotations that looked about right, but I would rather have exact rotations. Any ideas?
Nevermind, I needed to use Matrix3D instead for my rotations.
Related
The y axis instead of going upwards, goes downwards, whilst the x axis has the normal sense from left to right. Why?
It is one of the most annoying obstacles when doing the graphic part of a website because the geometry has to be recalculated, as the usual calculation as in the cartesian plane will be wrong. So, why does this happen? Is there a specific reason? Did they not notice that they were betraying traditional mathematics?
I am trying to get an effect like this:
http://www.welcomeanimations.com/welcome_animated_gifs_rotating_sign_orange_chrome_k_1.htm
I have tried all sorts of things:
Matrix translation/rotation - spins the text around the 'Z' axis, instead of 'Y'
Adding TextField to a sprite, and Sprite.rotationY++: reg. point is upper left corner
Adding to MovieClip - same as above (an article said MovieClip's reg. point was centered).
This should be trivial?!?! Help me stackoverflow, you're my only hope!
So you have to remember, Display objects scale and rotate around their local coordinate system. so when you put a textfield in a sprite, you need to center it in that sprite's coordinate system. And doing that for textfields is annoying because their width/height isn't always accurate but there is trick for that: get visual bounds, but normally you can take half of somethings width and height
I've created a prototype for you on wonderfl so you can see the solution working in action. Click on the blue square to see how the local coordinate system messes with the rotation
Finally as you use thing you might find things not rotating in 3D space quite right, this should be able to fix that.
I have a fiddle here you can play with. Move around the rotateX and rotateY sliders to see. The part of the element that is closest to you is smaller while the part that is farther away is bigger. If you flip it around using
transform:rotateZ(180deg);
it looks right but I don't understand why it doesnt just look right in the first place.
update
it makes sense if you look at this 3d cube. the transform origin of the cube is the middle of the cube.
Isometric
As far as I can tell the methods work as they are suppose to, it's just that they are rotated in isometric 3D, that is without perspective. This will make your closest and further edges will have the same size, unlike real 3D where the further edge will look smaller and the closer will look bigger.
For a in depth look at isometric projection give the wikipedia article a read.
Perspective
If you want to get perspective on the rotations you have to add the perspective property to your CSS for the containing element. If you add -webkit-perspective: 1000px;to <body> in your first fiddle and view the result in Chrome you'll get perspective 3D like you probably wanted.
More info on that property can be found in the CSS3 transform spec.
I have this background that I'm using for a section, and it starts with a small arrow engraving at the top:
However I'm trying to get it when it repeats to clip out the top arrow part, just leaving the texture in the middle part. I was wondering if it was possible to do it with something like webkit? Thanks
You can't. You need to come up with another method of doing so. There are a number of ways to do this. Personally, I would use only the arrow, but use inner box-shadow for the shadows on everything else. This way you have smaller image being used, and it will always fit the size of the container.
Break up the background image from the pointer and make the two separate sprites. You can get tricky with the pointer and have it point in all 4 directions in the same image. This will allow you to pop up the bubble in all directions from the source.
You can't repeat both x and y on a usable sprite.
I have a maximum of three sprites in my projects.
One for non-repeating elements, another for repeat-x, another for repeat-y.
I find the clip property pretty much useless.
Im trying to achieve something similar to the flash movie in the below link.
http://mathopenref.com/coordtrianglearea.html
As we drag the points of the triangle, the coordinates labels, ( A(1,2)) are properly aligned and arrange themselves so that they never collide with each other and never falls inside the triangle.
Please guide me..
Thanks in advance.
in the example you gave, the textfield seems to be aligned outside the triangle on the angle bisection of the corresponding corner.
for the position in one corner, take the two vectors to the other corners. normalize them and then add them and normalize the resulting vector again. this gives you the vector v of the angle bisection in that corner. multiply the vector with a negative constant and add it to the corner, and you'll obtain a position p outside the triangle. finally, if the angle of v is between pi/2 and -pi/2 (pointing right) align the right border of the label to p, and the left border otherwise.
for simple vector calculations, please see flash.geom.Point.