Emojis, Bitmap and Vector
Share this post
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
andy
. You can define more colours if you want to.
- Next, define some colours. I’m defining the colours black and yellow using the variables
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.
- 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
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, orsmiley.show()
if you’re using Mu.
- 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
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.
- 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
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”
-
Correct the path’s start coordinates:
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”
-
Correct the shape of the mouth (an arc):
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.
Share this post
Data Representation in Computing: Bring Data to Life

Data Representation in Computing: Bring Data to Life

Our purpose is to transform access to education.
We offer a diverse selection of courses from leading universities and cultural institutions from around the world. These are delivered one step at a time, and are accessible on mobile, tablet and desktop, so you can fit learning around your life.
We believe learning should be an enjoyable, social experience, so our courses offer the opportunity to discuss what you’re learning with others as you go, helping you make fresh discoveries and form new ideas.
You can unlock new opportunities with unlimited access to hundreds of online short courses for a year by subscribing to our Unlimited package. Build your knowledge with top universities and organisations.
Learn more about how FutureLearn is transforming access to education
Register to receive updates
-
Create an account to receive our newsletter, course recommendations and promotions.
Register for free