|
|
|
<!DOCTYPE html> |
|
|
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8" /> |
|
<title>Colorpacking</title> |
|
<style> |
|
canvas { |
|
position: absolute; |
|
} |
|
|
|
svg { |
|
position: absolute; |
|
} |
|
|
|
#cv-new { |
|
top: 500px; |
|
} |
|
|
|
#cv { |
|
opacity: 0; |
|
} |
|
|
|
img { |
|
position: fixed; |
|
top: 0; |
|
left: 600px; |
|
max-width: 500px; |
|
z-index: 99; |
|
} |
|
|
|
</style> |
|
</head> |
|
<body> |
|
<img></img> |
|
<canvas id="cv" width="1000" height="500" ></canvas> |
|
<svg></svg> |
|
|
|
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script> |
|
<script src="colornames.js" charset="utf-8" type="text/javascript"></script> |
|
|
|
<script type="text/javascript"> |
|
|
|
var gridSize = 2; |
|
var lessDominant = true; |
|
var localColorization = true; |
|
|
|
var canvas = document.getElementById('cv'); |
|
context = canvas.getContext('2d'); |
|
|
|
var selectionID = "svg"; |
|
|
|
var randomImage = parseInt(Math.random() * 13) + 1 |
|
|
|
//Loading of the home test image - img1 |
|
var img = new Image(); |
|
img.src = "picture" + randomImage + ".jpg"; |
|
|
|
d3.select("img").attr("src", "picture" + randomImage + ".jpg") |
|
|
|
//drawing of the test image - img1 |
|
img.onload = function () { |
|
d3.select("canvas").attr("width", img.width).attr("height", img.height) |
|
process(img.width, img.height); |
|
}; |
|
|
|
|
|
function process(width, height) { |
|
|
|
//draw background image |
|
context.drawImage(img, 0, 0); |
|
//draw a box over the top |
|
var imageData = context.getImageData(0, 0, width, height); |
|
|
|
var hslArray = []; |
|
var hslGrid = [[]]; |
|
|
|
var cx = 0; |
|
var cy = 0; |
|
|
|
for (var x = 0; x<imageData.data.length;x = x + 4) { |
|
var r = x; |
|
var g = x + 1; |
|
var b = x + 2; |
|
|
|
var hsl = d3.hsl(d3.rgb(imageData.data[r],imageData.data[g],imageData.data[b],255)); |
|
|
|
var group = "Red"; |
|
var hue = hsl.h; |
|
|
|
if (hue < 10) { |
|
group = "Red"; |
|
} else if (hue < 20) { |
|
group = "Orange Red"; |
|
} else if (hue < 30) { |
|
group = "Safety Orange"; |
|
} else if (hue < 40) { |
|
group = "Dark Orange"; |
|
} else if (hue < 50) { |
|
group = "Amber"; |
|
} else if (hue < 60) { |
|
group = "Golden Yellow"; |
|
} else if (hue < 70) { |
|
group = "Chartreuse Yellow"; |
|
} else if (hue < 80) { |
|
group = "Electric Lime"; |
|
} else if (hue < 90) { |
|
group = "Spring Bud"; |
|
} else if (hue < 100) { |
|
group = "Bright Green"; |
|
} else if (hue < 110) { |
|
group = "Harlequin"; |
|
} else if (hue < 130) { |
|
group = "Lime"; |
|
} else if (hue < 140) { |
|
group = "Free Speech Green"; |
|
} else if (hue < 160) { |
|
group = "Spring Green"; |
|
} else if (hue < 170) { |
|
group = "Medium Spring Green"; |
|
} else if (hue < 190) { |
|
group = "Aqua"; |
|
} else if (hue < 200) { |
|
group = "Deep Sky Blue"; |
|
} else if (hue < 220) { |
|
group = "Dodger Blue"; |
|
} else if (hue < 250) { |
|
group = "Blue"; |
|
} else if (hue < 260) { |
|
group = "Han Purple"; |
|
} else if (hue < 270) { |
|
group = "Electric Indigo"; |
|
} else if (hue < 290) { |
|
group = "Electric Purple"; |
|
} else if (hue < 300) { |
|
group = "Psychedelic Purple"; |
|
} else if (hue < 310) { |
|
group = "Magenta"; |
|
} else if (hue < 320) { |
|
group = "Hot Magenta"; |
|
} else if (hue < 330) { |
|
group = "Hollywood Cerise"; |
|
} else if (hue < 340) { |
|
group = "Deep Pink"; |
|
} else if (hue < 350) { |
|
group = "Torch Red"; |
|
} |
|
|
|
var hsl = {x: cx, y: cy, hsl: hsl, group: group}; |
|
|
|
hslArray.push(hsl); |
|
hslGrid[cy].push(hsl); |
|
cx = cx + 1; |
|
if (cx === 1000) { |
|
cx = 0; |
|
cy = cy + 1; |
|
hslGrid[cy] = []; |
|
} |
|
} |
|
|
|
var data = hslArray; |
|
|
|
d3.select(selectionID) |
|
.attr("height", 1200) |
|
.attr("width", 600) |
|
.style("background", "white"); |
|
|
|
var hScale = function(d) {return Math.round(d / 15) * 15}; |
|
var sScale = function(d) {return Math.round(d * 10) / 10}; |
|
var lScale = function(d) {return Math.round(d * 20) / 20}; |
|
|
|
var dataHash = {}; |
|
var newData = [] |
|
|
|
data = data.forEach((d, i) => { |
|
var datapoint = {}; |
|
|
|
datapoint.rh = hScale(d.hsl.h) |
|
datapoint.rs = sScale(d.hsl.s) |
|
datapoint.rl = lScale(d.hsl.l) |
|
datapoint.group = d.group; |
|
|
|
if (datapoint.rl <= 0.1) { |
|
datapoint.rh = 0; |
|
datapoint.rs = 0; |
|
datapoint.rl = 0; |
|
datapoint.group = "Black"; |
|
} |
|
|
|
|
|
if (datapoint.rl >= .9) { |
|
datapoint.rh = 0; |
|
datapoint.rs = 0; |
|
datapoint.rl = 1; |
|
datapoint.group = "White"; |
|
} |
|
|
|
datapoint.value = 1; |
|
var hashString = datapoint.group + "-" + datapoint.rh +"-" + datapoint.rs +"-" +datapoint.rl; |
|
datapoint.key = hashString; |
|
|
|
if (dataHash[hashString]) { |
|
dataHash[hashString].value = dataHash[hashString].value + 1; |
|
} |
|
else { |
|
dataHash[hashString] = datapoint; |
|
newData.push(datapoint); |
|
} |
|
}); |
|
|
|
var nestedData = d3.nest() |
|
.key(d => d.group) |
|
.key(d => d.rl) |
|
.entries(newData); |
|
|
|
var packedData = []; |
|
|
|
packChart = d3.layout.pack(); |
|
packChart.size([600,600]) |
|
.children(function(d) {return d.values}) |
|
.value(function(d) {return d.value}); |
|
|
|
var circleData = packChart({key: "root", values: nestedData}).filter(d => d.depth === 3); |
|
|
|
d3.select(selectionID) |
|
.selectAll("g.overall") |
|
.data([0]) |
|
.enter() |
|
.append("g") |
|
.attr("class", "overall") |
|
|
|
packG = d3.select(selectionID).select("g.overall"); |
|
|
|
packG |
|
.selectAll("circle") |
|
.data(circleData, d => d.key) |
|
.enter() |
|
.append("circle") |
|
.attr("r", 1) |
|
.attr("cx", function(d) {return d.x}) |
|
.attr("cy", function(d) {return d.y}) |
|
.style("fill", fillCircle2Level) |
|
.style("stroke", "none") |
|
|
|
packG |
|
.selectAll("circle") |
|
.transition() |
|
.duration(1000) |
|
.attr("r", function(d) {return d.r}) |
|
.attr("cx", function(d) {return d.x}) |
|
.attr("cy", function(d) {return d.y}) |
|
.style("fill", fillCircle2Level) |
|
|
|
function fillCircle2Level(d) { |
|
return d3.hsl(d.rh, d.rs, d.rl).toString() |
|
} |
|
|
|
|
|
} |
|
|
|
</script> |
|
</body> |
|
</html> |
