MskProdComputing

Year 7 · Y7.5 Vector Graphics · Lesson 1

Stretch tasks Bitmap against vector

Task 1

Quiz Challenge

A quiz game against four computer players, then short and long written answers.

  1. Quiz Blitz12 questions against the clock
  2. Quick Fire4 short answers
  3. Big Think2 long answers

About 20 minutes

Task 2

This or That

Pixel the cat asks 8 questions. Each has two answers: pick the right one.

  • Two answers to every question
  • A fish treat for every right answer
  • Streaks win Pixel shades, then a party hat

About 4 minutes

Task 3

Memory Match

Flip the cards two at a time to match each term card to its meaning card.

  • 12 cards: each term has a meaning
  • One peek at every card
  • Combo points for pairs found in a row

6 pairs, about 4 minutes

The games need JavaScript. Every question is below, with the answers at the end.

Read the lesson: Bitmap against vector

Bitmap against vector: the questions

Quiz Challenge, round 1: Quiz Blitz

  1. What is a bitmap image made of?

    • A grid of pixels
    • Mathematical shapes
    • Lines of code
    • Layers of text

  2. What is a vector image made of?

    • A grid of pixels
    • Photographs
    • Sound waves
    • Instructions and mathematical shapes

  3. A vector logo becomes blocky when you enlarge it.

    • True
    • False

  4. Which is best stored as a bitmap?

    • A logo
    • An icon
    • A road sign design
    • A photograph

  5. Which TWO are vector file types?

    Tick 2.

    • BMP
    • SVG
    • AI
    • JPG
    • PNG

  6. Why does a bitmap become blocky when it is enlarged?

    • Its colours change
    • There is no extra detail to reveal, so the pixels just get bigger
    • The file gets damaged
    • Vectors are added to it

  7. Which usually has the smaller file for a simple logo?

    • Vector
    • Bitmap
    • They are always the same size
    • A photograph

  8. Each shape in a vector image can be selected and edited separately afterwards.

    • True
    • False

  9. A school needs its logo on a badge and on a huge banner. Which format should it use?

    • JPG, because it is smaller
    • BMP, for the best detail
    • Vector, so it stays sharp at both sizes
    • Bitmap, because photos print better

  10. Which three-letter vector file type is used on web pages?

  11. Four bitmaps use the same colour depth. Put them in order of file size, smallest first.

    Number these 1 to 4.

    • 1000 x 1000 pixels
    • 4000 x 3000 pixels
    • 100 x 100 pixels
    • 200 x 200 pixels

  12. What does a vector file actually store?

    • A copy of every pixel
    • A photograph
    • The printer settings
    • The instructions for drawing the picture

Quiz Challenge, round 2: Quick Fire

  1. Explain why a vector image stays sharp at any size. [2 marks]

  2. Give two reasons why a logo should be made as a vector. [2 marks]

  3. Why are photographs stored as bitmaps rather than vectors? [2 marks]

  4. Name two bitmap file types and two vector file types. [2 marks]

Quiz Challenge, round 3: Big Think

  1. A bakery's logo was saved as a small bitmap. When it is printed on the side of a van, it looks blocky. Explain why, and what the bakery should have done. [4 marks]

  2. Compare bitmap and vector graphics. [6 marks]

This or That: tick the right answer

  1. You zoom right in on a photo and see little squares. What are they?

    • Vectors
    • Pixels

  2. Which stays sharp on a giant poster?

    • A vector logo
    • A small bitmap logo

  3. Which of these file types is a bitmap?

    • PNG
    • SVG

  4. Which is better stored as a vector?

    • A road sign design
    • A photo of a sunset

  5. In a vector image, can you move one shape without affecting the rest?

    • No, it is all one grid
    • Yes, each shape is separate

  6. What decides a bitmap's file size?

    • Its number of shapes
    • Its number of pixels

  7. What does a vector file store for a circle?

    • Its position, size and colours
    • Every pixel inside it

  8. Why can a simple vector logo have a smaller file than the same logo as a bitmap?

    • Vectors cannot store any colours
    • A few shapes need less data than every pixel

Memory Match: match each term to its meaning

TermMeaning
A Bitmap1 Shapes stored as instructions
B Vector2 Stays sharp at any size
C Pixel3 A vector file type used on web pages
D Pixelated4 One coloured square of a bitmap
E Scalable5 A grid of pixels
F SVG6 Blocky, because the pixels are enlarged
Answers

