-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
50 lines (48 loc) · 1.89 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sprite Generator Demo</title>
<style>
html {
font-family: sans-serif;
}
.sprite {
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
border: 10px solid black;
}
</style>
</head>
<body>
<h1>Sprite Generator Demo</h1>
<p>This is an 8-bit pixel art style sprite generator, suitable for avatars. This is an entirely JavaScript implementation based on the techniques used by Lj V. Miranda for the Python/Seagull/Matplotlib-based: <a href="https://github.com/ljvmiranda921/sprites-as-a-service">Sprites-as-a-Service</a>. As such, this version may be easily run client- or server-side.</p>
<p><label>Seed: <input id="seed" value="0"></label> -- try changing this. (Experimental: <label><input id="monochrome" type="checkbox">Monochrome</label>)</p>
<div><img class="sprite" width="360" /></div>
<p>See also:</p>
<ul>
<li><a href="https://github.com/danielgjackson/sprite">GitHub Project Page</a></li>
<li><a href="https://danielgjackson.github.io/sprite/infinite.html">Infinite Sprites!</a></li>
<li><a href="https://github.com/ljvmiranda921/sprites-as-a-service">Sprites-as-a-Service</a> -- the original implementation, whose techniques are recreated in this library.</li>
</ul>
<script type="module">
import Sprite from './sprite.mjs';
function generate() {
const seed = document.querySelector('#seed').value;
const monochrome = document.querySelector('#monochrome').checked;
const result = Sprite.generate(seed, monochrome);
const dataUri = result.asDataUri();
document.querySelector('.sprite').src = dataUri;
};
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('#monochrome').addEventListener('change', generate);
const seed = document.querySelector('#seed');
seed.addEventListener('input', generate);
seed.focus();
seed.select();
generate();
});
</script>
</body>
</html>