Controlled number scale visualization

Question

Controlled number scale visualization

I am currently working on mapping a rotation angle scale in degrees to a light intensity scale representing the movement of a rotating sun, with values ranging from 0.0 to 0.9. To accomplish this, I have implemented a custom mapping function as shown below:

function map (num, in_min, in_max, out_min, out_max)
{
    return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}

//(degree, degree in min, degree in max, light intensity out min, light intensity out max
var fade = map(30, 180, 360, 0.0, 0.9);

Despite this functionality, I find that the fading effect is too slow, resulting in a limited duration where the light intensity reaches its maximum value. I seek for more versatility in defining the scale mapping process – how can I achieve this customization?

javascript three.js physics

Answer 1

Answer №1

The response given by @Manuel Otto above is accurate for a scale that goes from one number to a higher number, which was the initial request. However, I required more versatility as I am currently making adhoc adjustments to my sun's position while testing. The function I have developed allows for movement from a number to a lower number as well (since it deals with degrees, resetting at 360 back to 0). For example, going from 180 to 60 involves transitioning from 180 to 360 and then from 0 to 60, resulting in a total of 240 degrees:

// Function to map input degree within range to desired scale with fading speed
function map(num, in_min, in_max, out_min, out_max, factor)
{
    // If input degree is equal to or greater than minimum possible degree
    if (num >= in_min)
    {
        // Simple subtraction
        var delta = Math.max(0, num - in_min);
    } else {
        // Subtract from 360 and add the input degree
        var delta = Math.max(0, ((360 - in_min) + num));
    }

    // If maximum possible degree is equal to or greater than minimum possible degree
    if (in_max >= in_min)
    {
        // Simple subtraction
        var scale = delta / (in_max - in_min);
    } else {
        // Subtract from 360 and add the maximum possible degree
        var scale = delta / ((360 - in_min) + in_max);
    }

    return Math.pow(Math.min(1, scale * 2) - Math.max(0, scale * 2 - 1), factor);
}

I'm sharing this code here in case it may be helpful to others.

Answer 2

The response given by @Manuel Otto above is accurate for a scale that goes from one number to a higher number, which was the initial request. However, I required more versatility as I am currently making adhoc adjustments to my sun's position while testing. The function I have developed allows for movement from a number to a lower number as well (since it deals with degrees, resetting at 360 back to 0). For example, going from 180 to 60 involves transitioning from 180 to 360 and then from 0 to 60, resulting in a total of 240 degrees:

// Function to map input degree within range to desired scale with fading speed
function map(num, in_min, in_max, out_min, out_max, factor)
{
    // If input degree is equal to or greater than minimum possible degree
    if (num >= in_min)
    {
        // Simple subtraction
        var delta = Math.max(0, num - in_min);
    } else {
        // Subtract from 360 and add the input degree
        var delta = Math.max(0, ((360 - in_min) + num));
    }

    // If maximum possible degree is equal to or greater than minimum possible degree
    if (in_max >= in_min)
    {
        // Simple subtraction
        var scale = delta / (in_max - in_min);
    } else {
        // Subtract from 360 and add the maximum possible degree
        var scale = delta / ((360 - in_min) + in_max);
    }

    return Math.pow(Math.min(1, scale * 2) - Math.max(0, scale * 2 - 1), factor);
}

I'm sharing this code here in case it may be helpful to others.

Answer 3

Answer №2

If you want to create a quick initial change followed by a long period of minimal change, you can use the formula Math.pow(x,<1).

To achieve a fading in and out effect, you can adjust the value by multiplying it by 2 and then subtracting values above 1 from the result.

function map(num, in_min, in_max, out_min, out_max, factor)
{
  var delta = Math.max(0,num-in_min)
  var scale = delta/(in_max-in_min)

  return Math.pow(Math.min(1,scale*2)-Math.max(0,scale*2-1),factor)
}

When the factor is set to 1, the progression is linear. Lower values will introduce polynomial behavior.

Refer to the demonstration below:

function map(num, in_min, in_max, out_min, out_max, factor)
{
  var delta = Math.max(0,num-in_min)
  var scale = delta/(in_max-in_min)
  
  return Math.pow(Math.min(1,scale*2)-Math.max(0,scale*2-1),factor)
}

// User Interface

