StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCreate smooth rotation in given time interval (+- x%)
primarykey
Id
12626750
data
AcceptedAnswerId
12630950
AnswerCount
2
ClosedDate
CommentCount
5
CommunityOwnedDate
CreationDate
2012-09-27T17:15:53.353
FavoriteCount
0
LastActivityDate
2012-10-01T08:23:21.160
LastEditDate
2017-05-23T11:48:15.377
LastEditorUserId
-1
OwnerUserId
603003
ParentId
0
PostTypeId
1
Score
1
ViewCount
1042
LastEditorDisplayName
text
Body
I have got a cube in my scene which I want to rotate at a specific start velocity and in a given time interval. In addition, the cube's end angle should be the same as the start angle. Therefore, I thought of allowing +- 5% deviation of the time interval. Here is my current status: <a href="http://jsfiddle.net/5NWab/1/" rel="nofollow noreferrer">http://jsfiddle.net/5NWab/1/</a>. Don't wonder that is currently working. The problem occurs if I change the time interval, e.g. by '3000': <a href="http://jsfiddle.net/5NWab/2/" rel="nofollow noreferrer">http://jsfiddle.net/5NWab/2/</a>. The essential move() method of my cube: <pre class="lang-js prettyprint-override"><code>Reel.prototype.move = function (delta) { if (this.velocity < 0 && this.mesh.rotation.x == 0) { return false; } // Create smooth end rotation if (this.velocity < 0 && this.mesh.rotation.x != 0) { this.mesh.rotation.x += Math.abs(delta * this.speedUp * 0.5 * this.timeSpan); if (Math.abs(this.mesh.rotation.x - 2 * Math.PI) < 0.1) { this.mesh.rotation.x = 0; } } else { this.mesh.rotation.x += delta * this.velocity; this.time -= delta; this.velocity = this.speedUp * this.time; } } </code></pre> The problem is that I cannot think of a solution or method in order to accomplish my topic. It would not be so complex if I the variable <code>delta</code> would be constant. It should be around <code>60fps = 1000/60</code> because I'm using <code>requestAnimationFrame()</code>. I have also found <a href="https://stackoverflow.com/questions/2708476/rotation-interpolation">this question</a> which could help finding the solution. I think the code should either <ul> <li>slow down the velocity before the actual end is reached. That should be the case if the final angle is a little bit greater than the desired (start) angle.</li> <li>or should speed up the rotation speed after the actual end is reached. That should be the case if the final angle is a little bit smaller than the desired (start) angle.</li> </ul> But what is when the angle is a hemicycle away from the desired one (i.e. 180° or PI)? In order to clarify my question, here are my knowns and unknowns: Known: <ul> <li>Start velocity</li> <li>Time interval</li> <li>Start angle (usually 0)</li> </ul> I want the cube to have the same start angle/position at the end of the rotation. Because the FPS count is not constant, I have to shorten or lengthen the time interval in order to get the cube into the desired position.
Tags
<javascript><math><animation><3d><three.js>
Title
Create smooth rotation in given time interval (+- x%)
singulars
PostAcceptedAnswerId
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USCommunity
UserOwnerUserId
1. USComFreek
plurals
PostLinksPostIdRelatedPostId
1. PL
 singulars
 LinkTypeLinkTypeId
 LTLinked
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
2. PO
 singulars
 PostTypePostTypeId
 PTAnswer
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 POCreate smooth rotation in given time interval (+- x%)
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.