pixel-art-maker/README.md

72 lines
4.5 KiB
Markdown
Raw Normal View History

2016-05-13 06:54:47 -07:00
# Pixel Art Maker
2015-11-03 15:37:31 -07:00
2016-05-15 10:34:15 -07:00
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.
2015-11-03 15:37:31 -07:00
![Example of Pixel Art Maker](pixel-art-maker-alt.png)
2015-11-03 15:37:31 -07:00
2016-05-13 06:58:21 -07:00
More specifically, your pixel art maker should allow a user to do the following.
2015-11-03 15:37:31 -07:00
2016-05-15 07:59:27 -07:00
1. Start with a blank canvas of pixels.
2016-05-15 10:34:15 -07:00
1. Select a brush color from a palette of colors.
1. Paint the pixels on the canvas using the brush color.
2016-05-13 13:54:53 -07:00
1. Repeat step 2.
2015-11-03 15:37:31 -07:00
2016-05-13 06:54:47 -07:00
Here's a development workflow that we recommend you use.
2016-05-13 07:12:00 -07:00
1. Fork and clone this repository.
2016-05-13 06:54:47 -07:00
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. Create a small palette of two colors (e.g. red and blue) below the canvas using more `div` tags.
2016-05-15 10:34:15 -07:00
1. Add an event listener to these `div` tags so when clicked the brush color is saved.
2016-05-13 06:54:47 -07:00
1. Expand the dimensions of the pixel canvas.
2016-05-15 07:55:59 -07:00
1. Expand the palette with more colors. (i.e. red, orange, yellow, green, blue, purple, brown, gray, black, white, etc.)
2016-05-15 10:34:15 -07:00
1. Expand the palette with a brush color indicator.
2016-05-13 07:10:57 -07:00
1. Improve the look and feel of the canvas and color palette. Be careful not to break your program's behavior!
2016-05-13 07:01:26 -07:00
**TIP:** Check out [this handy tool](http://www.colors.commutercreative.com/grid/) to see a list of all the named colors in CSS.
2015-11-03 15:37:31 -07:00
2016-05-13 07:07:26 -07:00
### Bonus 1
2015-11-03 15:37:31 -07:00
2016-05-15 10:34:15 -07:00
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.
2016-05-15 09:47:31 -07:00
2016-05-15 10:39:40 -07:00
**TIP:** The [`mouseenter` event](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter) doesn't bubble up the DOM tree.
2016-05-15 09:12:16 -07:00
2016-05-15 10:36:01 -07:00
### Bonus 2
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).
2017-02-13 10:45:16 -07:00
### Bonus 3
Research [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage) and make a way to Save and Load a drawing. Research [JSON.stringify](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) and [JSON.parse](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) as a way to put the drawing into LocalStorage.
2017-02-22 13:40:24 -06:00
### Bonus 4
Create a fill tool that will [flood fill](https://en.wikipedia.org/wiki/Flood_fill) boundaries with a chosen paint color.
2018-06-12 14:32:39 +05:30
### Bonus 5
Load a PNG file directly onto the canvas using these resources:
- [FileReader.readAsDataUrl](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL)
- [Canvas.drawImage](https://stackoverflow.com/questions/8751020/how-to-get-a-pixels-x-y-coordinate-color-from-an-image?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa)
- [Image.onload](https://stackoverflow.com/questions/12354865/image-onload-event-and-browser-cache?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa)
- [FileReader example](https://stackoverflow.com/questions/3146483/html5-file-api-read-as-text-and-binary?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa)
- [Get pixel color from Canvas](https://stackoverflow.com/questions/6735470/get-pixel-color-from-canvas-on-mouseover?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa)
2017-02-13 10:45:16 -07:00
2016-05-13 07:58:03 -07:00
### Deployment
2016-11-11 16:23:08 -08:00
Read over the following articles to learn how to deploy this web site to Surge.
2016-05-13 07:58:03 -07:00
- [Getting started with Surge](http://surge.sh/help/getting-started-with-surge)
- [Remembering a domain](http://surge.sh/help/remembering-a-domain)
2016-11-11 16:23:08 -08:00
A good domain name for this project is `USERNAME-pixel-art-maker.surge.sh` where `USERNAME` is your GitHub username in all **lowercase** letters. Once deployed and everything works as you expect, copy your Surge URL and paste it at the top of your GitHub repository's page.
2018-06-11 10:36:21 +05:30
### Resources
- [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
- [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className)
- [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style)
- [querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
- [appendChild](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild)