mirekm/Chemistry-of-color.markdown

## Chemistry-of-color.markdown

      
    Raw
  

              Chemistry-of-color.markdown
            
          
    Chemistry of color

This is how we generate column icons in overv.io. Full article: https://medium.com/p/5a075ca7d081
A Pen by Mirek Mencel on CodePen.
License.

  
## index.html
<body>
  <head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/md5.js"></script>
  </head>

  <div class="icon">
    <div>P</div>
  </div>
  <div class="icon">
    <div class="half-vertical">P</div>
    <div class="half-vertical">P</div>
  </div>
  <div class="icon">
    <div class="quarter">P</div>
    <div class="quarter">P</div>
    <div class="half-horizontal">P</div>
  </div>
  <div class="icon">
    <div class="quarter">P</div>
    <div class="quarter">P</div>
    <div class="quarter">P</div>
    <div class="quarter">P</div>
  </div>
</body>

## script.coffee
extractBits = (data) ->
  result = 0
  BITS = [31, 23, 15, 7]
  for srcInt in data
    for bit in BITS
      bitMask = 1 << bit;
      result <<= 1
      if srcInt & bitMask
        result |= 1
   result

toHslString = (color) ->
   "hsl(#{color.hue}, #{Math.round color.saturation*100}%, #{Math.round color.lightness*100}%)"

generateColor = (id) ->
  hash = CryptoJS.MD5 id
  shortMD5 = extractBits hash.words

  hue = shortMD5*360 / (1<<16)

  color =
    hue: hue
    saturation: 0.4
    lightness: 0.4

  toHslString color

buildIcon = (ids) ->
  # Create container div
  $icon = $('<div>').addClass 'icon example1'

  boxes = []

  # Create inner boxes
  for id in ids
    color = generateColor id
    $innerBox = $('<div>').html id[0].toUpperCase()
    $innerBox.css 'background-color', color
    boxes.push $innerBox
    $icon.append $innerBox

  # Assign internal classes
  boxClass = [
    []
    ['half-vertical', 'half-vertical']
    ['quarter', 'quarter', 'half-horizontal']
    ['quarter', 'quarter', 'quarter', 'quarter']
  ]
  for klass, index in boxClass[boxes.length-1]
    boxes[index].addClass klass

  $icon

$ () ->
  ids = [
    'overv.io'
    'overv.io-beta'
    'saleor'
    'satchless'
  ]
  $('body').append buildIcon ids[0..0]
  $('body').append buildIcon ids[0..1]
  $('body').append buildIcon ids[0..2]
  $('body').append buildIcon ids[0..3]

## style.less
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: rgba(0,0,0,0.3);
}

.icon:after {
  content: "";
  display: table;
  clear: both;
}

.icon {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  margin: 20px;

  div {
    float: left;
    border: 1px solid black;
    width: 100%;
    height: 100%;
    line-height: 50px;
    text-align: center;

    &.half-horizontal {
      height: 50%;
      font-size: 50%;
      line-height: 25px;
    }

    &.half-vertical {
      width: 50%;
      font-size: 50%;
      line-height: 50px;
    }

    &.quarter {
      width: 50%;
      height: 50%%;
      font-size: 50%;
      line-height: 25px;
    }
  }
}
.example1 {
  border: 0;
  color: white;
  text-align: center;
  line-height: 50px;
  div {
    border: 0;
  }
}
	<body>
	<head>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/md5.js"></script>
	</head>

	<div class="icon">
	<div>P</div>
	</div>
	<div class="icon">
	<div class="half-vertical">P</div>
	<div class="half-vertical">P</div>
	</div>
	<div class="icon">
	<div class="quarter">P</div>
	<div class="quarter">P</div>
	<div class="half-horizontal">P</div>
	</div>
	<div class="icon">
	<div class="quarter">P</div>
	<div class="quarter">P</div>
	<div class="quarter">P</div>
	<div class="quarter">P</div>
	</div>
	</body>
	extractBits = (data) ->
	result = 0
	BITS = [31, 23, 15, 7]
	for srcInt in data
	for bit in BITS
	bitMask = 1 << bit;
	result <<= 1
	if srcInt & bitMask
	result \|= 1
	result

	toHslString = (color) ->
	"hsl(#{color.hue}, #{Math.round color.saturation100}%, #{Math.round color.lightness100}%)"

	generateColor = (id) ->
	hash = CryptoJS.MD5 id
	shortMD5 = extractBits hash.words

	hue = shortMD5*360 / (1<<16)

	color =
	hue: hue
	saturation: 0.4
	lightness: 0.4

	toHslString color

	buildIcon = (ids) ->
	# Create container div
	$icon = $('<div>').addClass 'icon example1'

	boxes = []

	# Create inner boxes
	for id in ids
	color = generateColor id
	$innerBox = $('<div>').html id[0].toUpperCase()
	$innerBox.css 'background-color', color
	boxes.push $innerBox
	$icon.append $innerBox

	# Assign internal classes
	boxClass = [
	[]
	['half-vertical', 'half-vertical']
	['quarter', 'quarter', 'half-horizontal']
	['quarter', 'quarter', 'quarter', 'quarter']
	]
	for klass, index in boxClass[boxes.length-1]
	boxes[index].addClass klass

	$icon

	$ () ->
	ids = [
	'overv.io'
	'overv.io-beta'
	'saleor'
	'satchless'
	]
	$('body').append buildIcon ids[0..0]
	$('body').append buildIcon ids[0..1]
	$('body').append buildIcon ids[0..2]
	$('body').append buildIcon ids[0..3]
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	background: rgba(0,0,0,0.3);
	}

	.icon:after {
	content: "";
	display: table;
	clear: both;
	}

	.icon {
	width: 50px;
	height: 50px;
	border: 1px solid black;
	margin: 20px;

	div {
	float: left;
	border: 1px solid black;
	width: 100%;
	height: 100%;
	line-height: 50px;
	text-align: center;

	&.half-horizontal {
	height: 50%;
	font-size: 50%;
	line-height: 25px;
	}

	&.half-vertical {
	width: 50%;
	font-size: 50%;
	line-height: 50px;
	}

	&.quarter {
	width: 50%;
	height: 50%%;
	font-size: 50%;
	line-height: 25px;
	}
	}
	}
	.example1 {
	border: 0;
	color: white;
	text-align: center;
	line-height: 50px;
	div {
	border: 0;
	}
	}