This is a read-only snapshot of the ComputerCraft forums, taken in April 2020.
nitrogenfingers's profile picture

Micropaint: Experimental painting program for tiny pixels

Started by nitrogenfingers, 08 August 2016 - 11:38 AM
nitrogenfingers #1
Posted 08 August 2016 - 01:38 PM
Micropaint


A native teletext painting tool for ComputerCraft



What is it:

Micropaint is a painting tool that allows you to directly paint teletext characters to a canvas using a mouse tool. Details like the character code, and correct foreground and background colours are abstracted out of the program. To allow this kind of painting, the program makes use of a 'magnified' display of individual pixels, which can be edited like a normal pixel.

The program loads and exports images using the BLittle image format.

How to use it:

The program has two main windows: the canvas on the left, which represents the entire image, and the magnifier on the right, which displays a single pixel.

Using the paint tool and the colour palette, the canvas can be painted on like in any other paint program. With the magnify tool selected however, a single pixel on the canvas can be displayed in the magnified view on the right, which can then be edited for more detail work. As a single pixel can only have two different colours, updating your colour palette will update the magnify colours as well.

The image can also be resized and cropped with the box select tool. Other features, like the character code display and file options can be accessed from the menus.

Upcoming Features:

The following features are planned:

- Copy/paste tools for the selection box
- An export type that just has raw character codes and a very basic 'paint' method- a file you can copy and paste into any project without needing an API to display
- Some interface improvements, like a less terrible select box display
- A flood fill tool

Please report any other feedback or bugs in the comments or as a message. Thanks!

Screenshots:





Edited on 25 August 2016 - 01:50 PM
CrazedProgrammer #2
Posted 08 August 2016 - 01:42 PM
This is amazing!
I love the idea of directly viewing artwork in the smaller pixel format when you are painting.
Bomb Bloke #3
Posted 08 August 2016 - 02:34 PM
I have not included any other formats as I don't know enough about alternatives on the forums yet. If you know something about this, please contact me.

In terms of the teletext character images, the only other formats I'm aware of are these two.
ReBraLaCC #4
Posted 08 August 2016 - 04:36 PM
looks nice, ive been searching for a program like this! :)/>
LDDestroier #5
Posted 09 August 2016 - 12:29 AM
Is that Pitfall Harry? Sign me up!
Cool program! I should really try to use these teletext characters more.
KingofGamesYami #6
Posted 10 August 2016 - 03:28 PM
This is amazing! Would it be possible to display the current character code and whether or not background / foreground are inverted? This would help anyone that doesn't want to save to a file.

Edit: A couple bugs

1) After saving and loading, all "blank" space is black
2) If you drag off the box on the right, it deselects the current character (possibly intentional?)
Edited on 10 August 2016 - 01:46 PM
nitrogenfingers #7
Posted 10 August 2016 - 04:25 PM
Thanks for the report, and for feedback so far. I'll keep developing this.

I can probably find space to show the character code. I've abstracted the foreground/background information out though- you just pick the colours you want and the program does the rest. For reference sake, the background is always the colour in the bottom-right corner of a magnified pixel.

1) More a fix of me not wanting to handle dynamic canvases. A later version will have options of what to fill that space with (and cropping options etc.)
2) Thanks for the catch- I'll fix this in the next version!
KingofGamesYami #8
Posted 10 August 2016 - 04:44 PM
I can probably find space to show the character code.
Awesome!
I've abstracted the foreground/background information out though- you just pick the colours you want and the program does the rest. For reference sake, the background is always the colour in the bottom-right corner of a magnified pixel.
Alright. That should work.
DesertEagle-2000 #9
Posted 11 August 2016 - 11:24 PM
Good job Nitrogenfingers, and thanks for accepting my suggestion! The instructions were a bit unclear but I know how to use it after a bit of experimenting.
Edited on 11 August 2016 - 09:25 PM
nitrogenfingers #10
Posted 25 August 2016 - 01:32 PM
I've added a few new features, and have updated the pastebin link.