Round 1: Quiz Blitz

  1. A grid of pixels A bitmap stores a colour for every pixel in a grid.
  2. Instructions and mathematical shapes A vector stores instructions such as: draw a circle here, this size, this colour.
  3. False Vectors are redrawn from the maths at the new size, so they stay sharp.
  4. A photograph Photographs have colour changing constantly across them, which shapes cannot capture well.
  5. SVG; AI SVG and AI store shapes. JPG, PNG and BMP are bitmaps.
  6. There is no extra detail to reveal, so the pixels just get bigger Enlarging a bitmap stretches the same pixels over a bigger area.
  7. Vector A few shapes take far less data than the colour of every pixel.
  8. True A vector keeps every shape as an object you can move and edit.
  9. Vector, so it stays sharp at both sizes Vectors scale to any size without losing quality.
  10. svg SVG, Scalable Vector Graphics, works in every web browser.
  11. 100 x 100 pixels → 200 x 200 pixels → 1000 x 1000 pixels → 4000 x 3000 pixels A bitmap's file size depends on its number of pixels.
  12. The instructions for drawing the picture That is why it can be redrawn at any size.

Round 2: Quick Fire

    • It stores instructions for shapes, not pixels
    • The shapes are redrawn at the new size
    Model answer

    A vector stores instructions for drawing shapes, not pixels. When the size changes, the shapes are simply redrawn from the maths at the new size.

    • It stays sharp at any size
    • It usually has a smaller file
    • Each shape can be edited separately
    Model answer

    It stays sharp at any size, from a badge to a banner, and each shape can be edited separately.

    • A photo's colour changes constantly, with lots of irregular detail
    • It would need far too many shapes to describe
    Model answer

    A photograph has colour that changes constantly across it, with lots of irregular detail. Describing that with shapes would need far too many shapes, so a grid of pixels works better.

    • Bitmap types, such as JPG and PNG
    • Vector types, such as SVG and EPS
    Model answer

    Bitmap: JPG and PNG. Vector: SVG and EPS.

Round 3: Big Think

    • A bitmap is a grid of pixels
    • Enlarging it just makes each pixel bigger, as there is no extra detail
    • They should have made the logo as a vector
    • A vector is stored as shapes and instructions
    • So it is redrawn sharply at any size
    Model answer

    A bitmap is a grid of pixels. Enlarging it to fit a van just makes each pixel bigger, because there is no extra detail to show, so it looks blocky. They should have made the logo as a vector, which is stored as shapes and instructions, so it is redrawn at any size and stays sharp.

    • A bitmap is a grid of pixels
    • A vector is made of shapes and instructions
    • A bitmap becomes blocky when enlarged
    • A vector stays sharp at any size
    • Bitmaps are best for photographs
    • Vectors are best for logos, icons and diagrams
    • Vectors usually have smaller files and can be edited shape by shape
    Model answer

    A bitmap is a grid of pixels, while a vector is made of shapes and instructions. When a bitmap is enlarged it becomes blocky, but a vector stays sharp at any size because it is redrawn. Bitmaps are best for photographs, where the colour changes constantly, while vectors are best for logos, icons and diagrams. Vectors usually have smaller files for simple images, and each shape can be edited separately.

This or That

  1. Pixels A bitmap is a grid of pixels, and zooming in shows each one.
  2. A vector logo Vectors are redrawn at the new size. Bitmaps just stretch their pixels.
  3. PNG PNG stores pixels. SVG stores shapes.
  4. A road sign design Simple shapes and flat colours suit vectors. Photos need pixels.
  5. Yes, each shape is separate A vector keeps every shape as its own object.
  6. Its number of pixels The colour of every pixel is stored, so more pixels means a bigger file.
  7. Its position, size and colours A vector stores instructions: draw a circle here, this size, with this fill and this outline.
  8. A few shapes need less data than every pixel A handful of shape instructions takes far less data than the colour of every pixel.

Memory Match

  • A 5 Bitmap: A grid of pixels
  • B 1 Vector: Shapes stored as instructions
  • C 4 Pixel: One coloured square of a bitmap
  • D 6 Pixelated: Blocky, because the pixels are enlarged
  • E 2 Scalable: Stays sharp at any size
  • F 3 SVG: A vector file type used on web pages