8bitworskhop's Dithertron - mode 2 screen generation on your browser

[scruss]

I was just on a session at KansasFest (the Apple II event, usually in Kansas City) that introduced me to the very neat 8bitworkshop online IDE. While the IDE doesn't (yet!) support the Beeb, its Dithertron graphics tool does. It only generates PNG images in Mode 2 format right now, but is still potentially useful:

moggy with squozed aspect ratio because modern

morris_minor_convertible-bbcmicro.mode2.png (13.63 KiB) Viewed 5467 times

(Yes, it produces pixel-for-pixel utput, so the aspect ratio won't look right.)

The original image is here: https://mltshp.com/p/1J74Z

[dominicbeesley]

Nice idea for testing out stuff. Kind of jsfiddle for the c64. Do you know what c compiler it uses?

[mlouka]

The perceptual colouring option combined with Stucki dithering algorithm is really impressive. Gives much better results that I would have though was possible with Mode 2 and the standard colour pallette. Nice to be able to quickly see the differences between so many dithering algorithms.

[hexwab]

So I've been hacking on this a bit.

Thus far:

* Support for beeb screen modes 0,1,2,4,5 and AUG's "8" including export to their native framebuffer formats.
* Custom output sizes for all your overscan/underscan/whatever needs.
* Custom palettes with reordering (a bit wonky still[1]).
* Better aspect ratio support, including saving the aspect in exported PNGs[2]. Beeb PAR is 0.96, the same compromise b2 chose.
* Some UI improvements.

Try it at https://sphere.chronosempire.org.uk/~HEx/dithertron/ (may go away and/or stop working at any time)

Of course I had to make a picture disc. Pictures are all MODE 1 with no fancy palette tricks in the frankly insane resolution of 416×288 (borders are bad, mmkay?), for a framebuffer size of 29952 bytes. Since loading 29K files from disc is a real headache they are all compressed with exo's self-extracting thingy.

Not tested on real hardware.

Source:
https://github.com/hexwab/dithertron
https://github.com/hexwab/beebpics

Tom.

[1] To get a palette of your choosing: (1) turn auto palette on; (2) find an image or section thereof such that auto-palette picks the colours you want; (3) turn auto palette off; (4) drag the swatches until they're in the right order.

[2] Support for the pHYs chunk is a crapshoot but, e.g., gimp can display such images correctly by turning off "dot-for-dot" mode.

[TobyLobster]

These look great. It works on my real BBC B:

[sa_scott]

Try it at https://sphere.chronosempire.org.uk/~HEx/dithertron/ (may go away and/or stop working at any time)

Sorry to pick up on an old thread, but thank you so much for creating this revised edition of Dithertron. What a fantastic piece of software.

I've been wanting to do a title screen for my game, but wasn't too sure on how to do it, until I found this thread.

Having found two images on Google and cobbling them together in Photoshop, I put the title screen through Dithertron, and this was the end result:

I love it, absolutely love it. Only took me a few hours. I was very worried I'd have to paint the screen pixel by pixel!

[hexwab]

Sorry to pick up on an old thread

I have never understood why this is frowned upon, if indeed it is frowned upon.

but thank you so much for creating this revised edition of Ditherton. What a fantastic piece of software.

Glad you're finding it useful! I should try getting it merged upstream one of these days. (FWIW you're missing an r :)

Tom.

[sa_scott]

Sorry to pick up on an old thread

I have never understood why this is frowned upon, if indeed it is frowned upon.

but thank you so much for creating this revised edition of Ditherton. What a fantastic piece of software.

Glad you're finding it useful! I should try getting it merged upstream one of these days. (FWIW you're missing an r

Tom.

Thanks for replying, and noting my typo. I've edited the post. Too much of a dither!

[gtoal]

This is cool! But I tried it on a couple of images and none of them came out too well.

