• Wednesday , 29 January 2020

1.3: Shapes & Drawing – p5.js Tutorial

Code Canyon



In this video, I start writing code and cover the basics of coordinates systems, shapes, and drawing in p5.js.

🎥 Next video: https://youtu.be/riiJTF5-N7c
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

💻 Code: https://editor.p5js.org/codingtrain/sketches/HJ1WjEPwQ

🔗 https://p5js.org/
🔗 p5.js Web Editor: https://editor.p5js.org/

🚂 Website: http://thecodingtrain.com/
💖 Patreon: https://patreon.com/codingtrain
🛒 Store: https://www.designbyhumans.com/shop/codingtrain/
📚 Books: https://www.amazon.com/shop/thecodingtrain

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

Original source

3d Ocean

Related Posts

49 Comments

  1. Ricardo Tovar
    December 13, 2019 at 07:45

    when practicing i used "rectMode(CENTER)" but did not work.. I'm using the webside to practice!

  2. Ricardo Tovar
    December 13, 2019 at 07:45

    your twitter? your instagram?

  3. MJ R
    December 13, 2019 at 07:45

    You act a lot like my English teacher, which is a really good compliment. A lot of energy! You put life into your videos, unlike most other videos in monotone voices that show in the most limited way! You execute very clearly… keep up the amazing content! 🙂

  4. Manfred mk mako
    December 13, 2019 at 07:45

    Wow you are a really good teacher

  5. Telesen
    December 13, 2019 at 07:45

    Sorry sir, the homeworks a little late. https://editor.p5js.org/jasonp5/full/ifKVRYpJ9

  6. Th3r3b3ll10n
    December 13, 2019 at 07:45

    I have finally found a coding guide that isn't drop-dead boring!

  7. Jelle van der Helm
    December 13, 2019 at 07:45

    I already have 2 years of javascript and other language education behind me, but i still listen to these early videos because youre just really fun to listen to. And its always good to go back to the basics sometimes.

  8. Harry Mack
    December 13, 2019 at 07:45

    He is a true teacher, HE TEACHES IN DARK MODE!!!! seriosly i love u dude.

  9. Shweta Mettin
    December 13, 2019 at 07:45

    Sir, if I place rect () inside setup () also then it will work. So what's the difference between placing rect () inside setup () and draw ()?

  10. Suvan Kasina
    December 13, 2019 at 07:45

    Sir, how do we know if the height is being counted up, or down?
    you said that the x and y point will be located and then for width you move right that many pixels(same thing for hieght)
    Can you change that left right up or down?
    Thank you very much

  11. Remi Mantri
    December 13, 2019 at 07:45

    10/10 i luv the positive energy 🙂

  12. qinyu XIE
    December 13, 2019 at 07:45

    You are a very good teacher ,you explain every point very clearly and interesting!!thanks!!

  13. qinyu XIE
    December 13, 2019 at 07:45

    nice!!!

  14. Faisal Ahmed
    December 13, 2019 at 07:45

    Hey, hi that's one more from me… tomorrow I'll color this
    https://editor.p5js.org/rupakfaisal07/sketches/N9jrSexqb

  15. Toby Sullivan
    December 13, 2019 at 07:45

    arent the rectangle arguments just the top left and bottom right corners

  16. Toby Sullivan
    December 13, 2019 at 07:45

    are arguments the same as parameters

  17. Toby Sullivan
    December 13, 2019 at 07:45

    is a function name the same as a method?

  18. Faisal Ahmed
    December 13, 2019 at 07:45

    I wrote my first code, i chose to code the basic operator of mathematics. but i couldn't wrote the code of Multiplication sign, Thanks btw

    https://editor.p5js.org/rupakfaisal07/sketches/8HV9T3IP7

  19. Muhammad Alif
    December 13, 2019 at 07:45

    https://editor.p5js.org/Alif/full/8aS_ofVwB

    ok, im so proud of myself rn lol

  20. Ensar Radaca
    December 13, 2019 at 07:45

    Love your vids man will u make another rubics cube part?

  21. Daniel Weiner
    December 13, 2019 at 07:45

    Balloons flying away…

    https://editor.p5js.org/danielweiner/full/kHIOn_rcF

  22. Pelin Doğan
    December 13, 2019 at 07:45

    Is there anyone who knows to make a filter on posenet camera without using ml.5?

  23. Zack Lazer
    December 13, 2019 at 07:45

    I know i'm late to the party but i'm 9 and just learning to code. i have barely learned anything but i will keep learning. (:

  24. LateCodeCancel
    December 13, 2019 at 07:45

    Great Job! This is just Perfect! I WANTED to code for 5 Years! HAHA. You are a great teacher too.

  25. Ozge
    December 13, 2019 at 07:45

    you are like a cartoon so that child coders can easily follow and learn what you teach :))

  26. Alex G
    December 13, 2019 at 07:45

    My first attempt -> not very neat but i'm very pleased coz i'm a complete beginner 🙂 https://editor.p5js.org/agreer/full/cVak0otwF

  27. Danibernd
    December 13, 2019 at 07:45

    Here's a Mona Lisa https://editor.p5js.org/danibernd/full/8aCLh93GE
    Really good tutorials. Thank you! : )

  28. MATEO MONTOYA GONZALEZ
    December 13, 2019 at 07:45

    I have the latest version of proccesing 3.5.3 and create canvas doesnt exist there, how can I use p5?

  29. Carvel Bell
    December 13, 2019 at 07:45

    I like your teaching style. You are an excellent teacher. What I really like about your teaching style is that you make your  tutoring very entertaining and enjoyable to watch and learn from , while  at the same time you are seriously giving high quality and classics tutorial  that is very clear and easy  to understand. Honestly your teaching method is  excellent and I applause and respect you for that. Keep up the good work , because you are doing a wonderful job. Thanks.

  30. kay gregg
    December 13, 2019 at 07:45

    made a little green faced guy!
    https://editor.p5js.org/kaygraphic/sketches/mDiWUPcje

  31. Nnamdi Nwalie
    December 13, 2019 at 07:45

    Funny entertaining and educative wow !! what a sweet combo

  32. Jawad Amir
    December 13, 2019 at 07:45

    great man::

  33. Jawad Amir
    December 13, 2019 at 07:45

    greqt

  34. BUD VIN
    December 13, 2019 at 07:45

    not work with rectmode

  35. Subhan Shahbaz
    December 13, 2019 at 07:45

    Keep it up

  36. Emmanuel Christian
    December 13, 2019 at 07:45

    I really enjoy watching your show! Great personality! I want to share my first shape project "Mr. Smiley" https://editor.p5js.org/wealthinpeace/full/ERxT0zt7c

  37. Benjamin Woofter
    December 13, 2019 at 07:45

    Well done Sir! Such a wonderful beginners guide!!

  38. Nathan Li
    December 13, 2019 at 07:45

    Great teacher ever with his unique passion and fun!! Make it fun for everyone to learn

Leave A Comment

You must be logged in to post a comment.