Opdrachten tekenen met code en P5.js

Deze opdrachten zijn bedoeld om je te helpen kennis te maken met het tekenen met code en P5.js. In iedere opdracht wordt je gevraagd een bepaalde vorm na te tekenen met code.

Voor deze opdrachten kan je meer informatie vinden op de knowledgebase:

• Structuur van een p5.js programma
• Schermcoordinaten
• Vormen
• Kleuren

Voor deze opdrachten zal je gebruik moeten maken van de volgende programmeerbegrippen:

• Variabelen
• loops

Gitlab structuur

Dit zijn allemaal kleine losse opdrachten. Het werkt het beste als je de opdrachten in losse mapjes in re git repository plaatst:

opdrachten-sprint-1/
├── opdracht-1/
├── opdracht-2/
├── opdracht-3/
├── opdracht-4/
└── opdracht-5/

Opdracht 1	vormen, coordinaten en variabelen
	Teken een cirkel het midden van het canvas
	Teken een cirkel op de hele canvas.

Hints voor Opdracht 1 (probeer eerst zelf)

• Gebruik de circle() functie om een cirkel te tekenen.
• Gebruik de width en height eigenschappen van het canvas om het midden van het canvas en de grootte van de cirkel te bepalen.

Opdracht 2	loops
	Teken 10 gelijke cirkels over de breedte van het canvas.
	Teken 100 gelijke cirkels

Hints voor Opdracht 2 (probeer eerst zelf)

• Gebruik een loop om meerdere cirkels te tekenen.
• Bereken de x-coördinaat van elke cirkel met behulp van de index van de loop.
• Gebruik de width property van het canvas om de grootte van de cirkels te bepalen.
• Maak een variabele aan voor de grootte (diameter) van de cirkels.

Hints voor Opdracht 2 (probeer eerst zelf)

• Nested for-loops (een loop in een loop)

Opdracht 3	Kleuren
	Teken 144 cirkels die horizontaal verlopen van zwart naar rood.
	Teken 144 cirkels: van zwart naar rood van zwart naar groen van zwart naar blauw

Hints voor Opdracht 3 (probeer eerst zelf)

• Gebruik de fill() functie om de cirkels in te vullen.
• Gebruik de map() functie om de kleur te bepalen op basis van de index van de loop.
• Gebruik een if-statement of een conditional operator om de kleur te bepalen op basis van de rij.

Opdracht 4	Controle over je loops
	Maak deze afbeelding na met code.
	Maak deze afbeelding na met code.
	Maak deze afbeelding na met code.

Hints voor Opdracht 4 (probeer eerst zelf)

• Gebruik een loop om de lijnen te tekenen.
• Bereken de y-coördinaat van elke lijn met behulp van de index van de loop.

Opdracht 5	Loops en if-statements
	Teken afwisselend vierkanten en cirkels in een lijn.
	Teken afwisselend cirkels en vierkanten in vertikale kolommen.
	Teken afwisselend vierkanten en cirkels in een raster.
	Zorg ervoor dat je makkelijk meer vierkanten en cirkels kunt tekenen.

Hints voor Opdracht 5 (probeer eerst zelf)

• Gebruik een if-statement of een conditional operator om de vorm te bepalen op basis van de index van de loop.

Uitdaging bij Opdracht 5

• Maak geen gebruik van if-statements of conditional operators om hetzelfde resultaat te bereiken.