ben.burlingham
/
pixel-palettes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: ben.burlingham:f5658211305f8e2f4b4624beea0fb53901cad7fe
Branches Tags
ben.burlingham:master
..
compare: ben.burlingham:a7e6d4a929cf474b3c930fbecffca2f226137287
Branches Tags
ben.burlingham:master

5 Commits
f565821130 ... a7e6d4a929

Author SHA1 Message Date
Ben Burlingham a7e6d4a929 Adding hr element below title.
9 years ago
Ben Burlingham d366b8c5f6 Core UI address change.
10 years ago
ben-burlingham b2e22b5bb0 Updates to bb-2016 styling.
10 years ago
ben-burlingham 6dfbc073d7 Styling updates.
10 years ago
ben-burlingham 26fa664ced Trivial copy updates.
10 years ago
2 changed files with 100 additions and 102 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats
  1. 17
      css/style.css
  2. 185
      index.html

17
css/style.css
Unescape View File

@ -1,24 +1,23 @@
.problem-description {
background:#f5f2f0;
font-family:consolas;
line-height:24px;
padding:20px;
}
.results-matrix { .results-matrix {
font-size:0; font-size:0;
margin:0 auto;
text-align:center; text-align:center;
width:700px;
} }
.results-matrix img { .results-matrix img {
border:3px solid #414141; border:3px solid #fff;
vertical-align:middle; vertical-align:middle;
width: 100%; width: 100%;
} }
.results-matrix img:hover {
border-color:#e8296b;
}
.results-matrix a { .results-matrix a {
display:inline-block; display:inline-block;
line-height:125px; line-height:131px;
margin:5px 2px; margin:5px 2px;
vertical-align:top; vertical-align:top;
width:110px; width:110px;

185
index.html
Unescape View File

@ -2,163 +2,162 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>D3</title> <title>Pixel Palettes &lt; BB</title>
<script type="text/javascript" src='../core/js/ui.js'></script>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="/beb-2016/css/style.css">
<link rel="stylesheet" href="/beb-2016/css/prism.css">
</head> </head>
<body> <body>
<h1>Pixel Palettes</h1> <h1>Pixel Palettes</h1>
<!-- http://gogs.benburlingham.com/ben.burlingham/pixel-palettes --> <h2>
An <a href="http://codegolf.stackexchange.com/questions/33172/american-gothic-in-the-palette-of-mona-lisa-rearrange-the-pixels">interesting challenge</a> from Codegolf Stack Exchange
Tried my hand at <a href="http://codegolf.stackexchange.com/questions/33172/american-gothic-in-the-palette-of-mona-lisa-rearrange-the-pixels">this interesting challenge</a>: </h2>
<p class='problem-description'>
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. <hr>
<br><br> <h3>Problem Statement</h3>
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.
</p>
<p> <blockquote>
<a href="http://codegolf.stackexchange.com/questions/33172/american-gothic-in-the-palette-of-mona-lisa-rearrange-the-pixels/35960#35960">My solution</a> is not everything I wished, but it was a fun exercise. 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.
</p> <br><br>
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.
</blockquote>
<p> <p>
The code basically 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. I developed a <a href="http://codegolf.stackexchange.com/questions/33172/american-gothic-in-the-palette-of-mona-lisa-rearrange-the-pixels/35960#35960">solution</a> 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.
</p> </p>
<h2>Results</h2> <h3>Results</h3>
<p> <p>
Images are links, diagonals are originals. Images are links, diagonals are originals.
</p> </p>
<div class='results-matrix'> <div class='results-matrix'>
<a href='/pixel-palettes/img/gothic.png' target='_new'> <a href='img/gothic.png' target='_new'>
<img src="/pixel-palettes/img/gothic.png" alt="Gothic original"> <img src="img/gothic.png" alt="Gothic original">
</a> </a>
<a href='/pixel-palettes/img/gothic-mona.png' target='_new'> <a href='img/gothic-mona.png' target='_new'>
<img src="/pixel-palettes/img/gothic-mona.png" alt="Gothic -> Mona Lisa"> <img src="img/gothic-mona.png" alt="Gothic -> Mona Lisa">
</a> </a>
<a href='/pixel-palettes/img/gothic-scream.png' target='_new'> <a href='img/gothic-scream.png' target='_new'>
<img src="/pixel-palettes/img/gothic-scream.png" alt="Gothic -> Scream"> <img src="img/gothic-scream.png" alt="Gothic -> Scream">
</a> </a>
<a href='/pixel-palettes/img/gothic-spheres.png' target='_new'> <a href='img/gothic-spheres.png' target='_new'>
<img src="/pixel-palettes/img/gothic-spheres.png" alt="Gothic -> Spheres"> <img src="img/gothic-spheres.png" alt="Gothic -> Spheres">
</a> </a>
<a href='/pixel-palettes/img/gothic-starry.png' target='_new'> <a href='img/gothic-starry.png' target='_new'>
<img src="/pixel-palettes/img/gothic-starry.png" alt="Gothic -> Starry Night"> <img src="img/gothic-starry.png" alt="Gothic -> Starry Night">
</a> </a>
<a href='/pixel-palettes/img/gothic-stream.png' target='_new'> <a href='img/gothic-stream.png' target='_new'>
<img src="/pixel-palettes/img/gothic-stream.png" alt="Gothic -> Stream"> <img src="img/gothic-stream.png" alt="Gothic -> Stream">
</a> </a>
<a href='/pixel-palettes/img/mona-gothic.png' target='_new'> <a href='img/mona-gothic.png' target='_new'>
<img src="/pixel-palettes/img/mona-gothic.png" alt="Mona -> Gothic"> <img src="img/mona-gothic.png" alt="Mona -> Gothic">
</a> </a>
<a href='/pixel-palettes/img/mona.png' target='_new'> <a href='img/mona.png' target='_new'>
<img src="/pixel-palettes/img/mona.png" alt="Mona Lisa original"> <img src="img/mona.png" alt="Mona Lisa original">
</a> </a>
<a href='/pixel-palettes/img/mona-scream.png' target='_new'> <a href='img/mona-scream.png' target='_new'>
<img src="/pixel-palettes/img/mona-scream.png" alt="Mona -> Scream"> <img src="img/mona-scream.png" alt="Mona -> Scream">
</a> </a>
<a href='/pixel-palettes/img/mona-spheres.png' target='_new'> <a href='img/mona-spheres.png' target='_new'>
<img src="/pixel-palettes/img/mona-spheres.png" alt="Mona -> Spheres"> <img src="img/mona-spheres.png" alt="Mona -> Spheres">
</a> </a>
<a href='/pixel-palettes/img/mona-starry.png' target='_new'> <a href='img/mona-starry.png' target='_new'>
<img src="/pixel-palettes/img/mona-starry.png" alt="Mona -> Starry Night"> <img src="img/mona-starry.png" alt="Mona -> Starry Night">
</a> </a>
<a href='/pixel-palettes/img/mona-stream.png' target='_new'> <a href='img/mona-stream.png' target='_new'>
<img src="/pixel-palettes/img/mona-stream.png" alt="Mona -> Stream"> <img src="img/mona-stream.png" alt="Mona -> Stream">
</a> </a>
<a href='/pixel-palettes/img/scream-gothic.png' target='_new'> <a href='img/scream-gothic.png' target='_new'>
<img src="/pixel-palettes/img/scream-gothic.png" alt="Scream -> Gothic"> <img src="img/scream-gothic.png" alt="Scream -> Gothic">
</a> </a>
<a href='/pixel-palettes/img/scream-mona.png' target='_new'> <a href='img/scream-mona.png' target='_new'>
<img src="/pixel-palettes/img/scream-mona.png" alt="Scream -> Mona Lisa"> <img src="img/scream-mona.png" alt="Scream -> Mona Lisa">
</a> </a>
<a href='/pixel-palettes/img/scream.png' target='_new'> <a href='img/scream.png' target='_new'>
<img src="/pixel-palettes/img/scream.png" alt="Scream original"> <img src="img/scream.png" alt="Scream original">
</a> </a>
<a href='/pixel-palettes/img/scream-spheres.png' target='_new'> <a href='img/scream-spheres.png' target='_new'>
<img src="/pixel-palettes/img/scream-spheres.png" alt="Scream -> Spheres"> <img src="img/scream-spheres.png" alt="Scream -> Spheres">
</a> </a>
<a href='/pixel-palettes/img/scream-starry.png' target='_new'> <a href='img/scream-starry.png' target='_new'>
<img src="/pixel-palettes/img/scream-starry.png" alt="Scream -> Starry Night"> <img src="img/scream-starry.png" alt="Scream -> Starry Night">
</a> </a>
<a href='/pixel-palettes/img/scream-stream.png' target='_new'> <a href='img/scream-stream.png' target='_new'>
<img src="/pixel-palettes/img/scream-stream.png" alt="Scream -> Stream"> <img src="img/scream-stream.png" alt="Scream -> Stream">
</a> </a>
<a href='/pixel-palettes/img/spheres-gothic.png' target='_new'> <a href='img/spheres-gothic.png' target='_new'>
<img src="/pixel-palettes/img/spheres-gothic.png" alt="Spheres -> Gothic"> <img src="img/spheres-gothic.png" alt="Spheres -> Gothic">
</a> </a>
<a href='/pixel-palettes/img/spheres-mona.png' target='_new'> <a href='img/spheres-mona.png' target='_new'>
<img src="/pixel-palettes/img/spheres-mona.png" alt="Spheres -> Mona Lisa"> <img src="img/spheres-mona.png" alt="Spheres -> Mona Lisa">
</a> </a>
<a href='/pixel-palettes/img/spheres-scream.png' target='_new'> <a href='img/spheres-scream.png' target='_new'>
<img src="/pixel-palettes/img/spheres-scream.png" alt="Spheres -> Scream"> <img src="img/spheres-scream.png" alt="Spheres -> Scream">
</a> </a>
<a href='/pixel-palettes/img/spheres.png' target='_new'> <a href='img/spheres.png' target='_new'>
<img src="/pixel-palettes/img/spheres.png" alt="Spheres original"> <img src="img/spheres.png" alt="Spheres original">
</a> </a>
<a href='/pixel-palettes/img/spheres-starry.png' target='_new'> <a href='img/spheres-starry.png' target='_new'>
<img src="/pixel-palettes/img/spheres-starry.png" alt="Spheres -> Starry Night"> <img src="img/spheres-starry.png" alt="Spheres -> Starry Night">
</a> </a>
<a href='/pixel-palettes/img/spheres-stream.png' target='_new'> <a href='img/spheres-stream.png' target='_new'>
<img src="/pixel-palettes/img/spheres-stream.png" alt="Spheres -> Stream"> <img src="img/spheres-stream.png" alt="Spheres -> Stream">
</a> </a>
<a href='/pixel-palettes/img/starry-gothic.png' target='_new'> <a href='img/starry-gothic.png' target='_new'>
<img src="/pixel-palettes/img/starry-gothic.png" alt="Starry -> Gothic"> <img src="img/starry-gothic.png" alt="Starry -> Gothic">
</a> </a>
<a href='/pixel-palettes/img/starry-mona.png' target='_new'> <a href='img/starry-mona.png' target='_new'>
<img src="/pixel-palettes/img/starry-mona.png" alt="Starry -> Mona Lisa"> <img src="img/starry-mona.png" alt="Starry -> Mona Lisa">
</a> </a>
<a href='/pixel-palettes/img/starry-scream.png' target='_new'> <a href='img/starry-scream.png' target='_new'>
<img src="/pixel-palettes/img/starry-scream.png" alt="Starry -> Scream"> <img src="img/starry-scream.png" alt="Starry -> Scream">
</a> </a>
<a href='/pixel-palettes/img/starry-spheres.png' target='_new'> <a href='img/starry-spheres.png' target='_new'>
<img src="/pixel-palettes/img/starry-spheres.png" alt="Starry -> Spheres"> <img src="img/starry-spheres.png" alt="Starry -> Spheres">
</a> </a>
<a href='/pixel-palettes/img/starry.png' target='_new'> <a href='img/starry.png' target='_new'>
<img src="/pixel-palettes/img/starry.png" alt="Starry Night original"> <img src="img/starry.png" alt="Starry Night original">
</a> </a>
<a href='/pixel-palettes/img/starry-stream.png' target='_new'> <a href='img/starry-stream.png' target='_new'>
<img src="/pixel-palettes/img/starry-stream.png" alt="Starry -> Stream"> <img src="img/starry-stream.png" alt="Starry -> Stream">
</a> </a>
<a href='/pixel-palettes/img/stream-gothic.png' target='_new'> <a href='img/stream-gothic.png' target='_new'>
<img src="/pixel-palettes/img/stream-gothic.png" alt="Stream -> Gothic"> <img src="img/stream-gothic.png" alt="Stream -> Gothic">
</a> </a>
<a href='/pixel-palettes/img/stream-mona.png' target='_new'> <a href='img/stream-mona.png' target='_new'>
<img src="/pixel-palettes/img/stream-mona.png" alt="Stream -> Mona Lisa"> <img src="img/stream-mona.png" alt="Stream -> Mona Lisa">
</a> </a>
<a href='/pixel-palettes/img/stream-scream.png' target='_new'> <a href='img/stream-scream.png' target='_new'>
<img src="/pixel-palettes/img/stream-scream.png" alt="Stream -> Scream"> <img src="img/stream-scream.png" alt="Stream -> Scream">
</a> </a>
<a href='/pixel-palettes/img/stream-spheres.png' target='_new'> <a href='img/stream-spheres.png' target='_new'>
<img src="/pixel-palettes/img/stream-spheres.png" alt="Stream -> Spheres"> <img src="img/stream-spheres.png" alt="Stream -> Spheres">
</a> </a>
<a href='/pixel-palettes/img/stream-starry.png' target='_new'> <a href='img/stream-starry.png' target='_new'>
<img src="/pixel-palettes/img/stream-starry.png" alt="Stream -> Starry Night"> <img src="img/stream-starry.png" alt="Stream -> Starry Night">
</a> </a>
<a href='/pixel-palettes/img/stream.png' target='_new'> <a href='img/stream.png' target='_new'>
<img src="/pixel-palettes/img/stream.png" alt="Stream original"> <img src="img/stream.png" alt="Stream original">
</a> </a>
</div> </div>
<h2>Source code</h2> <h3>Code</h3>
<p>
<a href="http://gogs.benburlingham.com/ben.burlingham/pixel-palettes" target="_blank">Source</a>
</p>
<pre class='line-numbers'><code class='language-javascript'>var startTime = new Date().getTime(); <pre class='language-javascript line-numbers'><code class='language-javascript'>var startTime = new Date().getTime();
var fs = require("fs"); var fs = require("fs");
var pngjs = require("pngjs").PNG; var pngjs = require("pngjs").PNG;

Write Preview
Loading…
Cancel
Save