"Limiting the Range of a Number": Snowman

Summary

This recipe demonstrates how to limit a numeric variable to a value between a set range, this process is commonly known as clamping.

The example adds a clamp() function to the existing built-in Math global JavaScript object, which can then be called to achieve the desired result. It also adds a clamp() function to the built-in Number global JavaScript object that the new Math.clamp() function uses internally.

Live Example

Download: Live Example

Twee Code

:: StoryTitle
Limiting the range of a number in Snowman


:: UserScript [script]
(function () {

    /*
        Returns the number clamped to the specified bounds.

        Usage:
            → Limit numeric variable to a value between 1 and 10 inclusive.
            <% s.variable = s.variable.clamp(1, 10) %>
    */
    Object.defineProperty(Number.prototype, 'clamp', {
        configurable : true,
        writable     : true,

        value(/* min, max */) {
            if (this == null) { // lazy equality for null
                throw new TypeError('Number.prototype.clamp called on null or undefined');
            }

            if (arguments.length !== 2) {
                throw new Error('Number.prototype.clamp called with an incorrect number of parameters');
            }

            var min = Number(arguments[0]);
            var max = Number(arguments[1]);

            if (min > max) {
                var tmp = min;
                min = max;
                max = tmp;
            }

            return Math.min(Math.max(this, min), max);
        }
    });


    /*
        Returns the given numerical clamped to the specified bounds.

        Usage:
            → Limit numeric variable to a value between 1 and 10 inclusive.
            <% s.variable = Math.clamp(s.variable, 1, 10) %>

            → Limit result of mathematical operation to a value between 1 and 10 inclusive.
            <% s.variable = Math.clamp(s.variable + 5, 1, 10) %>
    */
    Object.defineProperty(Math, 'clamp', {
        configurable : true,
        writable     : true,

        value(num, min, max) {
            var value = Number(num);
            return Number.isNaN(value) ? NaN : value.clamp(min, max);
        }
    });

})();


:: Start
Initialise the numeric variable to a value with the range you want.<br>
eg. between <b>1</b> and <b>10</b> inclusive.<br>
&#40;note: You don't need to use the <i>Math.clamp()</i> funtion at this point.&#41;<br>

<% s.valueToClamp = 5 %>
<b>Current value</b>: <%= s.valueToClamp %>

Increase the number to a value that is <b>within</b> the desired range.<br>
eg. Add 1 to the current value.

<% s.valueToClamp = Math.clamp(s.valueToClamp + 1, 1, 10) %>
<b>New value</b>: <%= s.valueToClamp %>

Try to increase the number to a value that is <b>outside</b> the desired range.<br>
eg. Add 100 to the current value.

<% s.valueToClamp = Math.clamp(s.valueToClamp + 100, 1, 10) %>
<b>New value</b>: <%= s.valueToClamp %>

Decrease the number to a value that is <b>within</b> the desired range.<br>
eg. Minus 5 from the current value.

<% s.valueToClamp = Math.clamp(s.valueToClamp - 5, 1, 10) %>
<b>New value</b>: <%= s.valueToClamp %>

Try to decrease the number to a value that is <b>outside</b> the desired range.<br>
eg. Minus 100 from the current value.

<% s.valueToClamp = Math.clamp(s.valueToClamp - 100, 1, 10) %>
<b>New value</b>: <%= s.valueToClamp %>

Download: Twee Code

results matching ""

    No results matching ""