Loading

EC Processing Programmeren in Processing

Processing downloaden

Voordat je met Processing kunt gaan werken zul je het programma eerst moeten downloaden.

  • Maak daarvoor eerst een mapje Processing aan in de map Programmeren & webdesign op je Z-schijf.
  • Ga naar processing.org.
  • Klik op downloaden in het scherm, dan kom je op een scherm zoals hieronder is aangegeven, klik dan op Windows 64 bit.
  • Je komt dan op een pagina om te doneren, maar dat hoeft natuurlijk niet. Links onder staat je download.
  • Verplaats het bestand van je downloads, naar je mapje Processing.
  • Kijk of je het bestand nog moet uitpakken (rechter muisknop, unzip).
  • Je start dus altijd vanuit je bestanden.

Workshop 1: Basis opzet

Acceptatiecriteria:

  • Je kunt een opzet van een programma maken
  • Je kunt een speelveld voor je programma bepalen
  • Je kunt werken met kleuren in de achtergrond
  • Je kunt rechthoeken, cirkels, lijnen en driehoeken tekenen en deze een kleur geven
  • Je kunt tekst plaatsen

Achtergrondinformatie

Kleuren

Processing werkt met de RGB kleurenverdeling. Die ken je misschien wel van Photoshop of Illustrator. R staat voor Rood, G staat voor groen en B staat voor blauw. De mate waarin een kleur aanwezig is in een combinatie van deze rood, groen en blauw maakt het de kleur die je op het scherm ziet. Je geeft dit aan in het programma, door de hoeveelheid van zo'n kleur tussen 0 en 255 te kiezen. Je geeft dit op de volgende manier aan, bijv. ( 100, 100, 100). De volgende kleuren zijn dan standaard:

  • (0, 0, 0) is geen enkele kleur, dus zwart, hier mag je ook alleen (0) invullen.
  • (255, 0, 0) is rood.
  • (0, 255, 0) is groen.
  • (0, 0, 255) is blauw.
  • (255, 255, 255) is alle kleuren samen, dus wit, hier mag je (255) invullen.
  • (255, 0, 255) is rood en blauw gecombineerd en dat wordt paars. Zo kun je combineren
De kleuren cirkels geven licht van de drie RGB-kleuren. In PS of Ai kun je ook kleuren gebruiken in het plaatje gebruiken ze nu wit. Je ziet alles op 255 staan.

Coördinaten

Een coördinatenstelsel is een manier om een plaats op een veld aan te geven. We gebruiken dit veel bij grafieken, bijvoorbeeld in de wiskunde of om een plaats op de kaart aan te geven bij aardrijkskunde. Het coördinatenstelsel in Processing is iets anders dan je gewend bent bij wiskunde; de linker boven hoek is het punt (0,0). Naar rechts loopt het dan op, dit is de x-waarde. En naar beneden loopt het op, dit is de y-waarde.

Opbouw coördinatenstelsel in Processing

Je kunt met deze coördinaten vormen tekenen. Bij een rechthoek, geef je eerst de linker bovenhoek aan en daarna de breedte en de hoogte van je rechthoek. Op het plaatje hieronder punt (1,2), 4 breed en 3 hoog (naar beneden!). In Processingtaal:

rect (1, 2, 4, 3);

Zo teken je lijnen door het begin en eindpunt in de code aan te geven en een ellips of een cirkel, door het middelpunt en dan de breedte en de hoogte aan te geven. Hier onder in processingtaal, zodat zijn:

  • line (1, 2, 5, 2);
  • ellipse (3, 3, 4, 6);

Tutorial 1

Dit is het voorbeeldprogramma dat in de video behandeld wordt en het resultaat.

Het eerste voorbeeld programma
Uitvoering van het voorbeeldprogramma

Video

Opdracht 1a: Verander de vormen uit het voorbeeld van plaats, kleur en vorm, Zet boven aan het scherm je naam. Sla op als opdracht 1.

punten: 1

Opdracht1b: Probeer met behulp van het geleerde uit opdracht 1a een tekening van een sneeuwpop te maken.

