GithubHelp home page GithubHelp logo

pixel-art-maker's Introduction

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 paint pixel art. The interface is completely up to you, but it could look something like this.

Example of Pixel Art Maker

More specifically, your pixel art maker should allow a user to do the following.

  1. Start with a blank canvas of pixels.
  2. Select a brush color from a palette of colors.
  3. Paint the pixels on the canvas using the brush color.
  4. Repeat step 2.

Here's a development workflow that we recommend you use.

  1. Fork and clone this repository.
  2. Create a small, 2x2 grid canvas made up of white, square div tags with a border.
  3. Add an event listener to each div so when clicked the background turns red.
  4. Create a small palette of two colors (e.g. red and blue) below the canvas using more div tags.
  5. Add an event listener to these div tags so when clicked the brush color is saved.
  6. Expand the dimensions of the pixel canvas.
  7. Expand the palette with more colors. (i.e. red, orange, yellow, green, blue, purple, brown, gray, black, white, etc.)
  8. Expand the palette with a brush color indicator.
  9. 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 to see a list of all the named colors in CSS.

Bonus 1

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.

TIP: The mouseenter event doesn't bubble up the DOM tree.

Bonus 2

Add a color picker which allows the user to select any brush color using the <input type="color"> tag and the change event.

Bonus 3

Research LocalStorage and make a way to Save and Load a drawing. Research JSON.stringify and JSON.parse as a way to put the drawing into LocalStorage.

Bonus 4

Create a fill tool that will flood fill boundaries with a chosen paint color.

Deployment

Read over the following articles to learn how to deploy this web site to Surge.

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.

Resources

pixel-art-maker's People

Contributors

ryansobol avatar avantgardnerio avatar dannyfritz avatar iansmith89 avatar zubaird avatar craigquincy avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.