Year 7 · Y7.5 Vector Graphics · Lesson 2

Stretch tasks Working with vector shapes

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: Working with vector shapes

Working with vector shapes: the questions

Quiz Challenge, round 1: Quiz Blitz

  1. What is the fill of a shape?

    • Its position
    • The colour inside it
    • Its outline
    • Its size
  2. What is the stroke of a shape?

    • Its shadow
    • Its layer
    • Its outline
    • The colour inside it
  3. Which tool draws your own paths, with curves?

    • The fill tool
    • The zoom tool
    • The pen or Bezier tool
    • The rectangle tool
  4. The shape drawn most recently sits on top of the others.

    • True
    • False
  5. You want a circle to sit behind a square. What do you do?

    • Lower the circle
    • Raise the circle
    • Group them
    • Delete the square
  6. What does Group do?

    • Cuts one shape out of another
    • Changes their colour
    • Joins shapes so they move and scale together
    • Merges shapes into one
  7. Which operation keeps only the overlapping part of two shapes?

    • Union
    • Difference
    • Exclusion
    • Intersection
  8. How do you make a crescent moon?

    • Draw a square
    • Cut one circle out of another with Difference
    • Union two circles
    • Group two circles
  9. Which TWO operations combine shapes into new shapes?

    Tick 2.

    • Difference
    • Raise
    • Lower
    • Zoom
    • Union
  10. Dragging shapes by eye is the best way to centre them.

    • True
    • False
  11. Which operation merges shapes into one? One word.

  12. Which operation keeps everything except the overlap?

    • Union
    • Group
    • Exclusion
    • Intersection

Quiz Challenge, round 2: Quick Fire

  1. Explain the difference between fill and stroke. [2 marks]

  2. Explain the difference between Group and Union. [2 marks]

  3. Why should you use the align tools instead of dragging things into place by eye? [2 marks]

  4. What is node editing? [2 marks]

Quiz Challenge, round 3: Big Think

  1. Explain how you would make a crescent moon logo using vector operations. [4 marks]

  2. Describe the four operations that combine shapes, and explain why designers use them. [6 marks]

This or That: tick the right answer

  1. You change a shape's outline to red. Which did you change?

    • Stroke
    • Fill
  2. Two shapes need to move together but stay separate. Which do you use?

    • Group
    • Union
  3. Which operation cuts the top shape out of the one beneath?

    • Difference
    • Union
  4. A new shape covers an old one. How do you bring the old one to the front?

    • Lower it
    • Raise it
  5. Which tool draws a smooth custom curve?

    • The rectangle tool
    • The pen or Bezier tool
  6. Intersection keeps which part?

    • Everything except the overlap
    • Only the overlap
  7. What makes a design look professional quickly?

    • Using every colour available
    • Aligning things properly
  8. Which lets you move the individual points of a shape?

    • Node editing
    • Grouping

Memory Match: match each term to its meaning

TermMeaning
A Fill1 Cuts the top shape out of the one beneath
B Stroke2 Merges shapes into one
C Union3 The colour inside a shape
D Difference4 The outline of a shape
E Intersection5 Keeps everything except the overlap
F Exclusion6 Keeps only the overlap
Answers

Round 1: Quiz Blitz

  1. The colour inside it Fill is the colour inside a shape. Stroke is the outline.
  2. Its outline Stroke is the outline.
  3. The pen or Bezier tool The pen, or Bezier, tool draws custom paths.
  4. True Shapes stack in the order they are drawn.
  5. Lower the circle Lower sends a shape down the stacking order.
  6. Joins shapes so they move and scale together Grouped shapes stay separate but move together. Union merges them into one.
  7. Intersection Intersection keeps the overlap and nothing else.
  8. Cut one circle out of another with Difference A crescent is one circle with another circle cut out of it.
  9. Union; Difference Union and Difference change the shapes. Raise and Lower only change the stacking order.
  10. False The align and distribute tools centre things exactly, which makes a design look professional.
  11. union Union merges shapes into one.
  12. Exclusion Exclusion removes the overlapping part and keeps the rest.

Round 2: Quick Fire

    • Fill is the colour inside the shape
    • Stroke is the outline
    Model answer

    Fill is the colour inside a shape. Stroke is the outline around it.

    • Group keeps the shapes separate but moves them together
    • Union merges them into one shape
    Model answer

    Group joins shapes so they move and scale together, but they stay separate. Union merges them into one single shape.

    • They are precise, so things are exactly centred
    • The design looks more professional
    Model answer

    The align tools centre things exactly, which is more precise than by eye, and properly centred work looks far more professional.

    • Moving the individual points
    • That make up a shape, to change its outline
    Model answer

    Node editing means moving the individual points that make up a shape, to change its outline.

Round 3: Big Think

    • Draw a circle with the ellipse tool
    • Draw a second circle overlapping the first
    • Make sure the cutting circle is on top
    • Use Difference to cut it out
    • Set the fill and stroke
    Model answer

    First draw a circle with the ellipse tool. Then draw another circle overlapping it, slightly to one side, and make sure it is on top. Select both and use Difference, which cuts the top circle out of the one beneath, leaving a crescent. Finally set the fill colour and the stroke.

    • Union merges shapes into one
    • Difference cuts the top shape out of the one beneath
    • Intersection keeps only the overlap
    • Exclusion keeps everything except the overlap
    • This is how most professional logos are made
    • Complex shapes can be built quickly and precisely from simple ones
    • An example, such as a crescent moon
    Model answer

    Union merges shapes into one. Difference cuts the top shape out of the one beneath. Intersection keeps only the overlapping part, and Exclusion keeps everything except the overlap. Designers use them because complex shapes can be built quickly and precisely from simple shapes, which is how most professional logos are made. For example, a crescent moon is one circle with another subtracted from it.

This or That

  1. Stroke Stroke is the outline. Fill is the colour inside.
  2. Group Group keeps them separate. Union would merge them into one shape.
  3. Difference Difference subtracts the top shape from the one beneath.
  4. Raise it Raise moves a shape up the stacking order.
  5. The pen or Bezier tool The pen tool draws your own paths, with curves.
  6. Only the overlap Intersection keeps the overlap. Exclusion keeps everything else.
  7. Aligning things properly Centring and aligning things precisely is one of the fastest ways to look professional.
  8. Node editing Node editing moves the points that make up a shape.

Memory Match

  • A 3 Fill: The colour inside a shape
  • B 4 Stroke: The outline of a shape
  • C 2 Union: Merges shapes into one
  • D 1 Difference: Cuts the top shape out of the one beneath
  • E 6 Intersection: Keeps only the overlap
  • F 5 Exclusion: Keeps everything except the overlap