Color grouping by array index, Javascript

Question

I have the following array:

const colors = ['#54AAED', '#7BEA6B', '#f8b653', '#ff5584']

What I'm trying to build is a function that would return color based on parameter group and index. for instance:

function groupColor(i, group) {}

The function should return:

groupColor(0, true); output <== '#54AAED'
groupColor(1, true); output <== '#54AAED' Minus 10% RGB

If group, so Index 0 is #54AAED 1 is #54AAED minues 10% opacity, Index 2 is #7BEA6B Index 3 is #7BEA6B minus 10% opacity, and so on... So Far I've did:

function hexToRgb(hex, opacity) {
  return 'rgba(' + (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16) }).concat(opacity||1).join(',') + ')';
}

function generateColor({ i, group }) {
  if (group) {
    console.log('should group...')
  }
  const isEven = i % 2 === 0

  console.log('index', hexToRgb(palette[i], 0.9))
  return hexToRgb(palette[i])
}

What I was thinking to do is check if index is odd, and by jumps of 2 indexes group, if bool is true.. But I'm kinda stuck here... not sure how to group by intervals of 2, and first should aim for full color, second take same color and set the opacity to 0.9...

Example Usage:

const colors = ['#54AAED', '#7BEA6B', '#f8b653', '#ff5584']
const groupMe = ['one', 'two', 'three', 'four']
groupMe.map(entry => {
 return generateColor(i, true)
})
// expected output
'one' <== '#54AAED' opacity 1
'two' <== '#54AAED' opacity 0.9
'three' <== '#7BEA6B' opacity 1
'four' <== '#7BEA6b' opacity 0.9
and so on...

please add some wanted results. what is group doing?

Nina Scholz
– Nina Scholz

2017-02-05 17:59:51 +00:00
Commented Feb 5, 2017 at 17:59 — Nina Scholz
– Nina Scholz, Commented Feb 5, 2017 at 17:59
@NinaScholz I've added example usage.

Ilanus
– Ilanus

2017-02-05 18:08:03 +00:00
Commented Feb 5, 2017 at 18:08 — Ilanus
– Ilanus, Commented Feb 5, 2017 at 18:08

Ilanus · Accepted Answer · 2017-02-05 20:39:45Z

Just check if the number is even go to previous index. and use ternary to set opacity. React example:

const Component = React.Component
const palette = ['#54AAED', '#7BEA6B', '#f8b653', '#ff5584', '#d743c4', '#76bbf1', '#95ee89', '#f9c575', '#ff9d6d', '#ff779d', '#df69d0', '#9178ec'];
function hexToRgb(hex, opacity) {
  return 'rgba(' + (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16) }).concat(opacity||1).join(',') + ')';
}

function generateColor({ i, group }) {
  const isEven = i % 2 === 0
  if (group) {
   return hexToRgb(palette[isEven ? i : i - 1], isEven ? 1 : 0.9)
  }
}

class App extends Component {
  render() {
    const itirations = 10;
    return (
      <div style={{ textAlign: 'center', width: '50%', marign: '0 auto' }}>
        {Array.from(Array(itirations), (_, i) =>
          <div style={{ width: 300, height: 10, marginTop: 10, backgroundColor: generateColor({ i, group: true }) }} />           
        )}
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('mount')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="mount"></div>

Collectives™ on Stack Overflow

Color grouping by array index, Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related