Les 8: C4 - Kleurmodellen

Blok 2: Informatie
Les 8
1 / 35
suivant
Slide 1: Diapositive
InformaticaMiddelbare schoolvwoLeerjaar 4

Cette leçon contient 35 diapositives, avec quiz interactifs, diapositives de texte et 2 vidéos.

time-iconLa durée de la leçon est: 100 min

Éléments de cette leçon

Blok 2: Informatie
Les 8

Slide 1 - Diapositive

Cet élément n'a pas d'instructions

Na de les kun je...


  • Decimale of binaire getallen omzetten naar hexadecimale getallen en andersom
  • Uitleggen wat kleurmodellen zijn en waarom deze er zijn;
  • De toepassingen van de kleurmodellen RGB en CMY beschrijven en de verschillen uitleggen.

    Slide 2 - Diapositive

    Cet élément n'a pas d'instructions

    Lesplanning
      1. Terugblik vorige les

      2. Uitleg kleurmodellen
      3. Zelfstandig aan de slag met huiswerk
      4. Afsluiting

      Slide 3 - Diapositive

      Cet élément n'a pas d'instructions

      Terugblik
        1. Wat betekent het gedeelte 0x in het 'getal' 0x64?
        2. Hoe geef je aan dat iets een binair getal is?
        3. Voor welk decimaal getal staat de letter C in hexadecimale getallen? 
        4. Hoeveel bits worden door 1 hexadecimaal getal gerepresenteerd EN hoe heet zo'n combinatie?
        5. Wat is het voordeel van hexadecimale getallen t.o.v. binaire getallen?

        Slide 4 - Diapositive

        Cet élément n'a pas d'instructions

        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 voor een binair getal van 4 bits: 0b1111 = 0xF = 15
        • 4 bits = nibble

        Hexadecimaal naar decimaal = 

        • 0x64 = 6 x 16^1 + 4 x 16^0 = 100 (oftewel: 0b01100100)
        • 0x6B = 6 x 16^1 + 11 x 16^0= 107 (oftewel: 0b01101011)

        Slide 5 - Diapositive

        Cet élément n'a pas d'instructions

        Slide 6 - Diapositive

        Cet élément n'a pas d'instructions

        Hexadecimaal (16)


        Decimaal naar hexadecimaal = 
        • Deel het getal door 16 en noteer de rest
        • Ga door tot je bij 0 bent

        • Decimaal 178 naar hexadecimaal = 0xB2




        • Wat is dus 27 in hexadecimale vorm? 

        Slide 7 - Diapositive

        Cet élément n'a pas d'instructions

        Hexadecimaal naar binair...
        ...en andersom
        1101
        1101
        1101

        Slide 8 - Diapositive

        Cet élément n'a pas d'instructions

        Wat is 16 in hexadecimale notatie?
        A
        0x10
        B
        0xF1
        C
        0x16
        D
        0x1F

        Slide 9 - Quiz

        Cet élément n'a pas d'instructions

        Wat is 0x16 in decimale getallen?
        A
        16
        B
        7
        C
        22
        D
        21

        Slide 10 - Quiz

        Cet élément n'a pas d'instructions

        Wat is 0b11000001 in hexadecimale notatie?

        (deel het dus op in een nibble van 1100
        en een nibble van 0001)
        A
        0xB1
        B
        0xC1
        C
        0x121
        D
        0x11

        Slide 11 - Quiz

        Cet élément n'a pas d'instructions

        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"

        Slide 12 - Diapositive

        Cet élément n'a pas d'instructions

        Slide 13 - Diapositive

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

        Dat komt omdat dit een bitmap of rasterfoto is.

        Slide 14 - Diapositive

        Cet élément n'a pas d'instructions

        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

        Slide 15 - Diapositive

        Cet élément n'a pas d'instructions

        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

        Slide 16 - Diapositive

        Cet élément n'a pas d'instructions

        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

        Slide 17 - Diapositive

        Cet élément n'a pas d'instructions

        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)

        Slide 18 - Diapositive

        Cet élément n'a pas d'instructions

        CSS kleurcodes
        In html en css heb je al 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?

        Slide 19 - Diapositive

        1 hex = 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?

        Slide 20 - Diapositive

        Cet élément n'a pas d'instructions

        Welke intensiteit blauw zit er in de kleur met de kleurcode (129, 202, 244)
        A
        129
        B
        202
        C
        244
        D
        331 (129 + 202)

        Slide 21 - Quiz

        Cet élément n'a pas d'instructions

        Welke van onderstaande RGB-kleurcodes levert een grijstint op?
        A
        (255, 255, 255)
        B
        (129, 129, 129)
        C
        (0, 0, 0)
        D
        (129, 255, 255)

        Slide 22 - Quiz

        Cet élément n'a pas d'instructions

        Wat is de CMY-code van de RGB-kleur voor oranje (255, 128, 0)?
        A
        (0, 128, 255)
        B
        valt zo niet te zeggen
        C
        #FF8000
        D
        (0, 127, 255)

        Slide 23 - Quiz

        Cet élément n'a pas d'instructions

        Welk model wordt gebruikt voor beeldschermen en welk voor printers?
        A
        RGB = beeldscherm, CMY = printers
        B
        RGB voor beide
        C
        CMY voor beide
        D
        RGB = printers, CMY = beeldschermen

        Slide 24 - Quiz

        Cet élément n'a pas d'instructions

        huiswerk
        Maak de opdracht getallen omzetten (Classroom)
        Lees en maak paragraaf 3.1 t/m 3.3 van C4
         

        Slide 25 - Diapositive

        Cet élément n'a pas d'instructions

        Raster afbeeldingen
        Raster afbeeldingen zijn opgebouwd uit pixels en daarom ook altijd op basis van afmeting. Voor elke pixel wordt opgeslagen welke kleur zij moet hebben. Er zijn vele soorten raster afbeeldingen. Deze onderscheiding zich vooral door de manier hoe de kleuren worden opgeslagen. 

        Bekende formaten zijn: bmp, jpeg, png en gif 

        Slide 26 - Diapositive

        Cet élément n'a pas d'instructions

        Grootte van een bitmap afbeelding berekenen
        In een bitmap worden de pixels in een matrix opgeslagen en één voor één getekend. Stel we hebben een HD afbeelding van 1920 x 1080 pixels. Dan begin je dus bij 1, 1 en eindigt bij 1920, 1080.

        Op elk coördinaat wordt een kleurcode opgeslagen. Hoeveel kleuren worden opgeslagen is afhankelijk van de hoeveelheid bits die gebruikt worden. Zie het als een bakje met een bepaalde grootte; hoe groter het bakje, hoe meer mogelijke kleuren je kan gebruiken:

        • 16 bits => 2^16 =                 65536 kleuren (16^4)
        • 32 bits => 2^32 = 4,294,967,296 kleuren (16^8)

        Dus: 1980 x 1080 =  2 miljoen pixels

        2 miljoen x 16 bits = 32 miljoen

        Maar een bit is geen byte


        Slide 27 - Diapositive

        Cet élément n'a pas d'instructions

        Opdracht
        1. Zoek op internet de resolutie van de camera van je telefoon.
        2. Zoek op hoeveel bits de camera gebruikt. Dit wordt vaak aangegeven met bit-depth
        3. Bereken hoeveel bytes (dus niet bits) de afbeelding groot is


        Inleveren in classroom

        Bereken de grootte van een foto van je telefoon

        Slide 28 - Diapositive

        Cet élément n'a pas d'instructions

        Hoeveel bytes is een afbeelding van jouw camera?

        Slide 29 - Question ouverte

        Cet élément n'a pas d'instructions

        Slide 30 - Vidéo

        Cet élément n'a pas d'instructions

        Door transistoren aan elkaar te schakelen kan je logica maken.  Dit is een voorbeeld van een logische schakeling
        OR
        AND
        NAND - Not-AND - Het witte bolletje staat voor een inverter
        De plekken waar de vraagtekens staan noemen we poorten of gates. De poort bij de groene pijl is een OR-gate

        Slide 31 - Diapositive

        Cet élément n'a pas d'instructions

        OR
        AND
        NAND - Not-AND - Het witte bolletje staat voor een inverter
        1
        1
        0
        Gaat het lampje aan of uit?

        Slide 32 - Diapositive

        Cet élément n'a pas d'instructions

        Met deze poorten moet je kunnen werken
        Let op! MM Logic kent geen NOR of NAND. Deze maak je door OR en AND te combineren met NOT

        Slide 33 - Diapositive

        Cet élément n'a pas d'instructions

        Slide 34 - Vidéo

        Cet élément n'a pas d'instructions

        Slide 35 - Lien

        Cet élément n'a pas d'instructions