QBJS - ANSI Draw

[dbox]

Here's a simple little text-based drawing program.  It originally started as a simple test for the Screen function which was just implemented in version 0.9.0.  It also incorporates some of the extended QBJS functionality which lets your program prompt the browser to upload and download files.

   

No bells and whistles on this one, but you can either draw with the mouse or arrow keys + SPACE or ALT.  You can select both a left button brush and right button brush by clicking the character, foreground color and background color from the palette on the left.

You can save and load your creations in a simple save format (.dat).  You can also save the drawing as an image.

I'm including a link here instead of using the embedded QBJS since browser security rules prevent some of the loading and saving functions when loaded in an iframe.

ANSI Draw

[hsiangch_ong]

this is awesome!  thank you for this program.

i was sort of looking for escape key to end program run.  but one could just press "stop" button on qbjs interface.

i would have to change the file format, or provide another "loader" to be able to see again a bunch of "bsave/bload" binary files i still have lying around.

[grymmjack]

Here's a simple little text-based drawing program.  It originally started as a simple test for the Screen function which was just implemented in version 0.9.0.  It also incorporates some of the extended QBJS functionality which lets your program prompt the browser to upload and download files.

ASCII Draw

This is awesome!

We might want to take this further! There are loads of programs that draw ANSI but none that do it on the web like this. (yet)

One thing that would really help is mapping F1-F12 keys to characters of our choosing. This is how we text mode artists draw in other programs

Take a look at this screenshot for inspiration. You can see common elements, what I'm showing here are the function keys at top.


Well done man!

[dbox]

This is awesome!

We might want to take this further! There are loads of programs that draw ANSI but none that do it on the web like this. (yet)

One thing that would really help is mapping F1-F12 keys to characters of our choosing. This is how we text mode artists draw in other programs

Thanks @grymmjack!  That's a great suggestion.  I'm sure there are loads of additional features that could be added.  My original goal was a simple technology demo with a UI that was all text based itself.  But you could go nuts, allow for different sized canvases, add web-native controls and menus, flood fill, selections, copy and paste, load standard ANSI file formats, etc.

I'm happy for anyone to take this as a starting point and mod away.

[madscijr]

Here's a simple little text-based drawing program.  It originally started as a simple test for the Screen function which was just implemented in version 0.9.0.  It also incorporates some of the extended QBJS functionality which lets your program prompt the browser to upload and download files.

This is great - I used to make color CBMSCII drawings and animations on the Commodore 64, and have been wanting to make program to do this on the PC.

Which leads me to a couple enhancements to suggest:

1. Add a simple animation mode, to save drawings as successive frames (maybe just save the changed portions to save space) and add a simple playback function, and a way to specify the playback speed.

2. Add an option to record the keypresses or drawing input (including cursor movements, mouse clicks, and color changes) with the ability to play back like an animation.

3. Add a simple character editor to customize the font the user can draw with.

4. Perhaps add an option for layers, where the user's changes just affect the selected layer, and layers can be hidden/unhidden, moved in front of or behind each other, duplicated, etc.

5. Some basic drawing functions like select an area to cut/copy/paste, flip horizontal / vertical, rotate, clear selected area, fill, eyedropper to capture color, etc.

Either way, I look forward to playing with this - thanks for sharing!