p5.js Coding Tutorial | Pixelated Kaleidoscope

Published: 17 September 2024
on channel: Patt Vira

2,164

166

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

Watch video p5.js Coding Tutorial | Pixelated Kaleidoscope online without registration, duration hours minute second in high quality. This video was added by user Patt Vira 17 September 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 2,164 once and liked it 166 people.

53,557