Exploring Array Iteration and Incrementing with Easing Techniques

Question

Exploring Array Iteration and Incrementing with Easing Techniques

I am currently working on a function that involves iterating over an array and incrementing the values by varying amounts. The challenge is to decrease these incremental amounts as the values in the array get larger.

Let's consider the following example:

// Original array
['100','150','220','280','310','330']

// After first iteration
['106','155','224','283','312','331']

// After second iteration
['112','160','228','288','314','332']

// After third iteration (note the last item has been reset to 100)
['100','117','164','232','291','316']

In the given scenario, I utilized sequential incremental amounts of '6,5,4,3,2,1'. However, with these specific numbers, there is a risk of overlap among the values as they progress. The main challenge lies in determining the correct values to ensure that the elements are closer together towards the end of the array without overlapping.

To reiterate, the issue at hand isn't solely about generating an array of values; instead, it revolves around creating a set of values that maintain the desired easing effect - drawing the elements closer near the boundary of the screen, while avoiding any overlaps or catch-up situations...

Adding further complexity, any value exceeding 332 must be reset back to 100. This action essentially shifts the outermost rings back towards the center...

These calculated values will serve as the foundation for a function that aims to create something similar to the image below:

https://i.sstatic.net/N7e6O.png

The incremental values will dictate the animation sizing for the rings. While CSS seems like a viable option, event-driven multi-touch animations necessitate the use of JavaScript.

My Approach

Despite numerous attempts, I'm struggling to devise the appropriate algorithm and values for this operation! Below is my current implementation that unfortunately does not yield the desired outcome:

// Calculating properties for each ring
for(var i=0;i<6;i++){
    var ring_decrement = 6-i;
    ring_properties[i].dimension += ((-2.5 * ((t=(ring_decrement/10)-1)*t*t*t - 1) + 0.1)/100)*container_width;
    ring_properties[i].opacity = i===0 ? 0 : i===1 ? 0.7 : Math.round((0.6-(i/10))*10)/10;
    if(((ring_properties[i].dimension/container_width)*100)>80){
        ring_properties[i].dimension = 100;
        ring_properties[i].opacity = 0;
    }
}
ring_properties.sort(function(a,b){
    if(a.dimension===b.dimension){
        return 0;
    }else{
        return (parseInt(a.dimension)<parseInt(b.dimension)) ? -1 : 1;
    }
});
// Applying the properties to the rings
$('.radius_ring').each(function(i){
    /*if(ring_properties[i].dimension===100){
        $(this).addClass('paused');
    }*/
    $(this).css({
        width: ring_properties[i].dimension+'px',
        height: ring_properties[i].dimension+'px',
        opacity: ring_properties[i].opacity
    });
});

Furthermore, here is the code segment responsible for initializing the rings (which currently functions as expected):

var ring_dimension_percent = 5;
var ring_explode_increment = 0;
var container_width = parseInt($('#scan_radius_container').css('width'));
var ring_properties = new Array();

// Trigger radius ring expansion on load
var ring_explode = setInterval(function(){
    // Calculating the percentage of the container width
    ring_dimension_percent = ring_explode_increment===0 ? ring_dimension_percent : Math.round(-75 * ((t=(ring_explode_increment/10)-1)*t*t*t - 1) + 10);
    // Conversion from percentage to pixels
    ring_properties[ring_explode_increment] = {
        dimension: (ring_dimension_percent/100)*container_width,
        opacity: ring_explode_increment===0 ? 0 : ring_explode_increment===1 ? 0.7 :  Math.round((0.6-(ring_explode_increment/10))*10)/10
    };
    // Application of styles to the radius rings
    $('.radius_ring:eq('+ring_explode_increment+')').css({
        width: ring_properties[ring_explode_increment].dimension+'px',
        height: ring_properties[ring_explode_increment].dimension+'px',
        opacity: ring_properties[ring_explode_increment].opacity
    });
    if($('.radius_ring').length===(ring_explode_increment+1)){
        clearInterval(ring_explode);
    }else{
        ring_explode_increment++;
    }
},50);

javascript jquery css arrays easing

Answer 1

Answer №1

Revise to account for comment on lines catching up/overlapping

To address the issue of overlapping lines, consider using a sine function for your array incrementation. Divide the range of [0º,90º] into six segments: [0, 15, 30, 45, 60, 75], then increase these degrees by one each time. Utilize the sine of these values to calculate your radius.

Below is a code snippet to illustrate this approach:

var DEG_TO_RADIAN = Math.PI / 180; // convert degrees to radians
var minRadius = 100;
var maxRadius = 340;
var degrees = [0, 15, 30, 45, 60, 75];
var radius = new Array(6);

