Blog

Overzicht

• Waarom p5js?
• Wat is p5js
• Een opdrachtje
• XY Grid
• Voorbeeld Code
• Een vervolg opdrachtje
• Inzetbaarheid Lesmethode en spin-off

Waarom p5js?

• Omdat er geen dekkende lesmethode is voor Informatica voor bovenbouw MH.
• De bestaande opdrachtenseries van Instruct en Informatica-Actief zorgen voor versnipperde kennis.
• Omdat Informatica voor alle leerlingen moet zijn en niet alleen voor de nerds.
• Code resultaat visueel aantrekkelijk maken
• Het moet eerst leuk zijn en daarna gaan we leren
• Omdat één van mijn leerlingen zegt: p5JS is onwijs.

Wat is P5JS?

• Een Javascript Library van de Processing Foundation
• De opvolger van Processing (Java) en ProcessingJS
• Lesmateriaal is gemaakt door Louis Pereira in opdracht van The New York City Foundation for Computer Science Education (CSNYC) en CS4all. CS4all heeft een uitgebreid curriculum waaronder dus Introduction to Computational Media. Ze werken nu aan 2.0 om aan de AP-Guidelines te voldoen. Hier moeten wij ook weer op meeliften.
• Dit materiaal wordt vooral gebruikt bij Art Colleges.
• De Nederlandse vertaling ervan is uitgebreid met meer Informatica / programmeer-onderwerpen.

CSNYC, A 10-year public/private initiative to bring computer science education to every New York City public school, representing 1.1 million students. By 2025, every NYC public school student in grades K-12 will receive a meaningful, high-quality CS learning experience at the elementary, middle, and high school levels.

https://www.csforall.org/about/csnyc/

Bronnen en links

• p5js.nl
• p5js.org
• P5JS Editor

Opdrachtje : teken en codeer een robot

Je krijgt het uitdeelvel van de workshopleider. Teken in het vlak van 400×400 pixels een robotkop die bestaat uit cirkels, rechthoeken, vierkanten en ovalen. Je mag de randen van deze vorm dikker maken en in een contrastkleur zetten. Alle vormen kun je vullen met een eigen kleur.

X-Y Grid

• Horizontaal: x en w
• Verticaal: y en h

Voorbeeld Code

• circle(x,y,r)
• ellipse(x,y,w,h)
• square(x,y,h)
• rect(x,y,w,h)
• fill(col) vulkleur, met col een html-color-name "blue" of een "#12AA12" hexcode
• stroke(col) de randkleur
• strokeWeight(r) de dikte van de rand
• // commentaar regel: naam van het lichaamsdeel

Een Vervolg Opdrachtje

De robot is leuker als deze meebeweegt met de muis. Een heel eenvoudige uitbreiding is dan: https://p5js.nl/unit-1/la-2/2-1-meebewegen-met-de-muis/

Om ‘echt’ te gaan programmeren gaan we werken met eigen variabelen. Ervaren programmeurs en docenten exacte vakken kunnen gelijk van start met Meebewegen met de Muis op Eigen Variabele

Inzetbaarheid Lesmethode en Spin-Off

• Ontwikkeld voor bovenbouw Havo/VWO
• Zou geschikt moeten zijn vanaf brugklas Mavo.
• Spin-Off: Wiskunde en Natuurkunde gaan hier direct van profiteren. Maar dan moet je ’t wel in de onderbouw aanbieden. Bovenbouw-onderwerpen als Vectoren, Goniometrie (cos, sin, tan), en radialen laten zich makkelijk toepassen. Geen vergezochte redenen waarom cos() belangrijk is maar gewoon die cos(x) gebruiken om een cirkel te tekenen.