Programmeren met Processing

(1)

Programmeren met Processing

KEUZEVAK ROBOTICA VMBO

(2)

Hallo!

Wat leuk dat je voor het keuzevak Slimme Technologie / Robotica hebt gekozen.

Ons einddoel wordt het aanpassen van een ‘dom’ apparaat naar een

‘slim’ apparaat.

Denk hierbij aan bijvoorbeeld een prullenbak die automatisch opengaat als je ervoor staat of een Halloween pop die bewegend wordt gemaakt door aanpassing,

Zo’n aanpassing doe je met behulp van een microcontroller en elektronica. Erg leuk om te doen.

Maar voordat je dat kan moet je eerst wat programmeerkennis

opdoen. En daar gaan we vandaag mee starten.

(3)

Je begint met de volgende programmeer sessies op het Internet:

Klik in de juiste volgorde op de onderstaande links:

Flappy Code:

Klik hier om Flappy Code te spelen

Werken met variabelen:

Klik hier om te leren wat variabelen zijn.

(4)

Vlaggen programmeren:

Klik hier om vlaggen te programmeren.

APP LAB:

Klik hier om APP LAB te starten

(5)

1 PROCESSING

Processing is één van de vele programmeertalen die beschikbaar is.

Het is een bekende en vrij gemakkelijk leerbare programmeertaal.

Je kunt er ook website apps mee maken.

Processing wordt veel gebruikt in de Robotica.

2 PROCESSING DOWNLOADEN & INSTALLEREN

Je kunt de laatste nieuwe versie van processing (32 & 64 bit) vinden op de website: www.processing.org

Maar je kunt processing ook gemakkelijk online (zonder installeren) gebruiken: Je surft dan naar de website:

https://www.openprocessing.org/sketch/create#

(6)

3 Je eerste processing programma

Zo, je gaat nu je eerste programma schrijven voor processing.

Ga via een webbrowser (Chroma) naar:

https://www.openprocessing.org/sketch/create#

Je ziet dan onderstaand venster verschijnen:

Onder ‘mySketch’ vind je een voorbeeldprogramma.

Dat programma gaan we nu uitvoeren.

- Klik op bovenaan in je scherm.

- Door nu met je muis te bewegen teken je allemaal balletjes op je scherm. Je hebt zojuist je eerste APP gemaakt in processing.

- Klik op om terug te gaan naar de editor.

(7)

We gaan nu zelf een programma in Processing schrijven.

- Klik op ‘Processingjs’

- Haal alle code weg (delete).

- Type vervolgens onderstaand programma over in de editor.

- Klik weer op bovenaan in je scherm.

- Je ziet nu een grijs vlak verschijnen met daarin een wit vierkant.

- Je hebt zojuist je eerste APP gemaakt!

(8)

OPDRACHT: de Nederlandse vlag in processing programmeren.

- Klik op om terug te gaan naar het programma.

- Je ziet vervolgens de Nederlandse vlag op je scherm verschijnen.

- Laat het resultaat zien aan je docent.

(9)

Even een korte uitleg van het programma Nederlandse vlag:

size (800,600);

Met ‘size’ maak je een venster aan. In dit geval van 800 pixels breed en 600 pixels hoog.

noStroke();

Met ‘noStroke()’ haal je de omlijning weg. Anders zie je in de Nederlandse vlag zwarte strepen lopen om je getekende vlakken.

fill (255,0,0);

Met ‘fill’ kies je een kleur. Je doopt als het ware een kwast in de verf.

de getallen 255,0,0 geeft de kleur fel rood.

rect (0,0,800,200);

Met ‘rect’ teken je een vierkant of een rechthoek.

rect (x,y,x1,y1);

x = het aantal pixels naar rechts verschuiven y = het aantal pixels naar beneden verschuiven x1 = de getekende breedte (in pixels)

y1 = de getekende hoogte (in pixels)

bij rect (0,0,800,200); tekenen we dus op positie 0,0 een rechthoek van 800 pixels breed en 200 pixels hoog.

fill (255,255,255); kies de kleur wit

rect (0,200,800,200); teken een witte rechthoek fill (0,0,255); kies de kleur blauw