I have some code left over from an old project that approaches the issue in a different way. (It's in https://gtoal.com/cld/C/ )

Here's an image I wanted to reduce:
This was the best version using dithering to any of the BBC Micro modes: (I stretched it to fix the aspect ratio)
Here's the output from the edge-detection code (although using the full sized input image - I forgot to reduce it first):

So... perhaps some hybrid of dithering and edge-enhancement (not necessarily the way I mixed them here) might work better for some images..?

[tricky]

How do you choose your palette, it has an auto palette button, but I can't work out how to choose one, only swap the order?

There's a README!

TODO
Palette editing
Search for optimal crop window
Check pixel-exact source images
Interlaced modes (VCS color)
Refresh retains mode settings
Custom width and height (crop rect for non-full-screen)
Faster closest color lookup

Great program, very interactive. There was already a great program for image conversion but the sliders make it much easier to tweak
I've raised an issue: Save state of online viewer as a URL

PS I didn't realise this wasn't the code on github!

[tricky]

I'm just looking through the images that I created and saved as .PNG earlier which were custom 224x244 from a source that was 224x224 and it hasn't saved what it was displaying. It appears to have stretched the 224x224 to 320x256 and then saved the middle 224x224 cropping the image, I'll try with a screen capture

Reloading the same image after it has been changed doesn't refresh the loaded image.

As a temporary hack for the palette, I have an image with multiple palette combinations in horizontal blocks and then I select just the area with the colours I want before turning off the auto palette.

Screen capture is no good either, my mode 2 112x224 (224x224 MODE 1) screen captures to 432x450, so what you see isn't a whole multiple of what you get

These days, I only program in 6502, C and C++ so I'll have to leave it here for now, but it does show real promise.
The install command doesn't work, probably because I don't have any packages of whatever type are needed.

Still a great tool and one that shows real promise for beeb development.
Maybe I'll pad the source image and not have a custom output resolution and see how I get on with that.

[hexwab]

It appears to have stretched the 224x224 to 320x256 and then saved the middle 224x224 cropping the image, I'll try with a screen capture :(

Putting an A×B image in and getting an A×B image out is not an easy thing to achieve. Not only is the default crop area not the whole image, but it assumes the input has square pixels and the Beeb does not, and compensates accordingly.[1] You can turn off "Lock to target aspect ratio" to disable this, but then you have to match the bounding box manually. Which is fraught, because rounding. (Maybe a "fit whole image" option would be useful?)

The PNG download button saves, at 1:1 pixel mapping, whatever is displayed on the right. This will be whatever the resolution of the target system is unless you change that with the "custom size" option. Right-clicking on the destination image canvas and choosing "save as" produces the same PNG but without the pHYs chunk that allows software, if it chooses, to reconstruct the intended aspect ratio. Screen capture will make things worse, not better. Your 432x450 screen capture is not square because the pixels aren't square, they're 0.96:1 (this is the "pixel aspect ratio"). It is very unlikely to be an integer multiple of the destination image pixels even if they were square.

"it has an auto palette button, but I can't work out how to choose one, only swap the order?"

This is why I described it as "a bit wonky still". Another workaround other than the one you hit upon is

Code: Select all

dithertron.lastPixels.pal[0 /*or whatever*/]=0x4400cc;//RRGGBB
dithertron.setCustomPalette(dithertron.lastPixels.pal);

from your browser console.

There's a README!

The README is unchanged from the original Dithertron. My changes are detailed above (or in the commit log, modulo some outstanding changes I really should push to github).

Reloading the same image after it has been changed doesn't refresh the loaded image.

Fixed.

I've raised an issue: Save state of online viewer as a URL

I have run into this myself (I found myself saving text files with slider settings *sigh*), but I never did work out what the best solution was. Saving a pointer to the image is no good because browsers refuse to read local files unless the user explicitly navigates to them. Saving the image itself would make the URL huge, and there are generally limits on URL size. Saving the image to browser storage means the URL is no longer sufficient to reconstruct the state from a different browser. Saving the image to the remote web server means that now your private data is being sent over the internet, plus then you gotta host them. Saving the state of the sliders would commit to never changing the behaviour of the existing algorithms (or at least keeping all the old versions around for backwards compatibility) or you risk no longer getting back the processed image you were trying to save.

Not unsolvable, but does require more careful thought than I have put in thus far.

There was already a great program for image conversion

Are you thinking of "BBC Micro Image Converter"? Yeah, this doesn't work like that does. (My frustrations with BMIC were why I was so delighted to find this, which I could actually hack on.)

Tom.

[1] MODE 1 pixels are assumed to be 0.96:1. I measured 0.95:1 on my Cub. RGB2HDMI output like Toby's (above) is wider, TVs are narrower.

[hexwab]

This is cool! But I tried it on a couple of images and none of them came out too well.

Making images come out well and selecting images that might come out well are artforms unto themselves! (MEZQ took me *ages*.)

If you're converting to black-and-white then you might not need Dithertron at all: more widespread tools such as GIMP have good support for monochrome bitmaps, plus all its other features are right there (including edge detection!).

https://github.com/hexwab/beebsides was made this way. I had BBC Micro Image Converter available to me but spurned it in favour of GIMP and perl.

I'd argue that including edge detection in Dithertron is scope creep on the grounds that Dithertron's goal as I see it is to output a colour-quantized image that resembles a source image as closely as possible, and edge detection makes images look *less* like the source and thus is taking us further from that goal. Even though it's undeniably nifty and may indeed accentuate details you might want to keep and that would otherwise be lost in the noise.

(I mean, I wouldn't *reject* a patch but it's not at the top of my list of improvements to make.)

Tom.