How to Rotate Shapes in p5.js (translate, rotate, push, pop)

In this video I cover the functions translate(), rotate(), push() and pop(). Code: thecodingtrain.com/tracks/tra...
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
🎥 Next: • How to use scale() in ...
Videos:
🌎 Solar System Simulation: • Coding Challenge #7: S...
🚂 Angles and Rotation: • 3.1 Angles and Rotatio...
Timestamps:
00:00 Introduction
03:00 Translate
08:10 Angles
10:45 Rotate
20:15 Push and Pop
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
🚂 Website: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/guides/pas...
🚩 Suggest Topics: github.com/CodingTrain/Sugges...
💡 GitHub: github.com/CodingTrain
💬 Discord: thecodingtrain.com/discord
💖 Membership: kzread.infojoin
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecod...
#transformations #translate #rotate #javascript #p5js

Пікірлер: 155

  • @orifl6653
    @orifl66536 жыл бұрын

    I wish you were my teacher in math, English, history, physics and on any other subject

  • @jeffreychen6591

    @jeffreychen6591

    6 жыл бұрын

    Владимир Путин if he is my technology teacher. That'll be great

  • @dany2685

    @dany2685

    4 жыл бұрын

    Me too. He has that energy and he s like giving you power :))

  • @nitinjain3824

    @nitinjain3824

    4 жыл бұрын

    i know right...he could really make my learning fun and also ill be able to understand any concept in just a few seconds.

  • @CarlosAlbertBR
    @CarlosAlbertBR2 жыл бұрын

    Dan is one of the best coding teachers that I've found here, teaching not only the syntax itself but the most import: how to think. Thank you very much!

  • @user-yb7nr7ju1t
    @user-yb7nr7ju1t3 жыл бұрын

    Hi! i am from Russia and i know very little english, but you explain and show it very simply. Thank you for your videos!

  • @laikesagores3258
    @laikesagores3258 Жыл бұрын

    Hello from Greece, extra extra extraordinary teaching!!!

  • @TheCodingTrain

    @TheCodingTrain

    Жыл бұрын

    Ευχαριστώ!

  • @maggiezhu6360
    @maggiezhu63606 жыл бұрын

    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!

  • @ignaciodelamadrid
    @ignaciodelamadrid5 жыл бұрын

    Daniel, you are by far my best programming teacher ever. And I've been programming professionally for 10 years now. You have me motivated and entertained at the same time man. Kudos and thanks a lot. I support you in Patreon, any chance you coming up with a series on design patterns?

  • @aliramyshady
    @aliramyshady3 жыл бұрын

    when I watch your videos I am not just learning I have fun cause you are very awesome and you are my inspiration and words can't describe how amazing you are

  • @Akshatgiri
    @Akshatgiri6 жыл бұрын

    I agree Daniel...We do have this mysterious bond. I can feel it.

  • @FritsvanDoorn
    @FritsvanDoorn6 жыл бұрын

    Welcome back, I've missed your enthusiasm and interesting subjects.

  • @kefancui3146

    @kefancui3146

    6 жыл бұрын

    s

  • @bossysmaxx3327
    @bossysmaxx33274 жыл бұрын

    dude You're the Best Teacher I've ever seen,

  • @augustolf
    @augustolf5 жыл бұрын

    Excellent explanation! Finally, I comprehended how to use p5.js translate and rotate. Thanks!

  • @apocalypse688
    @apocalypse6883 жыл бұрын

    Thank you man. You saved my midterm assignment !

  • @zoeliam898
    @zoeliam8985 жыл бұрын

    thank you! now I finally understand how to (and why I need to) use translate and rotate together...!

  • @grizzlycougar
    @grizzlycougar6 жыл бұрын

    Glad to see you back again, great video as always

  • @absolutetrash7982
    @absolutetrash79823 жыл бұрын

    The push and pop function literally saved my project tysm for these lessons

  • @averycoolgroundhog1117
    @averycoolgroundhog11177 ай бұрын

    This video proved very helpful! It's explaining the code in much less complicated terms (compared to other videos) and truly helps you out as a beginner who had little past experience with coding!

  • @TheCodingTrain

    @TheCodingTrain

    7 ай бұрын

    so happy to hear!

  • @Axecnarf87
    @Axecnarf874 жыл бұрын

    Thank you so much for your tutorials and your enthusiasm. It really makes the difference.

  • @RamPrakash-yr6ot
    @RamPrakash-yr6ot3 жыл бұрын

    I tried the rotate(-angle) thingy, got confused, found this video and now it all makes sense.. awesome

  • @fbmrqs
    @fbmrqs6 жыл бұрын

    Great subject, as always. 👊🏻

  • @subratasaha1312
    @subratasaha13123 жыл бұрын

    Hi Dan any video I watch of yours I am completely hooked, the content the way you explain concepts the detail you go into is invaluable, also I think your completely nuts.

  • @michaelbarron6687
    @michaelbarron66874 жыл бұрын

    Amazing teaching. Exactly the lesson I needed. As far as I am concerned, YOU are AngelMode. Thank you so much.

  • @nitinjain3824
    @nitinjain38244 жыл бұрын

    You have such good teaching skills. Great Job!

  • @scpresearcherssite1054
    @scpresearcherssite1054 Жыл бұрын

    THIS has helped me so much. thank you man

  • @xlayrs
    @xlayrs6 жыл бұрын

    Thanks for everything :) You're the best! greetings from Mexico

  • @NayRunic
    @NayRunic6 жыл бұрын

    best channel ever, love you dan

  • @TheLegoJungle
    @TheLegoJungle6 жыл бұрын

    Just in time for my coding class. Thanks!

  • @alwayssomewhattired
    @alwayssomewhattired Жыл бұрын

    Another fantastic video

  • @nbomb823
    @nbomb8232 жыл бұрын

    BIG LIKE for "pop()" in translate

  • @Somfic
    @Somfic6 жыл бұрын

    I don't even code in JavaScript anymore but I just love you.

  • @kamilbolka

    @kamilbolka

    6 жыл бұрын

    Its Java script in this tutorial

  • @Somfic

    @Somfic

    6 жыл бұрын

    What'd I say?

  • @kamilbolka

    @kamilbolka

    6 жыл бұрын

    You edited it

  • @kippenbout1

    @kippenbout1

    6 жыл бұрын

    "Java" is a whole other language than "Javascript". He is using javascript in this video.

  • @Somfic

    @Somfic

    6 жыл бұрын

    :P

  • @Ouro17
    @Ouro176 жыл бұрын

    Glad you are back.

  • @theguyman232323
    @theguyman2323235 жыл бұрын

    This would have saved me so much time if i knew rotate rotated about 0,0. Thank you so much!

  • @alonattar3836
    @alonattar38366 жыл бұрын

    Great work!

  • @sajeevanfuels1980
    @sajeevanfuels19803 жыл бұрын

    Thank you so much!!!! You are a masterpiece teacher!

  • @Mr_cl0wn
    @Mr_cl0wn6 жыл бұрын

    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.

  • @noelsnrub1
    @noelsnrub15 жыл бұрын

    This is a very good series. I am doing graphics programming following a college text and KZread videos. Normally I can't stay with a video for more than 15 minutes. This one kept my attention for the full 22:54. I developed my own functions for rotation and transformation using the (mostly) trigonometry I learned in 12th grade math so I have a code base (small) of graphics functions already. Going forward, not sure what I am going to use: My home brewed stuff or the functionality demonstrated in this series of videos.

  • @bcanary4252
    @bcanary42524 жыл бұрын

    I love this explanations! Nice vid!

  • @zebini
    @zebini Жыл бұрын

    Awesome method of teaching, keep this up please!!!

  • @killox3371
    @killox33716 жыл бұрын

    Always great

  • @jermainebrayne437
    @jermainebrayne4376 жыл бұрын

    He got so much swag

  • @louisalainlegerarchundia6176
    @louisalainlegerarchundia61765 жыл бұрын

    got what i came for 12mins, in but I stayed till 22mins cus ur great

  • @mmbower1
    @mmbower16 жыл бұрын

    Hey I just want to say I really like your content and it is extremely helpful. Your personality def catches on and makes me laugh! You are an excellent coder. Keep up the great work. One question. How are you using the dom like that to compile your visuals in code?

  • @codewithryan4646
    @codewithryan46466 жыл бұрын

    This guy is a legend!!!

  • @mingliangma840
    @mingliangma8402 жыл бұрын

    amazing video, you are teaching much better than my professor

  • @willyecharte
    @willyecharte2 жыл бұрын

    Great teacher!

  • @julianbullmagic
    @julianbullmagic4 жыл бұрын

    keep up the hard work

  • @EvilTim1911
    @EvilTim19116 жыл бұрын

    This is the only programming channel that just gives you the raw uncut coding, including mistakes. That's been important for me because I got to see that even people who have been doing this for years and years will make silly little mistakes often and we the viewers get to learn from those little mistakes. When you watch perfectly rehearsed videos on other channels it's easy to get this wrong idea that coding is a really fast, seamless process where you never have to stop and think or double back to fix something. Seeing live coding has been encouraging because I see I'm not the only one having to fumble around a bit before things are working as they should. Basically what I'm saying is, thank you so much, Daniel, and keep up the excellent work.

  • @TheCodingTrain

    @TheCodingTrain

    6 жыл бұрын

    Thanks for this nice feedback!

  • @Fragranceandtech
    @Fragranceandtech6 жыл бұрын

    You are amazing!!

  • @zabey_otkosi
    @zabey_otkosi2 жыл бұрын

    Very useful!

  • @deiaraki
    @deiaraki2 жыл бұрын

    thanks dude. Nicely explained.

  • @TheCodingTrain

    @TheCodingTrain

    2 жыл бұрын

    Thank you for the support!

  • @andreadinicolantonio4422
    @andreadinicolantonio44224 жыл бұрын

    You are amazing.

  • @wanderwithdaniel
    @wanderwithdaniel2 жыл бұрын

    Thanks a lot 🙏

  • @Pancake3000
    @Pancake30003 жыл бұрын

    This was so helpful lol.

  • @Miguelhensch
    @Miguelhensch3 жыл бұрын

    soooo helpfull :)

  • @steinerbock
    @steinerbock5 жыл бұрын

    Love all your videos! Do you have any materials that explain how to achieve this effect in an array of rectangles?

  • @rosebeaukay5238
    @rosebeaukay52382 жыл бұрын

    This guy is the math teacher you wish you had 😂

  • @mirandagil3642
    @mirandagil36423 жыл бұрын

    THANK YOUUUUUUU

  • @hero4future
    @hero4future4 жыл бұрын

    saved my course this term, i was miserable at this

  • @vivipettiss5832
    @vivipettiss5832 Жыл бұрын

    Me: in a computer science class that doesn't teach me anything Me: maybe I'll find some tutorials on KZread *clicks this one* Me: OH MY GOD THIS GUY JUST TAUGHT ME MORE THAN MY ACTUAL COMPUTER SCIENCE CLASS DID IN HALF A YEAR IN 23 MINUTES

  • @SHREEVATHSAVMUBEC
    @SHREEVATHSAVMUBEC5 жыл бұрын

    Thank you for your video series. How to rotate a line at midpoint irrespective of its length?

  • @caitlindressel3516
    @caitlindressel35162 жыл бұрын

    king.

  • @yakupemre1
    @yakupemre14 жыл бұрын

    Thank for these funny and useful tutorials. If I want to rotate a rotated line around a point in 3D mode but it is away from origin what should I do?

  • @mrmonkeboy
    @mrmonkeboy4 жыл бұрын

    Question - if I use translate and rotate on a shape, how do I know if the mouse is over it? Is there a way to find the resulting bounding box?

  • @kastelruther
    @kastelruther14 күн бұрын

    Thanks a lot for this! Is there a way to rotate individual text characters by x degrees? I can easily rotate entire words, but have a hard time doing individual characters... keep up the good work! :)

  • @mirzunayedali1724
    @mirzunayedali17244 жыл бұрын

    when i saw those glasses, my brain knew that shit was about to go down

  • @mason3358
    @mason33584 жыл бұрын

    Are you able to use multiple pushes for different sets of transformations

  • @dhruvprajapati127
    @dhruvprajapati1276 жыл бұрын

    My exam of computer graphics is tomorrow and this is so helpful so thank you for this video I like your videos...

  • @TheCodingTrain

    @TheCodingTrain

    6 жыл бұрын

    Good luck on your exam!

  • @dhruvprajapati127

    @dhruvprajapati127

    6 жыл бұрын

    The Coding Train thank you...

  • @mike_vahemoubayed8099
    @mike_vahemoubayed80994 жыл бұрын

    I am making a car game using a arduino and a potentiometer and processing this was useful

  • @Diego612010pd
    @Diego612010pd6 жыл бұрын

    @The Coding Train I have a very important question/CHALLENGE: How can you shear an object/image using these basic transformations and no DOM, HTML, or CSS??? Love your videos by the way.

  • @sputnik4043
    @sputnik40435 жыл бұрын

    QUESTION How can I make a object rotate but only if i press a key....i want it to make a curve like a car

  • @davidricardodejesussilva5975
    @davidricardodejesussilva59753 жыл бұрын

    Is there a way to invert the image? As if mirroring the image of a person pointing to the right would start to point to the left.

  • @lingalaakshaya1057
    @lingalaakshaya10573 жыл бұрын

    Can you help me, sir? I have a doubt that was "Which function specifies the new position of an object relative to its current position?"

  • @Somethingsomethinglol
    @Somethingsomethinglol5 жыл бұрын

    you. are. awesome. tytytytyty

  • @adamjskater
    @adamjskater6 жыл бұрын

    What's the difference between using the reset transforms function you mentioned vs using push and pop?

  • @PhilBoswell

    @PhilBoswell

    6 жыл бұрын

    I think that you can nest push() and pop() whereas resetting jumps back to default state every time. No doubt I will be proven right or wrong imminently ;-)

  • @chetans4915
    @chetans49155 жыл бұрын

    I'm not able to use rotate function like you showed in the vedio in brackets editor. If possible can you send something useful for me to do Geneva mechanism simulation

  • @n4ut
    @n4ut4 жыл бұрын

    do you know a script where visual: hold your hand upwards and rotate it like its around an object. kind off 3d

  • @levizjaperdije8499
    @levizjaperdije84995 жыл бұрын

    AngelMode? is this a game? nice bro "} you are a professor "}

  • @luisarandas
    @luisarandas5 жыл бұрын

    Hello Dan, is there a video where you show your setup on dependencies using Atom instead of Processing ide?? Best, Luis

  • @TheCodingTrain

    @TheCodingTrain

    5 жыл бұрын

    This workflow video might help (but I'm using VSCode now) kzread.info/dash/bejne/mX6VmNmrmZu_frQ.html (Full playlist: kzread.info/head/PLRqwX-V7Uu6Zu_uqEA6NqhLzKLACwU74X)

  • @musicgaines7170
    @musicgaines71704 жыл бұрын

    is it possible to get p5.js on debian linux, and how would you install/set it up.

  • @chetans4915
    @chetans49155 жыл бұрын

    I'm not able to do this in brackets editor. If possible can you send something useful for me to do Geneva mechanism simulation

  • @praneelmadhuvanesh3770
    @praneelmadhuvanesh37703 жыл бұрын

    How do you cancel the rotate if you have code after that you want to stay still.

  • @ikomangkrisnasuardi_calonp4647
    @ikomangkrisnasuardi_calonp46476 жыл бұрын

    before 1000

  • @juanjoseflores9660
    @juanjoseflores96603 жыл бұрын

    How to do Axial Symmetry??? with Processing, video tutorial please!!!... Greetings from Uruguay.

  • @nickricotta3621
    @nickricotta36214 жыл бұрын

    how do you make it rotate around the top right corner

  • @PollederBoss
    @PollederBoss5 жыл бұрын

    how can you rotate a dynamic object with just radiants?

  • @pleasecontactme4274
    @pleasecontactme42744 жыл бұрын

    how to do it for a specific sprite?

  • @nickricotta3621
    @nickricotta36214 жыл бұрын

    hey, does anyone know how to make it rotate from the top right corner

  • @su1414Games
    @su1414Games6 жыл бұрын

    Are you going to continue the Neural Networks series?

  • @TheCodingTrain

    @TheCodingTrain

    6 жыл бұрын

    yes, stay tuned!

  • @kamilbolka
    @kamilbolka6 жыл бұрын

    Can you share your Atom settings?

  • @TheCodingTrain

    @TheCodingTrain

    6 жыл бұрын

    Does this video help? kzread.info/dash/bejne/lmeDxaieqMifec4.html

  • @kamilbolka

    @kamilbolka

    6 жыл бұрын

    Thanks. And not sure if you remember, but thanks to you I've created my first game on android. Now, I've created an education app that is meant to teach students on how relations and graph work together. play.google.com/store/apps/details?id=kamilbolka.kgraphs&hl=en_GB

  • @juanpablofloresallende6635
    @juanpablofloresallende6635 Жыл бұрын

    One question, how can I rotate a line about its own axis? You have shown it with a rectangle, but I don't know how to do it in a single line. Thanks for reading this, greetings from Argentina.

  • @TheCodingTrain

    @TheCodingTrain

    Жыл бұрын

    See this example! editor.p5js.org/natureofcode/sketches/EFCfyH88E

  • @gzoolotb1348
    @gzoolotb13486 жыл бұрын

    ?????what is the program you use in this video

  • @300mcash2
    @300mcash25 жыл бұрын

    how can you make a vector rotate?

  • @dany2685
    @dany26854 жыл бұрын

    Is this working with a regular browser?

  • @bhavyatrivedi6310
    @bhavyatrivedi63104 жыл бұрын

    rotateX function doesnt work, and the console also shows nothing, please help me

  • @HungVo-fp7xk
    @HungVo-fp7xk5 жыл бұрын

    Hope you were my professor :'(

  • @blinzi69
    @blinzi695 жыл бұрын

    ok - how can i make this work - im trying to create a game where you fly a rocket straight upwards and can steer left and right while the ship is moving always in the direction its pointing, on the other hand i want to scroll tha camera upwards - im trying to do this all with translate and rotate, and make the ship moving along a vector. will this work?

  • @blinzi69

    @blinzi69

    5 жыл бұрын

    how can i draw a rectangle at a given x/y position relative to the 0/0 origin of the canvas, while at the same time rotate it around its center with a given angle?

  • @samyakjain5015
    @samyakjain50154 жыл бұрын

    Why are all geniuses named Dan?

  • @joshc6489
    @joshc64892 жыл бұрын

    Hi, Love your video (and as others have said your enthusiasm, it's contagious :) ) How can I create a shape (as you've done) and make it draggable?

  • @andydedu5884
    @andydedu58844 жыл бұрын

    Why are these videos so hard to find now? Are you remaking them

  • @szucsadam0527
    @szucsadam05273 жыл бұрын

    hi! how do I just turn something 45 degrees? I don't want the rectangle to rotate, just turn it.

  • @angelcaru

    @angelcaru

    3 жыл бұрын

    Use the rotate() function, but use the QUARTER_PI constant instead of a variable

  • @uushk6631
    @uushk66312 жыл бұрын

    awkward cute charming