Les 1: Maak je eigen karakter

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

Introduction

In deze les gaan de leerlingen programmeren met Processing. Door het programmeren van een eigen karakter leren ze stapsgewijs de basis. Natuurlijk kunnen ze de fantasie de vrije loop laten gaan en dit karakter een eigen draai geven. Deze les doorlopen leerlingen individueel of in tweetallen.

Instructions

Voorkennis van leerlingen

Leerlingen hebben geen voorkennis nodig. Wel kan ervaring met visueel programmeren zoals Scratch, Snap!, App Inventor of Blockly een stapje voor geven. 

Voorbereiding voor docent

• Zorg dat elke leerling een laptop met Processing heeft (https://processing.org/download).
  
• Zorg dat je de les doorgenomen hebt en dat je in staat bent te helpen bij eventuele bugs.

Leerdoelen/vaardigheden

Na deze les...

• kan je ellipsen en cirkels tekenen, 
• op elk gewenste plek, 
• met of zonder randen en 
• met een mooie kleur.

Aansluiting curriculum

Deze les sluit aan bij de volgende onderwerpen uit het informatica curriculum:

• Programmeren

Ondertitel

Hoe programmeer je een animatie?

Deel 1: Maak je eigen karakter

Les 1. Wat is creativiteit?

Informatie voor de docent

Vooraf

Lees vooraf de notities bij de dia's door. Verder zijn er geen voorbereidingen nodig. 

Benodigdheden

Iconen

Zet het vinkje 'toon bij leerling' aan

Toon notities bij elke dia

Navigeren door de les

Vergroot een afbeelding

Klik hier

Hotspot met meer informatie

Laptop voor elke leerling met Processing

Pen en papier

Uitgeprinte werkbladen

Waar denk je aan bij het woord 'programmeren'?

Les 1. Wat is creativiteit?

Programmeren

En computerprogramma's zitten overal: in je koffiezetapparaat, de auto, de wasmachine; in alle electronica! Dan wil je toch weten, hoe het werkt! In deze lessen gaan jullie een duik nemen in de wereld van programmeren en zelf een animatie maken. 

Jullie kennen vast wel de games Minecraft, the Sims, en Fifa. Dit zijn spellen die allemaal zijn gemaakt in de programmeertaal Java. Processing is een programma die veel gebruik maakt van de programmeertaal Java en hier gaan jullie de komende lessen in programmeren!

Les 1. Wat is creativiteit?

Processing

Processing is:

• een programmeertaal,
• makkelijk te leren,
• heel geschikt voor het programmeren van animaties en games,
• een mooie opstap voor veel andere programmeertalen zoals JavaScript, HTML, CSS, Arduino, Python, C++, en zo voort,
• handig voor een latere studie zoals bijvoorbeeld Elektrotechniek, Industrieel Ontwerpen, Creative Technology, Informatica, Game Design, etc.

Les 1. Wat is creativiteit?

Leerdoelen

Na deze les...

• kan je door middel van programmeren ellipsen en cirkels tekenen,
• op elk gewenste plek,  
• met of zonder randen en 
• met een mooie kleur.

Les 1. Wat is creativiteit?

Doel

Hiernaast zie je 'Harry', de sneeuwpop die jullie in komende vier lessen gaan tekenen.

Maar dat tekenen doe je niet met pen en papier!

Nee, je gaat een programma schrijven dat deze sneeuwpop gaat tekenen. 

Hoe je dat precies kunt doen? Dat leer je in deze lessen! 

Les 1. Wat is creativiteit?

 Wiskundige vormen

Met processing kun je heel makkelijk wiskundige vormen tekenen zoals cirkels, lijnen, rechthoeken, driehoeken. Die basisvormen kun je samenvoegen tot complexe plaatjes.

Les 1. Wat is creativiteit?

 Opdracht: Harry's basisvormen 

Hier rechts staat de afbeelding van sneeuwpop Harry. 

1. Bekijk de afbeelding goed en bedenk welke vormen je zou moeten gebruiken om Harry na te kunnen tekenen (driehoeken, vierkanten, cirkels, lijnen, etc.).
2. Teken Harry nu na op een kladpapier. Gebruik daarvoor de vormen die je hebt geïdentificeerd. 

Les 1. Wat is creativiteit?

Programmeeromgeving

Nu willen we een programma schrijven waarmee we Harry kunnen tekenen.

Daarvoor hebben we een programmeeromgeving nodig.

 

Jullie gaan met een programmeeromgeving werken waarin 

• je programma's kunt schrijven,
• je programma's kunt uitvoeren, 
• de uitvoer van je programma wordt getoond,
• je fouten in je programma kunt opsporen en verbeteren (debuggen).

Les 1. Wat is creativiteit?

Start

Daar gaan we:

Open de Processing applicatie op je laptop en bekijk de opbouw van het venster.

Welk onderdeel doet wat?

Klik hiernaast op de hotspots voor meer informatie.

Meer info

Hier komt je code te staan

Meer info

Hier worden fouten getoond, die bij het uitvoeren van je code optreden. En berichten, als je die in je code hebt staan.

Meer info

Deze knop draait je code.

Meer info

Deze knop stopt de code

Les 1. Wat is creativiteit?

Je eerste programma

Rechts zie je een kort programma staan. 

1. Typ dit over in jouw processing applicatie (de programmmeromgeving).
   LET OP: dat moet je heel zorgvuldig doen, elk teken moet goed zijn!
   Let ook op hoofdletters en kleine letters!
2. Klik nu op 'Run'. Wat gebeurt er?
3. Beweeg nu met de muis in het schermpje dat oppopt. Wat zie je?
4. Klik nu op 'Stop'. Wat gebeurt er?

Sleepopdracht

Opdracht

Schrijf nu deze codes in het witte scherm en klik op 'Run'. Kijk wat er gebeurt. Sleep het juiste antwoord naar de juiste plaats. 

In de linker bovenhoek van het venster staat een cirkel

In het midden van het venster staat een cirkel 

Het venster wordt heel hoog

Het venster wordt heel breed

Les 1. Wat is creativiteit?

Zelf programmeren

Is de vorige opdracht gelukt?

Mooi zo! 

Je hebt nu al 4 korte programma's over getypt en laten draaien. En je hebt gezien, wat deze programma's doen. 

Laten we nu kijken, hoe je programma's zelf kunt schrijven. Daarvoor moet je weten, hoe ze zijn opgebouwd. Dat ga je nu leren.

Les 1. Wat is creativiteit?

Het canvas

Een programma begint altijd met dezelfde eerste regel code 

(kleine letters!): void setup(){

Nu wil je tekenen. Daarvoor heb je een vel papier nodig. Dat heet hier een Canvas (werkblad). Je werkblad is het pop-up scherm dat je ziet als je je programma laat draaien (uitvoert).

Hoe groot moet je vel zijn? Dat hangt af van de tekening die je wilt maken. Dus leg je nu vast hoe groot je werkblad moet zijn, bijvoorbeeld: size(300, 400);

De x (300 pixels) geeft de breedte van je Canvas aan en de y (400 pixels) de hoogte.

Nu nog haakje sluiten (laatste regel) en je kunt je programmaatje al uitvoeren!

Les 1. Wat is creativiteit?

Opdracht: Grootte bepalen

Bepaal de grootte van je vel papier, je canvas:

1. Typ de code van het plaatje rechts over in je processing applicatie.
   
   
2. Klik op 'Run': wat zie je?
   
   
3. Pas nu de grootte van je canvas aan:
   Hoe groot wil je je vel maken?
   In welke verhouding wil je hoogte en breedte hebben?

Les 1. Wat is creativiteit?

Opdracht: Grijstint 

Heb je je programma uitgeprobeerd? Welke kleur heeft je werkblad?

Vind je die mooi? Of lelijk? Je kunt de kleur aanpassen door een commando toe te voegen: background(255);

Voor je programma uit. Welke kleur heeft je Canvas nu?

Verander nu het getal '255' in een ander getal en klik op 'Run'.

Hoe ziet je Canvas er nu uit?

Speel met de mogelijkheden: hoe ziet je favoriete Canvas eruit?

Les 1. Wat is creativiteit?

Opdracht: Zet een punt

Nu je canvas klaar ligt kun je beginnen met tekenen. Dat kondig je aan met 

de volgende regel code: void draw(){

Daaronder kun je nu code zetten om objecten te tekenen.

We beginnen met een punt. De code voor een punt is vrij simpel, namelijk: point(x, y);

De waarde voor x en y geven aan, op welke plek de punt moet komen.We nemen een kleine Canvas met grootte van 20 bij 20 en zetten een punt in het midden. Dan zet je in je programma: point(10, 10); 

En sluit je programma weer af met een sluitend haakje '}'

Probeer het uit! Je moet wel goed kijken, het puntje is echt klein.

Les 1. Wat is creativiteit?

Coördinaten 

Bij het tekenen van een punt moesten we aangeven op welke plek de punt op het Canvas moet verschijnen. Daarvoor hebben we coördinaten nodig.

Waarschijnlijk ken je coördinaten van een grafiek uit de wiskunde, dan ziet het er vaak zo uit als in de plaatjes rechts boven: het punt (0,0) zit ergens in het midden.

In Processing gebruiken we een assenstelsel dat iets anders is:

De linker bovenhoek is hier (0,0).

En helemaal rechts onderin ligt het punt met de hoogste waarden. Bij een Canvas van (300, 400) is dat het punt met de coördinaten (300, 400).

Les 1. Wat is creativiteit?

Oefenen met coördinaten 

Probeer het gebruik van coördinaten uit:

Je had het programma dat in de afbeelding rechts staat.

1. Verander nu de coördinaten van de programmaregel:

        point(10, 10);

     Wat zie je gebeuren?

2. Verander de grootte van het Canvas (size(20, 20));
    Wat gebeurt er?

3. Probeer verschillende waarden uit voor het Canvas en de punt die je wilt zetten.

Waar in het scherm van Processing ligt het (0, 0) coördinaat?

1. In het midden
2. Rechts bovenin
3. Links onderin
4. Links bovenin

Als het scherm (200, 200) is, wat zijn de coordinaten van het middenpunt?

1. 200, 200
2. 100, 100
3. 0, 200
4. 0, 0

Les 1. Wat is creativiteit?

Cirkels

Je weet nu, hoe je punten kunt tekenen. Daarmee zouden we 

de ogen en de knopen van sneeuwpop Harry kunnen tekenen.

Alleen zijn de punten wel heel erg klein!

We kunnen daarom beter cirkels gebruiken. 

Of, zoals Processing het noemt, ellipsen. Omdat een cirkel een bijzondere ellips is. 

De code voor het tekenen van een ellipse ziet er zo uit:

    ellipse(x, y, breedte, hoogte);

De x- en y-coördinaat benoemen het middelpunt van de ellipse, 

breedte en hoogte geven de doorsnede in de breedte en de hoogte aan.

Les 1. Wat is creativiteit?

Oefening: Harry's ogen en knopen

Kijk nu, hoe ver je Harry al kunt tekenen:

1. Definieer een Canvas van 400 x 400.
   
   
2. Set twee cirkels voor de ogen op een hoogte.
   TIP: Een cirkel krijg je, als je de breedte en de hoogte van de ellips even groot maakt. Wat is een goede breedte en hoogte voor ogen en knopen?
   
   
3. Set drie cirkels voor de knopen onder elkaar.

Zie je de sneeuwpop al ontstaan?

TIP: bekijk het werkblad 'Harry' voor het bepalen van de coördinaten. 

Les 1. Wat is creativiteit?

Zwarte knopen

Is het gelukt om de ogen en knopen van Harry te tekenen?

En ben je tevreden?

Of wil je graag zwarte ogen en knopen tekenen?

Dan moet je de rondjes inkleuren.

Om in Processing een figuur in te kleuren, gebruiken we de

    fill(grijstint);

Deze regel zet je voor de programmaregel voor het tekenen van je ellips (zie plaatje).

fill(0) geeft een zwarte kleur, en fill(255) geeft een witte kleur. Grijstinten gaan van 0 tot 255, dus 150 geeft een grijze kleur, bijvoorbeeld.

Les 1. Wat is creativiteit?

Opdracht: Ogen, knopen en lijf

Nu gaan we het lijf van de sneeuwpop tekenen:

1. Neem het programma van de vorige oefening.
   
   
2. Maak de ogen en de knopen helemaal zwart.
   
   
3. Voeg drie witte cirkels toe voor het lijf van de sneeuwpop.
    
4. Probeer uit of de volgorde van de vormen een rol speelt: 
   Moet je eerst de sneeuwballen tekenen of eerst ogen en knopen?
   Wat denk, hoe komt dat?

Juist, het programma gaat de vormen achter elkaar en 'over elkaar heen' tekenen. Op de voorgrond staat de vorm die als laatste werd getekend.

Les 1. Wat is creativiteit?

Een programma opslaan

Je hebt nu al een deel van Harry geprogrammeerd.

Het is handig om je programma goed te bewaren, dus op te slaan. Dan raak je het niet kwijt en kun je er later mee doorgaan.

Voor het opslaan van een programma gebruik je de bovenste menubalk van je processing applicatie:

1. Klik op 'File' en dan op 'Save'. 
   
2. Nu verschijnt een venster waarin je de map kunt kiezen waarin je je programma wilt bewaren. 
3. Geef je programma de naam 'Harry1' en klik op 'Save'. 
4. Sla je programma altijd op met 'Save' nadat je wijzigingen hebt aangebracht. 

Les 1. Wat is creativiteit?

Randen 

Sneeuwballen zijn wit, zonder (zwarte) rand.

In jouw tekening hebben alle vormen een zwarte rand, dat gaan we nu veranderen.

Als je de rand een andere kleur wilt geven, gebruik je:

    stroke(grijstint);

Met het commanda stroke(255) kleur je de rand wit. 

Je kunt de rand ook weghalen met:

    noStroke();

LET OP de hoofdletter 'S' in het midden van het woord!

Het is belangrijk dat je stroke of noStroke voor het commando voor het tekenen van het figuur zet.

Les 1. Wat is creativiteit?

Randdikte

Je kunt ook de dikte van de rand van de figuren aanpassen. Dit doe je met de code 

    strokeWeight(1);

LET weer op de hoofdletter midden in het woord!

Een 'gewone rand' heeft een strokeWeight van 1. Als je iets anders wilt, moet je een hoger getal meegeven.  

Ook het commando strokeWeight moet je voor het commando voor het tekenen van het figuur zetten.

Les 1. Wat is creativiteit?

Opdracht: Met en zonder randen

Nu weet je hoe je de randen van de 'sneeuwballen' dikker of dunner kunt maken of helemaal weg kunt halen.

1. Verander de randdikte of randkleur van de sneeuwballen.
2. Verwijder de randen van de sneeuwballen.
   Kun je het lijf van de sneeuwpop nog zien?
   Of heb je nu witte cirkels op een witte achtergrond? 
   
3. Los dit op door de achtergrond een andere grijstint te geven.
4. Sla je programma op.

Of wil je liever een gekleurde achtergrond? 

Ga dan snel verder!

Les 1. Wat is creativiteit?

Kleuren

Tot nu toe hebben we alleen maar grijstinten gebruikt. 

Maar echte kleuren zijn veel leuker! 

In processing kun je alle kleuren van de regenboog maken door de kleuren rood, groen en blauw te 'mengen'. Daarvoor moet 3 waarden meegeven aan een commando, bijv.

    fill(255, 150, 0);

of

    stroke(60, 120, 200);

Ook deze waarden gaan van 0 tot 255. 

Wit krijg je dan met: fill(255, 255, 255);

Zwart krijg je met: fill(0, 0, 0);

Les 1. Wat is creativiteit?

Opdracht: Sneeuwballen kleuren

Echte sneeuwballen zijn wit, maar jij kunt Harry's lijf of zijn ogen of knopen ook een andere kleur geven. 

Probeer dit uit:

Verander de kleuren van lijf, ogen of knopen van je sneeuwpop. Welke kleur vind je het mooist?

Sleepopdracht

Opdracht

Probeer de verschillende kleuren te vinden!

Cyan

Groen

Blauw

Oranje

Rood

Magenta

Geel

(255, 0, 255)

(255, 255, 0)

(0, 255, 255)

(255, 0, 0)

(0, 0, 255)

(0, 255, 0)

(255, 150, 0)

Les 1. Wat is creativiteit?

RGB-waardes

De waardes waarmee je de kleuren in processing beschrijvt, heten RGB-waardes (Red, Green, Blue). 

Er zijn ook andere programma's, die RGB-waardes gebruiken voor kleuren, bijvoorbeeld MS Word of Paint.

Als je bijvoorbeeld bij Paint in de ‘Bewerk kleuren’ optie kijkt, kun je snel zien welke kleur welke code heeft.

Les 1. Wat is creativiteit?

Gefeliciteerd!

Na deze les...

• ...kun je een werkblad (Canvas) definiéren
  
• ...kun je cirkels (en ellipsen) tekenen

1.  op een plek naar keuze
2.  en met of zonder rand

Je kunt de kleur kiezen van

1.  het werkblad,
   
2.  je vormen (de cirkels/ellipsen) en
   
3.  de rand van je vormen (cirkels/ellipsen).
   

Sla je programma op.

De volgende les leer je hoe je ook andere vormen kunt tekenen.

Les 1. Wat is creativiteit?

Geïnspireerd?

Als je dit een interessant onderwerp vond, dan is een vervolgopleiding in deze richting misschien iets voor jou.

Neem eens een kijkje bij Informatica, Computer Science of Creative Technology (universiteit of HBO).

Weet je welk (vakken)profiel je hiervoor nodig hebt? Zoek dat eens uit!

Les 1. Wat is creativiteit?

De makers van deze les willen graag weten wat je van de les vond. Ga daarvoor naar de (korte) vragenlijst. Heel veel dank!

Feedback gevraagd

ut.onl/leerling4tu

Vragenlijst voor leerlingen

Les 1. Wat is creativiteit?

De makers van deze les willen graag weten wat je van de les vond. Ga daarvoor naar de (korte) vragenlijst. Heel veel dank!

Feedback gevraagd

Vragenlijst voor docenten

ut.onl/docent4tu

Les 1. Wat is creativiteit?

Check www.4tuschools.nl voor meer inspirerende lessen!