## Bugs Fixed
- The gallery gradually populates with pictures to avoid lag.
- Added manual re-connect buttons to recover if lagging breaks the connection between the main program and the background tasker program.
- Widened the tasker to make debug messages easier to read.

So I was playing the HD-2D remake of Dragon Quest 3 lately and I noticed this nicely drawn horse sprite.

## Bugs Fixed
- Keyboard search was not working right.
- Program would not quit if fav_pictures.json is missing.
- Was not reading any .URL file that was dragged in with a picture.

That said... what it currently does is oddly specific. It copies pictures and videos into a folder and creates thumbnails for them, then it adds their filenames to a JSON file, and then runs a CMD script when you close the program. What you put in there is up to you but only programmers know how to use that stuff... I should probably figure out a simple way to spit out an HTML file that other people can just directly use on their websites.

I decided to keep the Netscape throbber as a busy indicator because it was fun. The retro computer style became kind of a running theme.

To check for lag I added a Netscape throbber animation in the corner of both programs. Fun fact: This was the original purpose of browser animations. They helped you figure out if your Windows 98 computer had silently crashed and frozen up in the middle of loading a web page for 10 minutes on dial-up internet. If it was animating that meant the computer was still working.

[ffprobe.exe](https://ffmpeg.org/ffprobe.html)
: This program measures the width and height of pictures and videos. It can also read other information. It's part of the ffmpeg project.

[pngquant.exe](http://pngquant.org/)
: This program compresses PNG files into 256 colors with a full alpha channel. They're sometimes just as small as JPG files. Amazingly good for losslessly compressing pixel art. Created by [Greg Roelofs](http://www.gregroelofs.com/), [Jef Poskanzer](http://www.acme.com/jef/), [Kornel Lesiński](https://kornel.ski/about).

It's kind of ironic because this program relies on a bunch of DOS command-line programs that other people made to convert files and read metadata. But those are programs written by programmers for other programmers. Normal people need buttons to click on or these things will go to waste. So... what are these magical programs?

[convert.exe](https://legacy.imagemagick.org/script/download.php)
: This program converts pictures into other file formats. It comes with ImageMagick. Created by [Cristy, Dirk Lemstra, and Fred Weinhaus](https://github.com/sponsors/ImageMagick?o=esb).

[exiftool.exe](https://exiftool.org/)
: This program reads and writes metadata information embedded inside of files, such as the author name, website, keywords, and copyright info. Created by Phil Harvey.

[ffmpeg.exe](https://ffmpeg.org/)
: This program creates and converts video files. Created by a [whole bunch of people](https://ffmpeg.org/consulting.html).

&#x1F9EA **Experiment 5:** A settings editor. Nobody on Earth ever wants to edit a program's settings by hand using a text file. Nobody wants to waste time looking up what all my little words mean or how to get all the commas and quotation marks exactly right. And my pride won't let me settle for that. The original Macintosh proved that it is possible for all settings to be 100% graphical. Every program made after 1984 should always do this. There's no excuse. We figured it out. The problem is solved. I don't care how much work it takes because it's objectively the correct thing to do. It took me about 2 days to add a settings editor to my program at the very end, which isn't that long.

... aaaaaand then after building all these things, I discovered that Flash *already* has a built-in system for handling pop-up windows. Heck it even has an "Alert" window that does almost exactly the same thing as the one I created. So I adjusted my code to use Flash's official system and it was... still a little janky. But it works either way.

&#x1F9EA **Experiment 4:** I also needed pop-up dialog windows to ask questions such as whether to replace a picture. I also needed a way to display the settings editor on top of everything in a way that blocks people from clicking buttons underneath. You take it for granted but something has to *cause* that to happen. One way to do this in Flash is to overlap everything with a giant transparent MovieClip with an onPress() reaction that eats mouse clicks. But my gallery manually detects mouse-clicks directly from the Mouse system, so I also programmed it to react to windows and drop-down menus being opened and closed so that it can deactivate itself. The question pop-up needed to display a message, an icon, Yes and No buttons, a way to report which button was clicked, and have a close button for cancelling *(in case the user isn't sure what to choose)*

So I need to create temporary placeholder thumbnails. Ideally each with a progress bar showing that picture's progress. And also figure out how to send status updates to those thumbnails as tasks get completed. There's nothing more annoying than telling a program to do something and then seeing absolutely nothing happen. You need feedback or it feels like the program is broken. Besides, I enjoyed the puzzle of figuring out how to append promises to an existing array of promises and continue waiting for that entire list of asynchronous tasks to finish, so that I can drop additional pictures into the program while it's in the middle of processing other pictures. A good program doesn't force you to wait until it's done.

&#x1F9EA **Experiment 3:** Processing multiple files at the same time. I don't just mean dragging in multiple pictures at once. Each one takes awhile to generate the thumbnail file, check the compression to figure out the ideal file format, read EXIF metadata, cross-reference the artist folder to get the website URL for known artists, etc...

&#x1F9EA **Experiment 2:** A resizable window. A folder in Windows can be resized. This is convenient. Can a Flash program somehow adjust itself when you resize it? Yes it turns it can, but... it's weird. It doesn't expand to the right and down like you would expect. Instead Flash moves your animation so that it's *centered* inside the window when you resize it. This turns out to be very annoying, because now your animation or program won't fill the window. Instead you will have all this blank space in the upper left because Flash moved everything away from that corner. This can be fixed with a bit to math to manually figure out where the new center of the window is, how big the window is, and where to move your stuff to reach the top-left corner again. But it was annoying.

But then I remembered an obscure Flash feature called "Local Connection" which allows Flash animations to directly talk to each other. And if I make 2 connections, I can have two-way communication between the programs. So sending a task can later send back a result for that task. But this demands that the first program remain mostly lag-free or messages might be dropped. Which is actually fine, because that was already one of my main goals. The second hidden program can lag as much as it wants as long as it can reliably receive a to-do list from the main graphical program whenever it asks for it. Besides a "local connection" will tolerate some lag up to about a second. And I could just request the to-do list again if the connection lags out and emits an error.

&#x1F9EA **Experiment 1:** The old program could only add one file at a time, and it lagged like crazy until it finished chewing on it. Not really a problem but it makes the experience of using it feel super janky. The solution? 2 programs! One to provide a smooth stutter-free user experience with graphical menus, and a second hidden program that does all the real work. I had never attempted something like this before. My original plan for this was to tell the second program what to do by saving little to-do files into a folder. These would be tiny text files that simply had the command and relevant information. Glorified function-calls. The second program would check the folder periodically, load files and do tasks at its own pace. That way this "task queue" could exist and be reliably accessible no matter how busy or laggy any programs were, because they would not be directly relying on each other.

Now any rational person would stop me right there and tell me to only create an easy solution to the actual problem and nothing more. Well too late! I'm actually writing this a whole month later and I already completed this fully armed and operational battle-station!

Because I wasn't just making this to solve a problem. And it wasn't purely for the sake of pride either. I had ideas for new experiments I wanted to try. And that's what truly motivated me.

Making something that resembles Windows turns out to be way more ambitious than you might assume. A folder is more than just a rectangle with pictures in it. It might look boring as hell but Windows is way more polished than you think. You can right-click and do things to the pictures. You can change the sorting order. There's a menu at the top to show new people all of the options that are possible. I'm making this program for the sake of convenience so I am going to add *every* convenience I can possibly think of. I don't need them. I just want them.

The original program was just a linear sequence of steps. I would need to start over to make anything more ambitious. But what should this new program look like? Ideally an image gallery editor would look like, well, an image gallery. And then I realized the answer was already staring me in the face. Windows! An image gallery is really just a folder full of pictures anyway. So the most intuitive experience is to just drag and drop pictures into a "folder" and have it mostly act the same way you expect Windows to act, but with the extra thumbnail-generation and list-making stuff happening automatically in the background.

Making these minor changes manually from time to time is no big deal. They're quick and simple. But it would be *nice* if my convenient program could make that stuff convenient too. Besides I just couldn't escape the nagging guilt that any program that requires you to text files by hand is, by definition, an incomplete program and a crappy experience for anybody who isn't the original programmer. I knew could do better, and my pride wasn't going to leave me alone until I did.

Well the thing is... that was the *only* thing it did. Sure I could drag and drop a picture onto that program and it would automagically add pictures to the website... one... at... a... time. But I was often running into situations where I wanted to modify pictures that were already added. Sometimes the program would make wrong guesses about which file format I wanted the pictures to be. **(For the love of god NEVER compress pixel-art with JPEG!!)**

I built an easy and convenient editor for my website's "favorite pictures" gallery. Actually I over-engineered the hell out of this thing. I was just having way too much fun! It supports pictures, videos, and animated GIF's.

In hindsight I should have been keeping a running log while I was making this, because I ended up spending a full month on this thing. That wasn't the plan, but time flies when you're having fun!

But what *was* the plan anyway? After all I had already finished making another program earlier that did the same thing. Easily adding pictures to the gallery. Why did I need another one?

Hello head-patters! I feel really lucky to have found this mastodon instance. This is such a cozy little place with people making a lot of the same things I like to draw. I feel so at home here!

I don't just draw critters licking boobs. I also make Flash games... about critters licking boobs.
Yup! I make Boobs and Code... and I'm all out of bubblegum.

Which means I'll sometimes talk about that code. Hope you don't mind me nerding-out once in awhile. I like to teach people how I do these things. Feel free to ask be about stuff.

I'm constantly experimenting with different ways to create pixel art.
I am a wizard at website HTML, CSS, and JavaScript.
And I make entire games in Flash with my custom RPG Maker.

**My RPG Maker:** humbird0.com/makes/misc/rpgMaker/content.htm#/nsfw

Ah who are we kidding? This game was rigged from the start.
Sonic porn *always* wins!

These days it's kind of hard for people to figure out what matters next to the mountain of advertisements for JavaScript frameworks and "helper" tools.
*Spoiler alert:* ALL of them are optional. Most of them make things *more complicated.* And they do that on purpose so they can sell you their "solution". Most of them should be avoided. The truth is that HTML itself is actually simple. Just focus on [HTML and CSS](https://webguide.neocities.org/css/). Then experiment with other things later.

https://webguide.neocities.org/css/ https://webguide.neocities.org/css/

## Your Turn

So when I tell people that making websites is easy, that's because I remember using simple visual editors, making simple websites with tables, signing up for [cheap hosting](https://www.dreamhost.com/) (Which only costs about $3 a month), and [using FTP](https://www.hostmysite.com/support/upload/ftp/) to drag-and-drop files onto the internet. I watched HTML grow from something simple to something with a bunch of optional complexity, so I already know which parts are optional. But I forget that other people *don't*.

So I'm back to using templates. But this time I'm not relying on Dreamweaver and Adobe. I'm using a program called [HUGO](https://gohugo.io/about/introduction/), which is free, open-source, and multi-platform. I can just write my pages as simple Markdown text files, and HUGO converts them into web pages for me. But since I already know all about HTML and CSS I wrote my own templates for HUGO to make my pages exactly the way I want them. But you could just use a pre-existing [HUGO theme](https://themes.gohugo.io/) instead.

Eventually I realized that my JavaScript website had long since given up the efficiency of a single JSON file in exchange for preservability. It also took over 2 seconds to load even over a blazing fast internet connection. Meanwhile a normal "static" website could do all of these things better. And since each of my projects already had its own HTML page for their "readme" descriptions, it was almost a static website already, so why did I need the JavaScript? I also wanted to write my website using Markdown to make its content more [future-proof.](https://humbird0.com/makes/blog/storing_website_content/content.htm) So in 2023 I completely remade my website using a static site generator called [HUGO](https://gohugo.io/about/introduction/).

## Avoiding Modern Mistakes

As a side-effect I mostly ignored the React.js craze, CoffeeScript, SASS, and the avalanche of other JavaScript helper libraries and build tools that were released over the years. I simply didn't need them. That turned out to be a very good thing. Most "professional" websites struggle to even display a simple picture if JavaScript is turned off.

I didn't download a bunch of "helper" JavaScript libraries. I mostly just used [jQuery](https://jquery.com/) to tame Internet Explorer's quirks and [require.js](https://requirejs.org/) to organize stuff, and then wrote the rest myself. It all worked so well that I never felt any need to add "helper" code.

I briefly tried using [React.js](https://briefs.video/videos/what-is-react/) but it seemed like extreme overkill, so instead I wrote my own "model-view controller" from scratch. Originally as a single long JS file. Then I discovered [require.js](https://requirejs.org/). This thing is glorious! Modular programming baby! The concept itself even revolutionized the way I program my Flash games.

https://requirejs.org/ https://requirejs.org/

And I had already learned [JavaScript](https://developer.mozilla.org/en-US/docs/Learn/JavaScript)... completely by accident! It turned out that Flash's [ActionScript](https://en.wikipedia.org/wiki/ActionScript) language was basically just JavaScript in a trench coat. I had already created my custom [RPG Maker](https://humbird0.com/makes/misc/rpgMaker/content.htm) by this point, so I was pretty damn good at it.

But that has drawbacks too. My [Pokemon hentai game](https://humbird0.com/makes/games/pokemon/content.htm) was in full-swing and all the downloads were stressing my free domain, so I switched to a paid host for $10 bucks a month and looked for ways to make a more efficient website. I heard about this new thing called "Single-page JavaScript websites" so I thought I'd try it. It seemed to make sense. In theory if everything is rendered and [cached](https://en.wikipedia.org/wiki/Web_cache) on the visitor's computer, and I later add a new project then the only new thing people have to download is a single JSON file and a tiny thumbnail picture.

I also learned that storing downloads on external sites like Dropbox and 4shared was inherently unreliable. They all tend to go down eventually, or delete things when you're not looking. Everything on your website should just be ON your website, so it only goes away when you tell it to.

### Smartphones

Smartphones also threw a monkey-wrench into things. In the early 2000's you could safely assume everybody had a computer monitor with at least a 800x600 resolution that was at least a foot wide (and 10 pounds). But smartphones are 2 inch screens with completely random resolutions. Even if you can fit all the pixels, everything will look too tiny to read or tap on with our giant clumsy sausage fingers. So you end up needing to stack things when they don't fit side-by-side. Tables can't really do that.

### It's hard to change old websites.

It's easy to make a website this way. But it's hard to *change the way it looks* afterwards, because you would have to modify every... single... page! One by one. You could use Dreamweaver templates to rewrite all the pages for you, but then you would have to pay Adobe forever. You can avoid all of this by using a [CSS Style Sheet](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/Getting_started), which is a separate file that describes how all the pages should look. And because it's a separate file, you can just [change](https://csszengarden.com/207/) [that](https://csszengarden.com/208/) [one](https://csszengarden.com/218/) [file](https://csszengarden.com/204/) to completely transform how the rest of your website looks.

## Learning New Things

So if this is so easy, why is nobody using these anymore?
Because of 2 reasons:

1. It's hard to change old websites.
2. Smartphones.

That was how I built this website back in 2004. It doesn't even use CSS. Hell it barely even uses pictures. It's mostly just one giant background picture with areas you can click. Behind the scenes it's a table and a couple of invisible iFrames. When I click the buttons, the pages get loaded inside those areas.

Tables are very convenient, but also very rigid. Normally you would have to create a new layout for every single page. But you can re-use parts of a page using [˂IFRAME˃](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) tags which let you keep your navigation buttons on-screen, and only change part of the page when you click on links. Basically you can display a page inside of another page.
https://ilovecoding.org/lessons/embeds-video-audio-and-iframe-elements https://ilovecoding.org/lessons/embeds-video-audio-and-iframe-elements

So here's how the "good looking" websites were made back then. First you draw a mock-up of your page in Photoshop... yes really. Then export a picture of your design as a JPEG and set that as your *website's background* so you can trace over it in a graphical website editor! Then you use tables to position things down to the exact pixel. Photoshop even has tools for slicing up pictures for this exact purpose, just so you can put all the pieces inside a table to surround your content.

## The Old Approach

But fine. Big deal if you can make an ugly GeoCities page. Everything is just centered and stacked on top of each other. How do you make it, you know... good?

Tables! [˂TABLE˃, ˂TR˃, ˂TD˃](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)
Back then that was the only way to put things next to each other in any controlled way.
https://wvrocker.tripod.com/tables.html https://wvrocker.tripod.com/tables.html

... or you can just look up the main HTML tags. You only really need about 5 of them most of the time. [˂IMG˃](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img), [˂A HREF˃](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a), [˂DIV˃](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div), [˂SPAN˃](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span), [˂BR˃](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br)

https://wvrocker.tripod.com/codes.html
https://wvrocker.tripod.com/tables.html https://wvrocker.tripod.com/codes.html https://wvrocker.tripod.com/tables.html

If a [GeoCities](https://en.wikipedia.org/wiki/GeoCities) website did something cool, you could just right-click their page and "View Source" to see how they did it. Then just copy-and-paste it into your own page. That's not stealing. It's learning. Nobody owns HTML code. The web was designed like this on purpose.

And Microsoft made a great one called [Frontpage](https://archive.org/details/microsoft-office-frontpage-2003-english). All of these are visual editors. All drag-and-drop. All easy to use. And if you had any curiosity at all, you would naturally peek behind the curtain at the text that it's writing.

I built my first website in [Adobe Pagemill](https://archive.org/details/Adobe_PageMill_3_-_Windows95-Mac_Eng) in the year 2000. Look how easy this is!

I take it for granted that easy tools like these exist. But they're old, so why would anybody want to use ancient software from 25 years ago? ... because they **STILL WORK**.

New features were gradually added to HTML, but the original features did not go away. You can still build a website "the old way" and with very few exceptions it will still work perfectly. Granted these methods are now "the wrong way" because... tables or something. But more importantly these methods are easy. It's a good way to start.

## Amazing Tools From a Bygone Era

I believe this because I grew up in a time when web browsers like [Netscape Communicator](https://en.wikipedia.org/wiki/Netscape_Communicator) came with GRAPHICAL website editors that worked without you having to know any code. They worked like word processors. They were called [WYSIWYG editors](https://en.wikipedia.org/wiki/WYSIWYG) (What You See Is What You Get)

This anti-aliasing technique is not quite perfect. In the end I decided that I wanted the edges to look just a little bit softer.

Adding anti-aliasing inside of solid pixels can accidentally make the outline seem thicker in some places, making the line look inconsistent. Translucent pixels can also fix this.

If you want to use translucent pixels, this side-by-side blending can make it much easier to figure out where to place them. This gives the line a more consistent thickness and your picture can look good against any background without worrying about brighter backgrounds blending with medium-shade pixels and making the line look "broken"

This also makes it easy to transition between colors. Normally this is very tricky to figure out with anti-aliasing. But here you just soften the edges with a medium-dark shade of a color, and then replace some of those pixels with an equivalent shade of a different color.

It also makes it easy to slightly nudge a curve outward or inward, depending on where you put the anti-aliasing along the line.

Lately I have discovered a simple approach to anti-aliasing that I call "side-by-side". Where you use a single color to bridge the transition between the jaggies of a line.

Combining that mouth with the lusty gaze turned out to be a nice combination! It makes her look less submissive and more demanding. Which I find more reassuring.

This was another very strong possibility. A horny daze.

Did I accomplish all of that? Sort of. I had [written all these ideas](https://humbird0.com/makes/stories/training_tails/readme/ideas.txt) about a week before I actually got around to writing this story, which was a mistake because I can only really write *while* I'm coming up with ideas, not afterwards. It's a matter of mindset. If I have to stop to look up something I wrote down, then my mind and creativity have stopped. Instant writer's block.

To try to remedy this, I started writing another story about something completely different. Something self-indulgent that was easy for me to get excited about. That's right! More princesses and naughty bunnies! I would start writing a few paragraphs of that story to get my mind moving, then suddenly jump-ship and dive into this story to carry that momentum.

I had even figured out how Tails' personal agency deteriorates over time.

This story came from a combination of ideas. I wanted to explore situations with complicit rape, where other characters watch someone getting molested. And also explore the concept of accidental grooming on a more psychological level, where assumptions and temptations build on each other to teach some unintended lessons.

In this story, the women keep making assumptions that end up putting Tails into sexy situations. Then they mistake his involuntary erections as invitations to do even naughtier things with him, feeling like their temptations are justified. Meanwhile Tails is learning all kinds of strange confusing lessons. Ultimately giving up any resistance or personal agency because "Normal boys like sex." ... or so everyone keeps saying.

Uh... you guys are never gonna believe this, but... all that code worked perfectly on the first try! I typed over 200 lines and it all just... worked. You gotta undertsand, that almost NEVER happens to programmers! Maybe spending the last 20 years writing ActionScript in Flash was good practice? It's basically JavaScript. But then again, maybe planning a complex program using pseudo-code is actually a good idea?

Remember that big elaborate plan I posted? Well I turned all of that into comments! Now I just need to add code under each line to create my program.

Okay, so here's how my new search engine will work. The basic idea is to find the words you type using indexOf(). To make this possible, I create a long string for each project containing it's name and all of its keywords. To efficiently search for multiple words, each search term shrinks the list of projects and then the next search term searches within that smaller list. Of course I can also include -negative search terms, because I just can't stand using using search engines without that ability. It's surprising how often that feature is missing in other search engines.

If you're using Chrome, you'll need to add this website to the "allowed" list otherwise the browser will delete the settings when you close it. Just search for "cookies" in the settings.

One night I was playing Shantae the Pirate's Curse and became so delightfully jealous of their awesome sprite animation that I decided to take another crack at this pose. Maybe bring in more of this hip sway?

... Anyway I tried a new shortcut with this sprite. Instead of meticulously tracing all the shapes of the reference material with vectors, shrinking it down and using a pixel-counting technique to anti-alias them... I decided to just trace solid lines directly in [Aseprite](https://www.aseprite.org/) with its "pixel perfect" drawing feature and use a gameboy style single-color anti-aliasing approach. It looks almost as good and it's MUCH faster.

Couldn't I just... *rewrite the text?*
I mean, I have this keyboard right in front of me, the perfect tool for editing text. Changing it is probably trivial. Who cares about translation? If a hentai's dialog sucks (and it always does) then why not just change it yourself?

Then again, my website already recommends artists on a regular basis. I link to them whenever I mention pictures that inspire me. So this is kind of redundant. It doesn't even look all that different.

So... I just need to figure out which expressions I need for a given story, then find suitable reference for how a particular character expresses those things. Yes, it's a flawless plan... if my stories ever include anything besides sex.

Yes... WAY better! Professional actors and animators are masters of expression and interesting exaggerations. That's everything they do!

But where can I find good reference material for facial expressions? Photos would probably be best since people naturally differ from each other. Some search engines might have okay results, but those tend to look hammy and intentional. Maybe looking at movies would be better?

Now that I think about it, regardless of whether or not I can justify tracing to create a derivative work, that doesn't change the fact that my drawing skills are getting rusty. Which means that if I ever want to draw something that nobody else has ever drawn I would struggle to do it well. Relying on tracing prevents me from improving that skill, so I feel like it's holding me back.

I was able to get a similar effect with the large version using this contrast curve. Which means that if I want to make larger pixel-art I can just use this to instantly turn a quick sketch into pixel-art lines. It gets me 90% of the way there.

And later after playing with a contrast curve and a little posterizing I was able to turn the small version into these VERY sharp lines! This version barely has any anti-aliasing left but sometimes that's the style you want. It's a matter of taste.

And here's the game's original sprite again for comparison. Obviously it looks better since it was probably hand-made. But I think my experiment turned out pretty decently.

After I was done tracing all the frames, I ended up with this, which might look pretty janky, until...

... If I trace **outside** of the outlines then it just barely manages to look right. Essentially outlining the outlines. This makes sense if you think about it. Smaller sizes require larger and simpler details. So the gaps between lines need to be wider.

*(Note to self: Try doing this using Paint Tool Sai's vector lines set to a large thickness to force myself to space apart the lines)*

It turns out this idea requires kind of a peculiar technique with the pen. If I merely trace over the outlines then the resized version turns into a messy blob, however...

Here's a crazy idea. What if I took one of the hi-definition animations from Shantae Half-Genie Hero and traced over it to create a sprite the same size as the one in Shantae Pirate's Curse? I'll just trace every other frame of the hi-def sheet to get approximately the same number of animation frames.

One of those ideas is to try re-creating a sprite from the Shantae games. Smooth animation AND anti-aliasing? Hell yeah!! I wanna know how they pulled that off.

I just realized that one of the big mistakes I made was posterizing the colors down into a limited palette before scaling down. That should be done afterwards. I also reduced how dark the skin shading is. The result looks much more passable. But it still lacks the clarity of the hand drawn sprite.

Now let's "turn this into a sprite" by crunching the palette down. What I did was isolate each color area, posterize the shading of each area down to a limited number of shades, and then apply a gradient map to choose new colors. That results in this set of palettes for the hair, hairband, skin, nipples, eye-iris, and eye-whites.

I always wondered how SquareEnix made this amazing background art in their Nintendo DS games. Maybe they just painted this stuff in Phothshop and scaled it down a little?

Apparently you can change the default scaling used in Photoshop, but only as a global setting. So I wonder if I could use this to automatically anti-alias my sprites?

https://graphicdesign.stackexchange.com/questions/5376/is-it-possible-to-scale-using-nearest-neighbour-with-the-transform-tool https://graphicdesign.stackexchange.com/questions/5376/is-it-possible-to-scale-using-nearest-neighbour-with-the-transform-tool

Waaaaaadaminute... it looks like anti-aliasing because it **IS** anti-aliasing! It's basically super-sampling. Rendering at a large size and then scaling down with smoothing.

https://gamedev.stackexchange.com/questions/60531/is-it-more-efficient-to-render-full-size-with-aa-or-scaled-down-with-no-aa https://gamedev.stackexchange.com/questions/60531/is-it-more-efficient-to-render-full-size-with-aa-or-scaled-down-with-no-aa

If you're wondering about the dialogue, it's a parody of something Renamon actually says in the show.

Now here's a tricky one. Sometimes characters in Phoenix Wright don't talk. Instead showing an animated reaction. So either I should add a setting to turn off talking, or maybe I should just place an animation and then place a textbox underneath it as 2 separate steps? It seems like it could be useful to be able to display animations on their own anyway. But doing it this way would require placing 2 or 3 commands while I'm editing a game in my RPG Maker instead of just the one for the textbox. Less convenient. But my gut tells me I should try to keep the programming itself as simple and flexible as possible.

Now let's explore another goal. Phoenix Wright animations. Longer animations just need different animation settings. And then we'll just set the position to be waaaay up above the textbox. Easy.

If the picture overlaps the text, I want to indent the text to make room for the picture, so I'll add an "indentText" setting which is just the number of pixels the textbox needs to shrink to the right. To know whether the picture is overlapping the text we need its position and its size. So whenever either of those things change we re-check things and change indentText if necessary. This overlapping behavior is a module of code separate from everything else that just responds to the "change_facePosition" and "faceLoaded" events and changes the "indentText" setting. The textField reacts to that setting being changed and doesn't need to know what caused the change. That's the key to modular programming. Blocks of code don't know about each other's existance and therefore don't rely on each other.

Next I need to be able to change the position of this animation, so I'll add a setting for that. An object with X and Y pixel coordinates on the screen that represent the top-left corner of the animated picture. Different sized pictures can just expand to the right and downward from this corner. So I can put any sized picture anywhere I want on the screen.

Okay so let's start with the basic goal. A Shining Force talkie face. I'll just feel-out the needs as I go. First I'll delete the textbox's old non-animated face and the setting that goes with it. Now we need an animated picture. I'll just use my old animated sprite system for this. It uses a set of variables to control it so I'll just throw them all into an object and name that setting "animatedFace"

I could easily re-create Shining Force talking portraits, but why stop there? I could also make these animations overlap a full illustration and make different characters in a scene talk. Kind of like Knights of Xentar. Or I could go full visual novel and have animated characters above the textbox like the Phoenix Wright games.

Renamon Appreciation Month kind of derailed me. But to be honest I also got kind of intimidated by all the possibilities of this new animated face system I want to make. The possibilities of what it could be. In other words... Analysis paralysis.

.

.

Here's how it works.

The PixeLover version is bugging me. The shading looks better but it has all these mis-placed pixels at the edges and random spots of dithering in the shadows. If only there was a way to preview the dithering in real-time *while* I'm shading the picture so I can avoid all this automated guess-work.

Decades later to this very day I am still studying those walk-cycles. Marle taught me how feet move so I could make Princess Sally walk. Ayla demonstrated the way hands recede three dimensionally so I could make Bunnie Rabbot look strong and make Little Red Riding Hood prance around. And I am an absolute glutton for anti-aliasing. You’ll rarely see any picture from me where I didn’t spend hours pouring over every edge of every pixel to get all the shapes juuuuust right. And somehow I love every minute of it. You can thank Super Metroid and Chrono Trigger for making me fall in love with this process. It doesn’t feel tedious to me because I’m too busy being impressed by the art I’m making while pushing the detail of every pixel to its absolute limit. Even though I’ve been experimenting with larger pixel-art recently, sprites still feel like a bigger accomplishment to me, because they are more densely detailed. Achieving more with less.

The anti-aliasing is superb, packing so much subtle detail into the smallest possible space. Every pose and animation shows off the personalities of the main characters. And I bet you’ll never guess which animation has the most frames… Walking! Not the fancy attacks or the mind-blowing story moments. The goddamn walk-cycles! Why? Because this is an RPG and that’s what the player is going to be seeing for 95% of the entire game. That is a stroke of genius! But it goes even deeper. The characters don’t even walk the same way. They’re all different. You can actually see their unique personalities. Robo is a wood-stove on feet. Marle walks like a delicate princess. Ayla is brimming with strength and swings her fists. And Magus moves with a menacing strut because he is a magical badass… when he’s not freakin’ flying!

I know I am biased. I know that games with better graphics have come out in future decades. More great stories. More genres. More exploration. Goddamn open-world games! And of course that whole… 3D thing. So in my heart, Chrono Trigger mostly represents a pinnacle of 16-bit games. Over the past 30 years I have replayed this game so many times that it’s honestly hard to really experience it anymore. My eyes glaze over because I barely have to think about the game. I’m on auto-pilot. So instead I study it. Every pixel. Every story beat. Every clever design choice. The game is just 16-bit perfection to me. Yes I am absolutely biased, and I don’t even care.

There is a lot to love, and barely any flaws I can bring myself to notice. But if I had to pick my absolute favorite thing about Chrono Trigger it’s the sprite art. I don’t know of any other RPG on the Super Nintendo that uses these proportions for characters. It’s almost 3-heads tall...

But even at the very beginning of the game I was amazed by the very first battle in the forest, because it took place on the *same screen*, and I had never seen an RPG do that before! This felt like the next stage of evolution for the entire genre! It was such an obvious improvement that I was certain that every RPG that came out in the future would handle battles this way, and never look back. Of course I was naive. I was 12 years old. But the point is that Chrono Trigger felt like an improvement out-doing every game I had ever experienced before that day in every single possible way.

I think I even made up some stupid lyrics to sing along with the battle music just for the Delta Force attack, which was the first triple-technique you learn in the game. The game had a way of one-upping itself with every new move you learned, escalating into cooler and cooler effects. And the first triple-attack took things to another level. At least it felt that way. It’s hard to describe how a few flickering triangles and flashing sprites could be so deeply moving for a kid in 1995, but part of it was because it looked 3D. And in 1995, 3D graphics were the most amazing thing you could possibly witness on a TV screen. It’s a 2D console. You are *not* expecting this. So when you see the first triple-attack in the game and it suddenly starts going 3D on you, your jaw hits the floor! … and it’ll be days before you pick it up again.

The day I rented Chrono Trigger was life-changing. Decades later I can still vividly remember lying on the carpet of my grandmother’s living room with my Super Nintendo hooked up to my little white 12 inch TV set on the floor in front of me. The battle music was the coolest song I had ever heard. I was completely enthralled with the story. And all those glorious special attacks… oh my god I think I spent hours searching for battles just so I could keep replaying those attack animations over and over.

And when that style faded in the shadow of the golden era of robot space-operas and gory erotic horror, a few artists like [Rumiko Takahashi](https://en.wikipedia.org/wiki/Rumiko_Takahashi) and Akira Toriyama continued carrying the torch of charming wide-eyed personalities forward many decades into the future long after most of the world forgot about the cute anime of ancient times. And so in a way, the old styles became their own. But there is still no mistaking Toriyama’s art. It has a personal touch all his own. An epic blend of personality and cool.

I think my favorite thing about Toriyama is his utterly unique art style. You will never mistake his art for any other artist. I’m proud to say that I’m jealous of him. It inspires me to explore and develop a unique art style of my own. To find an expression unlike anybody else. But one has to wonder, where did Akira Toryama’s art style come from? What inspired *him??* To answer this I think we need to look at the things he watched and read while growing up. In the earliest days of the 1960’s and 70’s, anime and manga were full of cute characters overflowing with fun personalities.

Long before Chrono Trigger came out, JRPG’s had to be invented first. There was Dungeons & Dragons. But turning exploration, adventure, and storytelling into a video game genre was largely defined by Dragon Quest. It didn’t technically invent RPG’s but it defined so much about the genre that it might as well have. And like so many foundational things, Akira Toriyama was a part of it.

It’s hard to describe just how massively badass anime was when it arrived here. It was an apocalyptic moment in American cartoons, *utterly humiliating* everything that came before. Even Disney felt like baby-stuff. Cute Widdle Bambi wasn’t going to go super-saijyan and blast someone’s head off. There was no going back! And like so many foundational things, Akira Toriyama was a part of it.

But before I write twelve chapters gushing about how I adore every single pixel in Chrono Trigger, let me talk about Akira Toriyama. In the USA, Dragon Ball Z is almost like the “Star Wars” of the anime world. It feels like it invented the shonen action genre overnight, regardless of whether that’s technically true. Because one day we were a bunch of kids watching cheap garbage like The Smurfs, and the next day we saw motherfuckin’ Dragon Ball Z!

I’m going to write about two things here. This is more opinion than fact. I write what the heart remembers, because my first experience with Chrono Trigger was a massively soul-shaping moment for me. And like so many things, Akira Toriyama played a part in that.

Are you tired of staring at sound waves yet? Me too. Let's stare at programming code instead.

What about in-game? I like the 3rd one. It takes more steps to create but the slight fuzz makes it feel less artificial.

And what does it sound like if I add the soft fade-in fade-out to my warbling voice? Well, let's just compare them all. Warble with fade actually sounds half-decent. Definitely better than a pure square wave.

Here's another idea. What if I just make my simple "beep" softly fade in and out? That would also make it less harsh and Beep-y.

Okay, that's enough gruff guys growling grimly. Let's try a higher pitched "teen" voice. Same approach but maybe I'll alter the warble to fade-out slower and fade-in quick. Why? Because the whole point of the warble is to create the impression of text rapidly being typed out without completely re-starting the sound from silence. A kind of "soft" typewriter sound. And a quick fade-in emphasizes the sound "starting" or "typing". It repesents the start of a new letter. Of course it doesn't have to exactly match up. If you hear rapid sounds and see rapid letters appearing you just kind of assume the sounds go with the letters.

So let's see. Add a fade-out-fade-in envelope to a square wave to give it texture. Then repeat that wave 4 times, and add another envelope to make it warble. I feel like I'm getting closer.

Re-creating the exact shape of the game's sound was a pain in the ass. I wonder if there's an easier way I can approximate it. Just wiggle the waves a bit to add some kind of texture. It's not like I want all my girls to sound like Gort. I just don't want them to beep.

In an effort to reverse-engineer Gort's voice in Shining Force I painstakingly spent about an hour modifying a square wave to resemble the slopes of the recording. My re-creation doesn't sound like a pure square wave anymore.

... but it *still* has no warble. I'm baffled about where the effect comes from in the game's version. But I suppose I could just manually add a warble to my recreation using a volume envelope.

But let's ignore the breakthrough for a bit because I want to try something else first. Creating a warble directly with volume envelopes. Basically just make the volume fade in and out rapidly. In theory that should work too.

It's still not quite the same though. The tone used in the game doesn't sound like a pure square wave. It's also not clear why the voice in Shining Force has a warble since all of its waves are the same length.

Aaahh, I can't help it. I'm gonna take another crack at figuring out Shining Force's character voices. Okay let's see... let's match Gort's deep voice and, wait what? I *already* have a warble in the sound just from the end of it being cut off?? That's... an interesting breakthrough!

Okay now let's tackle coding. I'll start off with the simplest possible version of this. Just hard code a picture to use and react to textbox events so we can see how this feels.

I have to admit this already feels much more lively than before.
I had this big elaborate plan for programming separate modular animations that could overlap any on-screen picture and react to textboxes based on which character is talking, but... I have to admit it's probably overkill. This seems to be enough.

I should probably refine this into something easy to use and customize before I jump into all that other stuff.

My RPG Maker also already had the option to use "typing" sounds. I just didn't tend to bother using them. I wonder if I should speed up how frequently it plays or make it quieter? The only way to know is to pair it with an animated face to see if it feels right.

But even though I have a repeating loop, it doesn't look like I can just change the pitch to create a female "voice"

I think the key to its charm is the exaggerated art style. It might not even matter what the art style is. This game happens to use a light-hearted old anime look.

No, it looks like the designs were all created by one person. I guess they were just experimenting and figuring things out as they went.

But the game isn't consistent with the size of the faces or even the art style. Some pictures seem to have more anti-aliasing than others as well. I wonder if different artists made different characters?

For one thing. They're rectangular and taller than the textbox. I wonder why that is?

My RPG Maker could already show still faces inside the textbox, but somehow these aren't as lively or interesting. It might be as simple as making them animate, but I suspect there's more to it.

[I’ve made this mistake before](https://humbird0.com/makes/experiments/sprite_standSway/content.htm#para-16). You’d think I would have learned this lesson by now. What can I say? When I’m animating I’m eager to see the boobs dance!

You can compare them here.

So I went back and re-drew them. This time I started with a pair of simplified shapes that moved with the exact motion of her body… *then* I shifted them around just a bit to give them their own momentum. This works because they’re shifting relative to where the eye *expects them to be* on the body, so the eye is able to follow them easier. One frame seems to lead to the next.

But that’s because I got ahead of myself. I started moving them around before first figuring out how they attached to her body.

This doesn't quite look right...

Source code:
https://humbird0.com/js/imageZoom.js https://humbird0.com/js/imageZoom.js

Now you can browse every full-size picture on my website with just the arrow keys. And drag-and-drop still works. Nice and fast!

When I display a picture, get the index and store it.
Then when you press an arrow key, read the current index, add 1, use the list of links we created at the start to find the next image link, and make my code display it by triggering a custom event on it.

First I need to make a list of all the picture links on the current page. Then I'll store the index of each one so that link knows where it is in the list.

But size can still be a factor. If I want to show the facial expression then I usually want to avoid making it ridiculously small… unless it’s a tiny game sprite. Those have different priorities. So for large pixel art, what if I try quickly drawing my character’s expression in pure black and white, and then scale my reference material down to fit that face? That would theoretically represent the minimum viable size for that pixel art.

For small game sprites it’s rarely possible to show any expression at all aside from the eyes. Sometimes I can show the mouth. But at that size, a sprite’s priority is just showing the pose itself.

I know it wastes a palette color, but I think I need to darken the bottom of her eyes to help contrast against her smile. There's no room to separate them but it just wouldn't be Bunnie without her flirty smile.

NOW she has a personality!

This looks pretty good, but her face still has that neutral expression.

And then the outlines. I use a bright background help be see any missing pixels that might break up the outline. It also discourages me from the temptation to add brighter pixels in the outline to expand or curve the shapes. Sometimes you can get away with that if you don't go too bright. But you still want the outline to at least appear to be solid against bright backgrounds. Providing contrast is an outline's entire purpose.

Once I felt fairly confident about the positions of everything I started adding anti-aliasing.

I pretty much just copied the position of Ayla's arms in each frame, but I noticed some interesting subtleties while doing this. Such as the way the arm shading gets darker as it recedes back. And the way her fist swings outward away from her body, then forward (brighter shading), before overlapping in front of her.

It's hard to see on her sprite because her fists get in the way, but if you think about it each time she takes a step, one side of her hips will be higher than the other. So when she steps forward, the front hip will be lower and the back hip will be higher.

Ayla's walk animation has an interesting quirk. The center line of her legs shifts left and right. I think it has something to do with the way her legs overlap and the twist of her hips.

This way I can focus entirely on where the hands and feet go in each frame and figure out the whole "limb" thing later.

But first... **simplify moar!!**

For the walk-cycle I think I'll copy my own homework. I made this nude edit of Ayla some time ago and figured out a good movement for her breasts. No need to re-invent the wheel. Besides Chrono Trigger characters subtly show their personality in the way they walk. Ayla swings her fists. And since Bunnie Rabbot is a strong confident character, it makes sense to use a similar walk cycle for her.

... so now it's time to *erase it all!* I usually simplify a sprite before I animate it. But figuring out the anti-aliasing gives me a good idea of what I want to result to look like.

I've finished adding the anti-aliasing...

Behold! The magic of short-stack proportions! She's only 2 pixels shorter and the breasts are only 1 pixel lower from her head, but they end up looking bigger on her body.

Bunnie has scruffier cheek fur. I think it gives her sprite a bit more personality.

If I make the background as dark as the outline, I can skip adding outlines until the end. This way I can just focus on adding and adjusting shapes.

I'll start by modifying my Sally sprite. That way I can guarantee the proportions and palettes will work well together.

Let's make Bunnie shorter than Sally. I think it's kind of canonical, but more importantly this will lean toward "short-stack" proportions that will help make her breasts look bigger.

I gotta make a sprite of Bunnie Rabbot. Her sweater-puppies are going to be so much fun to animate.

Isn't it funny how simply knowing how to use a web browser or a search engine almost feels like a super-power these days?

I knew this was going to be an interesting experiment, so I recorded a time-lapse video... where I spend way too long getting the magnifier to behave. Something I didn't end up needing.

Well they can't *all* be good. You gotta expect that sometimes.

That head is also looking too big. I can partly blame Akira Toriyama's official artwork for this. But I think I'm also running into the limits of Chrono Trigger's 3-head-tall body proportions.

... and also 16 times more likely to make anatomical mistakes. That hand is looking pretty funky. I should have looked at some photo reference for that.

An interesting experiment, but some mistakes were made. I had intended to just double the size of the original sprite, but I temporarily used a larger size while drawing the sketch and completely forgot about it, resulting in 4x the original size. In other words, 16 times the amount of detail. Each pixel was replaced with 16 pixels.

From here it's just a normal sprite.

Edges that will be much easier to outline in Aseprite.

But while messing around with the "posturize" effect, I had a happy accident. I cranked the curve contrast way too high and ended up with a pure black and white image... with nice clean edges!

So let's add those details. First I'll figure out where the major anatomy of her body is located. And then I'll sketch a new pose on top of it.

... But then I stopped myself. If I have more space to work with, then I need to more detail to fill it. The original sprite isn't going to have that detail, because it has been simplified to fit its smaller size. Basically... don't do this.

At first, I started with my usual approach of outlining the shapes...

I decided to try an experiment. Can I manually enlarge a small sprite?

Of course, social media sites almost always delete all the metadata in a picture, so don't expect to these vector paths to survive casual uploads. This is more of a fun thing to include on your website, where you can control exactly what happens to your files.

I'm not saying it's easy to add a visual interface for every feature in a program, but it's always worth it. Because the alternative is awful.

I threw this together in one evening.

You just drag and drop two pictures into my program and it runs the EXIFtool command *for you.* Sure this only does one thing. But it makes that one thing very easy.

EXIFtool is an awesome program, but... do you seriously expect a human being to type all that?? Why would anybody still need to *type in* commands in the year 2024? The mouse has already been invented. Look, I can *see* the files. They're *right there!*

In my opinion, no program is ever complete until it has a graphical interface. No exceptions. Without a menu it's impossible for normal human beings to use it. You would need a programmer to figure it out for you.

Wait a minute... *I'm a programmer!*

I know this isn't a big deal in a world with internet connections fast enough to stream video, but I just hate bloated files. If only there was a way to save small files *and* store a vector path. Well it turns out that [EXIFtool](https://exiftool.org/) can copy path data. So I'll just save a small JPG file and then add a path to it. An oddly specific solution to an absurdly minor problem... You're welcome!

`exiftool -config photoshop_paths.config -tagsfromfile SOURCE_FILE -allpaths# -originpathinfo DESTINATION_FILE`

## ... Why!?

It’s a fun trick. It allows you to add a "mask" to an image that normally cannot have one. But it has a problem. “Save As” doesn’t compress JPG files as well as “Save For Web.” Apparently after 20 years Adobe still can’t figure out how to fix this.

## Do what now??

Did you know that Photoshop can save a JPEG image with a vector path!? It’s a very old feature from 2004. The trick is to use “Save As” to create the JPG file.

(partial) Time-lapse #video. 1 second = 1 minute.

Here's a time-lapse #video. I tried using the same technique as last time, but I forgot to use gradient maps, so the colors are less carefully controlled. On the plus side, [Pixelover](https://pixelover.io/) handled the translucent wings very nicely.

I decided to finally fix this old picture. That foot had been bugging me for awhile.

And the cherry on top is that this *also* solves the "broken outline" problem I was struggling with when I was manually anti-aliasing my outlines. This looks good against *any* background! The only trade-off is slightly reduced contrast. And this technique is faster too!

This results in a surprisingly impressive improvement.

Step 4. Mask it

Now we just apply the original outline as a mask, so that these darkened colors replace the outline.

Step 3. Combine and Darken

So the next step is to combine the shading with the colors using the "color" blending mode, and then just make the entire thing darker, by adding 50% black or something.

Step 2. Expand the shading.

Then you do the same thing with the shading. Blur it to expand it outward. The reason why you use the shading is because we want the outline to be similar in brightness to the pixels inside the sprite, only darker.

Step 1. Expand the colors.

You can "expand" the colors into the outline by taking the flat "fill" colors, blurring them, and then repeatedly layering them until the transparent parts turn solid.

The idea is to create an outline using the same colors as the sprite, only darker.

Now THAT is a sprite! 16 colors baby!

And finally I'll just finish it off by adjusting some of the shading by hand.

Let's just export all 3 of these and then pick and choose which dithering to use by-hand. The trick with dithering is that you don't want to over-do it. Only enough to create the illusion that there are more colors without making everything look grainy.

Hmm... different parts of the picture look better with different dither settings.

Let's see if we can get some better dithering. This is one thing that [PixeLover](https://deakcor.itch.io/pixelover) is half-decent at. I can adjust how "wide" the dithering bands are and even bias them toward brighter or darker areas.

This looks much more "painterly"

Let's soften them up.

... although it doesn't look half bad at 16 colors either. But... those harsh black outlines are kind of bugging me.

In theory this might be "done" if we wanted a sprite with unlimited colors.

Now for the colors. First I'll boost the shading to include the darkest blacks and brightest whites, so I can use gradient ramps to give me complete control over all the colors used for the shading. For example the dark brown has a bit more red in the shadows and a bit more yellow in the highlights.

Just select an area, hide the dotted line, and go-ham with the brush!

So for this experiment, I'm going to do full quality shading in Photoshop.

A sketch doesn't have to be pretty. It's just an approximate plan for where things go.

... her tail!

Okay, that takes care of the basic details. Whoops, I forgot something...

... and make some adjustments.

Okay let's throw some outlines on this...

Now Sally's ready for her Atari 2600 debut!

It doesn't have to be super exact. I'll adjust the shapes later.

I use "levels" to sharpen the silhouette so I can more easily trace the shapes without too much blur.

Okay, maybe I went a little *too small*. We're going to need a bigger size so we can properly see her face.

... and make a sprite out of it. I'm just gonna free-hand this one. No need for super-exact tracing.

Now let's try shrinking it to half size...

So I doodled out a silhouette by hand.

First let's figure out what to draw. I'm thinking something along the lines of... Sally crossing her arms looking serious while her boobs poke out above them.

Ah what the hell, let's try it!

... I suspect that's how they did it because there is a less-finished portrait that accidentally made it into the game. You can see evidence of a subtle unsharp mask and raw broken edges.

But the whole thing had me thinking about the process of creating this game's art. Those background details are pretty sharp, so maybe they painted the art at something close to the native resolution? After all, the less resizing you have to do, the less blurry the details will be.

So lately I've been playing Final Fantasy Tactics Advance 2 for the Nintendo DS and... holy crap this game is gorgeous! But it had me thinking. This isn't pure pixel art. Those backgrounds look more like paintings. And the character portraits look like resized art that was adjusted by hand afterwards to make the outlines and details clearer.

The final picture looks nice enough but I didn't have much room to show Ridinghood's facial expression or bodily details. Maybe I should have started with her sprite after all. The wolves took a lot of work so at this point I really don't want to resize the shapes and re-draw everything.

It's very tempting to jump straight to drawing Ridinghood's sprite, but if I do that I might not be motivated to draw the wolves afterwards, so I'll make myself start with them first.

I'll be honest I kind of surprised myself. I didn't expect the wolf to come out *this* good!

Not too many people are drawing wolves. At least not very well. So I guess I'll use photo reference. But all these fuzzy wolves are going make the vector tracing very tricky. I kind of have to guess where the shapes end.

But... the only forest picture I can find with enough ground area and something resembling the correct angle is way too sunny and cheerful, so let's just grab a brush and re-do the shading with a very heavy vignette to set the proper mood. It's amazing what a little shading can do.

Now she can't really be surrounded in the woods... without the woods. But they're not exactly the main attraction, so I'm just gonna half-ass the background by finding a photo and shoving it through [PixelLover](https://deakcor.itch.io/pixelover). Sure it won't look as good as proper pixel-art but I don't think anybody's going to mind.

The idea is pretty straightforward. Little Red Ridinghood surrounded by wolves in the forest. But it's still a fun idea. However I've never made a picture with 3 characters. I did one with [2 characters](https://aethy.com/@humbird0/110880151916882344) not too long ago and it took a massive amount of effort. But this idea is way too good to pass up so I guess I'll just have to roll up my sleeves and dive in!

... that said, my cross-poster doesn't update the hundreds of posts I have *already* made, so I'll just have to, uh... spam your notifications with a hundred updates while I go back and edit ALL of them to add a bunch of Japanese hashtags.

I got rate-limited twice while doing that. You're welcome Aethy.

... and then look at the most common keyword combinations to figure out which ones I *actually* need.