p5.js Coding Tutorial | Falling Hearts ππ (Valentines Day Specials) Patt Vira 2024-10-20 | p5.js Coding Tutorial | Falling Hearts ππ (Valentines Day Specials)
p5.js Coding Tutorial | Interactive Bridge with Bouncing Balls (matter.js + ml5.js) Patt Vira 2024-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=XhvQaojd6cIrxvdnReferences: π matter.js: π Website brm.io/matter-js π Starter Code (from Springy Chain with matter.js Tutorial): editor.p5js.org/pattvira/sketches/zkMXLc5b_ π Playlist: youtube.com/playlist?list=PL0beHPVMklwgaLt1xHqlKNvPZ7nKjHnH3π ml5.js: π Website: ml5js.org π ml5.js Handpose Example: editor.p5js.org/ml5/sketches/QGH3dwJ1A π ml5.js playlist: youtube.com/playlist?list=PL0beHPVMklwhxJ6G3Hn4uLQTDe4Y562Dr&si=fstnmy-6Q8ELkFVcπ Inspiration: ml5.js+matter.js sketch by Golan Levin: editor.p5js.org/golan/sketches/y4AIaY3XuTimestamps: 0:00 Intro2:08 Create a Bridge class6:42 Fix positions of the outer most circles to create a bridge9:49 Walk through ml5.js documentation 11:38 Add ml5.js handpose example code to sketch25:07 Use thumb and index fingers' positions as bridge's position 27:32 Create a bunch of color bouncy balls 35:07 Remove balls that are off screen41:40 Final touches
p5.js Coding Tutorial | Springy Chain with matter.js π Patt Vira 2024-10-11 | 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 π Springy Chain with matter.js Code: π Using matter.js built-in render: editor.p5js.org/pattvira/sketches/XZqYlEI5S π Using p5.js: editor.p5js.org/pattvira/sketches/zkMXLc5b_π Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnReferences: π matter.js: brm.io/matter-jsπ matter.js playlist: youtube.com/playlist?list=PL0beHPVMklwgaLt1xHqlKNvPZ7nKjHnH3π ml5.js+matter.js sketch by Golan Levin: editor.p5js.org/golan/sketches/y4AIaY3XuTimestamps: 0:00 Intro0: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 coding Patt Vira 2024-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 Intro0: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.js Patt Vira 2024-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=XhvQaojd6cIrxvdnReferences: π matter.js: brm.io/matter-jsπ AnyPixel: googlecreativelab.github.io/anypixelTimestamps: 0:00 Intro0:34 Add matter.js to sketch1:09 Setup engine and create a ball6:30 Create a Ball class10:17 Add random initial velocity13:07 Add colors 13:58 Remove balls that are off the screen from the physics' world and balls array22:38 Create a Boundary class
p5.js Coding Tutorial | Introduction to matter.js π΄ πͺ Patt Vira 2024-09-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 π Intro to matter.js Code: π Without p5.js: editor.p5js.org/pattvira/sketches/D9kDZh1UN π With p5.js: editor.p5js.org/pattvira/sketches/tsP4iEW2Yπ Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnReferences: π matter.js: brm.io/matter-jsπ AnyPixel: googlecreativelab.github.io/anypixelπ Nature of Code - Physics Libraries: natureofcode.com/physics-librariesTimestamps: 0:00 Intro2:04 What is matter.js3:04 Key building blocks6:31 Set up matter.js 7:54 Implement a minimal example 24:36 Integrate with p5.js 31:14 Create Rect and Ground classes36:54 Add a new box when pressing the mouse
Arduino 101 | Physical Computing for Beginners Patt Vira 2024-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/pattviraTimestamps: 0:00 Intro1:20 What physical computing is and why it matters2:03 How to think about physical computing when youβre just getting started3:58 The core components weβll be working with6:10 What is my plan for you and I to explore this world together!
p5.js Coding Tutorial | Pixelated Kaleidoscope Patt Vira 2024-09-17 | 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 π Pixelated Kaleidoscope Code: π Interactive: editor.p5js.org/pattvira/sketches/rPDtD84So π Generative: editor.p5js.org/pattvira/sketches/D_qHKz-jOπ Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnReferences: π @TheCodingTrain 's Coding Challenge 155: Kaleidoscope Snowflake Design: youtube.com/watch?v=R3C2giDfmO8π @ComputingMasterclass 's Kaleidoscope - p5.js Tutorial: youtube.com/watch?v=KcHqRAM0sEU&t=625sTimestamps: 0:00 Intro0:56 Create a 2d array grid to store color information3:30 Create an interactive kaleidoscope using mouse as input7:15 Calculate mirror pixels to get a kaleidoscope pattern10:25 Make it rainbow colors with HSB mode12:37 Create a generative kaleidoscope using random()18:32 Experiment with a different color palette
p5.js Coding Tutorial | Flocking Simulation with Quadtree π€π€π€ Patt Vira 2024-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.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 π Quadtree (Part 2 of 2) Code: editor.p5js.org/pattvira/sketches/v_tmN-BC5π Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnReferences: π Boids by Craig Reynolds: red3d.com/cwr/boidsπ Nature of Code - Chapter 5: Autonomous Agents: natureofcode.com/autonomous-agentsCredits: π Thumbnail: raw.githack.com/mrdoob/three.js/dev/examples/webgpu_compute_birds.htmlTimestamps: 0:00 Intro0:23 Quadtree quick recap 0:51 What is a flocking simulation? 02:20 Agenda and approach05:05 Create a Boid class16:16 Write an Alignment method 24:39 Write a Cohesion method32:37 Write a Separation method 40:30 Change from p5.js. to p5.min.js to improve performance41:59 Create a QuadTree class45:55 This is where the magic happens β¨
First Q&A π©βππ programming background, career journey, favorites Patt Vira 2024-09-06 | π FYI this is a re-upload --LET'S CONNECT β¨ Sign up for my newsletter at pattvira.comβ¨ Instagram: instagram.com/pattviraβ¨ Twitter: twitter.com/pattvira--Timestamps: 0:00 Intro0:40 What is your programming background? 1:55 What has your career looked like so far? 4:28 What was the turning point in your life that made you start posting videos? 6:33 Where are you trying to take it? 8:08 How do you see your content evolving in the next 3 years?8:45 What is your hobby? 9:14 What is your favorite book? 10:18 What do you watch on Youtube lately?
p5.js Coding Tutorial | Spiral Betty Patt Vira 2024-09-03 | π Suggest an Idea: pattvira.com/ideas--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 π Spiral Betty Code: editor.p5js.org/pattvira/sketches/-VoHCBGmxπ Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnReferences: π Spiral Betty: spiralbetty.comπ Zenozeng's p5.js - svg library: github.com/zenozeng/p5.js-svgπ GUI Functions: π createSlider: p5js.org/reference/p5/createSlider π createColorPicker: p5js.org/reference/p5/createColorPicker π createSelect: p5js.org/reference/p5/createSelect π createButton: p5js.org/reference/p5/createButton π input: p5js.org/reference/p5/inputπ createGraphics: p5js.org/reference/p5/createGraphics Timestamps: 0:00 Intro0:21 Spiral Betty and Archimedean spiral0:59 Create a spiral pattern4:37 Set spiral line thickness based on brightness values 9:43 Create a GUI to manipulate each parameter22:02 Export an image file
p5.js Coding Tutorial | Quadtree π΄ (how not to crash your program w +1,000 colliding particles!) Patt Vira 2024-08-27 | 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 π Quadtree (Part 1 of 2) Code: editor.p5js.org/pattvira/sketches/ga_GjOZpsπ Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnWhat to watch next!π Quadtree - Flocking Simulation (Part 2 of 2): youtu.be/AMugNCfP1NAReferences: π Inspiration - Chris Barber's Adrift: instagram.com/p/C-QHx2ASmWxπ OpenFrameworks - Creative coding tool in C++ used to make Adrift: openframeworks.cc π @TheCodingTrain 's Quadtree Series: π Part 1: youtube.com/watch?v=OJxEcs0w_kE π Part 2: youtube.com/watch?v=QQx_NmCIuCY π Part 3: youtube.com/watch?v=z0YFFg_nBjw&t=169sπ Collision Detection: youtu.be/gUTeWOfwECcTimestamps: 0:00 Intro0:10 Inspiration for the tutorial1:06 Agenda 1:49 What is a quadtree? 3:19 Let's start coding3: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 box40: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 truth
1 Hour Code with Me - Quadtree βοΈ βοΈ | real time, lofi hip-hop beats Patt Vira 2024-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. Let me know if you like this kind of video and have a productive coding session! -- LET'S CONNECT β¨ Sign up for my newsletter at pattvira.comβ¨ Instagram: instagram.com/pattviraβ¨ Twitter: twitter.com/pattvira
p5.js Coding Tutorial | Interactive Vinyl Cover (Image Masking) Patt Vira 2024-08-20 | 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 Vinyl Cover Code: editor.p5js.org/pattvira/sketches/-GpMFZTicπ Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnReferences: π p5.js mask function: p5js.org/reference/p5.Image/maskπ p5.js filter function: p5js.org/reference/p5.Image/filterTimestamps: 0:00 Intro0:23 Upload an image onto sketch 2:40 Use mask function 6:17 Use filter function to blur background 7:00 Create a Mask class9:45 Create multiple circles (Mask objects)13:14 Rotate circles by changing angles 18:09 Make it interactive
p5.js Coding Tutorial | Collage (Image Manipulation) Patt Vira 2024-08-13 | 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 π Collage: π Vertical Strips: editor.p5js.org/pattvira/sketches/0B3-goH19 π Grid: editor.p5js.org/pattvira/sketches/jTFI1P8Y1 π Grid (Truly Randomized): editor.p5js.org/pattvira/sketches/-hUmZSlcXπ Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnReferences: π p5.js get() function: p5js.org/reference/p5.Image/getπ Other tutorials using get() function: π ASCII Text Images and Videos: youtu.be/4IyeLc6J1Uo π Drawing with Webcam: youtu.be/hHZcIMppkFc π Create Raster Graphics from Image: youtu.be/ruth6FZ2RK0Timestamps: 0:00 Intro0:38 Upload and resize image3:23 Use get() function to get region of pixels from canvas5:10 Example 1: vertical strips9:01 Example 2: grid16:19 Add margins
First Year on Youtube & Whats Next! Patt Vira 2024-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 @pattviraReferences: π My Interview with Daniel Shiffman: youtu.be/X4XMhpRFKvUπ @SebastianLague Coding Adventure: Simulating Fluids: youtube.com/watch?v=rSKMYc1CQHETimestamps: 0:00 Intro0: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/pattvira
Why Daniel Shiffman is the Funniest Coding Youtuber Youll Meet Patt Vira 2024-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 Intro2:10 Early Beginnings and ITP Experience 13:02 Discovering Processing16:44 Teaching at ITP 21:17 Balancing Classroom Teaching vs. YouTube26:49 Thoughts on Open-sourced Projects29:17 YouTube Journey: Making Coding Fun34:41 Audience Demographics 36:14 Style and Pacing of Content 47:40 The Nature of Code Book51:31 Audience Persona: Focusing on Beginners54:17 Advice on Teaching Diverse Groups of Students 56:36 Advice for Aspiring Coders1:00:08 Why Should We Learn Programming?Editing by Patt ViraFilming by Don Lee--LET'S CONNECT β¨ Sign up for my newsletter at pattvira.comπΈ Instagram: instagram.com/pattviraπ¦ Twitter: twitter.com/pattvira
p5.js Coding Tutorial | Interactive Fridge Magnets (with ml5.js) Patt Vira 2024-07-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 π Interactive Fridge Magnets Code: editor.p5js.org/pattvira/sketches/f3nZuIPZiπ Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnCredits: π Magnet Poetry by Lea Naisberg: instagram.com/p/C8xXy0NR_IJ/?img_index=1References: π ml5.js: ml5js.orgTimestamps: 0:00 Intro0:20 ml5.js - machine learning library for the web1:04 Intro to handPose() model 9:43 Get thumb and index finger locations 11:13 Create one magnet 17:38 Create a Magnet class21:47 Make it interactive with mouse location 25:36 Combine ml5.js and magnet sketches26:53 Make it interactive with fingers' location
ASCII Text Images and Videos #p5js #javascript #coding #shorts Patt Vira 2024-07-25 | π Full Tutorial: youtu.be/4IyeLc6J1Uoπ Code: π Image: editor.p5js.org/pattvira/sketches/aT8iNvJV1 π Video: editor.p5js.org/pattvira/sketches/pdK2ZxNSe--LET'S CONNECT β¨ Sign up for my newsletter at pattvira.comβ¨ Instagram: instagram.com/pattviraβ¨ Twitter: twitter.com/pattvira
p5.js Coding Tutorial | ASCII Text Images and Videos! Patt Vira 2024-07-23 | 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 π ASCII Art Code: π With Image: editor.p5js.org/pattvira/sketches/aT8iNvJV1 π With Webcam: editor.p5js.org/pattvira/sketches/pdK2ZxNSe π With Video: editor.p5js.org/pattvira/sketches/bP1VKw84Tπ Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnReferences: π ASCII Characters: paulbourke.net/dataformats/asciiartTimestamps: 0:00 Intro0:51 ASCII Art with image4:46 Approach 1: Using get() to get pixel values 10:30 Approach 2: Using loadPixels to get pixel values 16:52 ASCII Art with video from webcam
Falling Letters w Secret Message #p5js #javascript #coding Patt Vira 2024-07-19 | π Full Tutorial: youtu.be/KdVgpDjmoRQπ Code: editor.p5js.org/pattvira/sketches/3Z_YM-zUx--LET'S CONNECT β¨ Sign up for my newsletter at pattvira.comβ¨ Instagram: instagram.com/pattviraβ¨ Twitter: twitter.com/pattvira
p5.js Coding Tutorial | Falling Letters w Secret Message Patt Vira 2024-07-18 | 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 π Falling Letters w Secret Message Code: editor.p5js.org/pattvira/sketches/3Z_YM-zUxπ Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnReferences: π Wolfram Math World - Heart Curve: mathworld.wolfram.com/HeartCurve.htmlTimestamps: 0:00 Intro0:11 Create an array of falling letters 13:06 Create a Rain class 17:26 Create multiple Rain objects (arrays of falling letters)21:48 Make it interactive (version 1)26:00 Make it interactive (version 2)
Joy Divisions Unknown Pleasures album cover #p5js #javascript #creativecoding #coding #shorts Patt Vira 2024-07-17 | π Full Tutorial: youtu.be/PttnJmbBKnYπ Code: editor.p5js.org/pattvira/sketches/AKmFHat8W--LET'S CONNECT β¨ Sign up for my newsletter at pattvira.comβ¨ Instagram: instagram.com/pattviraβ¨ Twitter: twitter.com/pattvira
p5.js Coding Tutorial | Album Cover - Unknown Pleasures by Joy Division Patt Vira 2024-07-16 | 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 π Unknown Pleasures by Joy Division Code: editor.p5js.org/pattvira/sketches/AKmFHat8Wπ Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnReferences: π Perlin Noise playlist: youtube.com/playlist?list=PL0beHPVMklwh6-2ohRiaN6wo8ttoWF9JPTimestamps: 0:00 Intro0:35 Use noise() to generate random values 6:39 Create one line pattern11:16 Create multiple line patterns 12:35 Add margins 15:17 Adjust colors
p5.js Coding Tutorial | Music Visualization with FFT π΅ Patt Vira 2024-07-12 | 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 π Music Visualization with FFT Code: π FFT Class Demo: editor.p5js.org/pattvira/sketches/6NmF7Qbj0 π Final Visualization: editor.p5js.org/pattvira/sketches/KB9supaPGπ Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnSong Credits: π΅β¨ Veiil by Etienne Mayson: https://maysun.zip/References: π @3blue1brown - But what is the Fourier Transform? A visual introduction: youtu.be/spUNpyF58BY?si=h8ut6tf_Yoc0efBAπ Virtual Oscilloscope: academo.org/demos/virtual-oscilloscopeTimestamps: 0:00 Intro1:03 What is FFT2:28 Sketch No.1: FFT Class Demo 5:24 Draw Time Domain Graph8:59 Draw Frequency Domain Graph13: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 object26:13 Calculate distance between center of cubes to origin point31:58 Color cubes based on FFT outputs 37:24 Final Result!
p5.js Coding Tutorial | Bouncing Wave Typography Patt Vira 2024-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=XhvQaojd6cIrxvdnReferences: π Easing Functions: easings.netTimestamps: 0:00 Intro0:10 Draw text on canvas3:37 Create Text and Wave classes 8:28 Write a method to move a Text object 11:35 Add interesting movement using easing functions 14:02 Reverse movement direction 16:49 Control total distance traveled for each Text object 19:39 Create multiple Wave objects20:51 Create wavy and bouncy effects
Sound Mini Series | EPISODE 4 - p5. AudioIn Patt Vira 2024-06-03 | 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 π EP4_p5.AudioIn Code: editor.p5js.org/pattvira/sketches/J7Qd6jlZVπ Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnReferences: π p5.js AudioIn Class: p5js.org/reference/#/p5.AudioInTimestamps: 0:00 Intro0:48 Use computer's microphone to get audio input 2:27 Create animation for an audio visualizer 13:47 Use microphone's amplitude to control animation
p5.js Coding Tutorial | Binary Clock Patt Vira 2024-05-30 | 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 π Binary Clock Code: editor.p5js.org/pattvira/sketches/tl7W8xMmpπ Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnTimestamps: 0:00 Intro1:37 Use hour(), minute(), and second() to get current time2:27 Write a function to convert from decimal to binary 10:45 Convert current time from decimal to binary 12:27 Draw clock 15:44 Final touches
p5.js Coding Tutorial | Rotating Typography Patt Vira 2024-05-27 | 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 π Rotating Typography Code: editor.p5js.org/pattvira/sketches/lDWlP7kVEπ Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnReferences: π Easing Functions: easings.netTimestamps: 0:00 Intro0:10 Create a string of text that rotates around a circular path7:26 Create a Type class10:48 Create multiple Type objects15:31 Add easing functions 20:53 Add final touches
p5.js Coding Tutorial | Binary Piano π΅ Patt Vira 2024-05-23 | 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 π Binary Piano Code: editor.p5js.org/pattvira/sketches/8a1UP-aMXπ Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnCredits: π Tim Holman's Binary Piano: binarypiano.com π Alfred Kedhammar's 1023.exe: youtu.be/CdaPhpGG6As?si=c6IUiKRCBCEq8ftDReferences: π p5.js Oscillator Class: p5js.org/reference/#/p5.Oscillatorπ p5.js Envelope Class: p5js.org/reference/#/p5.Envelopeπ Geeks for Geeks - Convert from Decimal to Binary: geeksforgeeks.org/javascript-program-to-convert-decimal-to-binaryIf you like this tutorial, be sure to check out these playlists: π΅ Sound: youtube.com/playlist?list=PL0beHPVMklwjGN8hR4ei-SJAY-AozCdQAπ΅ Sound Mini Series: youtube.com/playlist?list=PL0beHPVMklwjNRGtN74Mp6JCub4Dd_y5wTimestamps: 0:00 Intro0:34 What is binary? 2:39 Write a function to convert from decimal to binary number 8:32 Increment decimal number using frameCount11:26 Write a Block class18:38 Add sound with p5.Oscillator and p5.Envelope 26:22 Add some final touches
Sound Mini Series | EPISODE 3 - p5. Envelope Patt Vira 2024-05-20 | 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 π EP3_p5.Envelope Code: editor.p5js.org/pattvira/sketches/_f50yfrrSπ Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnReferences: π p5.js Oscillator Class: p5js.org/reference/#/p5.Oscillatorπ p5.js Envelope Class: p5js.org/reference/#/p5.EnvelopeTimestamps: 0:00 Intro1:28 Create an Envelope object 6:43 Experiment with different parameters
Sound Mini Series | EPISODE 2 - Bubbly Keyboard πΉ Patt Vira 2024-05-16 | 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 π EP2_p5.Oscillator Code: editor.p5js.org/pattvira/sketches/4QcM7Ywy9π Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnReferences: π p5.js Oscillator Class: p5js.org/reference/#/p5.Oscillatorπ p5.js createSelect: p5js.org/reference/#/p5/createSelectrπ p5.js createSlider: p5js.org/reference/#/p5/createSliderπ Wikipedia - Audio Frequency: en.wikipedia.org/wiki/Audio_frequencyπ Wikipedia - Hearing Range: en.wikipedia.org/wiki/Hearing_rangeTimestamps: 0:00 Intro0:28 Approach3:09 Create piano keys 10:30 Create a Key class13:34 Activate keys where mouse is pressed17:20 Add sound using p5.Oscillator class22:23 Add dropdown list to control sound wave options26:29 Add slider to control volume29:14 Add bubbles using particles37:19 Add colors
Sound Mini Series | EPISODE 1 - p5.Oscillator Patt Vira 2024-05-13 | 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 π p5.Oscillator Code: editor.p5js.org/pattvira/sketches/WJyDqzRJNπ Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnReferences: π Virtual Oscilloscope: academo.org/demos/virtual-oscilloscopeπ p5.js Oscillator Class: p5js.org/reference/#/p5.OscillatorTimestamps: 0:00 Intro0:22 What is sound?1:48 Visualize sound waves with an oscilloscope4:07 Quick experiment and key takeaways7:10 Explore p5.Oscillator class
5 Lessons I Learned From Making 100 Coding Tutorials Patt Vira 2024-05-10 | π‘Want to share with me your ideas? Sign up for my weekly newsletter and let's talk! pattvira.com/newsletterLET'S CONNECTβ¨ Website: pattvira.comβ¨ Instagram: instagram.com/pattviraβ¨ Twitter: twitter.com/pattviraMentioned Videos: π TEDx Talks: @MarkRober - The Super Mario Effect: youtu.be/9vJRopau0g0?si=Cu1MADMrdQGejdjoπ @cs50 - Introduction to Programming Course Youtube Channel Timestamps: 0:00 Intro0:46 Lesson 1 2:35 Lesson 2 4:12 Lesson 3 6:06 Lesson 47:16 Lesson 510:10 Bonus Lesson!11:29 What is Next?
p5.js Coding Tutorial | Rainbow Pendulum Waves Patt Vira 2024-05-08 | 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 π Rainbow Pendulum Waves Code: editor.p5js.org/pattvira/sketches/27p9GzkkMπ Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnReferences: π @project_jdm 's Version: youtu.be/4GaGnU8Ij2Y?si=u1I2F6l9hMZJziNBπ Wikipedia - Audio frequency: en.wikipedia.org/wiki/Audio_frequencyπ p5.js Oscillator Class: p5js.org/reference/#/p5.Oscillatorπ p5.js Envelope Class: p5js.org/reference/#/p5.EnvelopeTimestamps: 0:00 Intro0:29 Creating a single rainbow wave3:56 Creating a Rainbow class6:32 Creating multiple Rainbow objects8:29 Adjusting angle velocity based on radius9:54 Setting new angle value to ensure no time is lost when hitting angle limits13:55 Adjusting radius so radius is inversely related to angle velocity 18:29 Adding rainbow colors 22:38 Adding sound using p5.Oscillator class26:59 Using p5.Envelope class to make sound more instrument-like
p5.js Coding Tutorial | Synchronized Rotating Arcs Patt Vira 2024-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=XhvQaojd6cIrxvdnReferences: π p5.js Arc function: p5js.org/reference/#/p5/arcTimestamps: 0:00 Intro0:10 Create one rotating arc4:13 Create two synchronized rotating arcs 7:26 Write a collision function 10:00 Create an Arc class14:07 Create Arc objects18:54 Make it pretty!
p5.js Coding Tutorial | Robot Meets Oscillating Waves π€π΅ Patt Vira 2024-05-03 | 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 π Robot Oscillating Waves Code: editor.p5js.org/pattvira/sketches/Le4wSQq4bπ Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnReferences: π Wikipedia - Audio frequency: en.wikipedia.org/wiki/Audio_frequencyπ p5.js Oscillator Class: p5js.org/reference/#/p5.OscillatorTimestamps: 0:00 Intro0:12 Create a single oscillating block 6:52 Create a Block class10:49 Create multiple Block objects15:10 Add a collision method and change colors and block dimensions22:52 Add sound using p5.Oscillator class30:22 Full length final output!
p5.js Coding Tutorial | Starfield Effect (Particle Systems 3D) Patt Vira 2024-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!Links: π p5.js editor: editor.p5js.org π Starfield Effect Code: editor.p5js.org/pattvira/sketches/52nWL16PDπ Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnRelated Videos:π Particle Systems Playlist: youtube.com/playlist?list=PL0beHPVMklwjgTj2d4uK_R_1sdPg1hi4x&si=CiiYG9GjhG-XxzWdTimestamps: 0:00 Intro0:29 Create a single particle7:21 Create a Particle class12:29 Create a System class 15:14 Remove particles that are "done"19:52 Create systems of particle systems22:58 Add colors
p5.js Coding Tutorial | Fireworks (Particle Systems) Patt Vira 2024-04-29 | 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 π Fireworks Code: editor.p5js.org/pattvira/sketches/e-XymG2HZπ Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnCredits: π This tutorial is based on @TheCodingTrain 's Fireworks Coding Challenge: youtube.com/watch?v=CKeyIbT3vXIReferences: π p5.js drawingContext: p5js.org/reference/#/p5/drawingContextRelated Videos:π Particle Systems Playlist: youtube.com/playlist?list=PL0beHPVMklwjgTj2d4uK_R_1sdPg1hi4x&si=CiiYG9GjhG-XxzWdTimestamps: 0:00 Intro0:29 Create a single particle5:21 Create a Particle class7:48 Create a system of particles (aka Firework) 15:53 Remove particle objects that are "done" 20:06 Create a Firework class27: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 effects
p5.js Coding Tutorial | Basics of Particle Systems Patt Vira 2024-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=XhvQaojd6cIrxvdnRelated Videos:π Particle Systems Playlist: youtube.com/playlist?list=PL0beHPVMklwjgTj2d4uK_R_1sdPg1hi4x&si=CiiYG9GjhG-XxzWdTimestamps: 0:00 Intro0:10 What is a Particle System? 1:05 Create a single particle system5:38 Create a Particle class7: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 class18:39 Create multiple System objects AKA system of particle systems21:52 Experiment with different ways to add a particle system 22:47 Make it pretty!
p5.js Coding Tutorial | Pendulum Waves π΅ Patt Vira 2024-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=XhvQaojd6cIrxvdnReferences: π @NatSciDemos's Pendulum Waves: youtube.com/watch?v=yVkdfJ9PkRQπ Wikipedia - Audio frequency: en.wikipedia.org/wiki/Audio_frequencyπ p5.js Oscillator Class: p5js.org/reference/#/p5.OscillatorTimestamps: 0:00 Intro0:56 Create one pendulum 10:41 Create 15 pendulums 15:26 Make it pretty!20:28 Add sound using P5 Oscillator class27:33 FULL LENGTH PENDULUM WAVES
p5.js Coding Tutorial | Bubbly Emoji Effect Patt Vira 2024-04-22 | 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 π Bubbly Emoji Effect Code: editor.p5js.org/pattvira/sketches/UwGW_jP0Lπ Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnTimestamps: 0:00 Intro0:10 Draw an emoji using text functions1:00 Create an Emoji class3:35 Move an emoji 5:31 Make an emoji disappear over time7:40 Make it interact with mouse movement (approach 1)10:52 Remove emojis that disappear from an array13:37 Make it interact with mouse movement (approach 2)
p5.js Coding Tutorial | Optical Illusion with Sound π΅ Patt Vira 2024-04-19 | 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 π Optical Illusion with Sound Code: editor.p5js.org/pattvira/sketches/yhFKHZ0K4π Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnRelated Videos: π The Making of Animation - Beautiful Trigonometry Tutorial: youtu.be/KUXShW3C9rsTimestamps: 0:00 Intro0:44 Create one oscillating circle 3:46 Create multiple oscillating circles to get an optical illusion effect 7:25 Create a Ball class12:12 Upload, preload, and play .mp3 files 16:08 Play a note when ball passes through the origin 22:35 Create multiple rings of Ball objects 27:18 Make it pretty!
p5.js Coding Tutorial | Rotating Polygons on the Major Scale π΅ Patt Vira 2024-04-17 | 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 π Rotating Polygons on the Major Scale Code: editor.p5js.org/pattvira/sketches/Pa1_cdABSπ Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnReferences: π @AlgoMotion 's Rotating Polygons on the Circle of Fifths | Surprising Results! video: youtu.be/V0YH8M6C-VM?si=ouyS7Dy83kBFmognTimestamps: 0:00 Intro0:42 Add, pre-load, and play sound files4:55 Create a ring of circles for each note9:22 Create a Note class17:06 Create different polygons22:21 Make it pretty!
p5.js Coding Tutorial | Text Rain (Drawing w Webcam) Patt Vira 2024-04-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 π Text Rain Code: editor.p5js.org/pattvira/sketches/b_iu4DTYfπ Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnCredit: πΈ Original Text Rain by Camille Utterback and Romy Achituv: http://camilleutterback.com/projects/text-rainRelated Videos: π Drawing with Webcam Tutorial: youtu.be/hHZcIMppkFc?si=KT_ybEsOC-DvyVVXπ Interactive Falling Text Rain: youtu.be/vVXizarOnrUReferences: π p5.js textBounds() function: p5js.org/reference/#/p5.Font/textBoundsTimestamps: 0:00 Intro0:38 Use createCapture() to get video from webcam3:04 Draw a letter using text()5:00 Turn video to black and white using filter() with threshold mode6:30 Get color and brightness value of pixel at location (x, y)8:53 Move letter based on video's brightness value11:30 Write a Letter class15:02 Create multiple Letter objects
p5.js Coding Tutorial | Wiper Typography Patt Vira 2024-04-12 | 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 π Wiper Typography Code: editor.p5js.org/pattvira/sketches/hkOFrj4Y5π Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnCredit: πΈ 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)References: π p5.js textBounds() function reference: p5js.org/reference/#/p5.Font/textBoundsTimestamps: 0:00 Intro0:20 Display text on canvas 3:07 Use font.textBounds() to get text's bounding box5:20 Create vectors to store 4 corner points 12:01 Write a Letter class18:12 Write functions to check when a letter object hits a wiper 26:41 Write a Wiper class37:45 Final touches
p5.js Coding Tutorial | Interactive Falling Text Rain Patt Vira 2024-04-10 | 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 Falling Text Rain: editor.p5js.org/pattvira/sketches/I6nhJ_Ffqπ Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnRelated Videos:π Creative Coding Math - Collision Detection: youtube.com/watch?v=gUTeWOfwECcReferences:π p5.js textBounds() function: p5js.org/reference/#/p5.Font/textBoundsTimestamps: 0:00 Intro0:10 Display text on canvas 3:03 Use font.textBounds() to get text's bounding box6:42 Write a Letter class11:07 Write a collide() method to detect collision between Letter object and paddle16:30 Create a bunch of Letter objects & final touches
p5.js Coding Tutorial | Drawing with Webcam (createCapture function) Patt Vira 2024-04-08 | 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 π Drawing with Webcam: editor.p5js.org/pattvira/sketches/1jhHeA9Bgπ Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnReferences: π p5.js createCapture() function: p5js.org/reference/#/p5/createCaptureπ p5.js get() function: p5js.org/reference/#/p5/getπ p5.js pixels: p5js.org/reference/#/p5/pixelsTimestamps: 0:00 Intro0:10 Use createCapture() to get live video from webcam5:21 Get pixels data using get() function10:14 Get pixels data using pixels 1d array
p5.js Coding Tutorial | Interactive Floating Typography Patt Vira 2024-03-29 | 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 Floating Typography Code: editor.p5js.org/pattvira/sketches/Rs498E8W3π Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnTimestamps: 0:00 Intro0:10 Load font to sketch1:26 Write a letter using text() 4:35 Create a Letter class7:34 Create a bunch of Letter objects using mouseDragged() 9:58 Add velocity to each Letter object11:38 Remove objects that are off the screen16:22 Beautify and experiment!
p5.js Coding Tutorial | π Exploding Hearts π (Particle Systems) Patt Vira 2024-03-27 | 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 π Exploding Hearts Code: editor.p5js.org/pattvira/sketches/B7jG_ZOl0π Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdnReferences: π Heart Curve Equations: mathworld.wolfram.com/HeartCurve.htmlRelated Videos: π Falling Hearts Coding Tutorial: youtu.be/zH3eH3hlGooπ Particle Systems Playlist: youtube.com/playlist?list=PL0beHPVMklwjgTj2d4uK_R_1sdPg1hi4x&si=CiiYG9GjhG-XxzWdTimestamps: 0:00 Intro0:10 Create one heart-shaped outline using a heart curve equation4:25 Create a Heart class8:20 Create multiple Heart objects at mouse location12: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 array29:56 Make it prettty!
p5.js Coding Tutorial | SierpiΕski Triangle (Cool facts at the end!) Patt Vira 2024-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=XhvQaojd6cIrxvdnTimestamps: 0:00 Intro0: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!
