update example image and project description
This commit is contained in:
parent
a19bf5cd17
commit
d378f9680e
26
README.md
26
README.md
@ -1,21 +1,21 @@
|
|||||||
# Assignment - Pixel Art Maker
|
# Assignment - Pixel Art Maker
|
||||||
|
|
||||||
Create your own Pixel Art Maker, which lets you click on a grid to "paint" pixel art. The interface is completely up to you, but it could look something like this:
|
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:
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
It boils down to this: A user selects a color and clicks on pixels to paint them with the selected color.
|
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 the order of steps that I would implement:
|
Here's an example of a workflow that could be implemented:
|
||||||
|
|
||||||
1. Get 10 or so small divs on the screen
|
1. Create 10 or so small, white, square divs to start making a pixel canvas.
|
||||||
2. Add an event listener to each so that when I click on a pixel it turns red
|
2. Add an event listener to each so that when clicked on, that div's background turns red.
|
||||||
3. Add a color palette div with 2 colors(red and purple)which allows the user to set the current "paintbrush" color instead of it always being set to red
|
3. 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.
|
||||||
4. Add the rest of the standard rainbow colors to the color palette
|
4. 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.)
|
||||||
5. Add enough divs to fill up the entire screen
|
5. Add more divs to expand the size of your pixel canvas.
|
||||||
|
|
||||||
**Bonus Challenges:**
|
### **Bonus Challenges:**
|
||||||
|
|
||||||
* Add a color picker which allows the user to select any color. Look into the HTML5 color input.
|
* Pencil tool: Add the ability to click and drag to draw pencil lines
|
||||||
* Add the ability to click and drag to paint multiple pixels at once
|
* 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 paintbucket tool which allows a user to drag a box across the screen and paint all pixels that fall inside that box
|
* Add a color picker which allows the user to select any color. Look into HTML5 color inputs
|
||||||
|
BIN
pixel-art-maker-alt.png
Normal file
BIN
pixel-art-maker-alt.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 72 KiB |
Loading…
x
Reference in New Issue
Block a user