punten: 2

Workshop 2: beweging

Acceptatiecriteria:

  • Je kunt de randen van objecten in kleur en dikte bepalen.
  • Je hebt variabelen toegevoegd aan je programma.
  • Er zit beweging in je programma.
  • In het programma gebruik je if en or functies.
  • Je gebruikt de functies Width en Height.

Achtergrond informatie

Variabelen

Een variabele kun je zien als een soort 'doos' waar je bijvoorbeeld een getal, een tekst of iets anders in kunt stoppen. Denk bijvoorbeeld aan de x bij wiskunde. De x is niets zolang je die x geen inhoud geeft. Die inhoud bepaal jij in het programmeren.

In processing zijn er verschillende soorten variabelen, die allemaal 1 soort datatype kunnen bevatten. Deze 'doosjes' hebben 1 functiesoort. Je kunt geen woord stoppen in een 'doosje' van de getallen en omgekeerd. Alles past alleen in zijn eigen 'doosje', anders zal het programma niet werken. De meest gebruikte zijn:

  • int - hierin staan gehele getallen, zoals 5 of 0 of 23 of -4
  • float - hierin staan komma getallen 0.2 of 5.3 of -4.004 (punt is de komma)
  • String - variabele waar je een tekst in plaatst, tussen " en "
  • boolean - is een waarheidswaarde; waar of niet waar (true or false).

Variabelen zetten we bovenaan in het programma. Ze zijn dan makkelijk te vinden en eventueel aan te passen. En het programma leest van boven naar beneden, dus moet eerst weten wat iets is, voor dat het bruikbaar is. Een variabele moet altijd eerst aangemaakt worden, voordat je hem kan gebruiken.

Gebruik voor je variabele altijd een naam die voor jou duidelijk is, bijv. x als het een beweging over de x-as is, of spelerX als je in een spelletje bezig bent.

Twee regels:

  • Beginnen met een kleine letter na je variabele.
  • Gebruik geen namen die Processing als term heeft.

In de tutorial leer je meer over variabelen.

Termen binnen Processing

We begrijpen dat je niet al die termen kunt onthouden en als je iets nieuws wil uitvoeren, dat je dan niet de term zelf weet. Mocht je nu naar een term zoeken, wat het ook al weer was, dan kun je op de site van Processing.org bij references de lijst van termen bekijken.

Tutorial 2

Dit is het voorbeeldprogramma dat in de video behandeld wordt en het resultaat.

Het programma in Processing
Een momentopname van de bewegende bal

Video

Opdracht 2a: Maak met behulp van het basisprogramma uit deze tutorial een eigen 'kunstzinnig' programma, waarin een beweging over een scherm gaat.

punten: 1

Opdracht 2b: Maak een veld zo groot als je scherm, waarbij meerdere vormen in verschillende lijnen over het scherm bewegen (voeg variabelen toe).

punten: 2

Workshop 3: Meer ballen

Acceptatiecriteria:

  • Je maakt een eigen programma, aan de hand van het voorbeeld programma.
  • In je programma zitten meerdere objecten die bewegen.
  • Je gebruikt de functies array, for en randsom.

Achtergrond informatie

Reeksen (Array)

Een reeks (Array) is een lijst met gegevens of data. Dit kan van alles zijn. Ieder stukje van die gegevens, is in een reeks aangegeven door een indexnummer, waaraan je kunt zien waar die in de reeks staat. Het eerste element in de reeks staat op positie [0], de tweede op positie [1], en zo verder. Reeksen lijken op objecten en moeten worden aangemaakt met het commando new.

Een reeks of array heeft een variabele lengte, die ergens moet worden aangegeven. Let bij het aangeven van die lengte erop dat de indexlijst met 0 begint en dat het aantal dus altijd het aantal -1 moet zijn. In ons programma gebruiken we i < 5 voor de indexgetallen, dit zijn er wel 5, nl; 0, 1, 2, 3 en 4. Geef je dit niet goed op dan krijg je een fout melding.

Voor (For)

