Pushing pixels since 2015
This is the source code for the pixel editor app tutorial series on PhotoGabble.
Published Jan 21st 2015: Demo | Tutorial | Code
In this, the first part, we set up the application loop and complete writing functionality to understand mouse input on the canvas.
Published Jan 28th 2015: Demo | Tutorial | Code
In part two we build the data structure for a 16x16 image with 1bit colour depth and complete by having a canvas that we can draw on.
Published Feb 4th 2015: Demo | Tutorial | Code
In part three we build the 16x16 live preview so that you can see how your picture looks at its native resolution.
Published May 8th 2015: Demo | Tutorial | Code
In part four we expand the images data structure to expand the colour depth and add a colour swatch interface for selecting colours.
Published June 6th 2018: Demo | Tutorial | Code | PR
In part five we work on saving the image as a png and begin refactoring the code to keep things tidy.
Published June 11th 2018: Demo | Tutorial | Code | PR
In part six we refactor the JavaScript code into ES6 and use babel to build the project.
Unpublished: Demo | Tutorial | Code | PR
In part seven we add the paint bucket tool and an undo history.
Unpublished: Demo | Tutorial | Code | PR
In part eight we write a simple PHP backend that is able to consume the image data structure as a string and store to a public library the png. We also write the functionality into our javascript app to be able to load from the public library.