Patt Viraπ΄ Watch this first if you have no idea what a quadtree is: youtu.be/7pxyIC_ZEwA -- CODE UPDATE: ποΈ Inside sketch.js β draw() function: - Created two for loops, instead of one, to separate inserting and querying points in the quadtree. With just one for loop, all the boids did not have the chance to interact with a fully updated quadtree. ποΈ Inside boid.js β Boid's class & update() method: - Switched the order of this.velocity.add(this.acceleration) and this.position.add(this.velocity). Velocity should be updated first, then apply to the position vector.
Timestamps: 0:00 Intro 0:23 Quadtree quick recap 0:51 What is a flocking simulation? 02:20 Agenda and approach 05:05 Create a Boid class 16:16 Write an Alignment method 24:39 Write a Cohesion method 32:37 Write a Separation method 40:30 Change from p5.js. to p5.min.js to improve performance 41:59 Create a QuadTree class 45:55 This is where the magic happens β¨
p5.js Coding Tutorial | Flocking Simulation with Quadtree π€π€π€Patt Vira2024-09-10 | π΄ Watch this first if you have no idea what a quadtree is: youtu.be/7pxyIC_ZEwA -- CODE UPDATE: ποΈ Inside sketch.js β draw() function: - Created two for loops, instead of one, to separate inserting and querying points in the quadtree. With just one for loop, all the boids did not have the chance to interact with a fully updated quadtree. ποΈ Inside boid.js β Boid's class & update() method: - Switched the order of this.velocity.add(this.acceleration) and this.position.add(this.velocity). Velocity should be updated first, then apply to the position vector.
Timestamps: 0:00 Intro 0:23 Quadtree quick recap 0:51 What is a flocking simulation? 02:20 Agenda and approach 05:05 Create a Boid class 16:16 Write an Alignment method 24:39 Write a Cohesion method 32:37 Write a Separation method 40:30 Change from p5.js. to p5.min.js to improve performance 41:59 Create a QuadTree class 45:55 This is where the magic happens β¨p5.js Coding Tutorial | Interactive Bridge with Bouncing Balls (matter.js + ml5.js)Patt Vira2024-10-15 | LET'S CONNECT β¨ Sign up for my newsletter at pattvira.com β¨ Instagram: instagram.com/pattvira β¨ Twitter: twitter.com/pattvira -- Links: π p5.js editor: editor.p5js.org π Interactive Bridge with Bouncing Balls Code: editor.p5js.org/pattvira/sketches/kxhf0tEiW π Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdn
Timestamps: 0:00 Intro 0:46 Create two circle bodies and a fixed ground 7:46 Use Constraint module to join two bodies 12:53 Create a new Composite in order to chain multiple bodies together 21:31 Use MouseConstraint to make mouse interact with bodies 24:43 Use p5.js to render 30:05 What's coming next? Hint: matter.js + ml5.js!First Q&A π¦π¦οΈ burnout, motivation vs discipline, insecurities around codingPatt Vira2024-10-08 | LET'S CONNECT β¨ Sign up for my newsletter at pattvira.com β¨ Instagram: instagram.com/pattvira β¨ Twitter: twitter.com/pattvira -- References: π First Q&A - Part 1: youtu.be/x4w-CWet-S8 π Go-to Coding Playlist: youtube.com/watch?v=-MXmRGO1fag&list=PLviOzvN-Oy_eThreR_HMoOa3KCfD5aoxV -- Timestamps: 0:00 Intro 0:12 Where do your ideas come from? Do ideas come more frequently with experience? 0:56 Have you ever felt like quitting when things donβt work out? 3:55 Have you experienced a burn-out? 5:23 What are your thoughts on motivation vs discipline? 7:09 How do you stay consistent? Any tips on time management and productivity? 8:46 What are your anxiety and insecurities in your coding journey and how did you overcome them? 10:40 What advice would you give someone who feels that they arenβt good at coding? 11:16 Favorite music for coding?Β 11:40 Three emojis that describe your creative process? 11:46 Whatβs your go-to snack or drink when youβre in full creative mode?p5.js Coding Tutorial | Bouncing Balls with matter.jsPatt Vira2024-10-01 | LET'S CONNECT β¨ Sign up for my newsletter at pattvira.com β¨ Instagram: instagram.com/pattvira β¨ Twitter: twitter.com/pattvira -- Links: π p5.js editor: editor.p5js.org π Bouncing Balls with matter.js Code: editor.p5js.org/pattvira/sketches/Xl-1Ee1Uy π Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdn
Timestamps: 0:00 Intro 2:04 What is matter.js 3:04 Key building blocks 6:31 Set up matter.js 7:54 Implement a minimal example 24:36 Integrate with p5.js 31:14 Create Rect and Ground classes 36:54 Add a new box when pressing the mouseArduino 101 | Physical Computing for BeginnersPatt Vira2024-09-20 | In this video, weβre taking a big step into the world of physical computing! Iβve created countless tutorials using p5.js to bring code to life on the screen, but now, itβs time to take things off the screen and into the real world.
With Arduino, weβll explore how to make hardware and software work together to create interactive, dynamic projects. Weβll cover the basics of physical computing, introduce the core components like sensors, microcontrollers, and actuators, and start building projects that react to the world around us. Letβs dive in and learn togetherβmistakes, breakthroughs, and all! -- LET'S CONNECT β¨ Sign up for my newsletter at pattvira.com β¨ Instagram: instagram.com/pattvira β¨ Twitter: twitter.com/pattvira
Timestamps: 0:00 Intro 0:10 Inspiration for the tutorial 1:06 Agenda 1:49 What is a quadtree? 3:19 Let's start coding 3:58 Create a Point class to represent a simple coordinate (x, y) 4:19 Create a Rect class for a rectangular bounding box 4:58 Create a Quadtree class with 3 main methods (insert, subdivide, and query) 6:29 Write an Insert method 14:08 Write a Subdivide method 23:02 Write a Query method 30:02 Fix a bug 32:41 Create a Circle class for a circular bounding box 40:52 Create a Particle class 47:37 Call collision detection without a quadtree (oh no!) 50:53 Call collision detection with a quadtree (oh yes!) 57:42 Moment of truth1 Hour Code with Me - Quadtree βοΈ βοΈ | real time, lofi hip-hop beatsPatt Vira2024-08-23 | Hi friends! βοΈ βοΈ
Welcome to my very first code with me video as I worked through the code for the upcoming quadtree tutorial from start to finish. I struggled quite a bit (- _-") so you will really get to see the super raw behind the scene of how I figured out each of the bugs.
Timestamps: 0:00 Intro 0:38 Upload and resize image 3:23 Use get() function to get region of pixels from canvas 5:10 Example 1: vertical strips 9:01 Example 2: grid 16:19 Add marginsFirst Year on Youtube & Whats Next!Patt Vira2024-08-07 | Sharing my reflection on being on youtube for a full year and my plans for the upcoming months!
Also, I am doing my very first Q&A so submit your questions -- either in the comment section or DM me on Instagram @pattvira
Timestamps: 0:00 Intro 0:36 What's happened in the past year 1:41 How did I do it? 4:50 How did I keep up with the schedule? 6:30 So... what's next? -- LET'S CONNECT β¨ Sign up for my newsletter at pattvira.com πΈ Instagram: instagram.com/pattvira π¦ Twitter: twitter.com/pattviraWhy Daniel Shiffman is the Funniest Coding Youtuber Youll MeetPatt Vira2024-07-31 | Daniel Shiffman. You probably know him from his popular Youtube channel, the Coding Train @TheCodingTrain , where his infectious enthusiasm and passion for teaching shine through in every video.
In this conversation, we discussed Dan's journey into the world of coding, art, and teaching, from his background in math and theater to attending and now teaching at NYUβs Interactive Telecommunications Program (ITP). We talked about the motivation and evolution of his YouTube channel, the importance of community in learning, and the significance of coding literacy in today's technology-driven world.
π Dan's new book, 'The Nature of Code' is ready for pre-order at https://www.natureofcode.com. π Use my promo code: PATTVIRA25 for a 25% off!
CHECK OUT DAN'S CHANNEL: π‘The Coding Train: @TheCodingTrain / thecodingtrain.com π‘The Nature of Code: natureofcode.com -- Timestamps: 0:00 Intro 2:10 Early Beginnings and ITP Experience 13:02 Discovering Processing 16:44 Teaching at ITP 21:17 Balancing Classroom Teaching vs. YouTube 26:49 Thoughts on Open-sourced Projects 29:17 YouTube Journey: Making Coding Fun 34:41 Audience Demographics 36:14 Style and Pacing of Content 47:40 The Nature of Code Book 51:31 Audience Persona: Focusing on Beginners 54:17 Advice on Teaching Diverse Groups of Students 56:36 Advice for Aspiring Coders 1:00:08 Why Should We Learn Programming?
Timestamps: 0:00 Intro 1:03 What is FFT 2:28 Sketch No.1: FFT Class Demo 5:24 Draw Time Domain Graph 8:59 Draw Frequency Domain Graph 13:54 Sketch No.2: Final visualization 14:03 Create 3D cubes 22:24 Create a 3d array grid to store color information 25:02 Add song and create an FFT object 26:13 Calculate distance between center of cubes to origin point 31:58 Color cubes based on FFT outputs 37:24 Final Result!p5.js Coding Tutorial | Bouncing Wave TypographyPatt Vira2024-06-06 | LET'S CONNECT β¨ Sign up for my newsletter at pattvira.com β¨ Instagram: instagram.com/pattvira β¨ Twitter: twitter.com/pattvira -- Links: π p5.js editor: editor.p5js.org π Bouncing Wave Typography Code: editor.p5js.org/pattvira/sketches/_hi3uBMAo π Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdn
Timestamps: 0:00 Intro 0:22 What is sound? 1:48 Visualize sound waves with an oscilloscope 4:07 Quick experiment and key takeaways 7:10 Explore p5.Oscillator class5 Lessons I Learned From Making 100 Coding TutorialsPatt Vira2024-05-10 | π‘Want to share with me your ideas? Sign up for my weekly newsletter and let's talk! pattvira.com/newsletter
Timestamps: 0:00 Intro 0:29 Creating a single rainbow wave 3:56 Creating a Rainbow class 6:32 Creating multiple Rainbow objects 8:29 Adjusting angle velocity based on radius 9:54 Setting new angle value to ensure no time is lost when hitting angle limits 13:55 Adjusting radius so radius is inversely related to angle velocity 18:29 Adding rainbow colors 22:38 Adding sound using p5.Oscillator class 26:59 Using p5.Envelope class to make sound more instrument-likep5.js Coding Tutorial | Synchronized Rotating ArcsPatt Vira2024-05-06 | LET'S CONNECT β¨ Sign up for my newsletter at pattvira.com β¨ Instagram: instagram.com/pattvira β¨ Twitter: twitter.com/pattvira -- Links: π p5.js editor: editor.p5js.org π Synchronized Rotating Arcs Code: editor.p5js.org/pattvira/sketches/PnVKglAZR π Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdn
Timestamps: 0:00 Intro 0:12 Create a single oscillating block 6:52 Create a Block class 10:49 Create multiple Block objects 15:10 Add a collision method and change colors and block dimensions 22:52 Add sound using p5.Oscillator class 30:22 Full length final output!p5.js Coding Tutorial | Starfield Effect (Particle Systems 3D)Patt Vira2024-05-01 | LET'S CONNECT β¨ Sign up for my newsletter at pattvira.com β¨ Instagram: instagram.com/pattvira β¨ Twitter: twitter.com/pattvira -- Code Update: ποΈ I have added the finished method in the system class to check and remove particle systems that are no longer on the screen. Try implementing it yourself before checking the code!
Timestamps: 0:00 Intro 0:29 Create a single particle 5:21 Create a Particle class 7:48 Create a system of particles (aka Firework) 15:53 Remove particle objects that are "done" 20:06 Create a Firework class 27:51 Create systems of particle systemes (aka a bunch of fireworks) 29:15 Remove firework objects are that "done" 33:18 Add colors and glowing effectsp5.js Coding Tutorial | Basics of Particle SystemsPatt Vira2024-04-26 | LET'S CONNECT β¨ Sign up for my newsletter at pattvira.com β¨ Instagram: instagram.com/pattvira β¨ Twitter: twitter.com/pattvira -- Links: π p5.js editor: editor.p5js.org π Basics of Particle Systems Code: editor.p5js.org/pattvira/sketches/V4yLWOjTA π Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdn
Timestamps: 0:00 Intro 0:10 What is a Particle System? 1:05 Create a single particle system 5:38 Create a Particle class 7:52 Create multiple Particle objects aka system of particles (aka a particle system) 9:05 Remove particles based on a condition 12:10 Remove particles using a backward for-loop 15:15 Create a System class 18:39 Create multiple System objects AKA system of particle systems 21:52 Experiment with different ways to add a particle system 22:47 Make it pretty!p5.js Coding Tutorial | Pendulum Waves π΅Patt Vira2024-04-24 | LET'S CONNECT β¨ Sign up for my newsletter at pattvira.com β¨ Instagram: instagram.com/pattvira β¨ Twitter: twitter.com/pattvira -- Links: π p5.js editor: editor.p5js.org π Pendulum Waves Code: editor.p5js.org/pattvira/sketches/oKqjZ0a5l π Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdn
Credit: πΈ This tutorial is a re-creation of a piece by Jongmin Kim: @cmiscm (Looking for more inspiration, check out his work here: links.cmiscm.com)
Timestamps: 0:00 Intro 0:10 Create one heart-shaped outline using a heart curve equation 4:25 Create a Heart class 8:20 Create multiple Heart objects at mouse location 12:06 Create a Particle class to control each particle that makes up a heart shape 19:35 Expand hearts being making them explode and fall 23:03 Remove hearts that are offscreen from array 29:56 Make it prettty!p5.js Coding Tutorial | SierpiΕski Triangle (Cool facts at the end!)Patt Vira2024-03-25 | LET'S CONNECT β¨ Sign up for my newsletter at pattvira.com β¨ Instagram: instagram.com/pattvira β¨ Twitter: twitter.com/pattvira -- Links: π p5.js editor: editor.p5js.org π SierpiΕski Triangle Code: editor.p5js.org/pattvira/sketches/2edpx-xu2 π Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdn
Timestamps: 0:00 Intro 0:52 Create one triangle (Level 0) 2:16 Create 3 triangles inside a big triangle (Level 1) 6:52 Write a recursive function 9:55 Cool facts about sierpiΕski triangles and fractals!