Patt Vira
p5.js Coding Tutorial | 3-Dimensional Kinetic Typography
updated
✨ 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
References:
🔗 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/y4AIaY3Xu
Timestamps:
0:00 Intro
2:08 Create a Bridge class
6:42 Fix positions of the outer most circles to create a bridge
9:49 Walk through ml5.js documentation
11:38 Add ml5.js handpose example code to sketch
25: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 screen
41:40 Final touches
✨ 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=XhvQaojd6cIrxvdn
References:
🔗 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/y4AIaY3Xu
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!
✨ 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?
✨ 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
References:
🔗 matter.js: brm.io/matter-js
🔗 AnyPixel: googlecreativelab.github.io/anypixel
Timestamps:
0:00 Intro
0:34 Add matter.js to sketch
1:09 Setup engine and create a ball
6:30 Create a Ball class
10:17 Add random initial velocity
13:07 Add colors
13:58 Remove balls that are off the screen from the physics' world and balls array
22:38 Create a Boundary class
✨ 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=XhvQaojd6cIrxvdn
References:
🔗 matter.js: brm.io/matter-js
🔗 AnyPixel: googlecreativelab.github.io/anypixel
🔗 Nature of Code - Physics Libraries: natureofcode.com/physics-libraries
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 mouse
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
1:20 What physical computing is and why it matters
2:03 How to think about physical computing when you’re just getting started
3:58 The core components we’ll be working with
6:10 What is my plan for you and I to explore this world together!
✨ 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=XhvQaojd6cIrxvdn
References:
🔗 @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=625s
Timestamps:
0:00 Intro
0:56 Create a 2d array grid to store color information
3:30 Create an interactive kaleidoscope using mouse as input
7:15 Calculate mirror pixels to get a kaleidoscope pattern
10:25 Make it rainbow colors with HSB mode
12:37 Create a generative kaleidoscope using random()
18:32 Experiment with a different color palette
--
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=XhvQaojd6cIrxvdn
References:
🔗 Boids by Craig Reynolds: red3d.com/cwr/boids
🔗 Nature of Code - Chapter 5: Autonomous Agents: natureofcode.com/autonomous-agents
Credits:
🔗 Thumbnail: raw.githack.com/mrdoob/three.js/dev/examples/webgpu_compute_birds.html
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 ✨
--
LET'S CONNECT
✨ Sign up for my newsletter at pattvira.com
✨ Instagram: instagram.com/pattvira
✨ Twitter: twitter.com/pattvira
--
Timestamps:
0:00 Intro
0: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?
--
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=XhvQaojd6cIrxvdn
References:
🔗 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 Intro
0:21 Spiral Betty and Archimedean spiral
0:59 Create a spiral pattern
4:37 Set spiral line thickness based on brightness values
9:43 Create a GUI to manipulate each parameter
22:02 Export an image file
✨ 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=XhvQaojd6cIrxvdn
What to watch next!
🔗 Quadtree - Flocking Simulation (Part 2 of 2): youtu.be/AMugNCfP1NA
References:
🔗 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/gUTeWOfwECc
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 truth
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
✨ 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=XhvQaojd6cIrxvdn
References:
🔗 p5.js mask function: p5js.org/reference/p5.Image/mask
🔗 p5.js filter function: p5js.org/reference/p5.Image/filter
Timestamps:
0:00 Intro
0:23 Upload an image onto sketch
2:40 Use mask function
6:17 Use filter function to blur background
7:00 Create a Mask class
9:45 Create multiple circles (Mask objects)
13:14 Rotate circles by changing angles
18:09 Make it interactive
✨ 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=XhvQaojd6cIrxvdn
References:
🔗 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/ruth6FZ2RK0
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 margins
Also, I am doing my very first Q&A so submit your questions -- either in the comment section or DM me on Instagram @pattvira
References:
🔗 My Interview with Daniel Shiffman: youtu.be/X4XMhpRFKvU
🔗 @SebastianLague Coding Adventure: Simulating Fluids: youtube.com/watch?v=rSKMYc1CQHE
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/pattvira
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?
Editing by Patt Vira
Filming by Don Lee
--
LET'S CONNECT
✨ Sign up for my newsletter at pattvira.com
📸 Instagram: instagram.com/pattvira
🐦 Twitter: twitter.com/pattvira
✨ 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=XhvQaojd6cIrxvdn
Credits:
🔗 Magnet Poetry by Lea Naisberg: instagram.com/p/C8xXy0NR_IJ/?img_index=1
References:
🔗 ml5.js: ml5js.org
Timestamps:
0:00 Intro
0:20 ml5.js - machine learning library for the web
1:04 Intro to handPose() model
9:43 Get thumb and index finger locations
11:13 Create one magnet
17:38 Create a Magnet class
21:47 Make it interactive with mouse location
25:36 Combine ml5.js and magnet sketches
26:53 Make it interactive with fingers' location
🔗 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
✨ 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=XhvQaojd6cIrxvdn
References:
🔗 ASCII Characters: paulbourke.net/dataformats/asciiart
Timestamps:
0:00 Intro
0:51 ASCII Art with image
4: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
🔗 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
✨ 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=XhvQaojd6cIrxvdn
References:
🔗 Wolfram Math World - Heart Curve: mathworld.wolfram.com/HeartCurve.html
Timestamps:
0:00 Intro
0: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)
🔗 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
✨ 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=XhvQaojd6cIrxvdn
References:
🔗 Perlin Noise playlist: youtube.com/playlist?list=PL0beHPVMklwh6-2ohRiaN6wo8ttoWF9JP
Timestamps:
0:00 Intro
0:35 Use noise() to generate random values
6:39 Create one line pattern
11:16 Create multiple line patterns
12:35 Add margins
15:17 Adjust colors
✨ 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=XhvQaojd6cIrxvdn
Song 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-oscilloscope
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!
✨ 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
References:
🔗 Easing Functions: easings.net
Timestamps:
0:00 Intro
0:10 Draw text on canvas
3: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 objects
20:51 Create wavy and bouncy effects
✨ 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=XhvQaojd6cIrxvdn
References:
🔗 p5.js AudioIn Class: p5js.org/reference/#/p5.AudioIn
Timestamps:
0:00 Intro
0: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
✨ 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=XhvQaojd6cIrxvdn
Timestamps:
0:00 Intro
1:37 Use hour(), minute(), and second() to get current time
2: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
✨ 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=XhvQaojd6cIrxvdn
References:
🔗 Easing Functions: easings.net
Timestamps:
0:00 Intro
0:10 Create a string of text that rotates around a circular path
7:26 Create a Type class
10:48 Create multiple Type objects
15:31 Add easing functions
20:53 Add final touches
✨ 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=XhvQaojd6cIrxvdn
Credits:
🔗 Tim Holman's Binary Piano: binarypiano.com
🔗 Alfred Kedhammar's 1023.exe: youtu.be/CdaPhpGG6As?si=c6IUiKRCBCEq8ftD
References:
🔗 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-binary
If 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_y5w
Timestamps:
0:00 Intro
0:34 What is binary?
2:39 Write a function to convert from decimal to binary number
8:32 Increment decimal number using frameCount
11:26 Write a Block class
18:38 Add sound with p5.Oscillator and p5.Envelope
26:22 Add some final touches
✨ 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=XhvQaojd6cIrxvdn
References:
🔗 p5.js Oscillator Class: p5js.org/reference/#/p5.Oscillator
🔗 p5.js Envelope Class: p5js.org/reference/#/p5.Envelope
Timestamps:
0:00 Intro
1:28 Create an Envelope object
6:43 Experiment with different parameters
✨ 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=XhvQaojd6cIrxvdn
References:
🔗 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_range
Timestamps:
0:00 Intro
0:28 Approach
3:09 Create piano keys
10:30 Create a Key class
13:34 Activate keys where mouse is pressed
17:20 Add sound using p5.Oscillator class
22:23 Add dropdown list to control sound wave options
26:29 Add slider to control volume
29:14 Add bubbles using particles
37:19 Add colors
✨ 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=XhvQaojd6cIrxvdn
References:
🔗 Virtual Oscilloscope: academo.org/demos/virtual-oscilloscope
🔗 p5.js Oscillator Class: p5js.org/reference/#/p5.Oscillator
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 class
LET'S CONNECT
✨ Website: pattvira.com
✨ Instagram: instagram.com/pattvira
✨ Twitter: twitter.com/pattvira
Mentioned Videos:
🔗 TEDx Talks: @MarkRober - The Super Mario Effect: youtu.be/9vJRopau0g0?si=Cu1MADMrdQGejdjo
🔗 @cs50 - Introduction to Programming Course Youtube Channel
Timestamps:
0:00 Intro
0:46 Lesson 1
2:35 Lesson 2
4:12 Lesson 3
6:06 Lesson 4
7:16 Lesson 5
10:10 Bonus Lesson!
11:29 What is Next?
✨ 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=XhvQaojd6cIrxvdn
References:
🔗 @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.Envelope
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-like
✨ 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
References:
🔗 p5.js Arc function: p5js.org/reference/#/p5/arc
Timestamps:
0:00 Intro
0:10 Create one rotating arc
4:13 Create two synchronized rotating arcs
7:26 Write a collision function
10:00 Create an Arc class
14:07 Create Arc objects
18:54 Make it pretty!
✨ 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=XhvQaojd6cIrxvdn
References:
🔗 Wikipedia - Audio frequency: en.wikipedia.org/wiki/Audio_frequency
🔗 p5.js Oscillator Class: p5js.org/reference/#/p5.Oscillator
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!
✨ 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=XhvQaojd6cIrxvdn
Related Videos:
🔗 Particle Systems Playlist: youtube.com/playlist?list=PL0beHPVMklwjgTj2d4uK_R_1sdPg1hi4x&si=CiiYG9GjhG-XxzWd
Timestamps:
0:00 Intro
0:29 Create a single particle
7:21 Create a Particle class
12:29 Create a System class
15:14 Remove particles that are "done"
19:52 Create systems of particle systems
22:58 Add colors
✨ 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=XhvQaojd6cIrxvdn
Credits:
🔗 This tutorial is based on @TheCodingTrain 's Fireworks Coding Challenge: youtube.com/watch?v=CKeyIbT3vXI
References:
🔗 p5.js drawingContext: p5js.org/reference/#/p5/drawingContext
Related Videos:
🔗 Particle Systems Playlist: youtube.com/playlist?list=PL0beHPVMklwjgTj2d4uK_R_1sdPg1hi4x&si=CiiYG9GjhG-XxzWd
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 effects
✨ 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
Related Videos:
🔗 Particle Systems Playlist: youtube.com/playlist?list=PL0beHPVMklwjgTj2d4uK_R_1sdPg1hi4x&si=CiiYG9GjhG-XxzWd
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!
✨ 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
References:
🔗 @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.Oscillator
Timestamps:
0:00 Intro
0:56 Create one pendulum
10:41 Create 15 pendulums
15:26 Make it pretty!
20:28 Add sound using P5 Oscillator class
27:33 FULL LENGTH PENDULUM WAVES
✨ 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=XhvQaojd6cIrxvdn
Timestamps:
0:00 Intro
0:10 Draw an emoji using text functions
1:00 Create an Emoji class
3:35 Move an emoji
5:31 Make an emoji disappear over time
7:40 Make it interact with mouse movement (approach 1)
10:52 Remove emojis that disappear from an array
13:37 Make it interact with mouse movement (approach 2)
✨ 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=XhvQaojd6cIrxvdn
Related Videos:
🔗 The Making of Animation - Beautiful Trigonometry Tutorial: youtu.be/KUXShW3C9rs
Timestamps:
0:00 Intro
0:44 Create one oscillating circle
3:46 Create multiple oscillating circles to get an optical illusion effect
7:25 Create a Ball class
12: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!
✨ 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=XhvQaojd6cIrxvdn
References:
🔗 @AlgoMotion 's Rotating Polygons on the Circle of Fifths | Surprising Results! video: youtu.be/V0YH8M6C-VM?si=ouyS7Dy83kBFmogn
Timestamps:
0:00 Intro
0:42 Add, pre-load, and play sound files
4:55 Create a ring of circles for each note
9:22 Create a Note class
17:06 Create different polygons
22:21 Make it pretty!
✨ 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=XhvQaojd6cIrxvdn
Credit:
🔸 Original Text Rain by Camille Utterback and Romy Achituv: http://camilleutterback.com/projects/text-rain
Related Videos:
🔗 Drawing with Webcam Tutorial: youtu.be/hHZcIMppkFc?si=KT_ybEsOC-DvyVVX
🔗 Interactive Falling Text Rain: youtu.be/vVXizarOnrU
References:
🔗 p5.js textBounds() function: p5js.org/reference/#/p5.Font/textBounds
Timestamps:
0:00 Intro
0:38 Use createCapture() to get video from webcam
3:04 Draw a letter using text()
5:00 Turn video to black and white using filter() with threshold mode
6:30 Get color and brightness value of pixel at location (x, y)
8:53 Move letter based on video's brightness value
11:30 Write a Letter class
15:02 Create multiple Letter objects
✨ 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=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)
References:
🔗 p5.js textBounds() function reference: p5js.org/reference/#/p5.Font/textBounds
Timestamps:
0:00 Intro
0:20 Display text on canvas
3:07 Use font.textBounds() to get text's bounding box
5:20 Create vectors to store 4 corner points
12:01 Write a Letter class
18:12 Write functions to check when a letter object hits a wiper
26:41 Write a Wiper class
37:45 Final touches
✨ 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=XhvQaojd6cIrxvdn
Related Videos:
🔗 Creative Coding Math - Collision Detection: youtube.com/watch?v=gUTeWOfwECc
References:
🔗 p5.js textBounds() function: p5js.org/reference/#/p5.Font/textBounds
Timestamps:
0:00 Intro
0:10 Display text on canvas
3:03 Use font.textBounds() to get text's bounding box
6:42 Write a Letter class
11:07 Write a collide() method to detect collision between Letter object and paddle
16:30 Create a bunch of Letter objects & final touches
✨ 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=XhvQaojd6cIrxvdn
References:
🔗 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/pixels
Timestamps:
0:00 Intro
0:10 Use createCapture() to get live video from webcam
5:21 Get pixels data using get() function
10:14 Get pixels data using pixels 1d array
✨ 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=XhvQaojd6cIrxvdn
Timestamps:
0:00 Intro
0:10 Load font to sketch
1:26 Write a letter using text()
4:35 Create a Letter class
7:34 Create a bunch of Letter objects using mouseDragged()
9:58 Add velocity to each Letter object
11:38 Remove objects that are off the screen
16:22 Beautify and experiment!
✨ 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=XhvQaojd6cIrxvdn
References:
🔗 Heart Curve Equations: mathworld.wolfram.com/HeartCurve.html
Related Videos:
🔗 Falling Hearts Coding Tutorial: youtu.be/zH3eH3hlGoo
🔗 Particle Systems Playlist: youtube.com/playlist?list=PL0beHPVMklwjgTj2d4uK_R_1sdPg1hi4x&si=CiiYG9GjhG-XxzWd
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!
✨ 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!