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.

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

10³	10²	10¹	10⁰
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:

2³	2²	2¹	2⁰
1	0	1	0

An easier way to figure it out

2³ = 8
2² = 4
2¹ = 2
2⁰ = 1

2³	2²	2¹	2⁰
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:

Conversion questions

Transform to denary:

1011
10001000
00011111
1111
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:

How many bits are required to store the denary number 25?
How many bits are required to store the denary number 32?
What is the largest number that can be represented by 12 bits?
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?

63.73
34.2
93412.3

What is the exponent for each of the following?

63.73 × 10⁹
34.2 × 10³
93412.3 × 10⁴

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:

What is the mantissa in 53.5 x 10^-4?
What is the value of the exponent in 54.78 x 10⁴?
How is a real number stored in a computer system?

Review questions

Past Paper Question

1500711

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

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:

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

ASCII tasks

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

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 2⁸ 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:

If a GIF image can represent 256 different colours, how many different colours can be represented in a 24-bit JPEG image?
Explain what resizing a 24 x 24 image to 240 x 240 would do to an image
Sandra decides to make a picture file smaller by reducing the colour depth, explain why she cannot reverse this once she has done this.
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

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?

#0FF
#FFA066
#FFFF00

Answer the following questions:

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

Review questions

Presentation Overview

Data Representation

22:27 | 06-12-2024

Keywords

DragonDocs Management

Random selector

Remove after pick

Sections

Binary conversion

Denary to binary conversion

Binary to denary conversion

Use two's complement

Slideshow Outline

Help

The following are key shortcuts for using DragonSlides and reveal.js.

Key combination	Action
→, PAGE DOWN, SPACE	Next slide
←, PAGE UP	Previous slide
SHIFT + →	Last Slide
SHIFT + ←	First slide
B	Whiteboard
W	Widget Board/White Screen
C	Toggle Notes Canvas
DEL	Clears Whiteboard/Notes Canvas
S	Show Presenter Mode
SHIFT + D	Toggle Dark Mode
H	Goes to the Home Slide
META + P	Show Print options window

In order to use the 'Start Remote' feature, you'll need to download JB Slide Controls from the Apple App Store. Once you have this you'll be able to control the slides using the app from you Apple Watch.

Feedback 👍

Accessibility

Apply a filter:

Dark Mode

Bold Text

All slideshow files