JavaScript: Trimming Array Length by Removing Elements

Question

JavaScript: Trimming Array Length by Removing Elements

I have been working on developing a JavaScript function that can remove elements from an array to meet a specific length, ensuring that the "gaps" are evenly distributed across the array. The ultimate goal is to simplify polygon vertices for drawing on a canvas.

Here is the approach I have taken:

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

This is the code snippet I have come up with:

function simplify(array, vertices) {

  // Calculate gap size
  var gap = array.length - vertices;
  gap = Math.floor(array.length / gap);

  var count = 0;
  var result = [];

  // Populate a new array without gaps
  for (var i = 0; i < array.length; i++) {
    if (count == gap) {
      count = 0;
    } else {
      result.push(array[i]);
      count++;
    }
  }

  // Remove one item in the middle if the resulting length is odd
  if (result.length > vertices) {
    result.splice(Math.floor(result.length / 2), 1);
  }
  return result;
}

// The current implementation is giving unexpected results depending on input length!
// The expected output should be an array with a length of 3
console.log(simplify([
  { x: 10, y: 20 },
  { x: 30, y: 40 },
  { x: 40, y: 50 },
  { x: 50, y: 60 }
], 3))

Despite my efforts, it appears that this function works only intermittently, leading me to believe there may be issues within the mathematical calculations. Can someone provide insight into an improved algorithm or identify any mistakes I might be making?

javascript arrays math canvas geometry

Answer 1

Answer №1

I approached this problem using a method similar to how I handle nearest-neighbor texture lookups. The step variable, which is a floating point number greater than zero, is rounded down to the closest lower index. However, when 'floor(i*step)' ends up being greater than 'i', it takes its first leap forward.

   function simplify(array, vertices){

      vertices = vertices || 1;///Avoid division by zero

      var result = [];

      var step = array.length/vertices;

      for(var i=0;i<vertices;i++){
         result.push(array[Math.floor(step*i)]);
      }

      return result;

   }


//Testing it out
   var testarr = [];

   for(var ai=0;ai<51;ai++){
      testarr[ai] = {
         x:ai,
         y:10*ai
      }
   }

   console.log(testarr.slice(0));

   var ret = simplify(testarr, 29);

   console.log(ret.slice(0));

By the way,

   function simplify_bilinear(array, vertices){

      var result = [];

      var step = array.length/vertices;

      for(var i=0;i<vertices;i++){
         var fistep = Math.floor(i*step);//The nearest neighbor index
         var current = array[fistep];//This element
         var next = array[fistep+1];//The next element
         var mix = (i*step)-fistep;//The fractional ratio between them. As this approaches 1, the mix approaches the next value.
         //mix = mix * mix * (3 - 2 * mix);//Optional (s-curve) easing between the positions. Better than linear, anyway.
         //Alternately to the above//mix = Math.sin((mix*2 - 1)*Math.PI)*.5+.5;///for a sinusoid curve
         //True Bezier would be optimal here but beyond this scope 
         var mixed_point = {
            x:current.x+(next.x-current.x)*mix,//basic mixing, ala 'mix' in your average math library
            y:current.y+(next.y-current.y)*mix,
         }
         result.push(mixed_point);
      }

      return result;

   }

is a bilinear magnification filter that can be used if you want to increase the count instead of decreasing it. This algorithm could branch out if the desired length ('vertices') exceeds the 'array.length'. It's also handy for software audio synthesis purposes.

Answer 2

I approached this problem using a method similar to how I handle nearest-neighbor texture lookups. The step variable, which is a floating point number greater than zero, is rounded down to the closest lower index. However, when 'floor(i*step)' ends up being greater than 'i', it takes its first leap forward.

   function simplify(array, vertices){

      vertices = vertices || 1;///Avoid division by zero

      var result = [];

      var step = array.length/vertices;

      for(var i=0;i<vertices;i++){
         result.push(array[Math.floor(step*i)]);
      }

      return result;

   }


//Testing it out
   var testarr = [];

   for(var ai=0;ai<51;ai++){
      testarr[ai] = {
         x:ai,
         y:10*ai
      }
   }

   console.log(testarr.slice(0));

   var ret = simplify(testarr, 29);

   console.log(ret.slice(0));

