Skip to content

arrayinc/react_example

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Pixel Art Maker (PAM)

In the conclusion of the first sprint of Array's bootcamp, you will create a pixel art maker program that allows the user to design pixel art in a small grid on the website. They can choose colors from a palette, and then design art in an interface of your choosing!

By completion of the project, the users should be able to:

  1. Start with just a blank grid of squares with dimensions available in the UI.
  2. Choose a color from a generate color palette.
  3. Design what they need to on their grid by clicking the squares to fill them in with color.
  4. Repeat the previous steps.
  5. Save their design via a button and then load it later to be worked on later.

You are free to choose the amount of squares in the grid, and the overall design. Make sure your users are going to be able to design what they want on it!

Ahead of the Game: 1

The pixel art maker can be improved by turning it into a "true" canvas. This means that users will be able to hold down their mouse button and drag in order to paint over the squares rather than clicking each individual one. Research the following: mousedown, mouseenter and mouseup in order to accomplish this task.

Ahead of the Game: 2

Add a way for the user to input their own color code. They should be allowed to enter their color in either RGB or HEX values! It should then be added visually to the palette on the user interface for future usage.

Above and Beyond

If you've completed everything else and want other things to add to the project, here are several features that could be added!

  • Add a way to "undo" the user's last action.
  • Add a way for user's to "stretch" the canvas to a larger size on both the X and Y axis.
  • Add a way for the user to upload their own "cursor" for the paintbrush on the canvas.
  • Add a way for the user to upload a picture and have it be imported into your pixel art maker (ADVANCED).
  • Add a "template" section to your website allowing users to select templates before beginning (ADVANCED).
    • Add a couple of templates of pictures you've made on your own!
  • Add a way for the user to be able to print or share out their design with different buttons (ADVANCED).

About

components and props example

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published