2 |
3 | There are many many excellent paint programs out there.
4 | Next to the unavoidable PhotoShop there are many excellent pixel art tools like
5 | Asesprite,
6 | ProMotion NG,
7 | GrafX2,...
8 |
9 | And even brilliant browser based image editors like PhotoPea,
10 | Piskel or
11 | Pixelorama, ...
12 |
13 |
14 |
15 | So why make another one?
16 | The main reason is that I wanted a modern tool for creating Amiga Icons, a long gone ancient file format that no modern editor supports.
17 | (And that even the icon editors on the Amiga platform struggle with)
18 | Next to that I was missing some pixel-specific features that I knew from the good old Deluxe Paint days.
19 |
20 | DPaint.js was born: a tool that combines 3 things:
21 |
22 |
the pixel approach of Deluxe Paint
23 |
the modern features of today's image editors
24 |
the platform independent nature of browser based applications.
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/_img/hand.svg:
--------------------------------------------------------------------------------
1 |
2 |
25 |
--------------------------------------------------------------------------------
/_img/select.svg:
--------------------------------------------------------------------------------
1 |
2 |
51 |
--------------------------------------------------------------------------------
/tests/playwright.config.js:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | import { defineConfig, devices } from '@playwright/test';
3 |
4 | /**
5 | * @see https://playwright.dev/docs/test-configuration
6 | */
7 | export default defineConfig({
8 | testDir: './',
9 | /* Run tests in files in parallel */
10 | fullyParallel: true,
11 | /* Fail the build on CI if you accidentally left test.only in the source code. */
12 | forbidOnly: !!process.env.CI,
13 | /* Retry on CI only */
14 | retries: process.env.CI ? 2 : 0,
15 | /* Opt out of parallel tests on CI. */
16 | workers: process.env.CI ? 1 : undefined,
17 | /* Reporter to use. See https://playwright.dev/docs/test-reporters */
18 | reporter: 'line',
19 | /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
20 | use: {
21 | /* Base URL to use in actions like `await page.goto('/')`. */
22 | baseURL: 'http://localhost:8080',
23 |
24 | /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
25 | trace: 'on-first-retry',
26 | },
27 |
28 | /* Configure projects for major browsers */
29 | projects: [
30 | {
31 | name: 'chromium',
32 | use: { ...devices['Desktop Chrome'] },
33 | }
34 | ],
35 |
36 | /* Run your local dev server before starting the tests */
37 | webServer: {
38 | command: 'npm run start',
39 | url: 'http://localhost:8080',
40 | reuseExistingServer: !process.env.CI,
41 | cwd: ".."
42 | },
43 | });
44 |
--------------------------------------------------------------------------------
/_img/layers_mask.svg:
--------------------------------------------------------------------------------
1 |
2 |
39 |
--------------------------------------------------------------------------------
/docs/changelog.txt:
--------------------------------------------------------------------------------
1 | V 0.1.0
2 | - Initial release
3 |
4 | V 0.1.1
5 | - Bugfixes
6 | - Additional palettes
7 | - Duplicate Frame
8 | - ReOrder Frame
9 | - pixelated circle tool
10 |
11 | V 0.1.2
12 | - Resize image: option for smooth rescale or pixelated rescale
13 | - UAE window is now draggable and resizable
14 | - fill in gaps in draw tool on fast mouse moves
15 | - Additional palettes and pagination for long palettes
16 | - UI to change Alchemy script parameters
17 | - smudge tool
18 | - bugfixes for Amiga Color Icons
19 |
20 | V 0.1.3
21 | - color cycling support
22 | - HSV mode and other palette editing improvements
23 | - PBM support (Thanks Michael)
24 | - navigate palette and frames with arrow keys
25 | - load files from url and other url parameter commands
26 | - presentation mode
27 | - support for saving indexed color PNGs
28 | V 0.1.4
29 | - palette locking
30 | - spray tool
31 | - text tool
32 | - rotsprite and mapped-smooth rotation
33 | - Better touch screen support on Android
34 | - pressure sensitivity support for stylus
35 | - smear/blur tools
36 | V 0.1.5
37 | - Load/Save Brushes
38 | - support for 12 and 9 bit color depths (Amiga OCS / Atari ST)
39 | - animated GIF import/export
40 | - IFF ANIM import
41 | - Grid tool
42 | - Autosave current image in local storage
43 | - resizable sidebar panels
44 | - improved Save Dialog with options
45 | - Option to save as JPG (yeah... I caved)
--------------------------------------------------------------------------------
/_script/ui/ui.js:
--------------------------------------------------------------------------------
1 | import Input from "./input.js";
2 | import {$div} from "../util/dom.js";
3 | import Menu from "./menu.js";
4 | import Toolbar from "./toolbar.js";
5 | import Editor from "./editor.js";
6 | import Cursor from "./cursor.js";
7 | import Sidepanel from "./sidepanel.js";
8 | import Contentpanel from "./contentpanel.js";
9 | import StatusBar from "./statusbar.js";
10 | import PaletteList from "./components/paletteList.js";
11 | import EventBus from "../util/eventbus.js";
12 | import {COMMAND, EVENT} from "../enum.js";
13 |
14 | let UI = function(){
15 | let me = {}
16 | let container;
17 |
18 | me.init = function(){
19 | container = $div("container");
20 | document.body.appendChild(container);
21 | Cursor.init();
22 | Input.init();
23 | Menu.init(container);
24 | Toolbar.init(container);
25 | StatusBar.init(container);
26 | Sidepanel.init(container);
27 | Contentpanel.init(container);
28 | PaletteList.init(container);
29 | Editor.init(container);
30 |
31 | window.addEventListener("resize",()=>{
32 | EventBus.trigger(EVENT.UIresize);
33 | },{passive:true});
34 | }
35 |
36 | me.fuzzy = function(value){
37 | if (container) container.classList.toggle("fuzzy",value)
38 | }
39 |
40 |
41 | me.getContainer = function(){
42 | return container;
43 | }
44 |
45 | me.inPresentation = function(){
46 | return document.body.classList.contains("presentation");
47 | }
48 |
49 | EventBus.on(COMMAND.PRESENTATION,()=>{
50 | document.body.classList.toggle("presentation");
51 | })
52 |
53 | return me;
54 | }();
55 |
56 | export default UI;
--------------------------------------------------------------------------------
/_script/ui/statusbar.js:
--------------------------------------------------------------------------------
1 | import {$div} from "../util/dom.js";
2 | import EventBus from "../util/eventbus.js";
3 | import {EVENT, COMMAND} from "../enum.js";
4 |
5 | let StatusBar = (()=>{
6 | let me = {};
7 | let container;
8 | let toolTip;
9 | let permaTip;
10 | let permaTips = {}
11 | let overide = false;
12 |
13 | me.init = (parent)=>{
14 | container = $div("statusbar","",parent);
15 | permaTip = $div("permatip","",container);
16 | toolTip = $div("tooltip","",container);
17 | }
18 |
19 | me.setToolTip = (text)=>{
20 | if (overide) return;
21 | toolTip.innerHTML = text;
22 | }
23 |
24 | me.overideToolTip = (text)=>{
25 | overide = true;
26 | toolTip.innerHTML = text;
27 | }
28 |
29 | EventBus.on(EVENT.penOnlyChanged, (active)=>{
30 | permaTips.pen = active;
31 | setPermaTips();
32 | })
33 |
34 | EventBus.on(EVENT.paletteLockChanged, (active)=>{
35 | permaTips.paletteLock = active;
36 | setPermaTips();
37 | })
38 |
39 | EventBus.on(COMMAND.RECORDINGSTART, ()=>{
40 | permaTips.recording = true;
41 | setPermaTips();
42 | })
43 |
44 | EventBus.on(COMMAND.RECORDINGSTOP, ()=>{
45 | permaTips.recording = false;
46 | setPermaTips();
47 | })
48 |
49 | function setPermaTips(){
50 | permaTip.innerHTML = "";
51 | if (permaTips.pen) permaTip.innerHTML += "Pen mode ";
52 | if (permaTips.paletteLock) permaTip.innerHTML += "Palette lock ";
53 | if (permaTips.recording) permaTip.innerHTML += "● Recording ";
54 | permaTip.classList.toggle("active",!!permaTip.innerHTML);
55 | }
56 |
57 | return me;
58 | })();
59 |
60 | export default StatusBar;
--------------------------------------------------------------------------------
/_style/main.scss:
--------------------------------------------------------------------------------
1 | @import "var";
2 |
3 | html {
4 | box-sizing: border-box;
5 | overflow: hidden;
6 | }
7 | *, *:before, *:after {
8 | box-sizing: inherit;
9 | }
10 |
11 | body{
12 | background-color: $background-color;
13 | font-family: sans-serif;
14 | font-size: 14px;
15 | height: 100%;
16 | margin: 0;
17 | padding: 1px;
18 | user-select: none;
19 | -moz-user-select: none;
20 | -webkit-user-select: none;
21 | -webkit-touch-callout: none;
22 | }
23 |
24 | .container{
25 | position: relative;
26 | height: 100%;
27 | background-color: $background-color;
28 |
29 | &.fuzzy{
30 | pointer-events: none;
31 | filter: blur(2px);
32 | }
33 | }
34 |
35 | h1.error{
36 | text-align: center;
37 | color: white;
38 | font-size: 24px;
39 | font-weight: 100;
40 | margin: 50px auto;
41 | width: 50%;
42 |
43 | a{
44 | color: white;
45 | }
46 | }
47 |
48 | .spinner{
49 | position: absolute;
50 | top: 40%;
51 | left: 50%;
52 | margin-left: -25px;
53 | width: 50px;
54 | height: 50px;
55 | border: 5px solid rgba(255, 255, 255, 0.3);
56 | border-top: 5px solid white;
57 | border-radius: 50%;
58 | animation: spin 1s linear infinite;
59 |
60 | }
61 |
62 |
63 |
64 | @import "scrollbar";
65 | @import "forms";
66 | @import "range";
67 | @import "menu";
68 | @import "contextMenu";
69 | @import "toolbar";
70 | @import "statusbar";
71 | @import "sidepanel";
72 | @import "contentpanel";
73 | @import "paletteList";
74 | @import "editor";
75 | @import "visualAids";
76 | @import "selection";
77 | @import "cursor";
78 | @import "modal";
79 | @import "fileBrowser";
80 | @import "gallery";
81 | @import "uae";
82 | @import "mobile";
--------------------------------------------------------------------------------
/_script/alchemy/dots.js:
--------------------------------------------------------------------------------
1 | let process = function(source,target){
2 | let expose = {
3 | dotRadius:{min:1,max:50,value:5},
4 | radiusJitter:{min:0,max:50,value:5},
5 | positionJitter:{min:0,max:100,value:50},
6 | alpha:{min:0,max:100,value:10}
7 | };
8 |
9 | let ctx=source.getContext("2d");
10 | let w = source.width;
11 | let h = source.height;
12 | target.clearRect(0,0,target.canvas.width,target.canvas.height);
13 | target.drawImage(source,0,0);
14 |
15 | let data = ctx.getImageData(0,0,w,h);
16 | let d = data.data;
17 |
18 | function dot(){
19 | let x = Math.floor(Math.random()*w);
20 | let y = Math.floor(Math.random()*h);
21 | let color = getColor(x,y);
22 | target.fillStyle = toRGBA(color,expose.alpha.value/100);
23 | splash(x,y,expose.dotRadius.value,expose.positionJitter.value,expose.radiusJitter.value);
24 | }
25 |
26 | function getColor(x,y){
27 | let index = (y*w+x)*4;
28 | return [d[index],d[index+1],d[index+2]];
29 | }
30 |
31 | for (let i = 0;i<500;i++){
32 | dot();
33 | }
34 |
35 | function splash(x,y,radius,jitter,jitterRadius){
36 | jitterRadius =jitterRadius||jitter;
37 | for (let i = 0; i<20; i++){
38 | let _x = x + Math.random()*jitter - jitter/2;
39 | let _y = y + Math.random()*jitter - jitter/2;
40 | let _r = radius + Math.random()*jitterRadius - jitterRadius/2;
41 | if (_r<1) _r=1;
42 | target.beginPath();
43 | target.arc(_x, _y, _r, 0, 2 * Math.PI, false);
44 | target.fill();
45 | }
46 | }
47 |
48 | function toRGBA(color,alpha){
49 | return "rgba("+color[0]+","+color[1]+","+color[2]+","+alpha+")"
50 | }
51 | }
52 |
53 |
54 | export default process;
--------------------------------------------------------------------------------
/_script/alchemy/lines.js:
--------------------------------------------------------------------------------
1 | let process = function(source,target){
2 | let expose = {
3 | lineCount:{min:1,max:1000,value:500},
4 | curve:{min:0,max:50,value:0},
5 | horizontalShift:{min:5,max:100,value:35},
6 | verticalShift:{min:-50,max:50,value:2},
7 | };
8 |
9 | let w = source.width;
10 | let h = source.height;
11 | target.clearRect(0,0,target.canvas.width,target.canvas.height);
12 | target.drawImage(source,0,0);
13 |
14 | function lineSet(color,alpha){
15 | let x = Math.floor(Math.random()*w)-expose.horizontalShift.value/2+5;
16 | let y = Math.floor(Math.random()*h);
17 |
18 | let x_offset = expose.horizontalShift.value + Math.random()*10;
19 | let y_offset = -(expose.verticalShift.value) + Math.random()*2;
20 |
21 | if (expose.curve.value){
22 | let hx = (w/2-x)/2;
23 | let hy = y/h;
24 |
25 | y_offset = Math.random()*hx * hy * expose.curve.value/10;
26 | y_offset = Math.round(y_offset);
27 | }
28 |
29 | let dist = 4;
30 | for (let i=0;i<4;i++){
31 | let d = dist*i;
32 | line(x,y+d,x+x_offset,y+y_offset+d,toRGBA(color,alpha/(1<{
44 | tick.now = newtime;
45 | tick.elapsed = tick.now - tick.then;
46 |
47 | if (tick.elapsed > tick.fpsInterval) {
48 | tick.then = tick.now - (tick.elapsed % tick.fpsInterval);
49 | tick.tickFunction();
50 | }
51 | })
52 | }
53 | }
54 | }
55 |
56 | function isTicking(){
57 | for (let key in running){
58 | if (running[key]) return true;
59 | }
60 | return false;
61 | }
62 |
63 | return me;
64 | }();
65 |
66 | export default Animator;
--------------------------------------------------------------------------------
/_script/alchemy/mediansmoove.js:
--------------------------------------------------------------------------------
1 | /* Median blurs an image while applying some sine smoothing waves
2 | * Experimental and cpu intensive - might crash from time to time
3 | * Steffest
4 | * */
5 |
6 | let process = function(source,target){
7 | let w = source.width;
8 | let h = source.height;
9 | target.clearRect(0,0,target.canvas.width,target.canvas.height);
10 | target.drawImage(source,0,0);
11 |
12 | function fakeBlur(strength){
13 | // draws layers on top of each other with small
14 | target.globalAlpha = 0.1;
15 | for (let y = -strength; y <= strength; y += 2) {
16 | for (var x = -strength; x <= strength; x += 2) {
17 | // Apply layers
18 | target.drawImage(this.element, x, y);
19 | if (x>=0 && y>=0) {
20 | target.drawImage(this.element, -(x-1), -(y-1));
21 | }
22 | }
23 | }
24 | target.globalAlpha = 1;
25 | }
26 |
27 | function smoove(color,alpha){
28 | let x = Math.floor(Math.random()*w);
29 | let y = Math.floor(Math.random()*h);
30 |
31 | let x_len = 35 + Math.random()*10;
32 | let y_len = -2 + Math.random()*2;
33 |
34 | let dist = 4;
35 | for (let i=0;i<4;i++){
36 | let d = dist*i;
37 | line(x,y+d,x+x_len,y+y_len+d,toRGBA(color,alpha/(1<About
2 |
3 |
4 |
DPaint.js is a web based image editor modeled after the legendary Deluxe Paint.
5 | It's main purpose is to be used as a tool for creating pixel art, but it can also be used for general image editing.
6 |
7 |
It has a sweet spot for Amiga file formats: it can read and write all Amiga Icon formats and read/write Amiga IFF Images.
8 | You can even read/write files directly from ADF disk files and preview your work instantly in the "real" Deluxe Paint! (on an embedded emulated Amiga)
9 |
10 |
11 | It initially was made as a modern icon-editor for Amiga icons, but it grew into a fully featured image editor with
12 |
13 |
14 |
15 |
Layers
16 |
Selections
17 |
Masks
18 |
Effects and filters
19 |
Multiple undo/redo
20 |
Copy/Paste from any other image program or image source
21 |
Super fine color reduction tools
22 |
Customizable dither tools
23 |
And much more ...
24 |
25 |
26 |
27 |
It runs in your browser, works on any system and works fine on touch-screen devices like iPads.
28 | It is written in 100% plain JavaScript and is completely open source.
29 | It's 100% free, no ads, no tracking, no accounts, no nothing.
30 | All processing is done in your browser, no data is sent to any server.
6 | You are using safari, right? (or another IOS browser)
7 | Safari doesn't support Canvas filters.
8 | I might one day implement them in plain JavaScript, but currently I'm not spending too much time on all the weird and crippling quirks of Safari.
9 | Please use a modern browser like Chrome, Firefox or Edge, or at least one that doesn't actively tries to hold back the web.
10 |
11 |
12 |
Dude, When I copy and paste an image, I loose transparency
13 |
14 | Yes very often you do...
15 | This is mainly an issue with Photoshop on Windows, which doesn't save the transparency information in the clipboard in a standard way.
16 | Weirdly enough, Photoshop on Mac does preserve transparency in copy/paste.
17 | As a workaround, you can first save your file as PNG and import that instead.
18 |
19 |
20 |
Dude, what's up with this Deluxe Paint bullsh*t, it's nothing like it.
21 |
22 | I mean: the toolbox is even on the wrong side!
23 | Yep. It's certainly not a remake of Deluxe Paint, but it's heavily inspired by it, regarding Amiga spirit and pixel handling.
24 | I like to think of as "What if Deluxe Paint was made today?"
25 | Besides: Deluxe Paint on Atari has the tools at the bottom, blasphemy!
26 | If you're looking for a more faithful recreation of Deluxe Paint, check out PyDPainter.
27 |
31 | Yes.
32 | Download the Lospec Palette as PNG, open that image in DPaint.js.
33 | Next to that, you can extract the palette from any image by selecting the menu Palette -> From image.
34 |
35 |
36 |
How do I save Amiga Icons in the "New Icon" format?
37 |
38 | Don't.
39 | The "New Icon" format was a hacky and messy way to solve a problem 30 years ago, but nowadays there are far better solutions.
40 | Save your icons as "Color Icon" (or "Glow Icon") and use a proper icon library on your Amiga.
41 | Please stop using the "New Icon" format, the sooner it fades out, the better.
42 | DPaint.js can read New Icons, but write support is not planned.
43 |
44 |
45 |
How do I save images as JPEG?
46 |
47 | Apologies for being opinionated and pedantic.
48 | DPaint.js is targeted at pixel art and lo-spec images.
49 | While the JPEG format is fine for high resolution photos,
50 | it's not a good match if you want to preserve each pixel of an image because it's a lossy compression that blurs and alters the image.
51 | Therefore, DPaint.js doesn't provide an option to save as JPEG.
52 |
11 | Simplified BSD license - Copyright 2002-2023 by Tanner Helland
12 | https://github.com/tannerhelland/PhotoDemon/blob/main/Forms/Adjustments_BlackAndWhite.frm
13 | https://tannerhelland.com/2012/12/28/dithering-eleven-algorithms-source-code.html
14 |
15 | Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
16 |
17 | Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
18 | Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
19 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES,
20 | INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED.
21 | IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY,
22 | OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA,
23 | OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
24 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
25 | THE POSSIBILITY OF SUCH DAMAGE.
26 |
27 |
5 | 
4 |