Toolbar
There are a few new tools which can be selected from the right-hand side. The left/right click for paint/magnify has been separated into dedicated tools, and there is also a selection box and a drag tool.
I've also made the character code available for the magnify area. It's hidden by default but you can enable it in the edit menu.

When interacting with the magnify view however, you can (and do) only paint, so you can easily switch from big screen to small when doing detail work without having to constantly swap tools.

Custom canvas sizes
You can specify a new size when creating a new canvas from the file menu. Images can also be resized from an option in the edit menu, where you can specify a new size, and which section of the image to resize from (pick the top left corner if your image is mostly there, for example).
You can also get more precise resizing controls by cropping the image using the select box. Drag out a box with that tool and select 'crop' from the edit menu. This is currently the only thing the selection box does.


This is a pretty messy snapshot but the features make this tool more feasible for asset work. Things I'm working on to improve it include:
- Copy/paste tools for the selection box
- An export type that just has raw character codes and a very basic 'paint' method- a file you can copy and paste into any project without needing an API to display
- Some interface improvements, like a less terrible select box display
- A flood fill tool

For those that have made use of the tool so far, I hope these additions are helpful, and if anyone has any requests for features or bugs to report, please let me know.
Edited on 25 August 2016 - 11:48 AM
CrazedProgrammer #11
Posted 25 August 2016 - 02:17 PM
Very nice additions!
I've noticed a little bug:
When you drag the mouse with the cursor tool selected it crashes:
nitrogenfingers #12
Posted 25 August 2016 - 03:15 PM
Thanks CrazedProgrammer, good catch! I've updated the pastebin with a patch to fix the issue.
xcrafter_40 #13
Posted 25 August 2016 - 07:34 PM
Setting the canvas size to 20 15 crashes micropaint.
nitrogenfingers #14
Posted 26 August 2016 - 01:03 AM
Interesting… I can't replicate that one. Could you send a screenshot?
ReBraLaCC #15
Posted 27 August 2016 - 05:45 PM
This happened when i clicked on Crop:


Comes out at this function: drawMagCode()
Thegameboy #16
Posted 15 September 2016 - 11:17 AM
This is actually really useful! One suggestion I have, though, is to be able to work with images at least the resolution of a computer's screen. Maybe a drag tool or full screen option for easy viewing?
Edited on 15 September 2016 - 09:19 AM
jakejakey #17
Posted 11 November 2016 - 09:19 PM
Super useful for making neat graphics, but I've found myself in a jam. The problem is that the blittle format it uses saves in special characters, and that doesn't go well with some services (e.g pastebin) so if anyone knows how I can convert it to regular paintutils, and then shrink it with blittle, i'd appreciate it
Bomb Bloke #18
Posted 12 November 2016 - 01:02 AM
Off the top of my head, versions of ComputerCraft which work with BLittle will also let you upload/download non-ASCII to the likes of pastebin without issue.

That said, you should be able to use the BLittle API to load a given image into a table, textutils.serialise() to get that as a string, then textutils.urlEncode() to make it completely web-safe.
apemanzilla #19
Posted 12 November 2016 - 01:37 AM
Off the top of my head, versions of ComputerCraft which work with BLittle will also let you upload/download non-ASCII to the likes of pastebin without issue.

That said, you should be able to use the BLittle API to load a given image into a table, textutils.serialise() to get that as a string, then textutils.urlEncode() to make it completely web-safe.

Nope, bytes >127 still get replaced with a ? when uploading or downloading via the HTTP API.
Bomb Bloke #20
Posted 12 November 2016 - 02:09 AM
Hmm, testing it out I'm seeing mismatches, but not throughout the entire >127 range. It affects the teletext characters and that's pretty much it!

I can confirm, though, that textutils.serialise() already escapes everything that needs to be escaped. No need to additionally call urlEncode().
KingofGamesYami #21
Posted 12 November 2016 - 02:47 AM
You're probably thinking of CCTweaks - it fixes all the ASCII / binary problems.
killer95533 #22
Posted 20 March 2017 - 04:15 AM
you should and more color ability so you can't only use 2 colors on one pixel I can't tell you how many times I needed to use a 3rd one and had to change what a drew, (if it's not too much of a hassle that is :)/> ) besides that THIS IS AMAZING!
Edited on 22 November 2018 - 04:16 AM
KingofGamesYami #23
Posted 20 March 2017 - 02:50 PM
you should and more color abalibilty so taht you can't only use 2 colors on one pixel i can't tell you how many times i needed to use a 3rd one and had to change what a drew, (if its not to much of a hassle that is :)/>/> ) besides that THIS IS AMAZING!

