Skip to content

Instantly share code, notes, and snippets.

@emeeks

emeeks/colornames.js

Last active February 24, 2016 22:44
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save emeeks/b68e22df236159e7afdf to your computer and use it in GitHub Desktop.
Save emeeks/b68e22df236159e7afdf to your computer and use it in GitHub Desktop.
Download ZIP
Raw
colornames.js
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
}
Raw
index.html
<!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>
Raw
readme.md
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment