Calculating Turn Count of ThrowProps Dial

[Buzzafett 2 Likes (Newbie)]

Hi,

I'm using the throwProps dial code from the Greensock example.

 

I need to calculate which turn of the dial the user is on eg. turn 2 of 10

 

How would I do this?

 

At the moment I am trying to calculate whether the user is turning the dial clockwise or anti-clockwise.

 

Then either

adding 1 to the turn count if the turn is clockwise and the rotation value equals 359º

or

subtracting 1 from the turn count if the turn is anti-clockwise and the rotation value equals 0º

 

Is this the correct way or is there another way by adjusting the original sample code?

 

 

Here's my code in addition to the throwProps sample code.

The calculateDialDirection is wrong, so I need a delay of some sort when grabbing the old and the new rotation values. Maybe with an array.

    // Calculate Direction of Dial (Clockwise or anti-clockwise)
    // ---------------------------
    
    var oldDialRotation:Number;
    var newDialRotation:Number;
    var calculateDialDirection:Number;
    var dialRotationDirection:uint;
    
    // Grab first rotation value
     oldDialRotation = degFromDeg(dial.rotation); // i.e. 5º

    // Grab second rotation value
    newDialRotation = degFromDeg(dial.rotation); // i.e. 10º

    calculateDialDirection = newDialRotation - oldDialRotation;

    if (calculateDialDirection > 0 ){
        dialRotationDirection = 1; // Clockwise
    }
    else if (calculateDialDirection < 0 ){
        dialRotationDirection = 0; // Anti-Clockwise
    }
    else {
        // No Change
    }


    // Count How Many Times Dial Has Turned
    var wheelTurnNumber:int = 0;
        
    if (dialRotAFTERdegFromDeg == 359 && dialRotationDirection == 1){ // Clockwise
        wheelTurnNumber ++;
        }
        else if (dialRotAFTERdegFromDeg == 0 && dialRotationDirection == 0){ // Anti-Clockwise
        wheelTurnNumber --;
    }

[GreenSock 8,117 Likes (Superhero)]

I wonder if you're using a really old version of Draggable. 

 

The "rotation" value will be in degrees and it should continue to increase as you turn more times (or decrease). So if you spin it two times around completely, rotation would be 720. If you went the other way, it'd be -720. See what I mean? That should make it pretty easy for you (not need for all that conditional logic). 

var numberOfRotations = Math.floor(draggable.rotation / 360);

Or maybe I misunderstood your question. Just please make sure you've got the latest version. 

[Buzzafett 2 Likes (Newbie)]

Hi Jack,

 

I'm using Greensock 12 Beta with the throwProps code below.

 

I knew there would be an easier way than my ott code.

 

How would the numberofRotations code be applied to the throwProps code?

import com.greensock.*;
import com.greensock.plugins.*;
import com.greensock.easing.*;
import flash.events.MouseEvent;
import flash.geom.Rectangle;
import flash.utils.getTimer;
import flash.display.*;

TweenPlugin.activate([ThrowPropsPlugin]);

var RAD2DEG:Number = 180 / Math.PI;
var t1:uint, t2:uint, r1:Number, r2:Number, offset:Number;

dial.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

function mouseDownHandler(event:MouseEvent):void {
    TweenLite.killTweensOf(dial);
    offset = Math.atan2(dial.y - this.mouseY, this.mouseX - dial.x);
    r1 = r2 = dial.rotation;
    t1 = t2 = getTimer();
    dial.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
    dial.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}

function enterFrameHandler(event:Event):void {
    r2 = r1;
    t2 = t1;
    var newOffset:Number = Math.atan2(dial.y - this.mouseY, this.mouseX - dial.x);
    dial.rotation += (offset - newOffset) * RAD2DEG;
    offset = newOffset;
    r1 = dial.rotation;
    t1 = getTimer();
}

function mouseUpHandler(event:MouseEvent):void {
    dial.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
    dial.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
    var time:Number = (getTimer() - t2) / 1000;
    var dif:Number = dial.rotation - r2;
    if (dif != dif % 180) {
        dif += (dif < 0) ? 360 : -360;
    }
    var rVelocity:Number = dif / time;
    ThrowPropsPlugin.to(dial, {throwProps:{rotation:rVelocity, resistance:250}, ease:Strong.easeOut}, 10, 0.25, 2);
}

[GreenSock 8,117 Likes (Superhero)]

Sorry about that - I totally thought you were using the JavaScript version with Draggable. My bad. 

 

I have attached a new FLA that demonstrates the concept of using a proxy object to accomplish this task, plus I'm leveraging the new version of ThrowPropsPlugin that can track the velocity for you. So in the example, you can easily check the proxy.rotation anytime to get the total number of degrees (including full rotations). 

 

Is that what you were looking for? 

throwProps_rotation_demo.fla.zip

[Buzzafett 2 Likes (Newbie)]

Hi Jack,

 

That's just what I was looking for, a big thanks. The dial shows 10 rotations as 3600º

 

I've had a go at linking some rotation snap code I received from another post of mine.

http://forums.greensock.com/topic/8204-throwprops-90-degrees-rotation-snap/

 

Is it possible to take a look as I can't seem figure it out. I'm getting

'ERROR: No velocity was defined in the throwProps tween of [object Object] property: end'

 

It amends the following code to the bottom of the original AS3 throwProps example.

 

It uses 

velocity:rVelocity

 and 

getEnd

 in throwPropsPlugin.to() after the line

var rVelocity:Number = dif / time;

 

//New line of code below
ThrowPropsPlugin.to(dial, {throwProps:{rotation:{velocity:rVelocity, resistance:250, end:getEnd}}, ease:Strong.easeOut}, 10, 0.25, 2);
}


//New Function
function getEnd(endValue) {
var rotationSnap = 90; //Flash needs degrees. No need to convert to radians
return Math.round(endValue / rotationSnap) * rotationSnap;
}

[GreenSock 8,117 Likes (Superhero)]

What version of ThrowPropsPlugin are you using? It sounds like you might have a very old version (before it recognized the "end" special property)

[Buzzafett 2 Likes (Newbie)]

I'm using Greensock 12 Beta, throwProps v12.0.9, what's the newest version of Greensock?

 

The snapping code works with the example code, just not in your new throwProps_rotation_demo.fla.zip

/**
 * VERSION: 12.0.9
 * DATE: 2013-06-25
 * AS3
 * UPDATES AND DOCS AT: http://www.greensock.com
 **/

[GreenSock 8,117 Likes (Superhero)]

Ah yes, that's the problem. That's a pretty stale version. We've made some pretty nice feature additions and enhancements since then, like adding a VelocityTracker and that "end" special property, and fine-tuning a few other things under the hood. I'd definitely recommend updating. 

[Buzzafett 2 Likes (Newbie)]

Hi Jack,

 

I can't update to the new version at the moment as my subscription has run out.

Could you add the rotation snap code to your throwProps_rotation_demo.fla anyway

and I'll update at a later date.

 

Thanks.

[GreenSock 8,117 Likes (Superhero)]

Sure, I updated the FLA in the above post. It has the snapping code in place now.