9.1: Transformations Pt.1 (Translate, Rotate, Push/Pop) – p5.js Tutorial



In this three part tutorial, I cover matrix “transformations” using p5.js. In this video I cover the functions translate(), rotate(), push() and pop().

Link to Part 2: https://youtu.be/pkHZTWOoTLM
Link to Part 3: https://youtu.be/IVMvq9rd8dA

Support this channel on Patreon: https://patreon.com/codingtrain
To buy Coding Train merchandise: https://codingtrain.storenvy.com
To Support the Processing Foundation: https://processingfoundation.org/support

Send me your questions and coding challenges!: https://github.com/CodingTrain/Rainbow-Topics

Contact:
Twitter: https://twitter.com/shiffman
The Coding Train website: http://thecodingtrain.com/

Videos discussed:
Angles and Angular Motion: https://youtu.be/qMq-zd6hguc

Source Code for the all Video Lessons: https://github.com/CodingTrain/Rainbow-Code

p5.js: https://p5js.org/
Processing: https://processing.org

For an Intro to Programming using p5.js: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
For Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

Help us caption & translate this video!

http://amara.org/v/a7tF/

source

27 Comments

Leave a Reply
  1. Thank you so much for the tutorials! Finally here's the tutorial about rotate() and translate()! I was totally new to programming before watching your videos. Now I could create some interesting things using the knowledge learnt from your videos. Thank you so much for the series!

  2. I'm not sure but I think I've read somewhere that push/pop (save/restore) should be avoided for better performance. You should instead use context.setTransform() with which you specify the matrix completely (translation, rotation, scale) and override the current matrix.

  3. Thing about order was pretty confusing while I was watching this video,but after my own try it's less confusing…
    So maybe i'll make it more simple for others too…

    So best order as I guess should be like :

    1.background refresh as independent and always top one.

    2.Translate:
    -before rotate cause rotate should know from which point it should rotate.
    -before drawing obect cause object should have positions related to translate.

    3.Rotatescale.
    -before drawing object ,cause we want our functions to apply.(if we'll put them after – they will reset in new draw loop)

    4.All about our object : fill,stroke,strokeWeight e.t.c (just as simple way,for sure better to make objects with their own states)
    -we'll see all about it in 1 place.
    -here we draw object;

    5.Incrementdecrement.
    -as in foor loop…best place to increase/decrease somethin' – is last step.

  4. To be honest your videos are great and please don't edit the video(cutting some parts) because those moment can refresh the mind. i hope you got my point excuse my English please.

  5. Hi, I'm a huge fan an apart of the notification squad. Can you please do me a huge favor and give my new app a shout out? It's called Woopr Messenger it's on the Google Play Store and available on the Mobile Web at https://wooprapp.com and isn't yet available for Apple.

    I'd REALLY REALLY REALLY appreciate it. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *