diff --git a/css/style.css b/css/style.css index 93069da..76de3cb 100644 --- a/css/style.css +++ b/css/style.css @@ -1,10 +1,3 @@ -.problem-description { - background:#f5f2f0; - font-family:consolas; - line-height:24px; - padding:20px; -} - .results-matrix { font-size:0; margin:0 auto; diff --git a/index.html b/index.html index b4ab88d..e00e90b 100644 --- a/index.html +++ b/index.html @@ -2,34 +2,31 @@ - D3 - + Pixel Palettes < BB + - -

Pixel Palettes

- - -Tried my hand at this interesting challenge: - -

- -You are given two true color images, the Source and the Palette. They do not necessarily have the same dimensions but it is guaranteed that their areas are the same, i.e. they have the same number of pixels. +

+ An interesting challenge from Codegolf Stack Exchange +

-

+

Problem Statement

-Your task is to create an algorithm that makes the most accurate looking copy of the Source by only using the pixels in the Palette. Each pixel in the Palette must be used exactly once in a unique position in this copy. The copy must have the same dimensions as the Source. -

+
+ You are given two true color images, the Source and the Palette. They do not necessarily have the same dimensions but it is guaranteed that their areas are the same, i.e. they have the same number of pixels. +

+ Your task is to create an algorithm that makes the most accurate looking copy of the Source by only using the pixels in the Palette. Each pixel in the Palette must be used exactly once in a unique position in this copy. The copy must have the same dimensions as the Source. +

I developed a solution that takes a random pixel and uses a binary search to find a match in the target palette, weighted for the red component. Here are the results for that approach.

-

Results

+

Results

Images are links, diagonals are originals. @@ -152,9 +149,13 @@ I developed a Source +

-
var startTime = new Date().getTime();
+
var startTime = new Date().getTime();
 
 var fs = require("fs");
 var pngjs = require("pngjs").PNG;