Ga naar de inhoud

p5js nl

Leer programmeren voor visual arts

Menu
  • Home
  • Unit 1
    • Unit 1, LA1
      • U1 LA1 1.1. Maak een Robot
      • U1 LA1 1.2 Lijn functies en parameters
      • U1 LA1 1.3 Teken een GSM
      • U1 LA1.4 Meerhoeken, sterren, bogen
      • U1 LA 1.5 Mini-project: Maak een Taijitu (Yin & Yang)
    • Unit 1, LA 2
      • U1 LA 2.1 Meebewegen met de muis
      • U1 LA2.2 Meekleuren met de muis op je eigen variabele
      • U1 LA 2.3 Random Ellipsen
      • U1 LA2 Mini-Project Custom Emoji
    • Unit 1, LA3
      • U1 LA 3.1 Inleiding Kleur
      • U1, LA 3.2 Maak je lievelingskleur in de HSB kleurmodus
      • U1 LA 3.3 Kleuren paletten
      • U1 LA3 Final Project: Album Art
  • Unit 2
    • Unit 2, LA1
      • U2 LA 1.1 Levensweg
      • U2 LA1.2 If-Then-Else Kleur die Robot
      • U2 LA 1.3 AND en OR
      • U2 LA1 Mini-Project Stoplicht
      • U2 LA1.4 Tekenen met de muis
      • U2 LA1.5 De map() functie
    • Unit 2, LA 2
      • U2 LA2.1 Raken met Collide2D
      • In Aanbouw
      • U2 LA 2.2 (in aanbouw)
      • U2 LA2 Final Project Light Switch Game
    • Unit 2, LA3
      • U2 LA 3.1 (in aanbouw)
      • U2 Final Project Painter
  • Unit 3
    • LA2 2.1 While Loops
    • LA2 2.?, Arrays en Loops
    • In Aanbouw
  • Blog
  • Docenten Info
  • Contact
    • Beoordeel P5js.nl
  • Links
    • P5JS Editor
    • P5JS.org
    • Video’s Coding Train
    • Reference
    • Intro to Computational Media
    • Freesound
Menu

LA1 1.2 Lijn functies en parameters

De rechthoek

In het programmeren gebruik je het aanroepen van functies: stukken code die al gemaakt zijn. Wel zo handig. Bij die functies geef je parameters aan: hoe gebruiken we de functie deze keer.

rect(50, 50, 100, 100); 

In de reference (opzoekboek) staat precies aangegeven welke functie hoe werkt. In het geval van rect:

  • tekent een rectangle
  • Het punt linksboven (x,y) geeft de eerste 2 parameters
  • De breedte = width en hoogte = height geven parameters 3 en 4.

Maak het werkblad

createCanvas(width, height)
  • tekent het werkvlak
  • met de aangegeven breedte en hoogte. Typisch: 400×400, dan past ie op een half scherm. Of: 1000 x 800, dan vult ie een normaal scherm redelijk

De achtergrondkleur

background(value)
  • Stel de achtergrond kleur in, ofwel, de kleur van het canvas
  • De kleur is typisch een getal tussen 0 (zwart) en 255 (wit). Later gaan we met kleuren werken. Probeer eens “green” of “red”?

Punten en lijnen

De coördinaten van punt x. Tweede voorbeeld: een lijn.

Punten

point(x,y)
  • Tekent een stipje
  • Eerst de breedte-coordinaat
  • de tweede parameter is de hoogte (naar omlaag geteld)

Lijnen

line(x1,y1,x2,y2)
  • tekent een lijn van het punt (x1,y1) naar (x2,y2). De volgorde van de punten maakt niet uit want een lijn heeft geen richting

Opdracht

Teken deze lijnen na.

Archives

  • juni 2022
  • maart 2022

Categories

  • onthouden
  • Uncategorized

Dit is de vertaling-in-aanbouw van de Amerikaanse lesmethode Introduction to computational media (V2020, V2022) voor P5JS door Luisa Pereira.

Aangepast voor Nederland door docent Barry Voeten.

Creative Commons-Licentie
Dit werk valt onder een Creative Commons Naamsvermelding-NietCommercieel-GelijkDelen 4.0 Internationaal-licentie.
© 2022 p5js nl | Aangedreven door Minimalist Blog WordPress thema