ordehi / pixelattitude

Pixel art editor in plain web

Pixelattitude

It's like your attitude on pixels or something.

Pixelattitude is a Pixel Art Editor built on plain web technologies, that is, HTML, CSS, and JavaScript. It allows creating pixel art in a predefined grid, saving and loading the art from localStorage, and exporting that art as a PNG.

Goals and motivations

The main goal of this project is to learn more about different web APIs, as well as approaches we can use to build something like this.

Another important goal is to learn more about Open Source by implementing an OSS project of my own, hopefully working with other developers along the way to both learn from and help them learn.

It's also important to me to keep this constained to HTML, CSS, JS with as few third-party libraries as possible, ideally none. The reason being that I want to learn how to build these features without relying on too much third-party code (besides probably styles :D).

I also don't want to move this project to using something like Canvas (probably taking hints from this) or SVG even though I know it would likely make more sense to do so. I have plans to fork this once it's in a 'good enough' state, and rebuild it to use either of those technologies as its own project.

Getting Started

Go to the 'Code' dropdown at the top and click on 'Download ZIP', unzip all files to the same directory and open index.html to start painting cells!

Built With

• Just plain old HTML, CSS, JS, and a sprinkle of love for learning
• Open Props - Used for styles, thanks Adam!

Contributing

Please read CONTRIBUTING.md for details on the process for submitting pull requests to us. Be aware that there's a contribution checklist (found in that file) you should include in any issues/pull requests you submit. Also, read our Code of Conduct.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Joshua Ordehi - Initial work

Contributors

• Pratham Saraf

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Acknowledgments

• The initial inspiration for this project came from The Odin Project's Etch-a-Sketch project, and my usage of the awesome Aseprite software.
• Thanks to Adam Argyle and all their contributors for their work on Open Props, beautiful design system that's super easy to use. Saved me having to style this myself, for now.
• Thanks to PurpleBooth for the README and CONTRIBUTING templates.

pixelattitude's Issues

Make toolbar responsive

The toolbar isn't responsive on smaller screens or resized windows. We should make it responsive.

Add GUI buttons for undo and redo

Undo and redo work by using CTRL + Z and CTRL + Y respectively, but it's a good idea to have GUI buttons to indicate the possibility of undo/redo. This just needs us to attach the undo and redo functions to a couple of buttons.

Modularize project

We need to modularize the project so it's easier to work on and organize. We can use JS modules for this with import/export statements.

MDN docs:

import
export

Trying to load when there's no save file throws a console error

You get a console error about not being able to split a null value when there's no saved localStorage grid. This happens because the loadGridFromLocalStorage function runs regardless of having a save file.

Use Uint8ClampedArray for every operation that involves storing and exporting the grid

Currently, Uint8ClampedArray is only used when exporting the grid to PNG through Canvas, while the cell ID attributes and their backgroundColor style properties are stringified and saved to localStorage when needed.

Ideally, we'd use Uint8ClampedArray for everything, including mapping colors to the grid, saving to localStorage, exporting to PNG, etc.

To do this, we'll have to change the way the grid is built and how colors are stored, the Uint8ClampedArray needs to have number of cells * 4 bytes (for example, 32 * 32 * 4) to accommodate all the RGBA values, so we will need identifiers for cells that are able to access the array at the start of each new cell store which is previous cell index + 4 up until array.length - 4 since each cell consists of 4 indexes.

Credit any sources for the ideas used in the repo

While I was building this, I took some ideas from StackOverflow and extended them, I need to credit the authors because it just feels right to do so.

Further modularization of repo

Still need to move code to separate modules, mainly stuff in app.js, but also need to review the approach for separation in every file.

Can't paint over painted cells

If a cell is painted, you can't paint over it with another color unless you restart the grid.

This is likely related to the debounce that checks if a cell has already been painted during the currentRun using dataset.run. Needs light investigation.

Add short documentation tooltip or dropdown to tell user about keyboard shortcuts and functionality

The app has functions like being able to erase with right-click, CTRL+Z/Y for undo/redo, etc. These need to be documented somewhere in the app so it's possible to know they're there. Ideally, there would be a place in the app that users can always refer to for these tips.

Make cursor show currently selected color on cell hover

Similar to other pixel art editors, I want to make this show the currently selected color on any hovered cell, only while the cell is being hovered (the cell will not retain the color unless clicked), this will be extended once we work on implementing custom cursors for different tools.

Ability to save more than one grid to localStorage

Currently, only one grid is saved on localStorage under the item 'pixel', but it would be nice to be able to save multiple grids instead of overwriting the last one. This means we need a way to select which grid we're loading, initially going by name and properties, but ideally having a graphical interface that shows a grid preview in the future.