CS48 : Drawing shapes

Bitmap images are OK but sometimes, only a vectorised one will do! Only AQA.

We are learning ...
  • About vector graphics
So that we can ...
  • Explain how vector images represent images using a list of objects
    - Give examples of typical properties of those objects
  • Use vector graphic primitives to create a simple vector graphic
  • Compare vector and bitmap graphics and their appropriate uses

Activity 1 Vector Graphics 

An vector graphics image is made up from simple geometric shapes ...

Task 1.1
 What makes a flower a flower?


Using Inkscape : You will find the file flower.svg in the resources for the lesson.  Open the file with Inkscape (be patient - Inkscape takes ages to load) and inspect the elements in the image.  Don't save image when you have finished messing. 

In Notepad++ : Now open the file using Notepad++ (or equivalent). Describe how the image is stored (it's actually stored in XML format). You should identify and print out a portion of the 'image' from this text file representation and stick it alongside the flower image in your notebooks so you can see how the image is constructed. Hint : Right click on one of the shapes and choose 'properties', you will see a 'path ID' in the 'Object Properties' panel which you will be able to find in the XML file.

Click to enlarge


Now download the file flower.bmp from the resources for the lesson and try to open this using Notepad++. Good luck deciphering this file!

In your notebooks : Write about the difference between the way in which a bitmap file is stored and the way that a vector file is stored.

OUTCOME : An image of the flower, a portion of the 'text' of the image printed from a text editor and a comparison between the storage methods for a vector and a bitmap.

Vector images are stored as a drawing list – a series of instructions on exactly how to draw the objects that make up the image.  The drawing list for an element of an vector graphic contains attributes which describe the properties of the element.

For instance ...
  • line(startx, starty, endx, endy, strokecolor, strokewidth)
  • circle(originx, originy, radius, fillcolour, strokecolour, strokewidth)

Task 1.2
 Interpreting a drawing list

Using a suitable grid (you may use grid.pdf to do this or get some graph paper from your teacher), construct the vector shape using the following drawing list.  The origin for this image is in the bottom left corner ...
  • circle(2,2,2,false,black,0.5);
  • circle(10,2,2,false,black,0.5);
  • line(2,2,4,8,black,0.1);
  • line(4,8,5,8,black,0.1);
  • line(3,5,5,2,black,0.1);
  • line(3,5,10,2,black,0.1);
  • line(5,2,10,2,black,0.1);
  • line(7,2,8,5,black,0.1);
  • line(7,5,9,5,red,0.5);
OUTCOME : Mungo's favourite form of transport!

Activity 2 Vector VS Bitmap 

Yes, we studied bitmap images as part of the AS course and learnt a lot about them, but what are the differences between bitmap images and vector images and when is each appropriate and when are they not?


Task 2.1
 Vector vs Bitmap ... an Infographic

Using Google Images : You know I love a good Infographic because, to be honest, you know they are great (and also very popular). Therefore, after studying 5 Infographics about Vector and Bitmap images from this Google Images search, I would like you to create your own! Boom!

Using Inkscape : However, just to make things a little more challenging, I would like you to use Inkscape (or an equivalent vector graphics package) to do it. Not Paint. Just Inkscape.

You should make sure you include ...
  • Features of bitmap images
  • Features of vector images
  • Situations when each type would be appropriate

OUTCOME : An infographic about the difference between vector and bitmap images.

Extension Activities 

What about these?
  • What is a Bezier curve and why is it so important in the field of vector graphics?  Use PowerPoint or any other vector graphics software to draw a shape using Bezier curves.  Try to experiment with different point types; corner, smooth and sharp.

What's next?

Before you hand your book in for checking, make sure you have completed all the work required and that your book is tidy and organised. Your book will be checked to make sure it is complete and you will be given a spicy grade for effort.