Bitmaps and Vectors

What am I Learning today?

I am learning how to explain the difference between bitmap and vector images

I am learning how to describe how a bitmap represents an image using pixels and colour depth.

Knowledge Organiser

Lesson

Task 1 - Getting Organised - PowerPoint Click to see more

Set your Learning Objectives to red.
We are going to save all of our work for this topic into this PowerPoint.

To download the PowerPoint by clicking on the image below

Save your PowerPoint as 'Lesson 4'

Task 2 - Vector Based Graphics Click to see more

Computers can use two types of graphics:

Bitmaps: A bitmap (or raster graphic) is a digital image composed of a matrix of dots. When viewed at 100%, each dot corresponds to an individual pixel on a display. In a standard bitmap image, each dot can be assigned a different colour.

Vector-based graphics: Unlike bitmap graphics, vector graphics are not made up of a grid of pixels. Instead, vector graphics are made of mathematical/geometric instructions known as “paths”. A path can be a line, a square, a triangle, or a curvy shape. A path is defined by a start and an end point, along with other points, curves, and angles along the way. These paths can be used to create simple drawings or complex diagrams.

SVG is a format used to create vector based graphics.

See the codepen below to see how the following graphic is created using SVG code.

Task

Click on “Edit on CODEPEN” in the top right corner to tweak this code and change this graphic.

See the Pen Vector Based Graphic by 101 Computing (@101Computing) on CodePen.

When you are finished don't forget to screenshot your new image into your powerpoint

Task 3 - Bitmap Versus Vector Click to see more

Understanding Bitmap Pictures

In order to understand computer graphics we need first to understand the differences between the two major graphic types: bitmap and vector images..

.Complete the “fill in the blank” activities as thiswill test your understanding of the characteristics of both types of graphics.

Task 3

Click on the image below to complete the activity for Bitmap and vector images

When you are finished don't forget to screenshot your answers to your powerpoint

Task 4 - Crossword puzzle Click to see more

Complete the Computer Graphics- Crossword by clicking on the image below

Task 5 - More Pixel art Click to see more

Creating Pixel Art

Create your own pixelart on a 16 x 16 grid

Click on the image below to go to pixilart.com

Task 4

Create your own pixel art and then download it

When you are finished don't forget to screenshot your answers to your powerpoint

Task 6 - Displaying your art in pygame Click to see more

Download the Pygame Template by clicking on the image below

Change the name of the file to your file name to display your 16 x 16 bmp image using python.

Run your code and you should see your image appear like this:

Task 7 - Lesson review Click to see more

Summing it all up

Lets look at the learning outcomes and decide which one best describes our current level of understanding :

Tick the one you feel is closest to your level

Learning Outcomes I need to learn how to explain the difference between bitmap and vector images

I have a basic understanding of how I can explain the difference between bitmap and vector images with a little help from my teacher
I can show my teacher that I can explain the difference between bitmap and vector images without their help.
I can explain the difference between bitmap and vector images independently and I can also explain it to others and can complete any extension tasks I am given.

🠜 Now update your learning objectivesClick on the Assessment image

My Notes: Data Representation

Student_Comment_5 not found