Slides badge

Data Representation

Learning Intentions

  • Understand how to convert between denary and denary numbers

  • Understand the purpose of ASCII and how to represent it

  • Understand the two types of a computer graphics

Success Criteria

  • Be able to convert between binary and denary
  • Be able to explain the terms mantissa and exponent
  • Be able to explain how ASCII is used
  • Be able to explain how black and white images are represented
  • Be able to explain the difference between a bitmap and vector graphic

Denary numbers

  • Denary numbers are the numbers we work with every day. Den = 10, in other words we count in tens and have the following numbers available:
    0, 1, 2, 3, 4, 5, 6, 7, 8, 9

  • We use units that we call tens, hundreds, thousands, tens of thousands and so on.

  • We call denary base 10.

     

0

1

2

3

4

5

6

7

8

9

Denary numbers

  • For example, the number of 2385 can be broken down like this:

 

 

 

 

 

  • Each of these units can also be represented by:
1000s 100s 10s Units
2 3 8 5
103 102 101 100
2 3 8 5

But computers don't work in denary

  • Computers don't understand denary. Instead, they have their own system called binary.
  • Each binary digit, in say, creating a number, is called a bit.
  • A computer is called a two-state machine since it works using a bunch of switches being switched on and off called transistors.
  • A switch can be either on (1) or off (0)

Storage

  • 8 bits = 1 byte
  • 1024 bytes = 1 kibibyte (kb)
    1024 kibibytes = 1 mebibyte (mb)
    1024 mebibytes = 1 gibibyte (gb)
    1024 gibibytes = 1 tebibyte (tb)

Binary numbers

  • Binary numbers (bi meaning two, e.g. bicycle means two wheels) use just 0s and 1s.
  • They also use place values, but not in the same way. Because binary only has a 0 or a 1, binary is what we call base 2.
  • Place values are as follows:
23 22 21 20
1 0 1 0

An easier way to figure it out

  • 23 = 8
    22 = 4
    21 = 2
    20 = 1

23 22 21 20
8 4 2 1

Figuring out denary from a binary number

  • Let’s figure out what the binary number 1001 means in denary:

 

   

  • To do this, add each number with a 1 under it together, so 8 + 1. Total is 9. So 1001 = 9.

8 4 2 1
1 0 0 1

Example 1

  • Convert:

    1000 1000

    To denary.

Example 2

  • Convert:

    1100 1111

    To denary.

Example 3

  • Convert:

    0010 0100

    To denary.

Figuring out binary from a denary number

  • Reversing binary to give us a decimal number is a bit trickier. The placeholders are the same and should be put at the top. Hint: the leftmost placeholder should be no bigger than the denary number.

  • Let’s calculate the number 17:

     

16 8 4 2 1
1 0 0 0 1

Denary to binary

  • Now let’s calculate 35:




  • Double check it by adding all the numbers with a 1 under them together.​32 + 2 + 1 = 35

32 16 8 4 2 1
1 0 0 0 1 1

Example 1

  • Convert:

    28

    To 8-bit binary

Example 2

  • Convert:

    32

    To 8-bit binary

Example 3

  • Convert:

    254

    To 8-bit binary

Transform to binary:

  1. 33
  2. 19
  3. 28
  4. 73
  5. 109

Conversion questions

Transform to denary:

  1. 1011
  2. 10001000
  3. 00011111
  4. 1111
  5. 0110

Work through the calculations on the worksheet.

Range of values represented by a number of bits

  • If there is a limit to how many bits are available to store a number, e.g. 8 bits, then the largest number representation is will be restricted.
  • For example, the largest number representable by 8 bits will be 255. 
128 64 32 16 8 4 2 1
1 1 1 1 1 1 1 1

Range of values represented by a number of bits

  • Similarly, with 6 bits, the largest number representable is 63.
32 16 8 4 2 1
1 1 1 1 1 1

Range of values represented by a number of bits

  • An easy way to figure it out for any number is to get the next place value (e.g. with 6 bits, the next place value is 64) and then subtract 1 from it

 

 

 

 

 

 

64 - 1 = 63

32 + 16 + 8 + 4 + 2 + 1 = 63

64 32 16 8 4 2 1
0 1 1 1 1 1 1

