Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mikel

Random (min,max) animation

Recommended Posts

Hi guys,

 

Setting and expecting limits unfortunately C disappears once in a while.

 

My pen:  

 

How should I interpret the limit scale:randomNumber(0.5, 1) ?

 

Kind regards

Manfred

See the Pen QKwrGG by mikeK (@mikeK) on CodePen

Link to post
Share on other sites

Nice demo ;)

 

The problem is that the randomNumber function will only return integers and with the values you are supplying only 0 or 1.

 

function randomNumber(min, max) {
return Math.floor(Math.random() * (1 + max - min) + min);
}


for (var i = 0; i < 100; i++){
  console.log("randomNumber =", randomNumber(0.5, 1)) // 0 or 1
}

take a look: https://codepen.io/anon/pen/wdgEgQ?editors=0011

 

 

Since Math.random() already gives a number between 0 and 1 and you're desired range is between 0.5 and 1 I would just use Math.max() to figure out if Math.random() returns a value greater than 0.5 like:

var scale = Math.max(Math.random(), 0.5); // get greater value

so if Math.random() is something like 0.01 you will default to 0.5

 

demo: http://codepen.io/GreenSock/pen/aWpawB?editors=0011

 

 

 

  • Like 4
Link to post
Share on other sites

Hi Carl,

 

Thanks a lot. Your illustrations are very clear.

 

All the best

Manfred

  • Like 1
Link to post
Share on other sites

 

Here's a random function for decimal values...

function random(min, max) {
  if (max == null) { max = min; min = 0; }
  if (min > max) { var tmp = min; min = max; max = tmp; }
  return min + (max - min) * Math.random();
}

 

Just pass in your min and max, and it will return a floating-point value. If you pass in a single value, 0 will be the default min.

// This is the same...
random(10);

// ... as this
random(0, 10);

 

But we can improve upon that. What about probability? Here you go. Just pass in a chance value from 0 to 100. If you want something to have a 30% chance of happening,it would look like this.

if (chanceRoll(30)) {
  // Do something...
}

function chanceRoll(chance) {
  if (chance == null) { chance = 50; }
  return chance > 0 && Math.random() * 100 <= chance;
}

 

And here's another handy function that will randomly choose a value for you.

var direction = randomChoice("moveUp", "moveDown");

function randomChoice(choice1, choice2) {
  return Math.random() < 0.5 ? choice1 : choice2;
}

 

Another thing I would suggest is to animate your x and y values separately. When you animate them together, it looks very linear. Here's how I do that. 

tweenProperty(carl, "x");
tweenProperty(carl, "y");

function tweenProperty(target, prop) {
  
  TweenLite.to(target, random(1, 6), {
    [prop]: random(100, 200), 
    ease: Sine.easeInOut,
    onComplete: tweenProperty,
    onCompleteParams: [target, prop]
  });
}

 

Now it's time see all this in action. I really like your demo, but it looked like Carl was getting kind of lonely, so I invited his friend over, who goes by the name of Jack. Yeah, I know, but it's purely coincidental.

 

Watch as they play together. They like to see who can spin around the most times. It's latest fad, and all the cool bats are doing it.

 

See the Pen BRpgpR?editors=0010 by osublake (@osublake) on CodePen

 

.

  • Like 6
  • Haha 1
Link to post
Share on other sites

Hi Blake,

 

It demands a broad vision of random, as well as a distinctive social competence to create such a pen. Hats off.
I assume C and J are dancing and not rotating due to the stress related to randomized bugs of browsers.

 

The next days I will study every line and will take the chance for exercises.
 
Thank you very much for the absolutely informative lesson.
And ...  rarely have I encountered so amusing and entertaining.

Manfred

  • Like 1
Link to post
Share on other sites

Did you make that graphic? I must admit that I lost a lot of time yesterday creating that demo. Not because the code is complicated, it's not. But because the more I tweaked the code, the more entertaining they became, almost like they had a mind of their own at times. Definitely one of the coolest things I've worked on all year.  

  • Like 3
Link to post
Share on other sites

Hi Blake,

 

As a basic I found a batman illustration online, adopted that (Inkscape) and arranged the fittings for the wings.

In the beginning it was a joke for a friend.

 

I am proud that it is now an 'entertaining didactic play' for what kind of random ever.

You breathes life into it.

 

The luck of the draw ...

 

I thank you for the honour

Manfred

  • Like 2
Link to post
Share on other sites
On 4/27/2017 at 4:35 PM, OSUblake said:

function random(min, max) { if (max == null) { max = min; min = 0; } if (min > max) { var tmp = min; min = max; max = tmp; } return min + (max - min) * Math.random(); }

genius

Link to post
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.

×