sigonasr2/pixel-art-maker
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Complete the painting analogy

Browse Source
This commit is contained in:
Ryan Sobol 2016-05-15 10:34:15 -07:00
parent 30be834e7e
commit 0e30df2147
1 changed files with 7 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
README.md
View File

@ -1,14 +1,14 @@
# Pixel Art Maker # Pixel Art Maker
In this exercise, you'll create your own pixel art maker which will allow a user to choose colors from a palette and then draw pixel art. The interface is completely up to you, but it could look something like this. In this exercise, you'll create your own pixel art maker which will allow a user to choose colors from a palette and then paint pixel art. The interface is completely up to you, but it could look something like this.
![Example of Pixel Art Maker](pixel-art-maker-alt.png) ![Example of Pixel Art Maker](pixel-art-maker-alt.png)
More specifically, your pixel art maker should allow a user to do the following. More specifically, your pixel art maker should allow a user to do the following.
1. Start with a blank canvas of pixels. 1. Start with a blank canvas of pixels.
1. Select a color from a palette. 1. Select a brush color from a palette of colors.
1. Paint the pixels on the canvas using the selected color. 1. Paint the pixels on the canvas using the brush color.
1. Repeat step 2. 1. Repeat step 2.
Here's a development workflow that we recommend you use. Here's a development workflow that we recommend you use.
@ -17,26 +17,21 @@ Here's a development workflow that we recommend you use.
1. Create a small, 2x2 grid canvas made up of white, square `div` tags with a border. 1. Create a small, 2x2 grid canvas made up of white, square `div` tags with a border.
1. Add an event listener to each `div` so when clicked the background turns red. 1. Add an event listener to each `div` so when clicked the background turns red.
1. Create a small palette of two colors (e.g. red and blue) below the canvas using more `div` tags. 1. Create a small palette of two colors (e.g. red and blue) below the canvas using more `div` tags.
1. Add an event listener to these `div` tags so when clicked the current "brush" color is remembered. 1. Add an event listener to these `div` tags so when clicked the brush color is saved.
1. Expand the dimensions of the pixel canvas. 1. Expand the dimensions of the pixel canvas.
1. Expand the palette with more colors. (i.e. red, orange, yellow, green, blue, purple, brown, gray, black, white, etc.) 1. Expand the palette with more colors. (i.e. red, orange, yellow, green, blue, purple, brown, gray, black, white, etc.)
1. Expand the palette with a current color indicator so the user knows which color was last selected. 1. Expand the palette with a brush color indicator.
1. Improve the look and feel of the canvas and color palette. Be careful not to break your program's behavior! 1. Improve the look and feel of the canvas and color palette. Be careful not to break your program's behavior!
**TIP:** Check out [this handy tool](http://www.colors.commutercreative.com/grid/) to see a list of all the named colors in CSS. **TIP:** Check out [this handy tool](http://www.colors.commutercreative.com/grid/) to see a list of all the named colors in CSS.
### Bonus 1 ### Bonus 1
Add a color picker which allows the user to select any color using the [`<input type="color">` tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color) and the [`change` event](https://developer.mozilla.org/en-US/docs/Web/Events/change). Add a color picker which allows the user to select any brush color using the [`<input type="color">` tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color) and the [`change` event](https://developer.mozilla.org/en-US/docs/Web/Events/change).
### Bonus 2 ### Bonus 2
Add tools that augment the type of user interaction Improve the mouse so it behaves like a real paintbrush. In other words, allow the user to paint by clicking and dragging across the canvas. For this, you'll need a combination of the `mousedown`, `mouseenter`, and `mouseup` events.
- Pencil tool: Click and drag across the canvas to paint pixels.
- Rectangle tool: Click and drag across the canvas to paint all pixels that fall inside a rectangular selection.
For these tools, you'll need a combination of the `mousedown`, `mouseenter`, and `mouseup` events.
**TIP:** The [`mouseenter` event](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter) doesn't bubble to up the DOM tree. **TIP:** The [`mouseenter` event](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter) doesn't bubble to up the DOM tree.