C4: Bits & bytes, kleurmodellen

• Informatica
• Middelbare school
• havo, vwo
• Leerjaar 4

C: Informatie: onderwerpen

Deze week bekijken we 6 onderwerpen over informatie. Bespreek met je team welk onderwerp jullie willen bestuderen voor je website. Woensdag kunnen jullie kiezen.

• INFORMATIE EN DATA
• GESTRUCTUREERDE EN BIG DATA
• BITS EN BYTES
• KLEURMODELLEN
• BEELD EN GELUID
• DATACOMPRESSIE

Bits & bytes

Fundament Online

Domein C4, Hoofdstuk 1

Leerdoelen

Na de uitleg over dit onderwerp  kun je vertellen over:

• waarom een computer met enen en nullen werkt 
• wat bits en bytes zijn
• karaktersets ASCII en Unicode.
  
• hoe je binaire en hexadecimale getallen kunt omzetten naar decimale getallen en vice versa.

BITS EN BYTES

Noem een verschil tussen
gegevens en informatie

Basiswerking computers

• Computer bestaat uit CPU (processor), werkgeheugen en randapparatuur
  
• Onderdelen communiceren met elkaar via elektronische signalen (soort morse-code)
  
• Software (code) = instructies die bepalen of er wel of niet een signaal wordt verstuurd en hoe;
  
• Code door computer vertaald naar nullen en enen (machinetaal)
  

Computer werkt dus met 0 en 1

Maar waarom?

Nullen en enen

• Elke nul of één noemen we een bit (0 = 0 Volt, 1 = 5 Volt)
  
• Die bits vormen reeksen zodat we er meer verschillende tekens mee kunnen weergeven (dus getallen of letters etc.)
  
• Standaard zijn dat reeksjes van 8 bits = 1 byte  
  
• Samen kunnen die 8 bits
  in een byte 256 getallen
  en tekens weergeven, van
  00000000 tot 11111111 (=2^8)

Getallenstelsels

Binair (2)

Decimaal (10)

Hexadecimaal (16)

Decimaal (10)

• Getallen opgebouwd uit combinaties van 10 symbolen (0 t/m 9) vermenigvuldigd met machten van 10

• 372 = 3 x 10² + 7 x 10¹ + 2 x 10⁰

Binair (2)

• Getallen opgebouwd uit combinaties van 2 symbolen (0 of 1) vermenigvuldigd met machten van 2;
• Vaak vooraan aangevuld met nullen tot 8 bits
• positie van 0 of 1 vanaf achteren geeft de macht aan (dus van rechts naar links lezen...)

• 2 = 1 x 2¹ + 0 x 2⁰ = 10     (oftewel: 0000 0010)
• 74 = 64 + 8 + 2 = 1 x 2⁶ + 1 x 2³ + 1 x 2¹ = 001001010

Zet om

:

decimaal > binair

13

27

57

103

317

binair > decimaal

0110

10111

11101

101101

10111101

• 1101
• 11011
• 111001
• 1100111
• 100111101

• 6
• 23
• 29
• 45
• 189

45

103

58

93

0b1100111

0b101101

0x3A

0x5D

Hexadecimaal (16)

• Getallen opgebouwd uit combinaties van 0 t/m 9 en/of A t/m F vermenigvuldigd met machten van 16
• positie van getal vanaf achteren geeft de macht aan (dus van rechts naar links lezen...)
• 1 Hexadecimaal getal staat gelijk aan een binair getal van 4 bits: 0b1111 = 0xF = 15
• 4 bits = nibble

• 0x64 = 6 x 161+ 4 x 160 = 100 (oftewel: 0b01100100)
  

• 0x6B = 6 x 161 + 11 x 160= 107 (oftewel: 0b01101011)
  

Notaties

• binair -> 2 (bini)
  
• decimaal -> 10 (decimus)
  
• hexadecimaal -> 16 (hex)
  
• 0b = binair getal
• 0x = hexadecimaal getal
• 255 = 0b11111111 = 0xFF 

Wat is 16 in hexadecimale notatie?

1. 0x10
2. 0xF1
3. 0x16
4. 0x1F

Wat is 0x16 in decimale getallen?

1. 16
2. 7
3. 22
4. 21

Hexadecimaal naar binair...

...en andersom

Filmpje!

https://www.youtube.com/watch?v=lTjFFEtmZyA

1101

1101

1101

Wat is 0b11000001 in hexadecimale notatie?

(deel het dus op in een nibble van 1100
en een nibble van 0001)

1. 0xB1
2. 0xC1
3. 0x121
4. 0x11

Waarom hexadecimaal?

• Makkelijker/korter opschrijven dan binair
• Makkelijk om te zetten naar binair dus goed voor computers
  
  b.v. bij kleuren #007dad (denk aan html/css)
  in binair zou dat zijn: 00000000 01111101 10101101

Lees meer

http://digiassn.blogspot.com/2006/02/why-do-we-use-hexadecimal.html

https://medium.com/@savas/why-do-we-use-hexadecimal-d6d80b56f026

Welke kleur is dat?

1 byte = 256 getallen = ASCII-tekens

Unicode

• ASCII = 8 bits (1 byte), dus slechts ruimte voor 256 tekens 
  
