tech.lgbt is one of the many independent Mastodon servers you can use to participate in the fediverse.
We welcome all marginalized identities. This Mastodon instance is generally for folks who are LGBTQIA+ and Allies with an interest in tech work, academics, or technology in general.

Server stats:

2.9K
active users

"16 bit sensation" mentioned a curious technique used to convert lineart to digital data. The art is transferred to a piece of cling film, then affixed to the screen, and converted to pixels - using just the keyboard!

I never heard about this method, so I wanted to try it immediately...

Public

I am bad at drawing my own stuff, but I should be able to make an okay copy, I thought. So, I processed two official arts of Uehara Meiko, one of the illustrators from the manga/show - a regular and a high-contrast low-res version, and printed them out.

The cling film is a very bad medium for drawing. It doesn't just move around, the pressure of the pen itself stretches the film. The next time I'll try to do something like that, I'll take a thick non-bendy film instead.

Despite the film being wonky, and my hands being attached to my body the way they are, the resulting lineart isn't half bad. I thought I should be able to fix it on the pixel-drawing stage.

Public

There's quite a lot of learning curve.

First, the way PC Paintbrush handles mouse is horrendous. The cursor is 2x2 pixels blob, but with the smallest brush size, only bottom left of this 2x2 blob is drawn. On top of that, when you hold down the mouse and move it, the cursor is constantly redrawn - first with 2x2 white and then 2x2 black. This is very confusing, and it's hard to draw a pretty line.

Second, UNDO undoes the last tool. So, if you used your mouse to left a bunch of wide brush strokes, and didn't like the last one, UNDO will delete all the brush operations, not just the last stroke.

Third, there's keyboard mode, but it moves cursor in 4 pixel steps. To move the cursor in 1 pixel steps, one ought to hold Insert. The left click is F9. I almost got a carpal tunnel syndrome from that lmao.

I loaded Windows 3.1 (it's a 286 computer, after all), and its version of Paintbrush doesn't have mouse cursor issues. UNDO is still not an option.

Finally, you gotta look straight at the screen, or else!

Public

The mouse I am using has a ball. It is clunky, and it is hard to draw "upwards". Soon I realized that the best way to control it is to find the uppermost point of a line, and pull the mouse towards myself. It's kind of like using... a brush, I guess?

By that time, I've made plenty mistakes of copying the lineart. I swear, it would've been better if I could use my keyboard. The resulting lineart is pretty bad. Windows runs in 800x600, so there's lots of pixels to fix. No one has time for this, I'd better try it again in a different program. But I try to apply flat colors. Gosh, Windows palette is so ugly.

I load msnet and copy original images from the file server. They look so much better...

But will they look good in 320x200x16?

Public

As expected, low-res high-contrast version looks pretty good in PC Paintbrush 3, proportions aside.

To make PCPB load the image, I would have to: use GIMP to export BMP in "compatibility mode", then open BMP in Windows Paintbrush, and resize the image to 320x200, then save to PCX.

The reason for that is that PC Paintbrush assumes that the resolution of the image is the same as the resolution of your screen. I mean, what is even the point of having an image that ISN'T the same resolution of your screen, amirite?

The dithered version doesn't look nearly as good as it did in 800x600. It does feel like the palette is a bit "off", but I think the major reason is that dithering doesn't look all that good when your resolution is low, and it's applied to a large area.

Bonus image: PC Paint has a "zoom out" mode with a curious algorithm that is probably something that was left behind back in the 16-colour mode era.

Public

Naturally, there were more than two graphic editors for 16-bit PCs. PC Paint (which is a totally different thing from PC Paintbrush) handles VGA much better than PC Paintbrush, and generally seems to be more usable. Its EGA mode is also OK.

I also have an "A4 Scan" editor, shipped as "PMTV" or "Image72". It doesn't work with PCX palettes correctly, though.

In the meantime, I almost finished writing my own ugly low-res graphics editor in BASIC. xD

Public

ヤベ〜
I didn't code in QBasic since middle school. For whatever reason, I cannot define an array of 320x200, so 160x100 it is. I just wrote a double nested loop to fill out the RAM and the screen, then a While loop with a nested inkey-switch case that handles cursor, color picking (white, black, RGB), and exiting, and I'm dumping the RAM to a file.

This thing works neatly. It took me under 20 minutes to do a lineart in 160x100, so if BASIC could do 320x200, full EGA low-res probably would take me about an hour. It's a painting/cleaning up work after that, but it is much easier after you've done your lineart.

Well, are you ready to see the final result? XD

p.s. Yes, I know that 320x200x16 bit int = 128k, but I remember that 20 years ago I was able to handle large arrays somehow.

Public

It's not terrible, but not impressive. As the image on the cling film was covering only a part of the screen, the resulting sprite is 71x59 pixels. Naturally, the pixels aren't square, but rather 1:1.2.

The "graphics editor" is 98 lines long, space and comments included, and as you can see, isn't worth any sort of preservation.

Quiet public

@nina_kali_nina what! I've never seen this tracing technique before, I love it

Quiet public

@nina_kali_nina also sorry for liking every toot in this thread, but this is amazing

Public

@nina_kali_nina Ahh, qbasic, that takes me back

Public

@nina_kali_nina PC Paint also has GIF and arbitrary image dimensions support, and a palette editor

funnily enough PCPB, PCP, and PaintShow Plus are more like a demo programs that was bundled with mices (Microsoft Mouse, Mouse Systems, and Logitech respectively).. need to try some proper editors ^~^

Public

@nina_kali_nina it’s actually very cute!!

Public

@nina_kali_nina have you considered using Deluxe Paint? I think it’s a bit better than Paintbrush.

Public

@nina_kali_nina

Fascinating!

The only 16-bit era tracing technique I knew of back then was to stick a partially-opened paperclip to your mouse using scotch/cellotape and have the tip of paperclip pointing down onto the mousing surface to the side of your mouse like a stylus floating just millimeters off of the mouspad.

You then place the (opaque) subject under your mouse and trace it using the paperclip-stylus, taking care to keep the mouse parallel to the edges of the drawing surface.

Oh, and of course you set your mouse speed and acceleration to minimum.

I never got particularly good results with it, but I wasn't experienced in drawing, or particularly patient. 😄

Public

@nina_kali_nina cling film seems like it would be a much more challenging material than acetate cels, like the ones that were used for producing animation

Public

@nina_kali_nina I remember doing that in a slightly more sophisticated way with ArtWorks on the Archimedes. Scan the image, stick it on a semi-transparent foreground layer, and then draw under it... Had rather good results, too.

Public

@darkling fancy, layers!

Public

@nina_kali_nina I'm realising that my experience was about 5 years later tech (early '90s, ARM3) than what you're trying to do (late '80s, 80286), so it's a very different beastie. Similar principles, though.

