Drawing Shapes in p5.js for Beginners (1.3)

In this video, I start writing code and cover the basics of coordinates systems, shapes, and drawing in p5.js. Code: thecodingtrain...
🕹️ p5.js Web Editor Sketch: editor.p5js.or...
🎥 Previous video: • How to Use to p5.js We...
🎥 Next video: • RGB Color in p5.js for...
🎥 All videos: • Start learning here!
References:
💾 p5.js Reference: p5js.org/refer...
💾 createCanvas: p5js.org/refer...
💾 rect: p5js.org/refer...
💾 line: p5js.org/refer...
💾 rectMode: p5js.org/refer...
Timestamps:
0:00 Introduction
5:24 Javascript Versus p5.js
12:52 The p5.js Coordinate System
18:00 Function Parameters
22:46 Your Assignment
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
🚂 Website: thecodingtrain....
👾 Share Your Creation! thecodingtrain...
🚩 Suggest Topics: github.com/Cod...
💡 GitHub: github.com/Cod...
💬 Discord: / discord
💖 Membership: kzbin.info...
🛒 Store: standard.tv/co...
🖋️ 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/Cod...
This description was auto-generated. If you see a problem, please open an issue: github.com/Cod...

[@NakeyNayNay]

I have ADHD and I feel like binge-watching these... I already learned HTML in high school and was one of the only kids to use CSS and the teacher said that we could even though it wasn't taught. I just excelled so much in that subject that I felt the class was progressing too slowly... I loved HTML and CSS but had no use for them when I had to start working. I'm thinking of pursuing a career in coding now that I remember how fun it can be. The endless creative possibilities... The way you present, Sir, (even though I'm only a few videos in) really engages the viewer and holds their attention. I especially love it when you ask questions you already know the answer to, but with the same curiosity and amazement a beginner like myself would have. Makes me smile. I really enjoy these videos and would like to thank you for making them, Sir.

[@marioaveni132]

Hey Dan! I'm a senior language teacher with university experience, but seriously, you're one of the few awesome teachers I've ever met. Watching your teaching style not only helps me learn coding but also teaches me how to excel at teaching. Big props to you!

[@harrymack3565]

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

[@alberthooper3673]

Its high contrast mode actually. :)

[@YuvanshVarshney-i8k]

@@alberthooper3673 BRO who cares + who asked

[@YuvanshVarshney-i8k]

yeah he's teaching in dark mode

[@portermiller9395]

This is what I made function setup() { createCanvas(400, 600); } function draw() { background(220, 0, 200); ellipse(195, 75, 70, 80); rect(134, 120, 125, 200, 50, 50); rect(85, 135, 40, 150, 100, 100); rect(267, 135, 40, 150, 100, 100); rect(145, 325, 45, 200, 100, 100); rect(200, 325, 45, 200, 100, 100); } I couldn't have done this without you! You are a great teacher!

[@mhdsamtaken]

Lol noice

[@Beyond.anime.23]

you made a cute man

[@XerifeCaitlyn]

function setup() { createCanvas(400, 400); } function draw() { background(240, 215, 110); circle(200, 120, 53); stroke(100); line(200, 98, 200, 105); stroke(200); rect(175, 125, 50, 125); circle(230, 240, 60); circle(175, 260, 60); }

[@vikasagrawal6074]

You are a very good teacher ,you explain every point very clearly, KEEP IT UP!!

[@GoingData]

I totally agree! (ps: i already know how to code in C++ delphi, and python )

[@theanimemail]

Agreed

[@cubemage3336]

I know, right? Plus he looks like my uncle, and that is very motivating hahaha

[@mjr1081]

@@cubemage3336 XD

[@guunbrosinc9218]

very good teacher

[@NatetheAceOfficial]

I am really loving the excitement and fun you are having just digging into the basics. You can really tell you love teaching.

[@monicadupree7928]

Hes helping me so much i just start my training for website development , im a beginner im soo glad i can across his video hes helping me understand coding way better...hes awesome & very self-explanatory teacher👍

[@Ossem_1]

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.

[@blue_fishbowl]

Sometimes I cry when I watch you. Your commitment and authenticity is touching. Thank you!

[@K1g3n]

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

[@johnsimonetti9262]

For this 79 yrs old, I'm already totally interested in learning more about using p5.js coding. As an old timer, this is exactly what I was looking for as a 'learning' time filler. Can't find the name of the Instructor anywhere, but he is very good at his trade ... but a bit 'quirky'!!! Thank you, anyway.

[@TheCodingTrain]

It's me, Daniel Shiffman! Thank you for the feedback.

[@edwinlundmark]

