1.3: Shapes & Drawing - p5.js Tutorial

Channel:
United States The Coding Train
Subscribers:
1,740,000
Published on ● Video Link: https://www.youtube.com/watch?v=c3TeLi6Ns1E


Category:
Tutorial
Duration: 25:47
409,307 views
7,561

In this video, I start writing code and cover the basics of coordinates systems, shapes, and drawing in p5.js. Code: https://thecodingtrain.com/tracks/code-programming-with-p5-js/code/1-intro/3-shapes-drawing

πŸ•ΉοΈ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/HJ1WjEPwQ

πŸŽ₯ Previous video: https://youtu.be/MXs1cOlidWs?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
πŸŽ₯ Next video: https://youtu.be/riiJTF5-N7c?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
πŸŽ₯ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

References:
πŸ’Ύ p5.js Reference: https://p5js.org/reference/
πŸ’Ύ createCanvas: https://p5js.org/reference/#/p5/createCanvas
πŸ’Ύ rect: https://p5js.org/reference/#/p5/rect
πŸ’Ύ line: https://p5js.org/reference/#/p5/line
πŸ’Ύ rectMode: https://p5js.org/reference/#/p5/rectMode

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: http://thecodingtrain.com/
πŸ‘Ύ Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
πŸ’‘ GitHub: https://github.com/CodingTrain
πŸ’¬ Discord: https://discord.gg/hPuGy2g
πŸ’– Membership: http://youtube.com/thecodingtrain/join
πŸ›’ Store: https://standard.tv/codingtrain
πŸ–‹οΈ Twitter: https://twitter.com/thecodingtrain
πŸ“Έ Instagram: https://www.instagram.com/the.coding.train/

πŸŽ₯ Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
πŸŽ₯ Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

πŸ”— p5.js: https://p5js.org
πŸ”— p5.js Web Editor: https://editor.p5js.org/
πŸ”— Processing: https://processing.org

πŸ“„ Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new



Other Videos By The Coding Train


2018-09-18Workflow: Visual Studio Code
2018-09-17Introduction to Spell (for Machine Learning in the Cloud)
2018-09-14Introduction to My Workflow
2018-09-12Coding Challenge #115: Snake Game Redux
2018-09-11Build a Full Stack Twitter Clone with Coding Garden
2018-09-111.6: Code Comments - p5.js Tutorial
2018-09-101.5: Errors & Console - p5.js Tutorial
2018-09-101.4: Color - p5.js Tutorial
2018-09-07Coding Train Live #150: Coding for Total Beginners with p5.js + Snake Game Redux
2018-09-07Coding Train Live #151: 2018 Workflow (VSC, iTerm, zsh, etc.)
2018-09-071.3: Shapes & Drawing - p5.js Tutorial
2018-09-061.2: p5.js Web Editor - p5.js Tutorial
2018-09-051.1: Code! Programming for Beginners with p5.js
2018-08-27Coding Challenge #114: Bubble Sort Visualization
2018-08-22Coding Challenge #113: 4D Hypercube (aka "Tesseract")
2018-08-21Coding Challenge #112: 3D Rendering with Rotation and Projection
2018-08-20Matrix Multiplication for 3D Rendering
2018-08-16ml5.js: Feature Extractor Regression
2018-08-14ml5.js: Feature Extractor Classification
2018-08-13ml5.js: Transfer Learning with Feature Extractor
2018-08-07Coding Train Live #149: More ml5.js


Tags:
javascript
learning
tutorial
processing
Processing (Programming Language)
creative coding
JavaScript (Programming Language)
Intro
Lesson
Lessons
Teacher
p5js
daniel shiffman
p5 js
p5.js tutorial
coding
programming
programming beginners tutorial
programming beginners guide
tips for programming beginners
coding for beginners
coding train
drawing shapes
html5
html5 canvas
intro programming
intro coding
introduction programming