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

# 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

##### 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

• 4
##### Share on other sites

Hi Carl,

Thanks a lot. Your illustrations are very clear.

All the best

Manfred

• 1
##### 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

.

• 5
• 1
##### 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

• 1
##### 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.

• 3
##### 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

• 2
##### Share on other sites

• 10 months later...
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

## 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