Welkom! Voor dat we beginnen over de cursus, een kort voorwoord over ons. De cursus Code Create is ontworpen en ontwikkeld door C-TEAM. Een groep experts met een gezamenlijk doel: onze skills gebruiken om de jeugd aan het programmeren te krijgen! Wij doen dit omdat we zelf de visie hebben dat programmeren een steeds belangrijkere vaardigheid gaat worden. Zoals U vast en zeker gemerkt heeft, is de razendsnelle digitalisering van uw (leef)omgeving niet te stuiten. Dit vraagt van ons, de mens, om de technologie beter te begrijpen. Programmeren is dé manier om de digitale omgeving te besturen. Het is immers de basis van iedere computerhandeling. Een basis begrip van hoe een computer werkt is absoluut essentieel voor de nieuwe generatie. Niet alleen omdat wij het belangrijk vinden dat men weet wat om zich heen gebeurd, maar ook omdat programmeren een ontelbare hoeveelheid deuren opent, met achter iedere deur een nieuw avontuur, kans of leermoment. Inspiratie is de basis Programmeren is iets wat je moet liggen. We pleiten er dan ook niet voor dat alle kinderen top programmeurs worden, maar we vinden het wel belangrijk dat ze alvast weten wat de mogelijkheden zijn en hoe ze verder kunnen bouwen op die kennis. In onze steeds sneller wordende wereld zien we dat kinderen dit patroon ook oppakken. We hebben daarom onze cursus dusdanig ingericht dat deze kort, maar krachtig is. Het primaire doel van deze cursus is dan ook om uw leerlingen te inspireren. Programmeren leer je alleen door vooral zelf veel, heel veel, te experimenteren. De cursus is dan ook zo ingericht dat de kinderen een voorproefje krijgen van de mogelijkheden die programmeren biedt en vervolgens direct aan de slag gaan met het experimenteren. Op deze manier zal de cursus dusdanig inspireren om thuis verder te experimenten, en dat is de plek, waar het échte leren tot stand komt. Wij zijn de ontsteking, wij willen de interesse naar programmeren laten ontbranden. Spark to code! 1
Deel 1: 3 Deel 2: 4 Opdracht 1 5 Opdracht 2 6 Opdracht 3 7 2
Deel 1: Klaar voor de start? Voordat u begint aan het geven van onze cursus, is het belangrijk dat u voldoende kennis op doet van programmeren en dan met name van Processing, waarop de opdrachten in onze cursus op zijn gebaseerd. Processing is een programmeertaal welke is gebaseerd op Javascript. U kunt hier meer lezen over Processing: https://processing.org/ U vind op deze site ook een groot aantal voorbeelden en natuurlijk download linkjes voor het programma. Het is voor onze cursus echter niet nodig om Processing te installeren voor uw leerlingen. De leerlingen kunnen de cursus volledig via onze website doen, welke beschikt over een ingebouwd Processing console. Deze kunt u vinden op de volgende pagina: http://sivakumaran.eu/cursus.html Heeft u een naar uw gevoel voldoende basis opgebouwd om de cursus te geven? Dan kunt u aan de slag met de volgende stap. Nog niet zo zeker? Wij hebben een aantal belangrijke punten opgesteld die belangrijk zijn binnen onze cursus. U weet: Wat programmeren is Wat Processing precies is Dat Processing gebruikt wordt voor generative art (een belangrijk begrip!) Dat Processing óók gebruikt kan worden voor het maken van games, robots en nog veel meer Dat het leren van Processing een opstap kan zijn naar moeilijkere talen zoals C++ welke gebruikt wordt voor het schrijven van zeer complexe programma s Een presentatie Heeft u zich voldoende ingelezen over? Mooi. In uw research bent u vast tegen interessante dingen gelopen zoals kunstwerken, interessante programma s of andere applicaties welke gemaakt zijn in Processing. Wanneer wij zelf de cursus geven, maken we vooraf een presentatie van ongeveer een half uur waarin we de leerlingen duidelijk proberen te maken wat er allemaal mogelijk is. Dit doen we vooral aan de hand van voorbeelden op beeld, maar ook met tastbare objecten. Denk bijvoorbeeld aan een LED-strip welke wordt aangestuurd met Processing. 3
Wilt U weten hoe u dit soort tastbare voorbeelden kunt maken? Binnenkort verschijnt er een document op onze website waarin U alle benodigde informatie kunt vinden. Deel 2: Aan de slag! In het tweede gedeelte van de cursus, waar U ongeveer 45 tot 60 minuten voor moet uittrekken, is het experimenteer gedeelte. De kinderen gaan zelf aan de slag op onze website en zullen zo zelf ondervinden hoe leuk programmeren kan zijn en wat een gave dingen je er mee kunt maken. Zoals U heeft kunnen lezen in de introductie, is het voor ons belangrijk om te inspireren. Processing is niet iets wat je snel leert. In een dergelijk tijdsbestek is het waarschijnlijk alleen mogelijk om een basis vormpje te maken in Processing, zoals een vierkant of een cirkel. Niet heel erg spannend dachten wij. We hebben daarom besloten de kinderen aan de slag te laten gaan met pre-made Processing schetsen waarin ze vervolgens zelf dingen kunnen gaan aanpassen. De kinderen zullen zelf moeten uitzoeken hoe ze een door u gevraagd resultaat krijgen door middel van zelf beredeneren hoe de code in elkaar steekt. Wanneer ze dus bijvoorbeeld de snelheid van een schets moeten aanpassen, zullen ze opzoek moeten gaan naar een variabel welke de snelheid bepaalt. Deze variabel heeft uiteraard een naam, welke zelfs voor de grootste leek gevonden moet kunnen worden met een beetje logisch redeneren. Opstart Uit ervaring hebben wij ondervonden dat deze cursus voor kinderen het meest interessant is wanneer ze alleen of in tweetallen kunnen werken. Zorg dus minimaal voor één computer per twee leerlingen. Begeleid de leerlingen naar onze website, waarop u de navigatiebalk gebruikt om naar de cursus pagina te gaan. In deze pagina zit ook onze Processing console verwerkt. Onderstaand nogmaals het adres van deze pagina. http://sivakumaran.eu/cursus.html U kunt nu beginnen aan de opdrachten zoals beschreven op de volgende pagina s. Afhankelijk van het niveau en de interesse van uw groep kinderen, kunt u de vragen verder vormgeven zodat deze hier op aansluiten. 4
Opdracht 1 1.1. In deze opdracht gaan we kleuren veranderen. - Ga naar //Kop 1 Kleur. Tip: door de toetsencombinatie ctrl+f te gebruiken krijg je een zoekschermpje. Vul bij find het woord in dat je in het document wil zoeken en je computer zoekt het voor je! Dit is handig als je een lange code gebruikt. - Hier zie je verschillende kleurencodes staan. Dit is een voorbeeld van een kleurencode: #2D00FF. (felblauw) Natuurlijk is het niet nodig om alle kleurencodes uit je hoofd te kennen. Hier zijn handige websites voor, bijvoorbeeld: http://html-color-codes.info/. Hier kun je gemakkelijk een kleur kiezen en de website geeft jou de kleurcode ervan. - Kies via http://html-color-codes.info/ kleuren uit die jij mooi vindt en kopieer de kleurcode hiervan. Vervolgens vervang je de bestaande kleurcode door de door jou gekozen kleurcode! - Misschien is het je opgevallen dat er achter de kleurcode een komma staat, en daarachter een getal (bijv. 1). Dit getal bepaalt hoe vaak de kleur zal worden gekozen. Kies je bijvoorbeeld bij blauw 3, en bij geel 1, dan zal de verhouding van blauw en geel in je kunstwerk 3:1 zijn. Er komt dus drie keer zoveel blauw in voor. Probeer maar uit! 1.2. In deze opdracht veranderen we de snelheid en de beweging. - Ga naar //Kop 2 Eigenschappen. - Onder dit kopje kun je de woorden speed en freq vinden. Dit ziet er als volgt uit:.speed(0.7).freq(6) - Als je het getal tussen de haakjes achter speed verandert, zal de snelheid veranderen! Je kunt hier een kommagetal gebruiken, maar natuurlijk ook een heel getal. Let op: krijg je een error? Misschien heb je 0,5 getypt in plaats van 0.5! Als komma moet je altijd een punt gebruiken! - Als je het getal tussen de haakjes achter freq verandert, zullen de delen van de sterren verder of juist minder ver gaan. Probeer maar uit en kijk wat er gebeurt! 5
Opdracht 2 2.1. Tijdens deze opdracht veranderen we een aantal eigenschappen van de strepen die je muis volgen. - Ga naar //Kop 1 Eigenschappen. - Onder dit kopje kun je de woorden speed en twitch vinden. Dit ziet er als volgt uit:.speed(5).twitch(10) - Als je het getal tussen de haakjes achter speed verandert, zullen de strepen langzamer of juist sneller bewegen! Je kunt hier een kommagetal gebruiken, maar natuurlijk ook een heel getal. - Ook het getal tussen de haakjes achter twitch kun je veranderen. Hoe dichter het getal dat je kiest bij de 0 ligt, hoe rechter de strepen ; 2.2. Bij //Kop 2 Grootte kun je zoals je verwacht de lengte en grootte van de strepen veranderen. Je ziet het volgende staan:.size((int)random(10,20), (int)random(1,6) ) - Verander eens de getallen en ontdek zelf wat er gebeurt! 2.3. Hier kun je de kleuren van de strepen veranderen:.colorist(new HColorPool (#000000, #F7F7F7, etc ) - Zoals bij een van de vorige opdrachten kun je achter de # * de kleuren veranderen door een andere kleurcode te kiezen. Deze kies je weer met behulp van http://html-color-codes.info/ *met dit hekje geven we aan dat we gebruik gaan maken van een zogenaamde HEX(hexadecimal) kleurcode. U kunt hier op de volgende pagina meer over lezen. https://en.wikipedia.org/wiki/web_colors 6
Opdracht 3 3.1. Tijdens deze opdracht veranderen we een aantal kleuren. - Ga naar //Kop 1 Eigenschappen - Bij //Kleur kun je de kleur van de vierkanten bepalen:.fill(#242424) Kleur veranderen doe je weer hetzelfde als de vorige keren! 3.2. Bij //Achtergrondkleur kun je uiteraard de achtergrondkleur veranderen:.stroke(#999999) Ook dit doe je weer hetzelfde als altijd Ook de grootte van de vierkant kunnen we aanpassen! - Dit doen we onder het kopje //Grootte vierkant (Breedte Hoogte) - Het eerste getal staat voor de breedte en het tweede getal voor de hoogte. Deze getallen kun je veranderen in elk willekeurig getal! 3.3. De snelheid van de vierkanten kunnen we ook veranderen! - Ga naar //Kop 2 Snelheid - Achter het woord random kun je tussen de haakjes de getallen (-2,2) veranderen. Probeer maar! De vierkanten aan sneller of langzamer bewegen. 7