Pixel Art Editor

Created: 10/30/23

Tags:

ART 101 | JavaScript Coding Run Program Look at Code Example Export Code For Image 3

I created an editor script for an assignment to reduce time in coding and also create a visual display for what it will look like. The assignment was to create a 2D array and make a bitmap out of numbers to represent what the bit's color would be.

My program would take the art you created and then print the neccessary code required for the assignment. I did not fully create a script that worked, but I made it so you could copy and paste the code into the person's script.

The main things I worked on for this assignment was improving the editor window compared to previous editors I have made in the class. For the sliders, I cleaned up the over all look to it and made the interaction more smooth with less jolting. One of the main things I did was create an input system for the values where you could click on it and edit it with keyboard numbers as you would in other softwares.

The Pallete System was also a fun one to make as it would add and remove colors that were currently on the board and add a button to the editor and allow the user to switch between colors quickly. It also can scale the pallete if the colors excede 9.

The code printer was fun to make as it would create a string array that added all the numbers in the grid array together and also create the code for the colors as well and then create a .txt file and send it to the downloads folder.

This was a really fun project I made for myself and am happy to say that it helped classmates with creating their bitmaps faster.

img Pick a Size img Creates grid with editor img Create Pixel Art then "Print Code"