RGB kleuren
Stap voor stap

Introductie

Hallo, dit is alweer de laatste les van de tweede week "From media computation to data science". Kijk eens terug naar waar we nu staan, wat we de afgelopen weken geleerd hebben. We hebben getallen, de fundamentele bouwstenen van alle digitale media ontdekt. Door nieuwe functies voor deze getallen te schrijven, de getallen aan een nieuwe context weet te verbinden krijg je "toegepaste" magie".
Tijdens de vorige les heb je geleerd om vanuit het bijna niets verschillende muzikale golfvormen te maken. In deze les gaan we daarin nog een stap verder door, vanuit getallen een eigen afbeelding te maken.
Het RGB kleursysteem staat voor het gebruik van de kleuren rood, groen en blauw. Rood, groen en blauw zijn de additief primaire kleuren. Kleuren in beeldschermen worden gevormd door het toevoegen en mengen van licht van deze drie kleuren. Zet het openingsscherm van je mobiele telefoon op een puur witte afbeelding. Laat voorzichtig een druppel water op het scherm vallen. Wanneer je nu met een vergrootglas naar de druppel water op het scherm kijkt moet je de kleine Led's in de kleuren rood, groen en blauw kunnen herkennen. RGB!

RGB kleuren

Teken volgens de instrucies en voorbeelden die je hieronder ziet een nieuw kostuum in een nieuw gemaakte sprite.
  • Klik op
    om een nieuwe sprite(2) te maken.
  • Ga naar "costumes"
  • Klik op
    ​
  • Gebruik de "filled rectangle" tool om een Rood, Groen en Blauw vierkant te tekenen.
  • Plaats de turtle sprite op het rode vierkant.
Neem uit de categorie "sensing"
en plaats dit blok op het script veld. Bekijk de opties van het "dropdown" menu. Onderaan deze optielijst vind je de optie "r-g-b-a" wat staat voor de kleurkanalen rood, groen, blauw en alpha. Alpha is het transparantie kanaal.
  • Selecteer de optie
    ​
  • Zorg in het sprites veld ervoor dat je "sprite" op geselecteerd staat.
  • Klik met de muis op dit blok
Wanneer je op dit blok klikt krijg je een "list" met daarin 4 items, welke staan voor de afzonderlijke r-g-b-a waarde te zien. We kunnen ook alle r-g-b-a waarde van dit kostuum in één keer laten zien.
  • Selcteer daarvoor eerst Sprite(2) in het sprites veld.
  • Vanuit de categorie "looks" sleep je het
    blok naar het script veld.
  • Klik met je muis op dit blok.
  • Bekijk de "list of lists", kun je daarin de pixels van het rode, groene en blauwe vierkant terug vinden?
Wanneer de pixels van een afbeelding niets meer is dan een "list of lists", kunnen we onzelf de vraag stellen: kunnen we een "list of list" vanuit code, vanuit een script genereren? Ja, dat kan heel goed! Open eerst een nieuw bestand, bouw en maak het script dat je hieronder ziet staan.
Gradient script
  • Bespreek het script van deze nieuwe afbeelding met elkaar.
Nu we deze afbeelding volledig uit getallen gegenereerd hebben, gaan we er iets moois van maken
Het idee is om een "global warming" widget, een widget over de opwarming van de aarde te maken.
Zet de grootte van je gradient afbeelding op 180% en geef deze sprite de meer toepasselijke naam "gradient". Maak een nieuwe sprite onder de naam "slider" aan, stel de grootte in op 130%, geef deze sprite een witte kleur en roteer de sprite 90 graden. Plaats de "slider" sprite op het gradient "sprite".
Gradient en slider sprite
  • maak de slider sprite niet versleepbaar.
Geef de "slider" sprite het volgende script
Slider script
Maak voor de "slider" sprit een lokale variabele onder de naam "value" aan.
Lokale variabele "value"
Een lokale variabele is een variabele is alleen beschikbaar voor dat script waar het deel vanuit maakt.
  • Voeg deze variabele op volgende wijze toe aan het "slider" script.
  • Om een widget te maken willen we graag dat andere sprites reageren op de "slider value". Voeg als laatste het "broadcast" blok met het bericht "update" in.
Value en broadcast script
  • Controleer de werking, bespreek met elkaar dit script.
  • Maak de slider sprite vast, door deze op de gradient sprite te plaatsen.
Sprites aan elkaar vast maken
  • Plaats de combinatie van "gradient" en "slider" sprite onderaan het podium.
  • Maak de "gradient" sprite niet versleepbaar.
  • Test de werking van je script.
Een widget over de opwarming van de aarde heeft natuurlijk een zeespiegel nodig. Maak een nieuwe sprite "zeespiegel". Teken de zeespiegel als kostuum.
Sprite zeespiegel
  • Selecteer de sprite "zeespiegel" en voeg dit script daaraan toe.
Receive update
  • Selecteer "Stage" en voeg dit script eraan toe
Het "Stage" script
Verberg
de waarde van de slider sprite. Test je script, bespreek je ervaringen, vragen en ideeΓ«n met andere mensen. In deze les heb je geleerd een afbeelding uit getallen te genereren, je hebt kennis gemaakt met de werking van het RGB kleurensysyteem en je hebt een interactieve widget gemaakt waar andere objecten, sprites op reageren. Magie in het kwadraat.

Probeer meer

Bedenk andere functionaliteiten voor de slider. Een ijberg die op de oceaan drijft, Vegetatie, populatie ijsberen, een thermometer?
Binnen het gradient script geeft het herhaal blok de hoogte van de afbeelding aan. Kun je de gradient afbeelding een andere hoogte geven? Kun je de afbeelding andere kleuren geven, welicht andere kleuren in meerdere dimensies?
Voor het verkrijgen van meerdere dimensies kun je een "for-loop in een "for-loop" plaatsen. Verander van één variabele de naam.

Testopgaven

  1. 1.
    Welk blok geeft de RGBA waarde van de muis op een bepaalde positie op het podium aan?
  • ​
    ​
  • ​
    ​
  • ​
    ​
  • ​
    ​
2. Wat is de hoogste mogelijke waarde van een RGB kleurkanaal?
  • 255
  • 100
  • -255
  • 1
3. Hoe komt dit 256x20 gradient eruit te zien
  • ​
    ​
  • ​
    ​
  • ​
    ​
  • ​
    ​
4. Wat betekend het locatie icoon voor een variabele reporter blok. Pas op, er zijn twee goede antwoorden.
  • Dat is de locatie variabele waarin we GPS coordinaten in opslaan
  • Dat het hier een tijdelijke variabele betreft.
  • Dat de waarde voor deze variabele niet door een andere sprite veranderd kunnen worden.
  • Dat deze variabele alleen voor deze sprite geldig is
Last modified 1yr ago