Les 2: Ga verder met je karakter

Ondertitel

Hoe programmeer je een animatie?

Deel 2: Ga verder met je karakter

1 / 19

Slide 1: Diapositive

InformaticaMiddelbare schoolhavo, vwoLeerjaar 4,5

Leçon par 4TU.Schools

Cette leçon contient 19 diapositives, avec diapositives de texte.

La durée de la leçon est: 45 min

Introduction

In deze les gaan de leerlingen programmeren met processing. Dit is les 2 van deze lessenserie. Door het programmeren van een eigen karakter leren ze stapsgewijs de basis. Deze les doorlopen leerlingen individueel of in tweetallen.

Instructions

Voorkennis van leerlingen

Leerlingen moeten eerst les 1 hebben gemaakt van deze lessenserie voordat ze beginnen met deze les.

Voorbereiding voor docent

Zorg dat elke leerling een laptop met processing heeft.
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 verschillende vormen tekenen in processing
en deze samenvoegen tot een complex plaatje.

Aansluiting curriculum

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

Programmeren

Éléments de cette leçon

Ondertitel

Hoe programmeer je een animatie?

Deel 2: Ga verder met je karakter

Slide 1 - Diapositive

Les 1. Wat is creativiteit?

Voor je begint

Wat heb je nodig

Een laptop
Pen en papier is optioneel maar wel handig
Het programma processing, deze kan je downloaden op de volgende website:
https://processing.org/download

Slide 2 - Diapositive

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

Slide 3 - Diapositive

Les 1. Wat is creativiteit?

Verder met Harry

In de vorige les ben je begonnen een programma te schrijven, dat de sneeuwpop Harry kan tekenen.

De ronde vormen kun je al tekenen.

In deze les leer je hoe je alle andere elementen kan toevoegen.

Slide 4 - Diapositive

Les 1. Wat is creativiteit?

Leerdoelen

Na deze les...

kan je verschillende vormen tekenen in Processing
en deze samenvoegen tot een complex plaatje.

Slide 5 - Diapositive

Les 1. Wat is creativiteit?

Een programma ophalen

We gaan nu verder met het programma dat je vorige les hebt gemaakt. Dit haal je nu op.

Open de processing applicatie.
Open je programma van de vorige les:
- Klik op 'File'
- Klik op 'Open'
- Er popt een nieuw venster op.
Zoek daarin de juiste map op met programma 'Harry1'
- Klik op 'Open'

Je programma staat nu weer in de programmeeromgeving.

Slide 6 - Diapositive

Les 1. Wat is creativiteit?

Harry's armen: Lijnen

We gaan nu Harry's armen tekenen. Daarvoor heb je lijnen nodig.

Lijnen beschrijf je, door begin- en eindpunt mee te geven:

line( x1, y1, x2, y2);

Je moet dus de coördinaten van het beginpunt geven (x1, y1),

en de coördinaten van het eindpunt (x2, y2).

Kleur en dikte van de lijn kun je veranderen zoals je al weet.

Voor de kleur van de lijn gebruik je:

stroke(R,G,B);

en voor de lijndikte:

strokeWeight(dikte);

Slide 7 - Diapositive

Les 1. Wat is creativiteit?

Opdracht: De armen van de sneeuwpop

Je weet nu hoe lijnen getekend worden.

Geef je sneeuwpop armen.
Hoe staan de armen van jouw sneeuwpop?
Geef de armen van je sneeuwpop vingers.
Hoeveel vingers heeft jouw sneeuwpop?

Wil je de Harry nu ook een neus en een hoedje geven?

Ga dan gauw verder!

Slide 8 - Diapositive

Les 1. Wat is creativiteit?

De hoed

Harry's hoed bestaat uit meerdere rechthoeken.

Om een rechthoek in processing te beschrijven, moet je de linker bovenhoek aangeven, en de grootte (breedte en hoogte):

rect(x, y, breedte, hoogte);

De x- en y-coördinaat zijn dus van de linker bovenhoek van de rechthoek, daarna staan de breedte en hoogte van de rechthoek.

Het heet een rectangle, het Engelse woord voor rechthoek.

Hoe je een kleur of een (andere) rand kunt maken, weet je al.

Slide 9 - Diapositive

Les 1. Wat is creativiteit?

Opdracht: Harry's hoed

Geef je sneeuwpop nu een hoed.

Kies zelf of je Harry wilt maken of een eigen

sneeuwpop met een andere hoed.

Maak er iets moois van!

WEET JE NOG?

Een rechthoek maak je met: rect(x, y, breedte, hoogte);
Veranderen van kleur en rand gaat net zoals bij de andere vormen met stroke(r,g,b), strokeWeight(number) en fill(r,g,b).

Slide 10 - Diapositive

Les 1. Wat is creativiteit?

De neus

Harry's neus is een driehoek.

De driehoek is een soort uitbreiding van de lijn:

triangle(x1, y1, x2, y2, x3, y3);

De driehoek heeft zes coördinaten nodig: de

coördinaten van alle drie hoeken.

Het maakt niet uit welke hoek je als eerste in de code zet, de drie punten worden gewoon met elkaar verbonden.

Veranderen van kleur en rand gaat net zoals bij de andere vormen met stroke(r,g,b), strokeWeight(number) en fill(r,g,b).

Slide 11 - Diapositive

Les 1. Wat is creativiteit?

Opdracht: Harry's neus

Geef je sneeuwpop nu een neus.

Kies weer zelf of je Harry wilt maken of een

eigen sneeuwpop met een andere neus.

WEET JE NOG?

De driehoek heeft zes coördinaten nodig.
Veranderen van kleur en rand gaat net zoals bij de andere vormen met stroke(r,g,b), strokeWeight(number) en fill(r,g,b).

Slide 12 - Diapositive

Les 1. Wat is creativiteit?

Overzicht houden

Het is best veel werk, om ingewikkelde plaatjes op te bouwen uit veel verschillende vormen.

Als je die plaatjes dan wilt aanpassen of in een andere game opnieuw wilt gebruiken, moet je wel goed weten wat je hebt geprogrammeerd. Je moet overzicht hebben over je code.

Dat kun je het beste doen, door witregels en commentaar op te nemen in je code. In processing gebruik je daarvoor de dubbele / (zie voorbeeld in de code rechts).

Als je die voor een tekstregel zet, wordt deze regel bij het uitvoeren van de code overgeslagen. Hier kun je dus uitleg opschrijven over wat er in het programma gebeurt.