I have been on and off on javascript, I think I will finally start learning for real now!

[@mike_vahemoubayed8099]

Edwin Lundmark exactly the same thing for me

[@Mr123fairlane]

javascript is the bomb

[@averyjonesmith6379]

Same

[@finn8843]

Same

[@Xnoob545]

Same

[@krishnachaitanyacheerladin7533]

your voice dont make me fall asleep..............you are best teacher man..........

[@silvanalabastida2609]

Bro, this guys enthusiasm just makes me downright smile. Can't wait to be successful in CS cause of this guy.

[@carvelbell181]

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.

[@banditgreat6673]

HAVE YOU GOTTON BETTER AT CODING?

[@laurentkadeko53]

this is actually the first time a teacher whos not boring and makes the lesson really fun and enjoybale, srry for my bad enlish. If I knew this channel earlier I wouldn't stop learning coding keep it up man you are making more and more into coding

[@mattcauth]

I'm about to embark on a new chapter, and I'm really excited to start doing more generative art - this channel is a true gift, thank you so much for doing this!! Between p5 and processing I feel like I've got most of what I need...now to figure out how to export to SVG :)

[@bernpaul9868]

same here

[@lumusu]

and here ♥

[@benuchie]

'cartesian coordinates system' 😳😳😳 from never having heard of this 'concept' (till today, TILL THIS VERY SECOND), after watching (and 👂👂👂ing) Your explanation I GET IT 😆😆😆 thank You SO SO MUCH, i have a feeling Your tutorials are going to change my life (understanding of a subject i have been interested in and actively trying to learn [and comprehend {wrestling with}] for several [SEVERAL😭😭😭] years now...) one of the first and most important lessons You have taught (and managed to convey) is that koding is EXCITING and FUN ❗️🎉🎉😆😆😆 again THANK YOU SO SO MUCH 🤓🤓🤓 🙌🙌🙌 like 'they' say (often) 'ones' understanding of a subject (any subject) is directly connected to the person (the teacher) teaching it ❗️... here is a prime example, the 0,0 coordinates 'thing' was like a KEY opening and flinging open a door to the (my) absolute and clear understanding of this ('basic') concept, i feel a little emotional now 😭😭😭 and want to write 0,0 on my computer screen; the 0,0 coordinate (top left of my computer screen [{almost} as a metaphor for my understanding LOL 😉😉😉 {i'm gonna do it LOL 🤣🤣🤣 🙃🙃🙃}])

[@mithileshsingh8688]

You are very good teacher

[@JakubWojciechowski933]

Wow, a programming course which explain things in a way I can actually understand! It's just the third lesson, but stil! Kudos!

[@MyDirt01]

I’ve been studying JavaScript from a course for the past 3 month and everything has just became crystal clear to me after watching this video.

[@DEGONDVR]

There's so much info in yt that is not beginner friendly. They usually assume we the n00bs know key concepts like, what an "argument" is. It was only a matter of the teaching method... Sudenly, programming doesnt seem like a dark dense forest. Thank you, for being a way towards the understanding.

[@hunterfitzpatrick8389]

Your enthusiasm for coding is infectious and has compelled me to learn. Thanks!

[@MichelleMassaMCM]

I wish you were my professor for Java. I could use this sort of instruction. Thank you so much for these videos. I find them very interesting!

[@omaraybek5244]

Michelle Massa actually though

[@angalinarine7187]

So i am a freshman at BMCC now startin off programming and man, you teach 100% better than my professor. i wiah you can be my teacher throughout the entire year of college

[@Raaampage]

You're very enthusiastic and this is very refreshing :) I like it, thank you =)

[@pepefubias7654]

VERY GOOD

[@Isha_eli]

j ai toujours voulu apprendre a coder mais a chaque fois les cours était incompréhensible et sans énergie avec une qualité Sonor médiocre grace a vous je peux enfin apprendre a coder continue comme ca et merci beacoup

[@galaxyspooks6130]

I know all other 199 comments are saying this, but it's true, you are an incredible teacher, learnt html on codecademy and remember almost nothing so I am going to learn that after Js, you are awesome, this tutorial and others are incredible. Thanks!

[@ayomubofunmi8941]

i am in love with this teaching, men! if you were my teacher i would love to never leave school again.

[@mjr1081]

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! :)

[@nahidaanjum1107]

I literally digged into every comment and it's replies.... but not even a single negative comment I found....I am just in awe with his way of teaching....huge respect ❤️....and here u go one more subscriber... even though I am not a fan of coding 🤷😅

[@janmichaelbesinga3867]

i gotta say this, ive been watching your videos started from genetic algorithm to here. I must say ure funny and informative at the same time. thank you for sharing godbless.

[@thelavagod]

One of the most interesting and funniest teachers i've ever seen. Thank you for this. Now i can code my own Snake Game .

[@agha0333]

Best Programming Teacher Ever.... Period

[@yanstrike347]

La claridad con la que explicas es increíble, muy buena sesión.

[@Arnav684]

You are the best teacher in the world.

[@goldthumb]

I've used tons of different code editors in my career. This p5 web editor has the best font color theme etc. Its designer is the real artist.

[@brucegoodwill8044]

You're truly the best teacher ever

[@sharmilaadhya8891]

I recently started learning from videos as I am learning JavaScript. You explain them very well. Thank you so much for creating such a wonderful resource for beginners like us

[@TheCodingTrain]

Great to hear!

[@twijjukyeanan]

brother you really are the best at this i have done some tutorials but you have proven to be the best as a teacher and really i have learnt even things i havent seen other people talk about in their classes. thank you so much

[@ohfourbaby]

Your enthusiasm makes this course better

[@herrjose]

Dude this channel is incredible i never thougth that programming was even possible for me. Im from argentina, always wanted to learn coding but it was incredible dificult to find some basic easy intuitive explaination, so just wanted to say thanks! Il patreon the hell of this channel !

[@TheCodingTrain]

I'm so glad to hear!

[@ravitejaw4604]

no matter how long the video is, you make it interesting...

[@poolmancy]

Hello Sir, I was searching for some c++ programming tutorials and i come across your channel. At first I didn't like it, but NOW I am watching it (and of course I subscribed) because I like that you are very enthusiastic and expressive (always authentic) and you give all your energy at something that you really like and enjoy. And SIR, you just resurrect inside me this passion for programming that I used to have when I was young. THANK YOU! THANK YOU! and again a big THANK YOU!! I like the way you teach us how to play with the commands to get a better understanding of the command and how to use it efficiently Now to the programming exercise.... You said to play around with the 2D primitive shapes, and the problem is the square function. I try the command in the example (copy-paste) on Firefox and Chrome browser but it shows me and error... :-( but i :-) will still try on the other commands I include the code... editor.p5js.org/georgegcy/sketches/XQDGeUw6N (Edit mode) Keep up the good... hmmm... not good.... let me think... EXELLENT WORK that YOU DO

[@poolmancy]

First of all I have to THANK YOU again sir, for teaching us how to solve problems and how to read documentation (reference). And because of that, I find the solution of the circle problem, I dont know why it doesn't work online (editor.p5js.org/), but I manage and install the javascript local server (through documentation) on my computer (i think you explain in on video 9.12 local server) and there is working perfectly :)

[@RobDaHood]

I gotta turn that bell on, never saw this video in my sub feed

[@Venichy]

You are the best teacher I have ever see, becose you a funny and a little crazy.

[@adarsharyan942]

hello, am 0 at mathematics and when i see code languages, my head started spinning... but the way youre teaching is just amazing... I hope ill learn this thing also :)

[@pingme1943]

Thanks!

[@TheCodingTrain]

Thank you for the support!

[@luxy1017]

Omg u are the best teacher in the world!!!

[@KnowThyself_life]

Hi Daniel! I have wanted to learning codes from you since I got into Parsons DT! I am so glad I find Coding Train. It is so fun to follow your instructions. Thanks you so much for your teaching! you are an amazing teacher!

[@tracynkusi5894]

yeah

[@DragonDrew1818]

i like coding now, you make it easy!!!!

[@vivekraj9875]

I know drawing shapes,,I just come to see your way of teaching,,,Honestly I learned many things in that😊,, You're just Awesome😘,,

[@pingme1943]

Thanks! my playing with coding for fun as a senior helps keep your mind active. Your instructions a clear and style is add excitement learn.

[@scottgonzalez7574]

This guy is easily my favorite teacher!

[@nemopark2871]

Ussually I get bored on this type of lecture, but this guy is excellent now I am interested in coding

[@annmaryphilip3620]

thankyou very much .before this course i couldnt even draw a line ,now ican make fullblown art and a snake game.i saw the whole playlist

[@latecodecancel9949]

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

[@TakiGamesOfficial]

Stumbled upon your videos while searching for arrays. This whole channel is so useful and entertaining at the same time. You explain things so much better than my university professor.. I’m glad your channel is still active and growing! I hope you continue making more content.

[@aaronphilip6675]

you are just like the teachers which like are so kind and play while teach i like your classes keep it up you like to teach us, we like to be teached by you thanks alot

[@rociomorgenstern.]

you are the best programming teacher I ever had.

[@victorcoelho6605]

I usually don't write a comment, but this video is just amazing!

[@trentoncushing5290]

This helping me so much you are a very good teacher thank you so much!!!!!!

[@laurenceseberini6241]

best teacher ever - seriously

[@leolocoism]

You are just the best teacher I have ever seen, thank you

[@FS-zj5zk]

Omg. I had no clue of what coding is and you are amazing. Ty

[@preetanshaagrawal7372]

Came here after almost learning the web development in an attempt to try something creative and I am already loving it. 😇

[@rainyungz1282]

Wow you the best teacher I ever seen

[@itsmewasiiiithestupidandan6080]

Im in grade five and i want to become an game developer.you are pretty much a good teacher.im from Bangladesh

[@nahomtsegaye]

I love the fact that you speak every word with so much passion. Its contagious! 🙏🏽 🔥🔥

[@Tnak321]

This is awesome. Please never stop making videos.

[@loveshamie1351]

I just had to like and Subscribe. Where was I all along. I wish i had come across this channel earlier. Wow, i am so in love with how he teaches.

[@danicachristopherjones5341]

You helped find a coding site for free and I got to understand code!!!!!!!!!!!!!!!!!!!

[@simpolosanitarycochin6430]

i love your classes and i'll be keeping following them. best teacher i've ever seen

[@rubenjwz]

If you would be my teacher in school, I would never skip class

[@willwill1738]

Exciting and interesting, do without boring. An enthusiasm teacher.

[@epicfamvids8748]

you are the best teacher i have every meet you make it so fun!!

[@sanskarkumar464]

Really you explained every single thing. Love from India.

[@nagtrending]

NICE. I love the way you teach ppl its super fun! English is my second language but I understand your lesson clearly. Thank you sir. more power! will watch all of your tutorials because i start learning now.

[@TheCodingTrain]

Thank you! 😃

[@qinyuxie4821]

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

[@secular-world7316]

You are super AWESOME! Great teacher for sure.

[@coderrishav]

I really like your style of teaching 😆 It's awake my interest in js 😆👍

[@gggameryt9615]

You are a very good teacher thanks

[@Adobii]

The comment section is just kids telling u that ur an amazing teacher There right you are a very good teacher

[@jjrubes1880]

He sounds so much more relaxed in this video than the previous video.

[@_justapersoninthisworld_]

i have to use this video series in school! thanks for the great video!

[@fear_less_2020]

You are an excellent teacher.

[@lilaerios1862]

thanks for sharing and subtitling, I offer for more people like you, I am 40 years old and I have not seen anything as fun as learning to programs with P5

[@abdisharif5104]

I thought I was oldest here with 20yrs but you are double my age...I'm motivated now

[@AlejandrodelHoyo]

Thanks to you, I have started to love coding.

[@alekmia]

Same

[@detailer0303]

Thank's for explaining this🙂

[@anadindesign]

You are awesome! thank you so much for together and making life a bit easier!

[@zeeshanyounas3174]

ur a great teacher for coding ur teaching me at a new level i am really impressed thanks a lot and KEEP IT UP!!!!!

[@jelloteen634]

I am 13 and i really want to learn to code and this series is really helping me out. THANKS!!!!😁😁👌👍

[@TheCodingTrain]

So glad to hear!

[@dogedog3143]

Same! It's so intresting right?!!

[@islamemam509]

i like everything you Do How you say the info , explain it And your crazy about delivering it :D big fan from Egypt

[@bennet7817]

You are so good in explaining farst and also understandable. Also it's funny.

[@TheSesameStreetGang]

I love these videos, I'm a software developer and there's something about your teaching style that makes me excited to code. You have to maintain that through the (sometimes) tedium!

[@henry8388]

Amasing!! the gretest ma on the earth is rigth here :) i have been doing javascript for about a month now and just used p5 one and made a moving square in 2 seconds, amasing

[@xvit]

I think you’re a good communicator. Nicely done. One suggestion: use the whiteboard as the green screen (I’m quite sure it can be done) and just fade the computer display in and out as needed (in post production) for the whiteboard (during recording maybe have one monitor for straight WB and one for computer overlay - to monitor both easily).

[@slhubklop13]

I wanna do programming and these tutorials really explains it to me!

[@bubblebath2892]

Man you are so brilliant at this !! I would love to have as my teacher !!

[@benjaminwoofter1486]

Well done Sir! Such a wonderful beginners guide!!

[@vectorifix3218]

It is amazing to watch such a passionate teacher! I dropped all the other KZbin JS-tutorials I was going through and decided to watch yours insteed. Well done, sir!