DPaint.js: A web-based image editor modeled after Deluxe Paint

https://www.stef.be/dpaint/

by jukkakoskinen • 3 years ago

147 15 3 years ago

stef.be

jukkakoskinen• 3 years ago

GitHub link: https://github.com/steffest/DPaint-js

mixmastamyk2• 3 years ago

Interesting. I've wondered how to build a media or presentation editor like this myself.

Looks like it centers around the canvas object and a bunch of divs pretending to be widgets. I found this interesting as well, from the readme:

    It is written in 100% plain JavaScript and has no dependencies.
    It's 100% free, no ads, no tracking, no accounts, no nothing.
    All processing is done in your browser, no data is sent to any server.

So no big framework, eh? I'm kinda glad to hear that, yet wonder how maintainable it will be in the future. Are there any books/blog-series that go over how to build one of these things?

Also looks like this was cranked out in ~6 months or so (with a big gap in the middle), impressive.

Steffest2• 3 years ago

Big frameworks are so overrated ... IMHO they bring more bloat to the table then structure. These days with ES6 modules and workers and native custom elements, you can combine structure, maintainability and performance without frameworks.

The entire application is something of 400 to 450 in, and that includes all the colour reduction/dithering stuff and the reading and writing of those weird binary Amiga specific file formats.

simulo• 3 years ago

…yet wonder how maintainable it will be in the future.

If the code is well written, is should be no problem and actually be easier because there are no framework you need to keep in pace with.

DPaint.js doesn't need building.

Was not included in the quote above but it is equally rare!

pornel• 3 years ago

It doesn't have my favorite Deluxe Paint feature: split-screen zoom.

When you pressed M, it zoomed area under the cursor, while also keeping a 1:1 view on the side. This gave fine motor control to edit pixels, while also allowed seeing how the overall image looks like. This was especially important when dithering by hand.

The gradient tool is affecting the entire area, instead of being a quirky flood fill of line gradients. I don't see a blur brush either. These two tools gave DP-painted images a recognizable style.

It's a nice editor, but it gives me vibes of Photoshop 5, not Deluxe Paint.

Steffest2• 3 years ago

There's a split screen zoom in the menu "view" -> "split screen" (Or press tab)

Most of the tools (like flood fill gradient and blur) I find easier to apply the the entire layer and then use selections or masks to only apply it to the area you want.

It certainly not a direct Deluxe Paint clone, more a conceptual successor while keeping a heavy focus on Amiga file formats and pixels.

lttlrck• 3 years ago

"Preview in Deluxe Paint" sent me hurling back to 1990.

I have seen Workbench running in a browser before, it's a real kick to see it - on my phone.

dylan604• 3 years ago

For an Amiga inspired project, I miss the bulky pointer. Would be a nice touch to push that Amiga feel that much more.

qbasic_forever• 3 years ago

You can run the original in your browser: https://archive.org/details/Deluxe_Paint_II_1987_Electronic_...

gardaani• 3 years ago

The Computer History Museum has made available, for non-commercial use, the source code of DeluxePaint (v1): https://computerhistory.org/blog/electronic-arts-deluxepaint...

pjmlp• 3 years ago

Great work.

However the key question is, the original runs in less than 512 KB, how much does DPaint.js need?

capableweb• 3 years ago

After importing a image (320x256), duplicating some layers, doing some edits and more for ~5 minutes, the heap snapshot ends up being 4.3MB.

To get some base layer, here are some other examples from doing a heap snapshot directly after page load (so no interactions):

- https://chrome.google.com/webstore/category/extensions?hl=en - 12.1MB

- https://www.nytimes.com/ - 31.9MB

- https://github.com/ (logged in) - 18MB

Ciantic• 3 years ago

Nice. It seems to be missing the multi-cursor mode (snowflake icon). Which allows to draw as if you had multiple cursors all equidistant to a center point. I remember spending countless hours as a kid using that tool to draw a weird flower like shapes, it was mesmerizing.

DPaint.js: A web-based image editor modeled after Deluxe Paint

Related Stories