Skip to content

Instantly share code, notes, and snippets.

@elplatt

elplatt/index.html

Created March 28, 2018 19:37
Show Gist options
  • Save elplatt/e2bbe4375353f45682a34e486894f31b to your computer and use it in GitHub Desktop.
Save elplatt/e2bbe4375353f45682a34e486894f31b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<button id="button">Click me!</button>
<div id="new-color"></div>
<div id="all-colors"></div>
</body>
</html>
Raw
script.js
var phi = (1 + Math.sqrt(5)) / 2;
var base = 0.4;
var span = 0.5;
var N = 16;
var H = 5;
var L = Math.ceil(N / H)
var cell;
var level;
var perLevel;
var newColor = document.getElementById("new-color");
var allColors = document.getElementById("all-colors");
var colors = 0;
var addColor = function () {
var i = colors;
level = (i - i % H) / H
l = 1.0 - level / L
t = (i+1) * phi - Math.floor((i+1) * phi);
console.log(t);
y = Math.round(255 * l * (base + span * t));
b = Math.round(255 * l * (base + span * (1 - t)));
cell = document.createElement('div');
var c = "rgb(" + y + "," + y + "," + b + ")";
cell.style = "background-color:" + c + ";";
allColors.appendChild(cell);
newColor.style = "background-color:" + c + ";";
colors += 1;
cell.innerHTML = colors;
}
document.getElementById("button").onclick = addColor;
Raw
style.css
#new-color {
height: 40px;
}
#all-colors div {
display:inline-block;
width:40px;
height:40px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment