HTML5 Canvas - Rotate symbol and convert angle between 1 and 180 degrees

[FlatChat]

I am rotating a symbol in code.  During the rotation, the code converts to symbol's rotation property:

if (LFAngle > 180){
LFAngle = LFAngle - 180;
}
if(LFAngle == 0){
LFAngle = 180;
}

This conversion is a technical requirement.

When rotating the symbol in the compiled application,  there are some logic problems with the LFAngle:

LFAngle will show 0, and then 180 on another roation step.

The first rotation of 360 degrees is OK (except the issues above), but then starts increasing from 180 to 360, which is what the logic above is tying to stop.

Full code:

var LFAngle;

function updateLF_RotateCW() {
	var angle = 1 / Math.PI;
	root.LFLensHolder.rotation += angle;
	root.LFLensSupports.rotation += angle;
	root.lensParentLeft.rotation += angle;
	LFAngle = root.lensParentLeft.rotation;
	if (LFAngle > 180){
		LFAngle = LFAngle - 180;
	}
	if(LFAngle == 0){
		LFAngle = 180;
	} 
	root.cylinderAngle.text = (Math.round(((LFAngle) * 100) / 100))  + "\u00B0";
}

[FlatChat]

I missed including the listener before the function:

function LF_RotateCW_Down() {
	createjs.Ticker.addEventListener("tick", updateLF_RotateCW);
}

function LF_RotateCW_Up() {
	createjs.Ticker.removeEventListener("tick", updateLF_RotateCW);
}

var LFAngle;

function updateLF_RotateCW() {
	var angle = 1 / Math.PI;
	root.LFLensHolder.rotation += angle;
	root.LFLensSupports.rotation += angle;
	root.lensParentLeft.rotation += angle;
	LFAngle = root.lensParentLeft.rotation;
	if (LFAngle > 180){
		LFAngle = LFAngle - 180;
	}
	if(LFAngle == 0){
		LFAngle = 180;
	} 
	root.cylinderAngle.text = (Math.round(((LFAngle) * 100) / 100))  + "\u00B0";

See video below, which shows the object rotating in the bottom right, and the dynamic text field top left showing the rotation angle, which should be converted in the above function, to keep the angle between 1 and 180 degrees.

Do I need a loop for the logic perhaps??  I would have thought that the ticker would act as a loop; is it resetting on the ticker??

[FlatChat]

Missed adding the closing brace on the above function to the snippet, but it exists...

[ClayUUID]

You can edit your posts.

So you're checking the value of LFAngle, and if it's greater than 180 you subtract 180. And then what do you actually do with the value of LFAngle? Well, you're doing this:

LFAngle = root.lensParentLeft.rotation;

[FlatChat]

@ClayUUID   

I don't see where I can select an option to edit my posts:

Re the code, yes I see that, however I wouldhave thought the code excucted sequentially.  As that line comes before the conditional statements to change the value of LFAngle.  Am I wrong there?  If I move that line to outside and above the function, then the dynamic text field is not updated with the value of LFAngle.

function LF_RotateCW_Down() {
	createjs.Ticker.addEventListener("tick", updateLF_RotateCW);
}

function LF_RotateCW_Up() {
	createjs.Ticker.removeEventListener("tick", updateLF_RotateCW);
}

var LFAngle = root.lensParentLeft.rotation;

function updateLF_RotateCW() {
	var angle = 1 / Math.PI;
	root.LFLensHolder.rotation += angle;
	root.LFLensSupports.rotation += angle;
	root.lensParentLeft.rotation += angle;
	
	if (LFAngle > 180){
		LFAngle = LFAngle - 180;
	}
	if(LFAngle == 0){
		LFAngle = 180;
	} 
	root.cylinderAngle.text = (Math.round(((LFAngle) * 100) / 100))  + "\u00B0";
}

[FlatChat]

I changed that code to the following. 

Once LFAngle hits 180, it goes back to 0 then continues incrementing to 180 for the first complete rotation.  That's OK and basically what I want.  However, after the first rotation, it increments during the rotation past 180, to 181, 182 etc, instead of going back to 0.  I have no idea why it happens after the first rotation...

function LF_RotateCW_Down() {
	createjs.Ticker.addEventListener("tick", updateLF_RotateCW);
}

function LF_RotateCW_Up() {
	createjs.Ticker.removeEventListener("tick", updateLF_RotateCW);
}



function updateLF_RotateCW() {
	var angle = 1 / Math.PI;
	var LFAngle = root.lensParentLeft.rotation;
	root.LFLensHolder.rotation += angle;
	root.LFLensSupports.rotation += angle;
	root.lensParentLeft.rotation += angle;
	
	if (LFAngle > 180){
		LFAngle = LFAngle - 180;
	}
	if(LFAngle == 0){
		LFAngle = 180;
	} 
	root.cylinderAngle.text = (Math.round(((LFAngle) * 100) / 100))  + "\u00B0";
}

[ClayUUID]

The option to edit posts is under the More menu.

Okay look, this is the important part: Every time your update function runs, you rotate your stage objects, then you set LFAngle's value equal to the rotation of one of your stage objects.

Do you understand now why subtracting 180 from LFAngle isn't have a permanent effect?

[FlatChat]

@ClayUUID   Yes, I can see that, but why does the logic work in the first rotation of root.LFLensHolder and not once that rotation is completed?   You can see that in the last video I posted.

How should I do this to keep LFAngle between 1 and 180 as the object is rotated?

Thanks for your help @ClayUUID 

[ClayUUID]

Your logic never works, not in the way you think it is. The update function rotates the lens objects, copies the rotation value to LFAngle, subtracts 180 if it's over 180, then displays it. It ONLY displays it. Every time the function is called, the lens objects just keep getting their rotation incremented by a fixed amount*, then that value is used to clobber the previous value of LFAngle. So the rotation just keeps going up and up and up. Beyond 180 degrees the displayed rotation has 180 subtracted, but it's still going up.

Imagine you wrote a function like this:

function update() {
   rotation = 0;
   angle = rotation;
   angle += 10;
   console.log(angle);
}

What do you think this would display when called repeatedly? 10, 20, 30, 40, 50..., or 10, 10, 10, 10, 10...?

*I've no idea why you're incrementing the rotation by 1/pi. Rotation is specified in degrees, not radians. You could just be incrementing by 1.

[FlatChat]

What More menu?