Ga naar de inhoud

p5js.nl

Menu
  • Home
  • Unit 1
    • Unit 1, LA1
      • U1 LA1 1.1. Maak een Robot
      • U1 LA1 1.2 Lijn functies en parameters
      • U1 LA1.3 Meerhoeken, sterren, bogen
      • U1 LA 1.4 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 LA 3.4 Eenvoudige Functies
      • U1 LA 3.5 Een simpele tekst
    • Unit 1 Final Project Teken een GSM
  • Unit 2
    • Unit 2, LA1
      • U2 LA1.1 If-Then-Else Kleur die Robot
      • U2 LA 1.2 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
      • U2 LA2.2 Muisclicks en vormen als knop gebruiken
      • U2 LA 2.3 Meer met functies
      • U2 LA2 Final Project Light Switch Game
    • Unit 2, LA3
      • U2 Final Project Painter
  • Unit 3
    • Unit 3 LA1
      • U3 LA 1.1 While Loops
      • U3 LA 1.2 Een for-loop
      • U3 LA 1.3 For-loop in een for-loop
      • U3 Mini-Project Wallpaper design
    • Unit 3 LA2
      • U3 LA 2.1 Arrays en Loops Deel 1
      • U3 LA 2.2 Arrays en loops deel 2 – random
    • Unit 3 LA 3 Mini-Project Vision Board
      • Unit 3 LA3.1 Afbeeldingen uploaden
    • Unit 3 LA 4 Mini-Project Bewegende Tekst
      • U3 LA 4.1 Werken met fonts
      • U3 LA 4.2 Geluiden
    • Unit 3 LA 5 Mini-Project Fun Piano
    • Unit 3 Final Project Meme Generator
  • Unit 4
    • Unit 4 LA 1 Stuiteren
    • Unit 4 LA1 Mini-Project DVD-Logo
    • Unit 4 LA 2.1 & 2.2 Translations & Rotations
    • U4 LA2 MP Draai die Koppen of Calypso
    • U4 LA 3.1 Sinus en cosinus
    • U4 LA 3 Mini-Project Stoomtrein
    • Unit 4 FP Brulbrief
  • Unit 5
    • U5 LA1 Programmeer Oefeningen
    • U5 LA2 Globale Variabelen opheffen
    • U5 LA 2.1 Finite State Machine
  • Blog
  • Links
    • P5JS Editor
      • P5JS.org
      • Video's Coding Train
      • P5JS Reference
      • Intro to Computational Media (2022)
    • Openverse Images
      • Freesound
      • Music
      • Free stock photo's
      • Free Vector Images
      • Dafont
  • Contact
    • Beoordeel P5js.nl
    • Docenten Info
Menu

Unit 4 LA 2.1 & 2.2 Translations & Rotations

Het is zoveel werk en het kan zoveel makkelijker. Als je het coördinatenstelsel maar even kon verbouwen. En dat kan dus. Heel makkelijk. Maar de werking is toch wel complex.

Zonder translate

Zonder translate moet je zelf met zo’n omslachtige truuk als mijnX en mijnY de juiste locatie opgeven. Zelf de boekhouding bijhouden, zo ingewikkeld

Met translate

Met translate doet P5JS de boekhouding voor je en kun je het punt (0,0) virtueel tijdelijk verplaatsen.

Na translate(x,y) is het punt (x,y) de nieuwe (0,0). Als je iets plaatst op (10,10) dan komt het, na translate (x,y) op (x + 10, y + 10).

Nu de turbo erop

Nu heb je een idee van translations. Het wordt pas leuk, of heftig, als je elke draw() loop een nieuwe translation gaat doen. Of een rotate() of een scale(), die zijn soortgelijk. Coding Train legt het goed uit.

Samengevat

  • translate() verplaatst het nulpunt (0,0)
  • rotate(). is altijd over het nulpunt (0,0) dus je moet je bijna altijd eerst translaten naar de het juiste rotatie-punt.
  • scale() stretchen vanuit point of origin, zie de volgende video
  • push() – save de status voorafgaand aan een transformatie – het nulpunt maar ook fill, stroke, stroke weight (zie video 3)
  • pop() – restore (terugzetten) na afloop van die transformatie

Met dit kleine blokje code kun je meerdere keren tegelijk sketchen zonder de rest te roteren.

push();
translate(50,50)
rotate(angle);
fill(255,100,50);
rect(0,0,100,50);
pop();

Details

Code die ook langs kwam

  • angleMode(DEGREES): Je werkt in Radians (radialen, 2*pi is 1 cirkel) tenzij je angleMode(DEGREES) hebt gezet.
  • rectMode(CENTER). Dan neemt ie het midden van de rect als plek van plaatsing bij rect(x,y,w,h)

Scaling – Deel 2 van de video

Deel 3: Losse eindjes

In deze video vooral het subtiele detail dat niet alleen de point of origin wordt opgeslagen met push(), maar ook fill(), stroke(), strokeWeight().

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.
© 2023 p5js.nl | Aangedreven door Minimalist Blog WordPress thema