HyperPyxel

HyperPyxel

HyperPyxel is a pixel paint program right in your (Chromium) browser.

It's simplistic by design. It does not try to mimic or battle with the giants like Photoshop, and so on. It tries to mimic the experience of paint programs of simpler times.

It draws inspiration from the paint programs that were popular on the Commodore Amiga home computer, such as Deluxe Paint, Brilliance, Personal Paint, and others.

But Hyper Pyxel is not a Deluxe Paint or Brilliance clone, but will try to give you a similar experience. It resembles mostly Brilliance in the way that it presents the paint tools GUI, but it shares a lot of similarities with DPaint as well.

It is not based on any engine, framework, or library, all code is pure javascript, as the goal is to learn javascript and browser capabilities, and not learning a third party library. (That I will surely do, but not as part of this project)

HyperPyxel is hosted >>here<<. The code is on github >>here<<.

Disclaimer

This is not a commercial product. As paint programs go, today it's probably rather clumsy to use for most people.

I have done some work with it, but I can tolerate the clumsiness, maybe you can't, and that is fine. To me making the program is most of the fun. If I or someone else uses it for something, that is just a bonus. Thanks for reading this and checking this out nevertheless ? And if you have any good ideas to improve, maybe I implement them.

Note: This has only originally been tested on a modern Chrome Browser for windows. Recently I accidentally opened it in Firefox, and it seems to work just fine. Don't try to run in old Internet Explorer though. Also Edge may have severe slowness issues, running this program. (The Undo calculations especially)

Tip: To make it work well, you need to turn on your browser setting “Ask where to save each file before downloading” (or similar). Otherwise all your saved pictures will get default names in your download folder.

The “Grand” Idea

The idea to make a paint program, has been with me for a very long time, but I never really succeeded, in the low level languages like C or C++, probably due to me taking a wrong turn in the beginning of the attempt or so.

The largest motifator comes from a long time ago, when I transitioned from the Commodore Amiga to the PC / Windows. I was looking something to replace DeluxePaint, but could not find anything as easy to use, and yet so powerfull. MSPaint was a severe disappointment since it's limitations were so many. I tried Paint Shop Pro, and even if it's very powerfull, it was not at all good, at creating pixel graphics from scratch. So I kept an eye on commodore Amiga emulator in the meantime.

Time went by, and good alternatives came by, like ProMotion, and nowadays you can do very good pixel painting in PhotoShop.

But the idea that “I should be able to create a paint program, how difficult can it be”, stuck with me, as an itch, and one day in 2020, when there Corona Virus had bound me to home, I fiddled with Javascript on Chrome, and noticed I could actually make a decent load and save mechanism for pictures made in a Canvas. The rest is history.

Brushes

If you use HyperPyxel for the very first time, and are not comfortable with it, it might be (beside my bad UI design), the fact that the way of working very strongly evolves around brushes.

Brushes in HyperPyxel, and indeed DeluxePaint/Brilliance, is not really the same as the brush concept in modern paint programs. In HyperPyxel, you select a part of the screen, and this is then what you paint with your brush. There are a few standard brushes, but not that many. After you selected a brush or part of the screen to be your brush, you can do “many” operations on the brush. For example, you can outline it, you can inline it, you can colorize it, make it more transparent, rotate it, resize it, etc.

Zoom

Another big feature of HyperPyxel is that the zoom, is realtime. This means, whatever operations you do on your picture, the zoom, will show that operation close up, as it would look like. This is in contrast to for example, paint, which shows you in the zoom view, only a preview of your operation, and you need to do the operation, in order to see what it looks like zoomed.

Complexity

Just for those who are wondering, what is the complexity of creating a paint program, below I list a (incomplete) list of features you probably need to build to make a paint program.

1. Multi Level Undo/Redo
2. Zoom
3. Paint view for being able to paint when zoomed or when not zoomed
4. Load/Save mechanics
5. Brush selector
6. Palette selector
7. Palette editor
8. Color picker. (Foreground, Background and fill color)
9. Paint tools: freehand, line, rectangle oval, square, circle, paintbrush
10. Paint tool settings. Is the circle filled or line only. How large is the paintbrush area, how dense is it, etc.
11. Resize, Rotate, FlipX, FlipY, Trim, Add, Blur
12. Filters: BlackWhite, Sepia, other..
13. GUI layout. Where are what buttons and menu items going to live.
14. Key shortcuts. Quick access to functions is quite needed when doing painting.
15. Help description, otherwise no one will know how it works.
16. Info area. To show information, like what are the cursor coordinates, what tool have you selected, and so on.
17. View options. Stencil, guides, types and zoom.
18. Paint modes. Normal, Colorize, Brighten, Darken, ….
19. Flood fill. Flood fill modes, single color barrier, or any-colour-ourside-of-selected-area.

Imagine that for each of these options you need to create between 3 and 40 lines of code to implement. (This depends heavily on what library you use, or if you make, for example, the floodfill algiritm from scratch for learning purposes)

Added are the resources you need for the project, if you have a GUI, buttons need images, and somewhere you need to obtain them, or make them from scratch. In case of HyperPyxel, all button images have been created from within HyperPyxel, except for the early placeholders, when HyperPyxel did not have enough code to draw anything half decent.

Oops

You may not find the undo button in HyperPyxel. This is because there is none such. There is instead an Oops buttons, and instead of Redo, there is UnOops.

Why on earth….. You may think, not use the accepted Undo paradigm.

1. Oops is Undo
2. Oops is a reference to the C64 paint program “Koala Painter". Koala Painter on the C64, used Oops instead of Undo. The function is the same, but named different. So Oops it is, only if as a reminder, that “Undo” is something everyone is seeing nowadays as “must have” and “standard”, while in fact the word “Undo”, just “stuck”, and “oops” did not. It could have been the other way round. We could have gotten “Oh No” buttons, who knows how the world looked like now, if Undo did not win. In any case I might add a preference option to toggle it back to “Undo” mode, if someone requests it. For now now though, it's Oops, and UnOops, as a tribute to more Retro times.

Tiles & Stencil

Tile mode is probably mostly useful when creating games. The option allows you to overlay the boundaries of tiles, of self defined size.

“Tile-mode” is handy when creating animations, or tile based 2d games. Like platform games or top down games.

Some pictures

Here are two pictures, I manage to squeeze out of the program, using only the tools inside the program itself, and not cheating, and using Paint Shop Pro or the like to tidy up the pictures.

Space is my test picture of the circle, line, spray and fill tools. Zoom was also used a lot, to double check the lines were beginning and ending on the correct pixel. And for filling in really small areas.

Cat is my test picture for testing the stencil tool. This tool lets you see a half transparent picture through your own. So you can trace the lines of the other picture. In this image, I traced an picture of an airplane, and another picture of my cat, and over-laid them on a blue background. Then I added some clouds for effect, with the spray tool.

For Fun

This project is only made for fun. There is no commercial goal here, or any nifty new technology. Just pure Javascript, in a browser, plenty things can be improved, and if I get feedback, I might actually do just that.

Remember, the more people comment, the more fun it will be.

What feedback do I want?

1. Do you see anything I could improve in HyperPyxel?
   • If I consider it doable and fitting in the spirit of the project, I might just do it.
2. Have you tested it on any browser / hardware that I haven't.
   • I love to add that information to the compatibility section of the website. Credits will be mentioned of course ?
3. Did you paint anything with it you want to share?
   • If it's any good, I love to link to your work from my site.

Comment either here, or on HyperPyxel facebook page.