p5.js Coding Tutorial | Pixelated Kaleidoscope
Patt Vira Patt Vira
6.53K subscribers
1,074 views
108

 Published On Sep 17, 2024

LET'S CONNECT
✨ Sign up for my newsletter at https://www.pattvira.com
✨ Instagram:   / pattvira  
✨ Twitter:   / pattvira  
--
Links:
🔗 p5.js editor: https://editor.p5js.org/
🔗 Pixelated Kaleidoscope Code:
🔗 Interactive: https://editor.p5js.org/pattvira/sket...
🔗 Generative: https://editor.p5js.org/pattvira/sket...
🔗 Introduction to Creative Coding Playlist:    • START HERE: Creative Coding for Begin...  

References:
🔗 ‪@TheCodingTrain‬ 's Coding Challenge 155: Kaleidoscope Snowflake Design:    • Coding Challenge #155: Kaleidoscope S...  
🔗 ‪@ComputingMasterclass‬ 's Kaleidoscope - p5.js Tutorial:    • Kaleidoscope - p5.js Tutorial  

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

show more

Share/Embed