var degrees_slider = document.getElementById('degrees')
var factor_slider = document.getElementById('factor')
var degrees_disp = document.getElementById('degrees_disp')
var factor_disp = document.getElementById('factor_disp')
var intensity_disp = document.getElementById('intensity_disp')

degrees_slider.oninput = factor_slider.oninput = update

function update(){
  var num = degrees_slider.value
  var fact = factor_slider.value
  
  degrees_disp.innerHTML = num
  factor_disp.innerHTML = fact
  intensity_disp.innerHTML = toPercent(map(num, 180, 360, 0.0, 0.9, fact))
  
}

function toPercent(val){
  return Math.round(val*100)+'%'
}

update()

#intensity_disp{
  font-size: 32pt;
  margin-top: 25px;
}

<label for="degrees">Degrees</label>
<br>
<input type="range" id="degrees" min="0" max="360" step="1"/>
<span id="degrees_disp"></span>

<br><br>

<label for="degrees">Linearity</label>
<br>
<input type="range" id="factor" min="0" max="1" step="0.01"/>
<span id="factor_disp"></span>

<div id="intensity_disp"></div>

Answer 4

If you want to create a quick initial change followed by a long period of minimal change, you can use the formula Math.pow(x,<1).

To achieve a fading in and out effect, you can adjust the value by multiplying it by 2 and then subtracting values above 1 from the result.

function map(num, in_min, in_max, out_min, out_max, factor)
{
  var delta = Math.max(0,num-in_min)
  var scale = delta/(in_max-in_min)

  return Math.pow(Math.min(1,scale*2)-Math.max(0,scale*2-1),factor)
}

When the factor is set to 1, the progression is linear. Lower values will introduce polynomial behavior.

Refer to the demonstration below:

function map(num, in_min, in_max, out_min, out_max, factor)
{
  var delta = Math.max(0,num-in_min)
  var scale = delta/(in_max-in_min)
  
  return Math.pow(Math.min(1,scale*2)-Math.max(0,scale*2-1),factor)
}

// User Interface

var degrees_slider = document.getElementById('degrees')
var factor_slider = document.getElementById('factor')
var degrees_disp = document.getElementById('degrees_disp')
var factor_disp = document.getElementById('factor_disp')
var intensity_disp = document.getElementById('intensity_disp')

degrees_slider.oninput = factor_slider.oninput = update

function update(){
  var num = degrees_slider.value
  var fact = factor_slider.value
  
  degrees_disp.innerHTML = num
  factor_disp.innerHTML = fact
  intensity_disp.innerHTML = toPercent(map(num, 180, 360, 0.0, 0.9, fact))
  
}

function toPercent(val){
  return Math.round(val*100)+'%'
}

update()

#intensity_disp{
  font-size: 32pt;
  margin-top: 25px;
}

<label for="degrees">Degrees</label>
<br>
<input type="range" id="degrees" min="0" max="360" step="1"/>
<span id="degrees_disp"></span>

<br><br>

<label for="degrees">Linearity</label>
<br>
<input type="range" id="factor" min="0" max="1" step="0.01"/>
<span id="factor_disp"></span>

<div id="intensity_disp"></div>

Controlled number scale visualization

Answer №1

Answer №2

Similar questions

Delay in loading Jquery accordion due to value binding

Error: The requested collection# cannot be found in the Node.js Express routing system

Two-way binding with Angular2's NgModel can encounter issues

Handling onclick events in Scrapy Splash: A comprehensive guide

Guide to implementing a random number generator within a Jquery conditional statement

A common inquiry: how can one pinpoint a location within an irregular figure?

Currently I am developing a Minimax Algorithm implementation for my reversi game using react.js, however I am encountering a RangeError

Django Ajax filter displaying issue on HTML page

Utilizing setColumns() function within Google Charts for JSON data tables

Validate Email and Phone Number using Javascript

Trying to access properties of undefined

When clicking on HTML input fields, they do not receive focus

Is it possible to pass additional arguments to setState other than prevState and props?

Using TypeScript and the `this` keyword in SharePoint Framework with Vue

Difficulty arises when collapsed text in Bootstrap clashes with the footer design

What is the process for executing code on a server by clicking a button?

Implementing the Jssor slider

Finding the location of a file within a published web component

A guide to accessing the innerHTML of a div using React

What could potentially be the reason behind the incapability of the next.js Image component to transform the svg into a