Public

@darkling the show says that this was used on 8-bit machines from early 80s, too.

Public

@nina_kali_nina I remember reading about a version of this for creating KiSS doll art.

Quiet public

@nina_kali_nina I did things like this in highschool! It was around 2000 but scanners and tablets were expensive and low res art was still relevant.

I think I used tracing paper. The mouse was clumsy, so I used the arrow keys instead (it was somehow faster). When I got my first tablet, I taped drawings to it to trace them. It never looked great, so I got used to copying by eye.

I also used the photocopier technique to get clean line art, and I literally screamed when they did it in the anime.

Quiet public

@kika please share if you have some of those preserved!

Also, low res art will be relevant forever <3

Quiet public

@nina_kali_nina I don't have the digital files anymore, and the drawings are way way too embarrassing to share.

Quiet public

@kika @nina_kali_nina

We used transparency film from the overhead projectors, but I don't think those exist, anymore.

Quiet public
Public

@nina_kali_nina I have used this method for ASCII art (on pre-pentium systems around the time Pentium came out)

Public

@nina_kali_nina I did almost all my 8-bit computer drawings that way in the 80s. The advantage of cling film is it adheres very well to a CRT through static charge, which is what I started with. I later used comic book poly bags. They're not as pliable to a curved screen but they stick pretty well and are way better to draw on. Drawing with a keyboard (Apple II) or switch-type joystick (Atari 800) is best. I suspect working in a low resolution is an advantage as well.

Public

@xot do you still have these arts somewhere? :)

Public

@nina_kali_nina This is the only one I have handy, based on an iconic Bernie Wrightson page. This was drawn around 1985 on an Atari 800XL using a pirated copy of KoalaPainter modified for joystick.

Public

@nina_kali_nina You can also use the inverse method for tracing outlines. A thin piece of paper (~60g/sqm) works well enough if you max your screen brightness.

Public

@nina_kali_nina i remember doing that on my C64 back in the '90s.
That post sure brings back memories :awesome:

Public

@nina_kali_nina yeah, did that a fair bit back in the day on my 8-bit system. The trick was finding a good pen to do the initial tracing with. The correct marker made all the difference.

Quiet public

@nina_kali_nina
Some older graphics software like Paint Shop Pro 9 also can do wonders automatically and with the right settings. Some touchup might be needed though.

Quiet public

@ZILtoid1991 paint shop pro 9 is at least 20 years newer than this toolkit though :)

Quiet public

@nina_kali_nina Oh that brings back memories! 😊

Public

@nina_kali_nina
Is a rotoscopy

Public

@osr do you want it to be?:)

Public

@nina_kali_nina it's like reverse rotoscoping

Quiet public

@nina_kali_nina@tech.lgbt This series is so incredibly fun, because of all the technical and art references, that make you immediately want to try them or you at least remember them as they might come in handy in the future. Of course I heard about quite a few of them before or even tried them myself, but the quick run through the years is really fun! (I only started watching a few days ago though, so not caught up yet with the current episodes.)

Quiet public

@nina_kali_nina I wonder if Japanese cling film was thicker or something, 'cause it seems like it'd be really fiddly to draw on (though you seemed to do a good job in the end).

Overhead projector sheets would work really well though, and I think you an get erasable markers for them...

Quiet public

@gamemakingtools I wonder if it's a mistranslation or adaptation. I remember drawing on transparent polyethylene bags once, and it was a much better experience

Quiet public

@nina_kali_nina that def seems like a better mix of ubiquity and stability.

Public

@nina_kali_nina i tried to use a similar technique once because i thought it would look cool to have a DOOM map as part of my lineart. i abandoned this draft because i didn't like it for other reasons, but as you can see, it's... not perfect LMAO

probably would have made more sense to try this with doom fanart but whatever