QTM 350 - Data Science Computing
Lecture 02 - Computational Literacy
The first computers
- Historically, a computer was a person who makes calculations, especially with a calculating machine
- To do calculations we use numbers. How to represent them?
- Fingers
- Pebbles
- Strings (Inca Khipu)
- Abacus
Video: How to use an abacus
Four-species mechanical calculators
The first mechanical calculator capable of performing all four basic arithmetic operations (addition, subtraction, multiplication, and division)
Invented by Gottfried Wilhelm Leibniz in 1694
If you took a statistics course before the late 1970s, you likely used this type of mechanical calculator for your computations
Silicon-based computers
The 1970s marked the transition from mechanical to electronic:
- Transistors act as switches for electronic signals
- Integrated circuits combine multiple transistors on a single chip
- Microprocessors are integrated circuits that contain the functions of a computer’s central processing unit (CPU)
- They follow the Von Neumann architecture
Moore’s law: exponential growth
- Coined by Gordon Moore (co-founder of Intel) in 1965.
- Observation: The number of transistors on a microchip doubles approximately every two years, though the pace has slowed a bit.
- This has driven decades of increasing computing power and decreasing costs.
- The law is not a physical law but an observation and prediction
- It has significant implications for the future of technology and computing!
- Quantum computing may change this trajectory and increase the pace of growth.
- In the future, maybe only energy and time will limit computing power?
- Read more about Moore’s Law
Von Neumann Architecture
- The Von Neumann Architecture stores both program instructions and data together in a slow storage medium, such as a hard disk, and transfers them to faster RAM for execution by the CPU
- This is the basis for almost all modern computers
- When proposed in 1945, this architecture was revolutionary, as programs were previously seen as part of the machine, distinct from the data they operated on
Von Neumann Architecture
- Advantages:
- Efficient memory use, with less need for separate areas
- Flexibility in data storage and manipulation
- Simplicity in design and operation
- Disadvantages:
- Von Neumann bottleneck: Limits computing performance due to sequential processing of instructions and data through a single bus
- The CPU often waits for data due to its faster processing speed compared to memory transfer rates
- Harvard architecture is an alternative that separates data and instruction memory
Harvard Architecture
- As a contrast to Von Neumann, the Harvard Architecture uses physically separate storage and signal pathways for instructions and data.
- Key Idea: Can fetch the next instruction while the current instruction is operating on data.
- This allows for simultaneous access to both instructions and data, improving performance.
- Helps alleviate the Von Neumann bottleneck in certain contexts.
- Never achieved the same level of popularity as Von Neumann architecture for general-purpose computing.
- Read more about Harvard Architecture
Computers run on 0s and 1s
- Computers represent everything by using 0s and 1s
- Transistors act as switches, with 1 for high voltage level and 0 for low voltage level
- Computers use binary because transistors are easy to fabricate in silicon and can be densely packed on a chip
- But how does this work?
- How can we represent text, images, and videos using only 0s and 1s?
- This leads us to abstraction: representing ideas at different levels of detail by identifying what is essential
- We will use abstraction to translate anything into 0s and 1s, and also translate those numbers to other types
Converting coins to dollars
- We can convert between number systems by translating a value from one system to the other
- For example, the coins on the left represent the same value as $0.87
- Using pictures is clunky. Let’s make a new representation system for coins
Converting coins to dollars
- To represent coins, we will make a number with four digits
- The first represents quarters, the second dimes, the third nickels, and the fourth pennies
- c3102 =
- 3 x $0.25 + 1 x $0.10 + 0 x $0.05 + 2 x $0.01 =
- $0.87
Converting dollars to coins
How do we convert money from dollars to coins? Assume we want to minimise the number of coins used
For example, what is $0.59 in coin representation? Use the same four-digit system: quarters, dimes, nickels, and pennies
$0.59 = 2 x $0.25 + 0 x $0.10 + 1 x $0.05 + 4 x $0.01 = c2014
Images as collections of colours
- What if we want to represent an image? How can we convert that to numbers?
- First, break the image down into a grid of colours, where each dot of color has a distinct hue
- A dot of color in this context is called a pixel
- Now we just need to represent a single color (a pixel) as a number!
Images as collections of colours
RGB colour model
- The RGB colour model is widely used in digital displays
- Each pixel is represented by three numbers, each ranging from 0 to 255 (for 8-bit colour)
- The first number represents the amount of red, the second the amount of green, and the third the amount of blue
- (0,0,0) is black (no r/g/b) and (255,255,255) is white (full r/g/b)!
- You can try different colours here
Number systems – Hexadecimal
What is hexadecimal?
- When we represent values with multiple bytes, it can be hard to distinguish where numbers begin and end
- Hexadecimal is a number system with 16 digits: 0123456789ABCDEF (Base 16)
- It is used to represent binary numbers in a more compact way
- Each hex digit corresponds to 4 binary bits, making it a shorthand for binary:
- 0000\(_2\) = 0\(_{16}\)
- 0001\(_2\) = 1\(_{16}\)
- 0010\(_2\) = 2\(_{16}\)
- …
- 1010\(_2\) = A\(_{16}\) (10 in decimal)
- 1110\(_2\) = E\(_{16}\) (14 in decimal)
- 1111\(_2\) = F\(_{16}\) (15 in decimal)
Hexadecimal in HTML/CSS Colours
Examples and Interpretation
- Pure Colours:
#FF0000: Full Red (Red=FF, Green=00, Blue=00)#00FF00: Full Green (Red=00, Green=FF, Blue=00)#0000FF: Full Blue (Red=00, Green=00, Blue=00)
- Black and White:
#000000: Black (Red=00, Green=00, Blue=00 – no light)#FFFFFF: White (Red=FF, Green=FF, Blue=FF – all light at full intensity)
- Mixing Colours (Secondary Colours):
#FFFF00: Yellow (Red=FF, Green=FF, Blue=00)#00FFFF: Cyan (Red=00, Green=FF, Blue=FF)#FF00FF: Magenta (Red=FF, Green=00, Blue=FF)
Hexadecimal in HTML/CSS Colours
Shorthand and Transparency (Alpha)
- 3-Digit Shorthand (
#RGB):- If each pair of hex digits in a 6-digit code is the same, you can use a 3-digit shorthand
- The browser expands it by duplicating each digit!
- Examples:
#F00is equivalent to#FF0000(Red)#0A3is equivalent to#00AA33(a dark green)#FFFis equivalent to#FFFFFF(White)
- Opacity is represented by an additional two hex digits (8-digit hex)
00is fully transparent (invisible)FFis fully opaque (solid)- Values in between give partial transparency (e.g.,
80is 50% opaque) - 4-Digit Shorthand (
#RGBA): Similar to the 3-digit shorthand, but for colours with an alpha channel. - Example:
#F008would be equivalent to#FF000088(semi-transparent red, with alpha 88 hex).
Brief Recap
In this lecture, we covered:
- Evolution of Computing: From human calculators and mechanical devices to silicon-based computers and the Von Neumann architecture.
- Data Representation Fundamentals: How computers use binary (0s and 1s) as the basic language.
- Abstraction: The key concept of representing complex information (like numbers and images) at different levels.
- Number Systems:
- Binary (Base 2): Bits, bytes, and converting between binary and decimal.
- Hexadecimal (Base 16): A compact way to represent binary, its conversion, and its use in RGB colours for HTML/CSS.
- Representing Images: Pixels and the RGB colour model.