For regelt de manier van de herhalingen. Iedere for commando heeft 3 delen, die tussen haakjes staan, gescheiden door ; nl. de start, waaraan het moet voldoen en de update.

In ons programma staat: for ( int i = 0; i < 5; 1++) { }.

De int geeft aan dat het gehele getallen zijn, de i = 0 dat de herhaling moet beginnen met de eerste uit de reeks, de i < 5 dat het tot indexnummer 4 gaat, 1++ dat er vanaf indexnummer 0 steeds 1 bijkomt. Tussen de haakjes { } moet dan opgegeven worden wat er moet gebeuren voor deze waarden. In ons geval een ellips die beweegt.

Random

Random of willekeurig zorgt er voor dat er willekeurige getallen komen. Die getallen worden gekozen uit het bereik dat je tussen haakjes achter het random commando zet. Zo zal random (-5, 5) willekeurige getallen tussen -5 en 5 kiezen. Geef je maar 1 getal, dan zal het programma tussen 0 en dat getal kiezen.

Tutorial 3

Dit is het voorbeeldprogramma dat in de video behandeld wordt en het resultaat.

Eerste deel van de tutorial
resultaat eerste deel
Programma na het tweede deel
Resultaat aan het eind van de tutorial

Video

Opdracht 3a: Maak met behulp van het basisprogramma uit deze tutorial een eigen programma, waarin je eigen veranderingen, kleur, snelheid, vormen toepast.

Punten: 1

Opdracht 3b: Maak met behulp van het basisprogramma uit deze tutorial een eigen programma, waarin je eigen veranderingen, met willekeurige kleuren en vormen toepast.

Punten: 2

Workshop 4: ballen wegklikken met de muis

acceptatiecriteria:

  • Je past het voorbeeldprogramma, naar eigen voorkeuren aan.
  • Je werkt met verschillende functies van de muis
  • Je kunt in het programma met de muis, objecten wegklikken.
  • Je gebruikt de functie dist en break.

Achtergrond informatie

Absolute en relatieve getallen

In processing werken we in een veld, waarbij linksboven punt (0,0) staat. Vanuit dit punt bepaal je de grootte van het veld. Iedere plaats op het veld heeft dan een positie die bepaald wordt hoever die naar rechts staat; de x. En hoever die naar beneden staat, de y. Deze plek aangegeven door een getal voor x en een getal voor y, is de absolute plaats van deze plek.

We werken in processing echter ook met waarden ten opzichte van iets anders. Dit zijn de relatieve waarden. Een voorbeeld is de richting waarin een object beweegt. Gaat een object naar rechts, dan verplaats dat voorwerp zich, per keer dat het programma doorrekent, een aantal posities over de x-as, naar een hogere x-waarde. Gaat het object naar links, dan gaat het naar een lagere x-waarde. Er gaat dus iets af van de x-waarde. Dit geven we aan met een + of een - voor de verandering.

Voorbeeld: x = x + 3 zal de volgende keer iets naar rechts zijn opgeschoven, x = x - 3 zal de volgende keer iets naar links zijn opgeschoven. Maar de afstand die ze opschuiven is beide keren 3.

Als een object een verplaatsing heeft van A naar B, dan zal in dit geval de verplaatsing 4 zijn, gaat die van B naar A, dan zal de verplaatsing -4 zijn.

Dit zelfde geldt natuurlijk ook voor de y, maar dan is naar beneden + en naar boven -. Dit is een beetje verwarrend, omdat we het meestal omgekeerd zien, bijvoorbeeld in een thermometer of bij wiskunde.

Als een object een verplaatsing heeft van A naar B, is de relatieve afstand van x 3 en y -5, de absolute afstand is voor x 3 en voor y 5.

Muis en afstand tot object

Als je met de muis een object wil aanraken, dan zul je moeten aangeven wat de afstand van je muis tot het object is. In ons spelletje hebben we een cirkel en als we erop komen met de muis en we drukken de muisknop in dan gaat het balletje buiten het scherm. Je kunt hier natuurlijk ook andere gebeurtenissen laten plaatsvinden; vierkantjes i.p.v. cirkels of van kleur veranderen in plaats van verdwijnen, enz.

