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().