Part 2: Designing and Coloring Your Ocean Creature
In this lesson, you will learn how to convert pixel art into code that can be displayed on a SenseHat. The SenseHat is an add-on board for the Raspberry Pi that includes an 8x8 LED matrix, perfect for displaying simple images and animations. By the end of this lesson, you will be able to create your own custom pixel art designs and bring them to life on the SenseHat.
We will start by understanding the basics of pixel art and how it translates to code. You will learn how to create a grid structure that represents the LED matrix on the SenseHat, and how to assign colors to individual pixels within this grid. We will then explore different coding techniques to translate your pixel art designs into code that can be run on the SenseHat, allowing you to see your creations come to life in the physical world.
The first and arguably the most important step of this project is to design your creature. In this example, we have designed a whale. Since you only have an 8x8 pixel “screen” on which to design your creature, you will need to be creative. It can be hard to visualize what an array of letters translates to in terms of an LED array, so if you do not have a SenseHat and Raspberry Pi setup handy, then this is where the Trinket emulator can be very useful. We have customized this link to be useful for creature design.
Here is the code for our whale, which is the creature we will use throughout this tutorial. See if you can follow along with what is happening in this code snippet, even if the exact syntax doesn’t fully make sense. The code is explained below.
from sense_hat import SenseHat
sense = SenseHat()
d = (255, 255, 255)
f = (25, 25, 112)
g = (0, 191, 255)
b = (0, 0, 0)
image = [
f, f, f, g, g, g, g, g,
f, f, g, g, f, g, g, f,
f, f, f, f, f, f, g, g,
f, g, g, g, g, g, g, g,
g, g, g, g, g, g, d, d,
g, b, g, g, g, d, d, f,
g, g, g, g, d, d, f, f,
f, g, g, d, d, f, f, f]
sense.set_pixels(image)Let’s go line by line through what is happening in this code.
In the first line, we are importing: bringing in code written by someone else so that we can use it in our code. The SenseHat device has specific Python commands that have been programmed by the folks at the Raspberry Pi Foundation to work with the SenseHat’s various sensors and its LED array. If we did not import this, we would have to write all of this ourselves within this program.
Next, we create a variable called “sense” and turn it into an instance of the SenseHat() class. When we create a variable named “sense,” we could turn it into anything: a number, a string of characters, or we could turn it into an instance of this SenseHat() thing we have imported and, suddenly, it inherits all of the characteristics of what it means to be a SenseHat (which is defined by the code we imported). If we had made “sense” into a number, it would inherit number characteristics: we could add to it, divide it, etc. Since we made it into an instance of a SenseHat(), we are going to do some SenseHat() things with it. If you consider the entire library of code that we imported, it is all for an object called a SenseHat and it can perform all these cool tasks with sensors and LED lights. When we refer to creating an “instance,” we mean this specific individual of a class. Using the metaphor of numbers again, if we declared “sense = 7” instead of “sense = SenseHat()” the number 7 is the instance of the category of numbers. We can talk about all these number methods like dividing and multiplying, but they are all theoretical until we have an actual number to work with. Same with SenseHat(). We need to actually create one of these things in order to start using it. The instance we have created in this code is called “sense.” For the record, you can name this instance whatever you want. Instead of “sense,” you could name it “my_very_first_sensehat_object” if you want.
The next four lines of code are defining some colors using the RGB model, which stands for “Red, Green, Blue.” Each value corresponds to the amount of those respective primary colors in the color you are trying to create. Each R, G, or B value can go up to 255. When you include 0, this allows for 256 values in each position. With this many values, you can create 16,777,216 unique colors. You can name these colors whatever you like, but as you will see shortly, it can be helpful to name them a single letter as you design your creature.
Finally we get to our actual design. Here we create another variable named “image” and turn it into an array. This array has 64 values in it representing the 64 LEDs in our 8x8 LED array. The code does not care if we break this into eight different lines of code like we have done above—it could read it as one long line of 64 letters. But it is easier for us to see the design if we separate it visually into 8 lines of code. Here is where giving our colors single letter variable names comes in handy in viewing our design. It’s already pretty challenging to see a whale in this sea of letters, but imagine how much harder it would be with words!
Lastly, we use one of the methods from the SenseHat() class to light up the LEDs with the colors we have defined and in the pattern we have named “image.”
You are now ready to start designing your creature! Before diving into the creation of your ocean creature GIF for the Ocean Pi Project, it's important to plan your design. Start by researching different types of ocean creatures to gather inspiration and ideas. Consider the colors, shapes, and movements of various creatures to help guide your design process. Think about how you can incorporate these elements into your GIF to make it unique and interesting.