By the way,

   function simplify_bilinear(array, vertices){

      var result = [];

      var step = array.length/vertices;

      for(var i=0;i<vertices;i++){
         var fistep = Math.floor(i*step);//The nearest neighbor index
         var current = array[fistep];//This element
         var next = array[fistep+1];//The next element
         var mix = (i*step)-fistep;//The fractional ratio between them. As this approaches 1, the mix approaches the next value.
         //mix = mix * mix * (3 - 2 * mix);//Optional (s-curve) easing between the positions. Better than linear, anyway.
         //Alternately to the above//mix = Math.sin((mix*2 - 1)*Math.PI)*.5+.5;///for a sinusoid curve
         //True Bezier would be optimal here but beyond this scope 
         var mixed_point = {
            x:current.x+(next.x-current.x)*mix,//basic mixing, ala 'mix' in your average math library
            y:current.y+(next.y-current.y)*mix,
         }
         result.push(mixed_point);
      }

      return result;

   }

is a bilinear magnification filter that can be used if you want to increase the count instead of decreasing it. This algorithm could branch out if the desired length ('vertices') exceeds the 'array.length'. It's also handy for software audio synthesis purposes.

Answer 3

Answer №2

Perhaps this advice could be useful here

Imagine you possess a string with a length of n, yet you desire it to be the length of m. You have an array of n-2 elements to choose from and m-2 elements to pick for your new array. Now, let's assume that you've currently selected i elements and surpassed j elements. If i/j is less than (m-2)/(n-2), then you are falling behind. It may be advisable to select another element. To attain a evenly distributed selection, what you need to determine is whether (i+1)/(j+1) or i/(j+1) aligns better with your goal of (m-2)/(n-2). If exceeding the limit isn't a concern, you can utilize a bit of algebra to deduce that this equates to determining if (i+1)(n-2) - (j+1)(m-2) exceeds or falls below (n-2)/2; surpassing indicates i is preferable (thus, avoid selecting this one), while falling short implies i+1 is the better choice.

Answer 4

Perhaps this advice could be useful here

Imagine you possess a string with a length of n, yet you desire it to be the length of m. You have an array of n-2 elements to choose from and m-2 elements to pick for your new array. Now, let's assume that you've currently selected i elements and surpassed j elements. If i/j is less than (m-2)/(n-2), then you are falling behind. It may be advisable to select another element. To attain a evenly distributed selection, what you need to determine is whether (i+1)/(j+1) or i/(j+1) aligns better with your goal of (m-2)/(n-2). If exceeding the limit isn't a concern, you can utilize a bit of algebra to deduce that this equates to determining if (i+1)(n-2) - (j+1)(m-2) exceeds or falls below (n-2)/2; surpassing indicates i is preferable (thus, avoid selecting this one), while falling short implies i+1 is the better choice.

Answer 5

Answer №3

To reduce the length of an array by removing items, you can use the Array.splice() method.

For instance, if your desiredLength = 3, and you have an array = [1,2,3,4,5].

 array.splice(0, desiredLength).length == desiredLength

should return true.

Answer 6

To reduce the length of an array by removing items, you can use the Array.splice() method.

For instance, if your desiredLength = 3, and you have an array = [1,2,3,4,5].

 array.splice(0, desiredLength).length == desiredLength

should return true.

JavaScript: Trimming Array Length by Removing Elements

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible for me to pass a reference to a specific object's instance function?

Is there a way to transpile a dependency within the node_modules directory when using Nuxt 2?

Utilize vue.router to navigate to a specific absolute URL

The functionality of clicking on a jQuery-generated element seems to be malfunctioning

Switching between playing and pausing on multiple audio tracks

Attempting to utilize React Router V5 to display various layout designs

Switching tabs automatically using JavaScript or jQuery

An in-depth guide on implementing the Module Pattern in Typescript for an established JavaScript Module Pattern

"Attempting to send JSON data via JsonResult is unsuccessful when trying to send a JSON object directly or using JSON

Extracting HTML elements between tags in Node.js is a common task faced

How does thinking in ReactJS differ for someone with an AngularJS background?

Why is the v-for directive malfunctioning and am I correctly displaying it in the template?

The width of the <ul> element does not properly accommodate the width of the <li> elements during the animation that updates the width of the <li>

Receive immediate updates of the text input in real-time using the onkeydown event handler in Javascript

Dropdown functionality in JavaScript and Bootstrap

Discover the Value of an Object Property in JavaScript

How can Jquery automatically populate a list-box with the values entered in a text-field?

Save an automatically generated number into a variable and use it to reference an image file for display. This process can be accomplished using JavaScript

The script tag is utilized in the head section of a website for the production environment, but is not used in the

Accessing a service instance within the $rootScope.$on function in Angular