Jump to content
Search Community

Random rotation but at 72 degree intervals

Haikukitty test
Moderator Tag

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

OK, I hope I can explain this.

 

Right now I have this code:

pie.onload = function(){
  //spin from 0 to 360
  TweenMax.to('#wheel', 7, {delay:1, directionalRotation:"+=648_cw", ease:Power4.easeInOut, duration:5});   
  };

This spins a 5 piece pie graphic, but always lands on the same pie piece.

 

What I need to do it have the pie spin but land on a different pie piece each time. Would I do random() function * +=72? I'm having trouble wrapping my head around this for some reason!

 

Ugly looking site is here: http://bluetabby.com/rrevents/

 

Thanks!!

Link to comment
Share on other sites

In the code below the basic idea is that we pick a number between 6 and 10 and then multiply that number by 72. 

This will guarantee random increment of 72 and insure the pie spins around at least once landing on one of these values:

 

432
504
576
648
720
pie.onload = function(){
  var myRotation = randomNumber(1,6) * 72;
  trace(myRotation);
  TweenMax.to('#wheel', 7, {delay:1, directionalRotation:randomNumber + "_cw", ease:Power4.easeInOut, duration:5});   
  };
  
  
  
function randomNumber(min:Number, max:Number):Number {
return Math.floor(Math.random() * (1 + max - min) + min);
}
Link to comment
Share on other sites

Thank you! 

 

I can't get it to work yet, but I'm understanding the concept better.

 

I tried making a few changes, thinking maybe it just needed the myRotation variable instead of the randomNumber variable in the Tween code. And I tried adding in the "+=" also - neither one helped at all so I'm guessing those things were not the issue! Can you tell what's wrong with the below?

pie.onload = function(){
  var myRotation = randomNumber(1,6) * 72;
  trace(myRotation);
  TweenMax.to('#wheel', 7, {delay:1, directionalRotation:"+=" + myRotation + "_cw", ease:Power4.easeInOut, duration:5});   
  };
   
function randomNumber(min:Number, max:Number):Number {
return Math.floor(Math.random() * (1 + max - min) + min);
}

ETA:

I made some more changes based on the GSAP docs - I feel like this SHOULD be working now - but its not:

jQuery(document).ready(function() {
 	 
var pie = new Image();
pie.src = "pie.png";
		
pie.onload = function(){
	function randomNumber(min:Number, max:Number):Number {
	//good 
	return Math.floor(Math.random() * (1 + max - min) + min);
}
  var myRotation = randomNumber(7,11) * 72;
  trace(myRotation);
  
  TweenMax.to('#wheel', 7, {delay:1, directionalRotation: (myRotation + "_cw"), ease:Power4.easeInOut});   
  };
   
  jQuery("#rightarrow").on('click', function(){
  TweenMax.to('#wheel', 1, {directionalRotation:"+=72_cw", ease:Back.easeOut});
});
jQuery("#leftarrow").on('click', function(){
  TweenMax.to('#wheel', 1, {directionalRotation:"-=72_ccw", ease:Back.easeOut});
});
});

Any pointers will be greatly appreciated!!

Edited by Haikukitty
Link to comment
Share on other sites

  • Solution

oh, I assumed you were using ActionScript because you posted in our Flash forum.

(don't worry its no big deal).

 

What I gave you should have caused a few errors in your console.

 

Please try this: 

 

var myRotation = randomNumber(6,10) * 72;


TweenMax.to('svg', 4, {delay:1, directionalRotation:"+=" + myRotation + "_cw", ease:Power4.easeInOut, duration:2});   
  
function randomNumber(min, max) {
 return Math.floor(Math.random() * (1 + max - min) + min);
}

 

http://codepen.io/GreenSock/pen/ZGYoaj?editors=001

 

Just hit the run button to see the page reload and a new random rotation get used.

 

here is some info on how to do create a CodePen demo (for future reference) http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

I'm going to move this to the HTML5 / JS forum.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...