An example of an unsettling, unstable color palette.
Last active
June 18, 2017 04:01
-
-
Save saifuddin778/522fb6087dd4560bbdb21be75ab6391a to your computer and use it in GitHub Desktop.
Unstable Color Palette
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| text-align: center; | |
| } | |
| svg { | |
| background: none; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.js"></script> | |
| <script> | |
| var N = 60; | |
| var width = 500; | |
| var height = 500; | |
| function middle(source, candidate){ | |
| var result = []; | |
| for (var i=0; i<source.length; i++){ | |
| result.push( | |
| (candidate[i]+source[i])/2 | |
| ); | |
| } | |
| return result; | |
| } | |
| function get_color(candidate, source){ | |
| var closed = middle(source, candidate); | |
| return get_rgbabs(closed).color; | |
| } | |
| function vicinity(itemsp, item, space){ | |
| var radius = 7; | |
| var indices = []; | |
| var p = Math.random(); | |
| var x = Math.ceil(item.x); | |
| var y = Math.ceil(item.y); | |
| var weight = item.weight; | |
| var index = item.index; | |
| var q = space.selectAll('rect') | |
| .filter(function(d){ | |
| return ((d.x >= x - (d.width * radius)) && (d.x <= x + (d.width * radius))); | |
| }) | |
| .filter(function(d){ | |
| return ((d.y >= y - (d.height * radius)) && (d.y <= y + (d.height * radius))); | |
| }) | |
| .filter(function(d){ | |
| return d.index != index | |
| }); | |
| q.each(function(d){ | |
| indices.push(d.index); | |
| }); | |
| if (p < 0.5){ | |
| q[0].sort(function (a, b) { | |
| var ax = +d3.select(a).attr('x'); | |
| var ay = +d3.select(a).attr('y'); | |
| var bx = +d3.select(b).attr('x'); | |
| var by = +d3.select(b).attr('y'); | |
| return Math.atan2(Math.pow(ax, 2), ay) - Math.atan2(Math.pow(bx, 2), by); | |
| }); | |
| } | |
| q.transition().delay(function(d, i){ | |
| return 100 * Math.random() * i; | |
| }).style('fill', function(d){ | |
| return get_color(d.weight, weight) | |
| }); | |
| return parseInt(N*N * Math.random()); | |
| } | |
| function get_rgbabs(weight){ | |
| return {color: 'rgb('+weight.map(function(d){return parseInt(d);}).join(',')+')'}; | |
| } | |
| function get_rgb(weight){ | |
| var key = 255; | |
| var value = weight.map(function(d){ return Math.floor(key * d); }); | |
| return {color: 'rgb('+value.join(',')+')', value: value}; | |
| } | |
| function grid(width, height, n){ | |
| var space = d3.select("body") | |
| .append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g"); | |
| var nboxes = n * n; | |
| var pad_x = width / n; | |
| var pad_y = height / n; | |
| var x = 0; | |
| var y = 0-pad_y; | |
| var points = d3.range(nboxes).map(function(d){ | |
| x = pad_x * (d % n); | |
| if (d % n == 0){ | |
| y += pad_y; | |
| } | |
| var weight = d3.range(3).map(function(d){ return Math.random(); }); | |
| var colobj = get_rgb(weight); | |
| return { | |
| index: d, | |
| x: x, | |
| y: y, | |
| width: pad_x, | |
| height: pad_y, | |
| color: colobj.color, | |
| weight: colobj.value, | |
| } | |
| }); | |
| var population = space.selectAll("rect") | |
| .data(points) | |
| .enter() | |
| .append("rect"); | |
| population | |
| .attr("index", function(d){return d.index}) | |
| .attr("x", function(d){return d.x}) | |
| .attr("y", function(d){return d.y}) | |
| .attr("width", function(d){return d.width}) | |
| .attr("height", function(d){return d.height}) | |
| .style("fill", function(d){return d.color}) | |
| .style("stroke", "black") | |
| .style("stroke-width", 0.2); | |
| return {space: space, population: population}; | |
| } | |
| function game(object, val){ | |
| var v = d3.select(object.population[0][val]); | |
| v.each( | |
| function(d){ | |
| newval = vicinity(this, d, object.space); | |
| } | |
| ); | |
| return newval; | |
| } | |
| var object = grid(width, height, N); | |
| var item = Math.ceil(Math.random() * object.population[0].length); | |
| setInterval(function(){ | |
| item = game(object, item); | |
| }, 100); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment