Heyho. I just came up with a tricky question.
I did something like this: http://jsfiddle.net/LspdF/1/
As you cann see there are more than 4 sites. Thats why I did the following:
Whenevery the pic-numer is greater than the last pic-number I turn the cube left, otherwise rigt. Thats why it can happen, that the css is somewhat like this:
transform: rotateY(450deg)
Since a circle only has 360 deg it turns and turns but always in the right direction.
Now I wanted to add a nice effect. Something like this: http://jsfiddle.net/p8a2t/
For this effect I need the 14th value of the 3d matrix created by the browser (z-value of translation). Since this value is poorly not the same as translateZ(), I have to use the matrix3d()-attribute.
Thats why I calculate the rotateY myself. But as you know the sin and cos are periodic and wont work with my 450deg. They reset the cube to 90deg which makes the cube spin back very fast.
My Question: How to denie that? Is there any possibility to change the matrix for spinning more than 360deg?
PS: The effect is realized using transition. There may be code in the fiddles which isnt used since I had to create both examples at once.
PPS: Sometimes the calculation has fatal numeric errors (near zero but not rly zero). I tried to avoid that using toFixed but for some reason that wont work sometimes. Same with Math.round. Note that you can break the second example clicking many links while the animation is still not done. But thats no point here :)
Any help is appreciated!
Related
I found this interesting animation and wonder if it's possible to repeat it in the PaperJS? It seems like it could be made of a group of circles, rotated around another circle.
But the problem is - when these objects are in a group I can't use sendToBack() per each, it's not going to work. Here is the Sketch example, that doesn't work.
P.S. Here is a simplified version of how it could be achieved, but it works only for 1 element, and only for animation along one axis.
If you still want to have your object grouped, a basic solution could be to have 2 groups: one below and one above the circle and toggle items visibility.
Just to demonstrate the idea, this sketch extends your code in this way.
I think that the way you currently decide if the item should be below or above can be improved though for a better result (you could try to detect intersection between the item and the circle rather than only checking the position).
I am not sure how to put this problem in a single sentence, sorry if the title is misleading.
I am currently developing a simple terrain editor with a circle-shaped brush size. The image below shows a few cases that represent my problem.
additional info: the square size is fixed and uniform and in the current version, my concern is only to find which one is hit and which one is not (the amount of region covered is important for weighting the hit, but probably not right now)
My current solution (which is not even correct for a certain condition) is: given a hit in a position (x, y) with radius r, loop through all square from (x-radius, y-radius) to (x+radius, y+radius) and apply 2-D box to circle collision detection. But I don't think this is optimal (or even correct IMO).
Can anyone help me with this one? Thank you
Since i can't add a simple comment due to bureaucracy on this website i have to type it out here.
Anyway you're in luck since i was trying to do this recently as well! The way i did it is i iterated through the vertex array and check if the current vertex falls inside the radius of the circle. But perhaps what you want is to check it against each quad center and if that center falls inside the radius then add the whole quad as it's being collided.
Of course depending on the size of your grid the performance will vary so it's good to try to iterate through as few quads as needed. Though accessing these quads from the array is something you have to figure out yourself.
https://www.youtube.com/watch?v=UQINoSwvmto
My goal is to rotate the object just like how it's done in Photoshop (video above)
I can't seem to figure out how to do it. I've tried several solutions i saw here but none worked. they either used the objects up vector to "look at" or just used one axis instead of calculating the angle between the first touch and the latest touch. There lies my second problem, when I tried that solution sometimes the angles would come out janky and the object would spin weirdly
The best example of what I am trying to achieve is on this youtube video
http://www.youtube.com/watch?v=53Tk-oGL2Uo
The letters that make up the word 'Atari' fly in from the edges of the screen spinning and then line up to make the word at the end.
I know how to make an object move across the screen, but how do I calculate the spinning so that when the object gets to its end position it's facing the correct direction?
The trick is to actually have the object(s) in the right position for a specific time (say t=5.0 seconds) and then calculate backwards for the previous frames.
i.e. before 5.0 seconds you rotate the object(s) by [angular velocity] * (5.0 - t) and translate by [velocity] * (5.0 - t)
If you do this, then it will look like the objects fly together and line up perfectly. But what you've actually done is blown them apart in random directions and played the animation backwards in time :-)
The CORRECT way of doing this is using keyframes. You can create the keyframes in any 3D editor (I use MAX, but you could use Blender). You don't necessarily need to use the actual characters, even a cuboid would suffice. You will then need to export those animation frames (again, in MAX I would use ASE - COLLADA would work with Blender) and either load them up at runtime or transform them to code.
Then it's a simple matter of running that animation based on the current time.
Here's a sample from my own library that illustrates this technique. Doing this once will last you far longer and give you more benefits in the long run than figuring out how to do this procedurally.
I want to generate a cube where each face is divided into bits, like the following image:
http://img59.imageshack.us/img59/2504/gridcube165c3.jpg
Now, I can do this pretty simply if I'm just rendering quads, by just spacing vertices along each face plane at regular intervals, but my problem comes in when I want to turn the whole thing into a triangle strip. I've just got no idea how to unwrap it programmatically- is there some pattern to unwrapping that I'd follow?
I'm thinking of starting with the vertex at the top left corner as Row 0 Column 0 (R0C0), I'd want (first triangle) R0C0, ROC1, R1C1, (second triangle) R0C0, R1C0, R1C1 and so forth, and then when I reach the end of a row I guess I'd use a degenerate triangle to move to the next row, and then when I reach the end of the face I'd do the same to start a new face.
My main problem is that I can't visualize the program loop that would do this. I can reason out which vertex comes next visually, which is how I worked out the order above, but when I try to think programmatically I just stare blankly.
Even worse, with the end product I want the generated cube to be UV-mapped with a simple cube-map unwrap (the kind that looks like a T or t).
I guess, really, the best solution would be to find a library that already does this for me.
You could take a look at Ignacio Castaño's 'Optimal Grid Rendering' even though it's not triangle strips, it may inspire you.
Otherwise, you could use NVTriStrip library and be done with it.