-4

I show a chip as a div in the DOM.

If I have 1 chip, I have 1 div, 2 chips, 2 div, 3 chips, 3 div, 4 chips, 3 div.

As this can get high numbers quickly with many chips with different colors for 9 players each, I want a function to limit this number to sensible values, while retaining the visual indication of amount of chips.

// Map range 1-100 to 1-20 in a super exponential fashion so smaller chips don't get any smaller, but big numbers get trimmed down.
function m_n_chips(actual_chips: number) {
  if (actual_chips < 4) { return actual_chips }

  // what else do I need here
}
eguneys
  • 6,028
  • 7
  • 31
  • 63
  • Please take the [tour] to learn how Stack Overflow works and read [ask] on how to improve the quality of your question. Then [edit] your question to include your source code as a working [mcve], which can be tested by others. Please show your attempts you have tried and the problems/error messages you get from your attempts. It is unclear what you are asking or what the problem is. – Progman Jun 18 '22 at 10:30

1 Answers1

0

The described behavior reminds me of a root function. it doesn't affect numbers that are small but the larger numbers we insert into the function, the more it gets squashed down.

You can vary the "factor of squashing" by multiplying x with a coefficient

Alternatively, you can use a logarithmic function which is the reverse of an exponential. This results in an even greater squashing effect

function m_n_chips(actual_chips: number) {
  if (actual_chips < 4) { return actual_chips }

  result = Math.sqrt(4 * x);
  // other option: use logarithm
  // result = Math.log(x) / Math.log(4);

  return Math.round(result);
}

When returning we convert the result to the nearest integer.

Hope that helps!

(Btw: For the future please provide more information e.g language, project details and how you came to your question)

David Breyer
  • 16
  • 1