This is a limitation of ComputerCraft.
Benjaminber #24
Posted 21 May 2017 - 03:55 PM
Very cool!
I never thaugt that thus is possible with CC.
My first try:
https://d52i.imgup.net/mpaint861a.png
Edited by
xcrafter_40 #25
Posted 15 June 2017 - 06:58 PM
For any of you wanting to render micropaint images without the app:


pastebin get Nz5qK3sP limg

Usage: limg <file> <x offset> <y offset>
Edited on 15 June 2017 - 05:01 PM
Jummit #26
Posted 17 August 2017 - 04:57 PM
For any of you wanting to render micropaint images without the app:


pastebin get Nz5qK3sP limg

Usage: limg <file> <x offset> <y offset>
Wow, thats super usefull! Thanks! :D/> I could'nt figure out how the images are saved…

I have a question: I need transparent pixels, but by saving an image, all transparent pixels turn black. Is this intended?
Bomb Bloke #27
Posted 18 August 2017 - 03:25 AM
Unfortunately transparency doesn't play well with teletext images. Depending on their makeup, it may not be possible to render over a different "background" without also having to change the "actual image area", and so a background gets hardcoded into the saved files.

You can work around this, to an extent, with BLittle - if you save your images as regular paint files, you can use blittle.shrink() to convert them into a teletext image on the fly, with whatever background colour you like. Doing this runs somewhat slower than using pre-saved teletext images, though.

If you want to draw "transparent" images over variable and more complicated backgrounds (each involving multiple colours), then using a terminal object produced by blittle.createWindow() would be the way to go. You'd need to do all your rendering through that, though, so it can keep track of which bits of background are where.
Jummit #28
Posted 18 August 2017 - 08:47 AM
Unfortunately transparency doesn't play well with teletext images. Depending on their makeup, it may not be possible to render over a different "background" without also having to change the "actual image area", and so a background gets hardcoded into the saved files.

You can work around this, to an extent, with BLittle - if you save your images as regular paint files, you can use blittle.shrink() to convert them into a teletext image on the fly, with whatever background colour you like. Doing this runs somewhat slower than using pre-saved teletext images, though.

If you want to draw "transparent" images over variable and more complicated backgrounds (each involving multiple colours), then using a terminal object produced by blittle.createWindow() would be the way to go. You'd need to do all your rendering through that, though, so it can keep track of which bits of background are where.
no, i dont want the pixel with multiple colors to be transparent, only pixels with one color. That would be enough.
Edited on 18 August 2017 - 06:47 AM
Jummit #29
Posted 11 September 2017 - 08:17 PM
made a little enhancement to the code: you can move the selected pixel in the magnify mode not only with the mouse, but with the arrow keys. That is super useful for me. If you want the enhanced version, get it with

pastebin get KmnXpf1w micropaint
PS: What is the license of this projekt?
Edited on 11 September 2017 - 06:24 PM
nitrogenfingers #30
Posted 13 September 2017 - 08:35 AM
Excellent idea. If I make an update to micropaint I'll include that feature. I've needed something similar myself when doing that sort of work.


I haven't set a license for any of the software I've made, but if you keep the attribution comments at the top of the file then it's probably fine.
Jummit #31
Posted 13 September 2017 - 01:31 PM
Excellent idea. If I make an update to micropaint I'll include that feature. I've needed something similar myself when doing that sort of work.


I haven't set a license for any of the software I've made, but if you keep the attribution comments at the top of the file then it's probably fine.
Cool. If i make some more features, would you make a new version out of them and an update to this post? I have some ideas, and its a good exercise and fun to implement a feature in code from others.
Edited on 13 September 2017 - 11:38 AM