Educators & parents: You can do this Hour of Code Activity as a class or students can work on it independently. If you have any questions or need help, email info@codespeaklabs.com.
You can create art with computer science!
In the following Hour of Code activity, we will show you how artists can create their own design tools using coding. We will be creating a pixel art art editor that uses user input to create art by choosing different colors that get placed in a grid of pixels.
Do you recognize this retro pixel character design?
What is pixel art?
Pixel art is a digital art technique that combines many individual squares of solid color (pixels) to create one cohesive artwork. You probably recognized the Super Mario design above from early video games.
Notice how the character is designed entirely using individual squares. By the end of this Hour of Code activity, you'll be able to create your own custom pixel art designs. Let's get started!
Part 1:
First, we’ll set up our background and buttons.
Part 2:
Next, we'll learn how to use x and y cooordinates to set up an array to store each pixel.
Part 3:
Now we'll use the look function, which takes looks at the x and y position of your mouse and saves the color at that position so we can start creating our designs.
Congratulations!
You coded your own Pixel Art Editor that lets you save all your digital designs!
Click here to try out the PIxel Art Editor we'll be coding! Choose a color from the colored pencils at the bottom of the screen and click on the pixels in the grid to create your art.
Want to code another project?
Code along with the video below to learn how to Make a Magic 8 Ball in Bitsbox.
If you enjoyed coding with us, check out our YouTube channel for more free coding projects like these! Go to youtube.com/codespeaklabs and be sure to like, subscribe and click the bell icon to get notified of our future videos!