Emojis, Bitmap and Vector
- 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
- 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 Imageb = (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 Imageb = (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 Imageb = (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 Imageb = (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.sizefor 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 Imageb = (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.sizefor 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 Imageb = (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.sizefor 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()
- 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.

- Correct the size and positioning of 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.
<!-- Mouth --><pathd="M75,50 A40,100 2 0,1 125,100"fill=nonestroke=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”
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”
Representing Data with Images and Sound: Bringing 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