404: Not Found
<!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="//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>
colorHash = {
"Red": 0,
"Orange Red": 15,
"Safety Orange": 25,
"Dark Orange": 35,
"Amber": 45,
"Golden Yellow": 55,
"Chartreuse Yellow": 65,
"Electric Lime": 75,
"Spring Bud": 85,
"Bright Green": 95,
"Harlequin": 120,
"Lime": 125,
"Free Speech Green": 135,
"Spring Green": 160,
"Medium Spring Green": 180,
"Aqua": 185,
"Deep Sky Blue": 195,
"Dodger Blue": 210,
"Blue": 235,
"Han Purple": 255,
"Electric Indigo": 280,
"Psychedelic Purple": 295,
"Magenta": 305,
"Hot Magenta": 315,
"Hollywood Cerise": 325,
"Deep Pink": 335,
"Torch Red": 345,
"White": 0,
"Black": 0
}