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

Updates to bb-2016 styling.

Browse Source
master
ben-burlingham 10 years ago
parent 6dfbc073d7
commit b2e22b5bb0
2 changed files with 18 additions and 24 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      css/style.css
  2. 35
      index.html

7
css/style.css
Unescape View File

@ -1,10 +1,3 @@
.problem-description {
background:#f5f2f0;
font-family:consolas;
line-height:24px;
padding:20px;
}
.results-matrix {
font-size:0;
margin:0 auto;

35
index.html
Unescape View File

@ -2,34 +2,31 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3</title>
<title>Pixel Palettes &lt; BB</title>
<script type="text/javascript" src='../bb-2016/js/ui.js'></script>
<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>
<body>
<h1>Pixel Palettes</h1>
<!-- http://gogs.benburlingham.com/ben.burlingham/pixel-palettes -->
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>:
<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.
<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
</h2>
<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>
<blockquote>
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.
<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>
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>
<h2>Results</h2>
<h3>Results</h3>
<p>
Images are links, diagonals are originals.
@ -152,9 +149,13 @@ I developed a <a href="http://codegolf.stackexchange.com/questions/33172/america
</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 pngjs = require("pngjs").PNG;

Write Preview
Loading…
Cancel
Save