Answer the following questions:

  1. How many bits are required to store the denary number 25?
  2. How many bits are required to store the denary number 32?
  3. What is the largest number that can be represented by 12 bits?
  4. What is the largest number that can be represented by 1 bit?

Review questions

Floating point

  • Floating point representation is also known as standard form.
  • If we have a number such as 54934.33239, we can represent this with a mantissa and an exponent.
\rlap{$\overbrace{\phantom{5.493433239}}^{mantissa}$}5.493433239\times10\underbrace{^{-4}}_{exponent}

This is the same number as 54934.33239

What is the mantissa for each of the following?

  1. 63.73
  2. 34.2
  3. 93412.3

What is the exponent for each of the following?

  1. 63.73 × 109
  2. 34.2 × 103
  3. 93412.3 × 104

Floating point

  • At National 5, you need to know:
    • A floating-point number is made of two parts called the mantissa and exponent
    • The mantissa dictates the precision of a number, the more bits allocated to the mantissa, the more precise a number can be
    • If you want to be store a large range of numbers then you need to allocate more bits to the storage of the exponent, as the exponent dictates the range of numbers that can be represented

Answer the following questions:

  1. What is the mantissa in 53.5 x 10-4?
  2. What is the value of the exponent in 54.78 x 104?
  3. How is a real number stored in a computer system?

Review questions

Past Paper Question

1500711

5

The current meter reading of 15007.11 would be stored in a computer system using floating point representation as shown below.

0.1500711 × 105

Identify the mantissa and exponent in the above floating-point representation.

(2 marks)

 

Mantissa

 

_________________________________________________________________

 

Exponent

 

_________________________________________________________________

Plenary

Pick up to 3 key words and provide a description for them.

  • precision
  • place value
  • mantissa
  • bit
  • range of numbers
  • exponent

ASCII

  • ASCII or American Standard Code for Information Interchange allows computers to store, represent and understand text. It is a character set.
  • ASCII was designed to standardise communication between operating systems and platforms.
  • At National 5 we look at Extended ASCII, which uses 8 bits to represent each character. The uppercase letter A is represented by the number 65.
  • If A is 65 in ASCII, then it's binary representation is 01000001.

ASCII: control characters

  • ASCII also features what are called control characters.
  • Control characters are keys on the keyboard that do not appear on the screen but perform some kind of action. For example, the delete key is a control character.

ASCII in Python

Here's a small Python program I've written to show some ASCII values:

Unicode

  • Unicode is another character set that is far more common these days.
  • Unicode expands ASCII, but the first 128 characters of Unicode are identical to ASCII.
  • Unicode (aka UTF-16) is a 16-bit code that can represent 65,536 different characters, much more than ASCII.
  • As a result of Unicode, we now have emoticons (👻🐹🐥🐣👀😂) available everywhere!
  • We also now have other symbols such as Japanese in one character set.

Answer the following questions:

  1. What is the main benefit of ASCII?
  2. How many bits are required for each character in Extended ASCII?
  3. Write the letter E in extended ASCII.
  4. What advantage does ASCII have over Unicode?

ASCII tasks

  1. Encode your name in ASCII

Bitmap and vector graphics

  • A bitmap graphic is a 2D array (this means it’s made of rows and columns to us) of pixels.
  • The total number of pixels going across (the width) and up and down (the height) is the resolution.
  • Increasing the resolution increases the file size.
  • If we scale a bitmap image to enlarge it, without changing resolution, it will lose quality and look blurry or pixilated. This is called resolution dependent.

Resolution

12 pixels * 5 pixels

24 pixels * 10 pixels

Resolution

Resolution

Pixels

  • Each pixel contains information about three different colour components: red, green and blue (RGB). The number of colour combinations with these three colour components gives us the maximum number of colours that each pixel can represent. The maximum number of colours representable is stored in bits and is called the colour depth.
  • Just like with the resolution, increasing the colour depth also increases the file size of an image file.
  • GIF files (if you remember) can represent up to 256 colours. 256 colours = colour depth of 8 or 8 bits per pixel (since 28 is 256).

Black and white images

  • A black and white picture is simple, a 1 represents a black pixel and a 0 a white pixel. This only requires 1 bit per pixel. Therefore the colour depth is 1 bit.

