7 ms·

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

147 points by jukkakoskinen 3y ago

jukkakoskinen 3y ago
GitHub link: https://github.com/steffest/DPaint-js https://github.com/steffest/DPaint-js
- mixmastamyk 3y 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.
  - Steffest 3y 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.
    - mixmastamyk 3y ago
      Fascinating. > 450 in Inches? I would have expected kb perhaps.
      - detrites 3y ago
        For those curious, this is about 11 metres. Or 388KB.
  - simulo 3y 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 3y 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.
- Steffest 3y 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 3y 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 3y 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 3y ago
You can run the original in your browser: https://archive.org/details/Deluxe_Paint_II_1987_Electronic_Arts_PAL https://archive.org/details/Deluxe_Paint_II_1987_Electronic_...
gardaani 3y 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-early-source-code/ https://computerhistory.org/blog/electronic-arts-deluxepaint...
pjmlp 3y ago
Great work. However the key question is, the original runs in less than 512 KB, how much does DPaint.js need?
- capableweb 3y 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 https://chrome.google.com/webstore/category/extensions?hl=en - 12.1MB - https://www.nytimes.com/ https://www.nytimes.com/ - 31.9MB - https://github.com/ https://github.com/ (logged in) - 18MB
Ciantic 3y 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.

147 points by jukkakoskinen 3y ago

jukkakoskinen 3y ago

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

mixmastamyk 3y 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.
- Steffest 3y 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.
  - mixmastamyk 3y ago
    Fascinating. > 450 in Inches? I would have expected kb perhaps.
    - detrites 3y ago
      For those curious, this is about 11 metres. Or 388KB.
- simulo 3y 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 3y 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.

Steffest 3y 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 3y 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 3y 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 3y ago

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

gardaani 3y 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-early-source-code/ https://computerhistory.org/blog/electronic-arts-deluxepaint...

pjmlp 3y ago

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

capableweb 3y 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 https://chrome.google.com/webstore/category/extensions?hl=en - 12.1MB - https://www.nytimes.com/ https://www.nytimes.com/ - 31.9MB - https://github.com/ https://github.com/ (logged in) - 18MB

Ciantic 3y 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.