• Unicode = 1 tot 4 bytes = honderdduizenden verschillende tekens
• o.a. emoji's, Chinees, valuta-tekens, wiskundige symbolen etc.
• Zowel ASCII als (tegenwoordig vooral) Unicode handig voor onderlinge communicatie, bijv. op het Internet
• Maar... zo'n teken in binaire getallen kan nogal onleesbaar worden (voor ons), daarom meestal hexadecimale notatie

Kleurmodellen

Fundament Online

Domein C4, Hoofdstuk 2

Leerdoelen

Na de uitleg over dit onderwerp kun je:

• vertellen waarom er kleurmodellen zijn 
• de toepassingen van de kleurmodellen RGB en CMY beschrijven en de verschillen uitleggen

KLEURMODELLEN

Pixel - Picture x element

Die kleine puntjes waar een afbeelding uit is opgebouwd

• "Een afbeelding bestaat uit 320x240 pixels"
• "De resolutie van mijn scherm is 1920x1080 pixels"

Een mooie foto! Maar als je inzoomt kan je de pixel zien.

Dat komt omdat dit een bitmap of rasterfoto is.

Kleurmodellen

• Digitale afbeelding opgebouwd uit pixels
  
• Pixels zijn kleinst waarneembare onderdelen van een afbeelding = vierkantjes met een bepaalde kleur.
• (Denk aan pointilisme in schilderkunst)
• Twee kleurmodellen: RGB en CMY
• RGB = Rood, Groen en Blauw
• CMY = Cyaan, Magenta, Yellow

pointilisme

https://nl.wikipedia.org/wiki/Pointillisme

Kleurmodellen

RGB: Rood, Groen, Blauw. Wordt gebruikt voor bronnen die zelf licht geven zoals schermen

CMYK: Cyaan, Magenta, Yellow, blacK. Wordt gebruikt voor kleuren van objecten die zelf geen licht geven maar licht van andere bronnen weerkaatsen zoals bij printen

Bij het "mengen" van alle kleuren krijg je wit

Bij het "mengen" van alle kleuren krijg je zwart

RGB-model

• Elke pixel heeft bepaalde intensiteit van Rood, Groen en Blauw tegen zwarte achtergrond;
  
• RGB-model = additieve kleuren
• Basiskleuren in bepaalde verhouding bij elkaar leiden tot nieuwe kleur (mengkleur);
  
• Geen basiskleur = zwart;
  
• Alle basiskleuren volledig bij elkaar = wit
  
• De intensiteit van elke basiskleur in computer weergegeven als byte (= 256 tinten per kleur);
• byte = 8 bits, dus getal van 0 - 255
• Geel = 255 (rood), 255 (groen), 0 (blauw)
• Binair = 11111111 11111111 00000000 = #FFFF00

CMY-model

• RGB-model werkt alleen voor zwarte achtergrond
• Zwart = 0, 0, 0: kleuren door RGB toe te voegen.
  
• RGB-model = additieve kleuren
• Bij witte achtergrond, zoals papier, werkt dat niet (wit = 255, 255, 255)
• Dus voor printen CMY-model, waarbij kleuren worden weggefilterd uit witte licht (subtractieve kleuren)
• Bij printers vaak ook aparte toner voor zwart
• Van RGB naar CMY via de formule:
• CMY = (255 - R, 255 - G, 255 - B)

CSS kleurcodes

In html en css wordt gewerkt met kleurcodes zoals deze:  #ff05ab

Daarin zitten eigenlijk drie kleurcodes verstopt: 

• 2 voor rood: ff 
• 2 voor geel: 05 
• 2 voor blauw: ab

Hoeveel bits zijn er nodig deze code op te slaan?

1 hex digit = 4 bit

dus 6 x 4 = 24 bits 

In deze kleurenmap zie je dat RGB en CMYK niet hetzelfde oppervlak beslaan. Dat betekent dat ze niet allemaal dezelfde kleuren bevatten.

Met RGB kan je veel intensere kleuren rood, groen en blauw/paars krijgen.

Deze kleur zit wel in CMYK maar niet in RGB

Deze kleur zit niet in CMYK maar wel in RGB

Infrarood?

Ultraviolet?

Welke intensiteit blauw zit er in de kleur met de kleurcode (129, 202, 244)

1. 129
2. 202
3. 244
4. 331 (129 + 202)

Welke van onderstaande RGB-kleurcodes levert een grijstint op?

1. (255, 255, 255)
2. (129, 129, 129)
3. (0, 0, 0)
4. (129, 255, 255)

Wat is de CMY-code van de RGB-kleur voor oranje (255, 128, 0)?

1. (0, 128, 255)
2. valt zo niet te zeggen
3. #FF8000
4. (0, 127, 255)

Welk model wordt gebruikt voor beeldschermen en welk voor printers?

1. RGB = beeldscherm, CMY = printers
2. RGB voor beide
3. CMY voor beide
4. RGB = printers, CMY = beeldschermen

werkzaamheden

Theorie:

Doorlezen Fundament online
Domein C4 - Hoofdstuk 1 en 2 
Bits en bytes en kleurmodellen

Op een leuke manier oefenen met binaire getallen?

Speel de binary game

Wie haalt de hoogste score?