<!DOCTYPE html>
<html>
<head>
<meta name="generator" content=
"HTML Tidy for HTML5 for Linux version 5.6.0">
<meta content="text/html; charset=utf-8" http-equiv=
"Content-Type">
<meta name="robots" content="index,follow">
<title>Animal Crossing: New Horizons Design Generator</title>
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<meta name="description" content=
"An Animal Crossing: New Horizons design generator, for generating designs from your own images.">
<link href="main.css" rel="stylesheet">
</head>
<body>
<h1>Animal Crossing: New Horizons Design Generator</h1><a href=
"https://gitlab.com/Taywee/nhdesigngen">This is free software.
The source code is available, and you may feel free to make
changes and pull requests. The repository might also have more
detailed and up-to-date information in the future, but for now, I
haven't filled out much of the README or other documentation
yet.</a>
<p>I am not a web developer, so please let me know if you are and
there is anything here that you would like to help with, or that
I can easily fix.</p>
<h2>How do I use this?</h2>
<ol>
<li>First, you probably want to the images you want to use
yourself ahead of time using something like <a href=
"https://www.gimp.org/">The GIMP</a> or Photoshop. This can
optionally resize images for you, but dedicated image editors
will give much better quality, and let you specify your scaling
algorithm (some images will look better resized with
interpolation, for instance, and others will be better with a
nearest-neighbor/no interpolation). The resize checkbox is
checked by default for convenience; be sure to uncheck it or
change the resize dimensions if you want anything other than
32x32 (which are the dimensions of regular designs). Also make
sure, if you are using Pro designs, that you are using images
without any transparent colors, as transparent colors will not
work with Pro designs.
</li>
<li>Select one or more palette images to generate the palette.
You may select more than one here to ensure you can maintain a
constant palette for Pro designs.</li>
<li>Select the image you want to load.</li>
<li>The design should now be generated in the table below.</li>
<li>Tweak the Optimizer and Ditherer settings until it looks
good enough. <a href=
"https://docs.rs/exoquant/0.2.0/exoquant/optimizer/index.html">
Some optimizer details can be found here</a> and <a href=
"https://docs.rs/exoquant/0.2.0/exoquant/ditherer/index.html">
Some ditherer details can be found here</a> and the
difference between the Floyd-Steinberg variants can be found
<a href=
"https://docs.rs/exoquant/0.2.0/exoquant/ditherer/struct.FloydSteinberg.html">
here</a>. Due to the small resolution and Animal Crossing's
filter, dithering currently looks pretty bad in most cases,
so you're probably best off leaving it to None.
</li>
<li>Go into the palette color editor and edit each individual
palette color. The Hue, Vividness, and Brightness sliders are
numbered from 1 from the left to 30 for Hue and 15 for
Vividness and Brightness on the right. So, for instance, for a
Brightness value of 11, you can choose the fifth value from the
right.</li>
<li>Fill out the pixels. If you are doing a pro palette, make
sure you have used all the images you want to use to generate
the palette, and load your next image. Feel free to tweak the
ditherer, but do not touch the optimizer setting, because the
palette may not be changed for different parts of a Pro
design.</li>
</ol>
<h2>Why not just use the QR code generating ones? Isn't this
tedious?</h2>
<p>This is extraordinarily tedious. This tool exists because
Animal Crossing: New Horizons has a fully-customizable palette,
and Animal Crossing: New Leaf did not. Unfortunately, the QR
codes only support the older palettes with limited colors, so the
only way to get the full color fidelity that New Horizons makes
possible is to tweak the palette and put pixels in individually.
At least unless Nintendo updates Animal Crossing: New Horizons to
support any method of sharing full-fidelity patterns without
going through their servers.</p><label for="resize">Resize loaded
images:</label> <input id="resize" type="checkbox" checked>
<input class="number" id="resize-width" step="1"" value=
"32">x<input class="number" id="resize-height" step="1""
value="32">
<h2>Palette</h2><label for="optimizer">Palette Optimizer:</label>
<select id="optimizer">
<option value="kmeans" selected>
K-Means
</option>
<option value="weightedkmeans">
Weighted K-Means
</option>
</select><br>
<label for="loadpalette">Load Palette Image(s):</label>
<input type="file" id="loadpalette" multiple><br>
<table id="palette"></table>
<h2>Image</h2><br>
<label for="ditherer">Ditherer:</label> <select id="ditherer">
<option value="none" selected>
None
</option>
<option value="floydsteinberg">
Floyd Steinberg
</option>
<option value="floydsteinbergvanilla">
Floyd Steinberg Vanilla
</option>
<option value="floydsteinbergcheckered">
Floyd Steinberg Checkered
</option>
<option value="ordered">
2x2 Ordered
</option>
</select><br>
<label for="loadimage">Load Image:</label> <input type="file" id=
"loadimage"><br>
<br>
<div class="canvascontainer">
<canvas id="canvas" width="1" height="1"></canvas>
</div><br>
<br>
<table id="design"></table>
<script type="module" src="main.js"></script>
</body>
</html>