8bitworskhop's Dithertron - mode 2 screen generation on your browser
8bitworskhop's Dithertron - mode 2 screen generation on your browser
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:
(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
(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
- Posts: 2212
- Joined: Tue Apr 30, 2013 12:16 pm
- Contact:
Re: 8bitworskhop's Dithertron - mode 2 screen generation on your browser
Nice idea for testing out stuff. Kind of jsfiddle for the c64. Do you know what c compiler it uses?
Re: 8bitworskhop's Dithertron - mode 2 screen generation on your browser
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.
BBC Master 128, BBC Model B i7, PMS B2P-6502 2nd proc., PiTubeDirect (both internal and external), RetroClinic Multi-OS Selector, Sundby 256k RAM/ROM card, MMFS, Gotek, Music 500, Hoglet RGBtoHDMI, ...
Re: 8bitworskhop's Dithertron - mode 2 screen generation on your browser
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.
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.
- Attachments
-
- pics.ssd
- (189 KiB) Downloaded 56 times
- TobyLobster
- Posts: 622
- Joined: Sat Aug 31, 2019 7:58 am
- Contact:
Re: 8bitworskhop's Dithertron - mode 2 screen generation on your browser
These look great. It works on my real BBC B:
Re: 8bitworskhop's Dithertron - mode 2 screen generation on your browser
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.hexwab wrote: ↑Sun Nov 07, 2021 3:16 am
Try it at https://sphere.chronosempire.org.uk/~HEx/dithertron/ (may go away and/or stop working at any time)
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!
Last edited by sa_scott on Thu Aug 25, 2022 11:58 pm, edited 1 time in total.
--
Stephen Scott, Digital Media Muckerupper
Games: Androidz Redux, Headcase Hotel, Polymer Picker
www.sassquad.net
Stephen Scott, Digital Media Muckerupper
Games: Androidz Redux, Headcase Hotel, Polymer Picker
www.sassquad.net
Re: 8bitworskhop's Dithertron - mode 2 screen generation on your browser
I have never understood why this is frowned upon, if indeed it is frowned upon.
Glad you're finding it useful! I should try getting it merged upstream one of these days. (FWIW you're missing an r :)
Tom.
Re: 8bitworskhop's Dithertron - mode 2 screen generation on your browser
Thanks for replying, and noting my typo. I've edited the post. Too much of a dither!
--
Stephen Scott, Digital Media Muckerupper
Games: Androidz Redux, Headcase Hotel, Polymer Picker
www.sassquad.net
Stephen Scott, Digital Media Muckerupper
Games: Androidz Redux, Headcase Hotel, Polymer Picker
www.sassquad.net
Re: 8bitworskhop's Dithertron - mode 2 screen generation on your browser
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..?
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..?
Re: 8bitworskhop's Dithertron - mode 2 screen generation on your browser
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!
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!
Re: 8bitworskhop's Dithertron - mode 2 screen generation on your browser
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.
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.
Re: 8bitworskhop's Dithertron - mode 2 screen generation on your browser
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.
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);
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).
Fixed.
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.
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.
Re: 8bitworskhop's Dithertron - mode 2 screen generation on your browser
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.