├── .gitattributes
├── favicon.png
├── examples
    ├── example1.png
    ├── example2.png
    ├── example3.png
    └── example4.png
├── README.md
├── LICENSE
├── ZzSprite.js
└── index.html


/.gitattributes:
--------------------------------------------------------------------------------
1 | *.html linguist-language=Javascript
2 | 


--------------------------------------------------------------------------------
/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KilledByAPixel/ZzSprite/HEAD/favicon.png


--------------------------------------------------------------------------------
/examples/example1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KilledByAPixel/ZzSprite/HEAD/examples/example1.png


--------------------------------------------------------------------------------
/examples/example2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KilledByAPixel/ZzSprite/HEAD/examples/example2.png


--------------------------------------------------------------------------------
/examples/example3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KilledByAPixel/ZzSprite/HEAD/examples/example3.png


--------------------------------------------------------------------------------
/examples/example4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KilledByAPixel/ZzSprite/HEAD/examples/example4.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ZzSprite
 2 | 
 3 | A Tiny Sprite Generator by Frank Force
 4 | 
 5 | [Based on a Dweet](https://www.dwitter.net/d/3078) by Firey Fly
 6 | 
 7 | # [Live Demo](https://killedbyapixel.github.io/ZzSprite/)
 8 | 
 9 | ## Features
10 | 
11 | - Generates a wide variety of symetric pixel art sprites
12 | - Click on a sprite to set that as the current seed
13 | - Sprite can be mutated in shape or color
14 | - Sprite sheets can be saved as pngs
15 | - Sprites can be coppied to the clipboard for easy pasting
16 | - Supports 4 color and monochrome color modes
17 | - ZzSprite function can be used to generate sprites at run time
18 | 
19 | ## Example sprites...
20 | ![Example Image 1](/examples/example1.png)
21 | 
22 | ## Example mutations...
23 | ![Example Image 2](/examples/example2.png)
24 | 
25 | ## Example animations...
26 | ![Example Image 3](/examples/example3.png)
27 | 
28 | ## So many possibilities!
29 | ![Example Image 4](/examples/example4.png)
30 | 
31 | ![Favicon](/favicon.png)
32 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Frank Force
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/ZzSprite.js:
--------------------------------------------------------------------------------
 1 | // ZzSprite - Tiny Sprite Generator - Frank Force 2020 - MIT License
 2 | 
 3 | 'use strict';
 4 | 
 5 | // ==ClosureCompiler==
 6 | // @compilation_level ADVANCED_OPTIMIZATIONS
 7 | // @language_out ECMASCRIPT_2019
 8 | // @js_externs ZzSprite
 9 | // ==/ClosureCompiler==
10 | 
11 | function ZzSprite(context, x=0, y=0, seed=1, size=16, mode=0, mutateSeed=0, colorSeed=0)
12 | {
13 |     function Random(max=1, min=0)
14 |     {
15 |         randomSeed ^= randomSeed << 13;
16 |         randomSeed ^= randomSeed >>> 17;
17 |         return (Math.abs(randomSeed ^= randomSeed << 5) % 1e9 / 1e9)*(max-min) + min;
18 |     }
19 | 
20 |     // random chance to flip drawing axis
21 |     let randomSeed = seed;
22 |     const flipAxis = Random() < .5;
23 |     const w =  flipAxis ? size-3 : size/2 - 1 |0;
24 |     const h = !flipAxis ? size-3 : size/2 - 1 |0;
25 |         
26 |     // apply mutations
27 |     randomSeed += mutateSeed + 1e8;
28 |     const spriteSize = size * Random(.9, .6);
29 |     const density = Random(1, .9);
30 |     const doubleCenter = Random() < .5;
31 |     const yBias = Random(.1, -.1);
32 |     const colorRand = (mode==1 ? .08 : .04);
33 | 
34 |     // recenter
35 |     x += size/2 | 0;
36 |     y += 2 | 0;
37 | 
38 |     function DrawSpriteInternal(x, y, outline)
39 |     {
40 |         // draw each pixel
41 |         randomSeed = seed;
42 |         const passCount = mode == 3 ? 3: 1
43 |         for(let pass=0; pass < passCount; ++pass)
44 |         for(let k=0; k < w*h; ++k)
45 |         {
46 |             const i = flipAxis  ? k/w|0 : k%w;
47 |             const j = !flipAxis ? k/w|0 : k%w;
48 | 
49 |             // pick new random color using color seed
50 |             const saveSeed = randomSeed;
51 |             randomSeed += colorSeed + 1e9;
52 |             const r = Random(360)|0;
53 |             let newColor = `hsl(${ r },${ Random(200,0)|0 }%,${ Random(100,20)|0 }%)`;
54 |             if (outline || mode == 3)
55 |                 newColor = '#000';
56 |             else if (mode == 1)
57 |                 newColor = r%3? r%3==1 ? '#444' : '#999' : '#fff';
58 |             else if (mode == 2)
59 |                 newColor = `#fff`;
60 |             if (!k || Random() < colorRand)
61 |                 context.fillStyle = newColor;
62 |             randomSeed = saveSeed;
63 | 
64 |             // check if pixel should be drawn
65 |             const isHole = Random() > density;
66 |             if (Random(spriteSize/2)**2 > i*i + (j-(1-2*yBias)*h/2)**2 && !isHole)
67 |             {
68 |                 const o = !!outline;
69 |                 context.fillRect(x+i-o-doubleCenter, y+j-o, 1+2*o, 1+2*o);
70 |                 context.fillRect(x-i-o, y+j-o, 1+2*o, 1+2*o);
71 |             }
72 |         }
73 |     }
74 | 
75 |     // outline then fill
76 |     if (mode != 3)
77 |         DrawSpriteInternal(x, y, 1);
78 |     DrawSpriteInternal(x, y);
79 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 | *
  3 | {
  4 |     font-size:20px;
  5 |     font-family:Arial;
  6 | }
  7 | body
  8 | {
  9 |     background:#111;
 10 |     color:#fff;
 11 |     user-select:none;
 12 | }
 13 | .settingsContainer 
 14 | {
 15 |   display:grid;
 16 |   grid-template-columns: 130px 130px 130px 130px;
 17 |   grid-gap:10px;
 18 |   padding:10px;
 19 | }
 20 | canvas
 21 | {
 22 |     background:#ccc;
 23 |     image-rendering:-moz-crisp-edges;
 24 |     image-rendering:pixelated;
 25 | }
 26 | details
 27 | {
 28 |     padding:10px;
 29 | }
 30 | .programTitle
 31 | {
 32 |     font-size:20px;
 33 |     font-style:italic;
 34 |     padding:4px;
 35 |     text-align:center;
 36 | }
 37 | </style>
 38 | <link rel="shortcut icon" type="image/x-icon" href="favicon.png"/>
 39 | <div style=display:flex;height:180px>
 40 | <div id=settingsContainer class=settingsContainer></div>
 41 | 
 42 | <div>
 43 | <div id=programTitleDiv class=programTitle></div>
 44 | <canvas id=previewCanvas style='flex-shrink:0;width:128px;height:128px;border:3px solid #000'></canvas>
 45 | </div>
 46 | <details style=display:none>
 47 | <summary>Advanced</summary>
 48 | <div class=settingsContainer id=advancedSettingsContainer>
 49 | </div>
 50 | </details>
 51 | 
 52 | </div>
 53 | <canvas id=canvas style=width:100%></canvas>
 54 | <a id=link display:none></a>
 55 | 
 56 | <script src=ZzSprite.js?1></script>
 57 | <script>'use strict';
 58 | 
 59 | /////////////////////////////////////////////////////////////////////////////
 60 | 
 61 | let randomSeed = 0;
 62 | function Random(max=1, min=0)
 63 | {
 64 |     randomSeed ^= randomSeed << 13;
 65 |     randomSeed ^= randomSeed >>> 17;
 66 |     return (Math.abs(randomSeed ^= randomSeed << 5) % 1e9 / 1e9)*(max-min) + min;
 67 | }
 68 | 
 69 | function GenerateRandomSeed() { return Math.random()*1e9|0; }
 70 | 
 71 | function Update()
 72 | {
 73 |     // init canvas
 74 |     const tileSize = settings.tileSize.Get();
 75 |     const rows = settings.rows.Get();
 76 |     const columns = settings.columns.Get();
 77 |     canvas.height = rows*tileSize;
 78 |     canvas.width = columns*tileSize;
 79 |        
 80 |     // render sprites
 81 |     const displayMode = settings.displayMode.Get();
 82 |     let seed = settings.seed.Get();
 83 |     let colorSeed = settings.colorSeed.Get();
 84 |     let mutateSeed = settings.mutateSeed.Get();
 85 |     let animationSeed = GenerateRandomSeed();
 86 |     let sheetSeed = settings.sheetSeed.Get();
 87 |     for(let y = 0; y<rows; ++y)
 88 |     for(let x = 0; x<columns; ++x)
 89 |     {
 90 |         if (x || y)
 91 |         {
 92 |             // randomize parameters
 93 |             randomSeed = sheetSeed;
 94 |             if (displayMode == 0)
 95 |             {
 96 |                 seed = Random(1e9)|0;
 97 |             }
 98 |             else if (displayMode == 1)
 99 |             {
100 |                 mutateSeed = Random(1e9)|0;
101 |                 colorSeed = Random(1e9)|0;
102 |             }
103 |             else if (displayMode == 2)
104 |             {
105 |                 mutateSeed = Random(1e9)|0;
106 |             }
107 |             sheetSeed = randomSeed;
108 |         }
109 |     
110 |         savedParameters[x+y*columns] = {seed, mutateSeed, colorSeed};
111 |         ZzSprite(context, x*tileSize, y*tileSize, seed, settings.tileSize.Get(), settings.colorMode.Get(), mutateSeed, colorSeed);
112 |     }
113 |     
114 |     // draw preview sprite
115 |     const previewContext = previewCanvas.getContext('2d');
116 |     previewCanvas.width = tileSize;
117 |     previewCanvas.height = tileSize;
118 |     previewContext.fillStyle = '#fff';
119 |     previewContext.fillRect(0,0,2e3,2e3);
120 |     previewContext.drawImage(canvas, 0, 0);
121 | }
122 | 
123 | class Setting
124 | {
125 |     constructor(name, value, max=1, min=0, step=1, advanced=0)
126 |     {
127 |         const container = advanced ? advancedSettingsContainer : settingsContainer;
128 |         const nameElement = document.createElement('span');
129 |         nameElement.innerText = name;
130 |         container.appendChild(nameElement);
131 |         
132 |         const e = this.element = document.createElement('input');
133 |         container.appendChild(e);
134 |         
135 |         e.type = 'number';
136 |         e.value = this.default = value;
137 |         e.max = this.max = max;
138 |         e.min = this.min = min;
139 |         e.step = step;
140 |         
141 |         this.element.onchange= e=>
142 |         {
143 |             this.Set(step==1?this.element.value|0:this.element.value);
144 |             Update();
145 |         }
146 |     }
147 |         
148 |     SetDefault() { this.Set(this.default); }
149 | 
150 |     Set(value)
151 |     { 
152 |         value = value||0;
153 |         if (value < this.min)
154 |             value = this.min;
155 |         else if (value > this.max)
156 |             value = this.max;
157 | 
158 |         this.element.value = value;
159 |     }
160 |     Get() { return parseFloat(this.element.value); }
161 | }
162 | 
163 | class SettingDropDown
164 | {
165 |     constructor(name, options, advanced = 0)
166 |     {
167 |         const container = advanced ? advancedSettingsContainer : settingsContainer;
168 |         const nameElement = document.createElement('span');
169 |         nameElement.innerText = name;
170 |         container.appendChild(nameElement);
171 |         
172 |         this.element = document.createElement('select');
173 |         container.appendChild(this.element);
174 |         options.map((o,i)=>
175 |         {
176 |             let e = document.createElement('option');
177 |             e.innerHTML = o;
178 |             e.value = i;
179 |             this.element.appendChild(e);
180 |         });
181 |         
182 |         this.element.onchange= e=> Update();
183 |     }
184 |     
185 |     SetDefault() { this.Set(0); }
186 |     Set(value) { this.element.selectedIndex = value; }
187 |     Get() { return this.element.options[this.element.selectedIndex].value; }
188 | }
189 | 
190 | function BuildHTML()
191 | {
192 |     document.title = programTitle + ' - ' + programDescription;
193 |     programTitleDiv.innerHTML = programTitle + ' v' + programVersion;
194 |     canvas.title = 'Click to select seed';
195 | 
196 |     settings.seed = new Setting('Seed', GenerateRandomSeed(), 1e9);
197 |     settings.tileSize = new Setting('Tile Size', 16, 32, 8, 1);
198 |     settings.displayMode =     new SettingDropDown('Display Mode', 
199 |         ['Seeds','Mutations','Animations']);
200 |     settings.colorMode =       new SettingDropDown('Color Mode', 
201 |         ['Full Color','4 Colors','2 Colors','1 Color']);
202 |     settings.rows =            new Setting('Rows', 8, 128, 1);
203 |     settings.columns =         new Setting('Columns', 16, 128, 1);
204 |     
205 |     // advanced
206 |     settings.colorSeed =       new Setting('Color Seed', 0, 1e9, 0, 1, 1);
207 |     settings.mutateSeed =      new Setting('Mutate Seed', 0, 1e9, 0, 1, 1);
208 |     settings.sheetSeed =       new Setting('Sheet Seed', GenerateRandomSeed(), 1e9, 0, 1, 1);
209 |     
210 |     let e;
211 |     /*e = settingsContainer.appendChild(document.createElement('button'));
212 |     e.innerHTML = 'Reset';
213 |     e.title = 'Reset all parameters.';
214 |     e.onclick = e => 
215 |     { 
216 |         // reset defaults
217 |         for(const setting in settings)
218 |         {
219 |             const s = settings[setting];
220 |             s.SetDefault && s.SetDefault();
221 |         }
222 | 
223 |         settings.seed.Set(GenerateRandomSeed()); 
224 |         settings.sheetSeed.Set(GenerateRandomSeed()); 
225 |         Update(); 
226 |     };*/
227 |     
228 |     e = settingsContainer.appendChild(document.createElement('button'));
229 |     e.innerHTML = 'Randomize';
230 |     e.title = 'Randomize sprite sheet.';
231 |     e.onclick = e => 
232 |     { 
233 |         settings.sheetSeed.Set(GenerateRandomSeed());
234 |         if (settings.displayMode.Get()==0)
235 |             settings.seed.Set(GenerateRandomSeed()); 
236 |         Update(); 
237 |     };
238 |     
239 |     e = settingsContainer.appendChild(document.createElement('button'));
240 |     e.innerHTML = 'Save Sheet';
241 |     e.title = 'Save png of entire sheet.';
242 |     e.onclick = e => link.click( 
243 |             link.href = canvas.toDataURL('image/png'),
244 |             link.download = 'sprite_sheet');
245 |     
246 |     e = settingsContainer.appendChild(document.createElement('button'));
247 |     e.innerHTML = 'Save Sprite';
248 |     e.title = 'Save png of sprite.';
249 |     e.onclick = e => link.click( 
250 |             link.href = previewCanvas.toDataURL('image/png'),
251 |             link.download = 'sprite');
252 | 
253 |     e = settingsContainer.appendChild(document.createElement('button'));
254 |     e.innerHTML = 'Copy Sprite';
255 |     previewCanvas.title = e.title = 'Copy sprite to clipboard.';
256 |     previewCanvas.onclick = 
257 |     e.onclick = e =>
258 |     {
259 |         try {
260 |           previewCanvas.toBlob(blob => 
261 |             navigator.clipboard.write([new ClipboardItem({'image/png': blob})]));
262 |         } catch (e) {
263 |           alert('Could not copy!');
264 |         }
265 |     }
266 | }
267 | 
268 | canvas.onmousedown=e=>
269 | {
270 |     // get click tile
271 |     const rect = canvas.getBoundingClientRect();
272 |     const scaleX = canvas.width / rect.width;
273 |     const scaleY = canvas.height / rect.height;
274 |     const tileSize = settings.tileSize.Get();
275 |     const X = (e.x - rect.left)*scaleX/tileSize|0;
276 |     const Y = (e.y - rect.top)*scaleY/tileSize|0;
277 |     
278 |     // update settings
279 |     const columns = settings.columns.Get();
280 |     const parameters = savedParameters[X+Y*columns];
281 |     settings.seed.Set(parameters.seed,0);
282 |     settings.colorSeed.Set(parameters.colorSeed,0);
283 |     settings.mutateSeed.Set(parameters.mutateSeed,0);
284 |     Update();
285 | }
286 | 
287 | const programTitle = 'ZzSprite';
288 | const programDescription = 'Tiny Sprite Generator';
289 | const programVersion = '1.0';
290 | const savedParameters = [];
291 | const settings = {};
292 | const context = canvas.getContext('2d');
293 | BuildHTML();
294 | Update();
295 | 
296 | </script>
297 | <a href="https://github.com/KilledByAPixel/ZzSprite" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#5AF; color:#222; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>


--------------------------------------------------------------------------------