rect (0,400,800,200); teken een blauwe rechthoek

(10)

OPDRACHT: de Belgische vlag in processing programmeren.

- Je ziet vervolgens de Belgische vlag op je scherm verschijnen.

(11)

CHALLENGE:

de Ijslandse vlag in processing programmeren.

- Probeer nu eens met je kennis van de Nederlandse en Belgische vlag de Ijslandse vlag te programmeren.

- De Ijslandse vlag ziet er zó uit:

TIPS:

- Gebruik size (700,500);

- Teken eerst een rechthoek van (900,600) met de kleur blauw.

- Teken dan een witte verticale rechthoek in de juiste maten.

- Teken dan een witte horizontale rechthoek in de juiste maten.

- Teken dan een rode verticale rechthoek in de juiste maten.

- Teken dan een rode horizontale rechthoek in de juiste maten.

- KLAAR?

- Je ziet, als het goed is, een mooie Ijslandse vlag op je scherm verschijnen. Laat het resultaat zien aan je docent.

(12)

OPDRACHT: een serie vierkantjes tekenen.

- Je ziet vervolgens een serie groene vierkantjes op je scherm verschijnen.

(13)

Even een korte uitleg van het programma serie groene vierkantjes:

size (640,480); maakt weer een leeg scherm aan van 640x480 pixels.

640 pixels horizontaal (x-as) en 480 pixels verticaal (y-as).

fill (0,255,0); maakt de vierkantjes groen for (int i = 0; i < width; i=i+15)

for is een teller. Het telt vanaf 0 tot de breedte van je scherm (640 pixels). Bij elke stap wordt variabele i 15 pixels groter.

Zolang i nog niet groter is dan de schermbreedte zal er een vierkant op het scherm worden getekend dat zich steeds meer verplaatst naar rechts via variabele i (die begint bij 0).

Dus er wordt een vierkant getekend op (0,100) – (15,100) – (30, 100) – enz.

Een variabele is een letter of woord waaraan je een getal of tekst toekent. Je maakt een variabele door het gebruik van Int.

Bijvoorbeeld: Int lengte = 100;

Hierbij ken je de variabele lengte de waarde 100 toe.

OPDRACHT:

Verander de regel rect (i,100,10,10);

in het volgende:

rect (i,100,40,40);

start het programma opnieuw.

Wat valt je op?

(14)

Met een goede structuur programmeren.

Bij grote programma’s en bij programma’s met bepaalde instructies moet er op een bepaalde gestructureerde manier geprogrammeerd worden.

Je programma krijgt dan de structuur zoals hieronder is weergegeven:

void setup ()

{

}

void draw ()

{

}

Met ‘void’ maak je een programma in een programma. Hiermee kun je structuur aanbrengen in je code.

De code onder void setup () wordt altijd éénmalig uitgevoerd.

De code onder void draw () wordt oneindig keer uitgevoerd.

(15)

OPDRACHT: een gestructureerd programma schrijven

- Je ziet nu een wit blokje heen en weer bewegen op je scherm.

(16)

OPDRACHT: Tekst op het scherm schrijven

- Klik op bovenaan in je scherm om het programma te starten.

(17)

OPDRACHT: Een beetje wiskunde toepassen.

- Klik op bovenaan in je scherm om het programma te starten.

Klaar? Ga naar de

volgende bladzijde

(18)

YouTube lessen

In dit gedeelte van de lessenserie ga je proberen een GAME te programmeren. Dat ga je stap voor stap uitproberen.

Daarvoor staat er een lessenserie klaar op het YouTube Robotica kanaal van het Geuzencollege.

Klik HIER op de link om het kanaal te openen.

Op dit kanaal zie je een lessenserie staan over het programmeren met de taal Processing. Het doel is om uiteindelijk een game te maken ter voorbereiding op ons eindproject om een apparaat te besturen.

Je volgt de lessen in de juiste volgorde.

Begin met de les Programmeren met Processing 00 (Introductie).

Daarna 01 – 02 – 03 enz.

Volg de YouTube lessenserie en programmeer het programma mee dat in de les wordt behandeld.

Gebruik weer deze link om online te kunnen programmeren.