Answer the following questions:

  1. If a GIF image can represent 256 different colours, how many different colours can be represented in a 24-bit JPEG image?
  2. Explain what resizing a 24 x 24 image to 240 x 240 would do to an image
  3. Sandra decides to make a picture file smaller by reducing the colour depth, explain why she cannot reverse this once she has done this.
  4. In your own words, explain how black and white bitmap images are stored on a computer system.

Review questions

Vector Graphics

  • Vector graphics files store data about objects.
  • An object can have attributes such as outline colour, fill colour, x coordinate, y coordinate, outline width.
  • A common example of a vector graphics data type used today is the Scalable Vector Graphics (SVG) file format.

Vector Graphics

  • Vector graphics files store data about objects.
  • An object can have attributes such as outline colour, fill colour, x coordinate, y coordinate, outline width.
  • A common example of a vector graphics data type used today is the Scalable Vector Graphics (SVG) file format.

This is an SVG graphic

Vector Graphics

Vector Graphics

This is the same image as a bitmap

Vector Graphics

SVG

  • SVG is a web standard, much like HTML, CSS and JavaScript.
  • A web developer proficient in HTML, CSS and JavaScript will also likely be able to produce an SVG image easily.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 300 300">
  <polygon points="300,150 256.1,256.1 150,300 43.9,256.1 0,150 43.9,43.9 150,0 256.1,43.9" class="shape-element" fill="rgb(255, 0, 0)" style="stroke-width:3;stroke:rgb(0,0,255)"></polygon>
</svg>

Vector graphics

  • Since vector graphics, such as SVG, are stored as text files, they tend to have smaller file sizes.
  • However, they also require more computing power and must be redrawn (or repainted) by the computer every time they are opened.
  • Each object and its attributes can be edited independently of the others
  • Vector graphics are resolution independent, meaning that you can scale them without losing quality

Vector graphics: shapes

  • For National 5, you need to know about 4 shapes:

Rectangle

Ellipse

Line

Polygon

Rectangle

  • Rectangle is actually a type of polygon but given the frequency of its use, most vector graphic file formats support a specific rectangle object.
  • Squares could be created using either the rectangle or polygon objects.

Ellipse

  • Ellipse objects are like circles but you can alter the radius of the X co-ordinate so that it is a different value to that of the Y co-ordinate. This allows for the creation of oval shapes rather than circles. Circle objects are also supported by vector file formats and can be used to create a traditional circle.

Line

  • The line object allows for the creation of lines. More complex lines with different points can be created using an object called a polyline.

Polygon

  • The polygon object can be any shape that has at least three sides and allows for a wide variety of common shapes to be stored in vector form.
  • The example above is a pentagon but a polygon could be created to display a triangle, hexagon, star and a wide variety of different shapes.

Colour representation

  • We can use colour names (e.g. red, green), or we can use the RGB value (255, 0, 0 for red) or we can use the hex codes which start with a # sign at the beginning (e.g. #ff0000 is red and #000000 is black).

#FF6600

#FF0066

#226699

#00AAFF

#00AA00

#AA0000

#DDDDDD

#333333

What colours do you think will be produced by the following?

  1. #0FF
  2. #FFA066
  3. #FFFF00

Answer the following questions:

  1. What advantages do vector graphics have over bitmap graphics?
  2. What advantage do bitmap graphics have over vector graphics?
  3.  
    1. Which is resolution independent? (bitmap or vector)
    2. Why is this the case?
  4. What happens a vector graphic if you resize it in terms of 
    1. quality
    2. file size

Review questions

Presentation Overview
Close
JB
Data Representation
© 2020 - 2024 J Balfour
16:15 | 29-04-2024
Join Live Session
Start Remote
Save Progress
Slideshow Outline
Presenter Mode
Widget Screen
Canvas Controls
Random Selector
Timer
Volume Meter
Binary Converter
Python Editor
Show Knox 90
Provide Feedback
Help
!
Keywords
    DragonDocs Management
    Random selector
    Sections
      Binary conversion
      Denary to binary conversion
      Binary to denary conversion
      Feedback 👍
      Accessibility

      Apply a filter:

      Dark Mode
      Bold Text
      ×
      All slideshow files