function incrementArray(){
  degrees.forEach(function(d, i){
    degrees[i] = (degrees[i] + 1) % 90; // ensure it stays within [0,90]
    var radian = degrees[i] * DEG_TO_RADIAN;
    var sine = Math.sin(radian); 
    // constrain the radius between min and max allowed values
    // and convert to an integer.
    radius[i] = Math.round(minRadius + sine * (maxRadius - minRadius));
  });

  console.log("Radius = " + radius.join(","))
}

setInterval(incrementArray, 50)

View a sample animation in this Link with Sample Animation or access the associated gist here.

Omit previous answer as it does not tackle the specific problem.

This solution functions, but adjustments are needed to incorporate additional functionalities you require.

arr = [100, 150, 220, 280, 310, 330];
increments = [6, 5, 4, 3, 2, 1];
allowedMax = 332; // reset to 100 once we reach this limit

function incrementArray(){
  arr.forEach(function(d, i){
    arr[i] += increments[i];
    if(arr[i] > allowedMax){
      arr[i] = 100;
    }
  });
  arr.sort(); // sort in ascending order
  console.log(arr) // print for clarity
}

// increment every 1 second
setInterval(incrementArray, 1000)

Answer 2

Revise to account for comment on lines catching up/overlapping

To address the issue of overlapping lines, consider using a sine function for your array incrementation. Divide the range of [0º,90º] into six segments: [0, 15, 30, 45, 60, 75], then increase these degrees by one each time. Utilize the sine of these values to calculate your radius.

Below is a code snippet to illustrate this approach:

var DEG_TO_RADIAN = Math.PI / 180; // convert degrees to radians
var minRadius = 100;
var maxRadius = 340;
var degrees = [0, 15, 30, 45, 60, 75];
var radius = new Array(6);

function incrementArray(){
  degrees.forEach(function(d, i){
    degrees[i] = (degrees[i] + 1) % 90; // ensure it stays within [0,90]
    var radian = degrees[i] * DEG_TO_RADIAN;
    var sine = Math.sin(radian); 
    // constrain the radius between min and max allowed values
    // and convert to an integer.
    radius[i] = Math.round(minRadius + sine * (maxRadius - minRadius));
  });

  console.log("Radius = " + radius.join(","))
}

setInterval(incrementArray, 50)

View a sample animation in this Link with Sample Animation or access the associated gist here.

Omit previous answer as it does not tackle the specific problem.

This solution functions, but adjustments are needed to incorporate additional functionalities you require.

arr = [100, 150, 220, 280, 310, 330];
increments = [6, 5, 4, 3, 2, 1];
allowedMax = 332; // reset to 100 once we reach this limit

function incrementArray(){
  arr.forEach(function(d, i){
    arr[i] += increments[i];
    if(arr[i] > allowedMax){
      arr[i] = 100;
    }
  });
  arr.sort(); // sort in ascending order
  console.log(arr) // print for clarity
}

// increment every 1 second
setInterval(incrementArray, 1000)

Exploring Array Iteration and Incrementing with Easing Techniques

My Approach

Answer №1

Similar questions

Oops! Looks like there was an error. The text strings need to be displayed within a <Text> component in the BottomTabBar. This occurred at line 132 in the

Having trouble installing gulp locally due to an error with ` ode_modulesansi-regex`

Chrome autocomplete behaves as if the input fields are disabled and cannot be clicked on

Is there a way to delay rendering the html until all the content has been fully downloaded?

The server returned a response that was void of any content

Binding arguments to child functions within Vue components

Is it wrong to use <match v-for='match in matches' v-bind:match='match'></match>? Am I allowed to incorporate the match variable from the v-for loop into the v-bind attribute on the

Position the vertical bar directly adjacent to the form input field

I am looking to halt the AJAX requests within an asynchronous function after reaching a limit of 10 requests

Emptying the data of a form that has been submitted using Ajax

Having trouble integrating jQuery into an Angular CLI project

Is it possible to have several forms triggered by the same AJAX call but produce varying results

Node.js error: Attempting to set property '' on an undefined object not allowed

Issue with plugin conflicting with Vimeo's Froogaloop

The optimal functioning of Ajax is conditioned upon the successful upload of the HTML page onto my server

JavaScript returns the value 'undefined' when a function variable is used with an array of objects

Create a fresh trail underneath the overlay image

What is the best way to customize a component in a view?

Tips for transferring HTML code to a controller

Utilizing PHP and HTML to pull various values from a single select option