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:  https://codepen.io/mikeK/pen/QKwrGG

 

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

 

Kind regards

Manfred

Share this post


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

Share this post


Link to post
Share on other sites

Hi Carl,

 

Thanks a lot. Your illustrations are very clear.

 

All the best

Manfred

  • Like 1

Share this post


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

Share this post


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

Share this post


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

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×