Computer Science LearnITWithMrC ⛯ Year 7 Year 8 Year 9 GCSE
Responsive image

Computer Graphics

What am I Learning today?

I am learning how to explain what a pixel is and how pixels relate to an image and the way images are displayed.
I am learning how to describe how the size of a bitmap image in pixels (width x height) is known as the image resolution.
I am learning how to explain how the number of pixels and colour depth can affect the file size of a bitmap image.

Knowledge Organiser

×

Lesson

Task 1 - Getting Organised - PowerPoint Click to see more

  1. Set your Learning Objectives to red.

  2. We are going to save all of our work for this topic into this PowerPoint.

    3. To download the PowerPoint by clicking on the image below

  3. Save your PowerPoint as 'Lesson 5'

Task 2 - Making Colours using Hexadecimal Click to see more

Hex Colour Puzzle

Task

    Decryption
  1. Using the eyedropper and more fill colours tool in PowerPoint like in the image above. Work out the RGB numbers of the colours of the squares below:
    2. Decryption
  2. Click on the image below and use the colour tool to convert the RGB colour codes to hexadecimal. Write the codes in your PowerPoint.
  • When you are finished don't forget to screenshot your answers to your powerpoint

    • Task 3 - 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

    1. 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
    • Hello (ouo)/

    Task 4 - 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 5 - Crossword puzzle Click to see more

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

    Task 6 - 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

    • Binary

    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 7 - 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 8 - 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 what a pixel is and how pixels relate to an image and the way images are displayed.

    • I have a basic understanding of how I can explain what a pixel is and how pixels relate to an image and the way images are displayed. with a little help from my teacher
    • I can show my teacher that I can explain what a pixel is and how pixels relate to an image and the way images are displayed. without their help.
    • I can explain what a pixel is and how pixels relate to an image and the way images are displayed. 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: representing_data

    Student_Comment_5 not found

    Task Notes/Comments - Add here Click to see more

    Comments/Notes

    Copyright © 2013 - 2026 LearnITwithMrC