Hoe berekenen we of we binnen de cirkel klikken? Dan moeten we kijken, waar de x en de y zijn van de cirkel en hoe groot de cirkel is. In ons geval is de code: ellipse (100, 100, 30, 30). De ellips staat op positie x = 100 en y = 100 en heeft een diameter van 30 van links naar rechts en 30 van boven naar beneden, daarmee is het een cirkel. De afstand van het midden van de cirkel en de rand is de straal of radius van de cirkel en dat is een halve diameter, dus hier 30 : 2 = 15.

Als de x en de y van de muis binnen de afstand van de straal van de cirkel vanuit het midden van de cirkel komt, dan wijst de muis de cirkel aan. In ons geval is midden cirkel (100,100), dus op de x mag je 15 afwijken en op de y mag je 15 afwijken. Juiste waarden zouden dan zijn alles tussen 85 en 115. Let op het is een cirkel dus zowel op de x als de y 15 afwijken lukt niet. Die afstand is volgens de stelling van Pythagoras, groter dan 15.

De plaatsen waar de muis binnen de cirkel vallen op het rechter plaatje, zijn A en C. De afstand vanaf het midden is 2, dus bij A (5,3) is de x 2 groter en y gelijk. Bij C is de absolute afstand van x en y 1, samen minder dan 2 vanaf het midden. Bij B is zowel de x, als de y op een afstand van 2, zodat het punt buiten de cirkel komt.

Bij andere objecten, zoals bijvoorbeeld een rechthoek heb je een ander beginpunt, dus zul je ook andere berekeningen moeten maken.

Tutorial 4

Basisprogramma, waarin je zelf veranderingen aanbrengt

Video

Opdracht 4a: Maak aan de hand van het voorbeeldprogramma, een eigen opzet van je spelletje.

punten: 1

Opdracht 4b: Maak met behulp van het geleerde, een programma waarmee je kunt tekenen op ongeveer schermgrootte en maak dan een afbeelding met tekst en een tekeningetje.

punten: 1

Workshop 5: punten en Game over!

acceptatiecriteria:

  • Je maakt een eigen game met scoreverloop.
  • Je verwerkt tekst in je scherm.
  • Je hebt een werkende score in je game.
  • Je voegt een wedstrijd element toe aan je game.
  • Je hebt een afsluitingsscherm.

Achtergrond informatie

Absoluut - abs ( )

Met de absolute afstand wordt in ons programma op de volgende manier gewerkt; als we naar de snelheid van de ballen kijken, gaan ze naar rechts en omlaag met een positieve snelheid, bijv. +3 en naar links en naar boven, met een negatieve snelheid bijv. -2. De min en de plus staan voor de richting en het getal voor de snelheid. Die snelheid is altijd 0 (dan sta je stil) of hoger. Absoluut gaat hier dus om de snelheid.

Tekst

De tekst die je in je programma zet is een standaard lettertype, die zou je kunnen veranderen. Dan zul je op de site van processing.org moeten kijken of je dit lukt. Belangrijk om te weten is dat het referentiepunt van tekst, altijd links onder de eerste letter start. Plaats je een tekst op punt (0,0), dan zie je niets op het scherm, omdat de tekst dan net boven het veld staat. Zo moet je, als je tekst in het scherm wil centreren, ook goed kijken hoe lang je tekst is en dan gokken hoeveel plaats deze in beslag neemt. Gewoon een kwestie van uitproberen en aanpassen.

Tutorial 5

Eerste deel voorbeeldprogramma
Tweede deel voorbeeldprogramma

video

Opdracht 5: Maak aan de hand van de in de tutorial behandelde voorbeelden een eigen game, met eigen ontwerpen in kleuren, vormen en teksten.

Punten: 1

Opdracht 5b: Ontwerp een eigen game met andere bewegingen en een ander doel als uitdaging. Bijvoorbeeld vallende ballen die in het scherm gehouden moeten worden.

Punten: 2