Emojis, Bitmap and Vector

You will now put what we discussed in the last step to use by creating some emoji. This will be a hands-on activity that you can use in the classroom to demonstrate some of the theory we have just covered.

We can create images as either bitmap or vector images. To see how this works, you will:

• Create a bitmap emoji using Python
• Create a vector emoji using HTML

Activity: make a bitmap emoji

• Create a new Python program in repl.it or your IDE.
• Start by importing the PIL module from the pillow package:

from PIL import Image

Note – see the previous step if you haven’t installed pillow.

• • Next, define some colours. I’m defining the colours black and yellow using the variables b and y. You can define more colours if you want to.

from PIL import Image

b = (0,0,0)
y = (255,255,0)

• • Now it’s time to create your emoji using a list. I’m creating a smiley face, but you can make your own design if you like. Each letter in the list represents the colour of the pixel in the image you’re creating.

from PIL import Image

b = (0,0,0)
y = (255,255,0)

face = [[b,b,b,b,y,y,b,b,b,b],
 [b,b,y,y,y,y,y,y,b,b],
 [b,y,y,y,y,y,y,y,y,b],
 [b,y,y,b,y,y,b,y,y,b],
 [y,y,y,y,y,y,y,y,y,y],
 [y,y,b,y,y,y,y,b,y,y],
 [b,y,y,b,b,b,b,y,y,b],
 [b,y,y,y,y,y,y,y,y,b],
 [b,b,y,y,y,y,y,y,b,b],
 [b,b,b,b,y,y,b,b,b,b]]

• • The next bit of code creates a new blank image that is 10 pixels by 10 pixels. This is the same width and height as the face data structure. You can also store that width and height as variables.

from PIL import Image

b = (0,0,0)
y = (255,255,0)

face = [[b,b,b,b,y,y,b,b,b,b],
 [b,b,y,y,y,y,y,y,b,b],
 [b,y,y,y,y,y,y,y,y,b],
 [b,y,y,b,y,y,b,y,y,b],
 [y,y,y,y,y,y,y,y,y,y],
 [y,y,b,y,y,y,y,b,y,y],
 [b,y,y,b,b,b,b,y,y,b],
 [b,y,y,y,y,y,y,y,y,b],
 [b,b,y,y,y,y,y,y,b,b],
 [b,b,b,b,y,y,b,b,b,b]]

smiley = Image.new("RGB", (10,10))
width, height = smiley.size

• • Then set each pixel’s RGB value to the value at the corresponding position in your list. You can easily do this with a nested loop that works through the image, row by row, and pixel by pixel within each row.

from PIL import Image

b = (0,0,0)
y = (255,255,0)

face = [[b,b,b,b,y,y,b,b,b,b],
 [b,b,y,y,y,y,y,y,b,b],
 [b,y,y,y,y,y,y,y,y,b],
 [b,y,y,b,y,y,b,y,y,b],
 [y,y,y,y,y,y,y,y,y,y],
 [y,y,b,y,y,y,y,b,y,y],
 [b,y,y,b,b,b,b,y,y,b],
 [b,y,y,y,y,y,y,y,y,b],
 [b,b,y,y,y,y,y,y,b,b],
 [b,b,b,b,y,y,b,b,b,b]]

smiley = Image.new("RGB", (10,10))
width, height = smiley.size

for row in range(height):
 for col in range(width):
 smiley.putpixel((col, row), face[row][col])

• • Don’t worry if you are not very familiar with Python and the code is confusing. The important point is that each letter in the list stands for a single pixel in the final image. To see your image, use smiley.save('smiley.jpg') if you’re on repl.it, or smiley.show() if you’re using Mu.

from PIL import Image

b = (0,0,0)
y = (255,255,0)

face = [[b,b,b,b,y,y,b,b,b,b],
 [b,b,y,y,y,y,y,y,b,b],
 [b,y,y,y,y,y,y,y,y,b],
 [b,y,y,b,y,y,b,y,y,b],
 [y,y,y,y,y,y,y,y,y,y],
 [y,y,b,y,y,y,y,b,y,y],
 [b,y,y,b,b,b,b,y,y,b],
 [b,y,y,y,y,y,y,y,y,b],
 [b,b,y,y,y,y,y,y,b,b],
 [b,b,b,b,y,y,b,b,b,b]]

smiley = Image.new("RGB", (10,10))
width, height = smiley.size

for row in range(height):
 for col in range(width):
 smiley.putpixel((col, row), face[row][col])

smiley.save('smiley.jpg')
smiley.show() #only on Mu

• • Click on the run > button to see your image.

• • The image is probably a little too small to see properly. You set the image size to 10 pixels by 10 pixels, and you can use the line smiley = smiley.resize((500,500)) to make the image larger.

from PIL import Image

b = (0,0,0)
y = (255,255,0)

face = [[b,b,b,b,y,y,b,b,b,b],
 [b,b,y,y,y,y,y,y,b,b],
 [b,y,y,y,y,y,y,y,y,b],
 [b,y,y,b,y,y,b,y,y,b],
 [y,y,y,y,y,y,y,y,y,y],
 [y,y,b,y,y,y,y,b,y,y],
 [b,y,y,b,b,b,b,y,y,b],
 [b,y,y,y,y,y,y,y,y,b],
 [b,b,y,y,y,y,y,y,b,b],
 [b,b,b,b,y,y,b,b,b,b]]

smiley = Image.new("RGB", (10,10))
width, height = smiley.size

for row in range(height):
 for col in range(width):
 smiley.putpixel((col, row), face[row][col])

smiley = smiley.resize((500,500))

smiley.save('smiley.jpg')
smiley.show()

Note: if you’re using repl.it, sometimes the update image doesn’t show when you run your code repeatedly. To fix this, delete the image in the left-hand side bar, and then refresh the web page.

• • Now that you have made your first emoji, why not see what other images you can generate? For example, add more colours, or make an image that has different dimensions.

Activity: make a vector emoji

Now you’ll create a vector emoji in HTML. One of the main things to focus on, in comparison to the bitmap emoji, is how paths (coordinates) are used. While creating emoji features like the mouth, it becomes very obvious how vectors coordinates plot points.

• • Open the starter trinket.

As you can see, the face does not look quite right. While correcting the face, you are going to learn how vector paths work.

• • Correct the size and positioning of the eyes.

The following section of code defines the eyes:

<!-- Eyes -->
<circle r=10 fill='black' cx=30 cy=30 />
<circle r=10 fill='black' cx=80 cy=30 />

r defines the radius of the circle representing each eye, and cx and cy define the centre coordinates for each eye.

Change this code to put the eyes in the correct place with the correct size.

• • Correct the mouth.

The following section of code defines the mouth:

 <!-- Mouth -->
 <path
 d="M75,50 A40,100 2 0,1 125,100"
 fill=none
 stroke=black stroke-width=5 />

The d attribute is used to create the vector path, within which each item is either be an instruction or a coordinate.

• • Correct the path’s start coordinates:

     

    d = “M75, 50 A40, 100 2 0, 1 125, 100”

     

If you imagine drawing the path with a pen, the M command says “pick up the pen and move to these positions on the page”.

• • Correct the shape of the mouth (an arc):

     

    d = “M75, 50 A40, 100 2 0, 1 , 125, 100”

     

A40, 100 2 0, 1 determines the shape of the arc, including its x radius, y radius, the angle, and the direction.

• Correct the end coordinates of the path:

  d = “M75, 50 A40, 100 2 0, 1 125, 100”

Please share your emoji creations in the comments below. Also discuss how you might adapt or extend these activities for the classroom to make them easier or more challenging.