You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1.5 KiB
1.5 KiB
Assignment - Pixel Art Maker
Create your own Pixel Art Paint Program, which lets you choose colors from a palette of your choice to "paint" pixel art. The interface is completely up to you, but it could look something like this:
A user should be able to click on a color from their palette, allowing them to then be able click on individual pixels in a canvas area to paint them.
Here's an example of a workflow that could be implemented:
- Create 10 or so small, white, square divs to start making a pixel canvas.
- Add an event listener to each so that when clicked on, that div's background turns red.
- Add a couple more square divs to make a palette. Begin with 2 background colors (red and blue), which allow the user to set the current "brush" color, instead of a pixel's background always turning red.
- Add the rest of the standard colors to your palette as well as an eraser. (Red, Orange, Yellow, Green, Blue, Purple, Black, Brown, White, etc.)
- Add more divs to expand the size of your pixel canvas.
Bonus Challenges:
- Color Palette: check out http://www.colors.commutercreative.com/grid/ for a list of all standard CSS colors
- Pencil tool: Add the ability to click and drag to draw pencil lines
- Selection tool: Add a tool which allows the user to drag across the screen and paint all pixels that fall inside the rectangular selection
- Add a color picker which allows the user to select any color. Look into HTML5 color inputs