code preview for the upcoming course on developing design tools with p5.js 🛠️
Added 2024-06-28 14:04:51 +0000 UTCHey Creative Coders, 👋
I hope you are all doing good! As you know, i am currently working on the upcoming course on tools and today I want to share a code package with you and ask for feedback. You can open the files in any code-editor and play around with them. I recommend you to use Visual Studio Code and install the live server extension, to “serve” the sketches on a local web server.
It took quite some time for me to learn how to teach to implement a GUI for p5.js sketches. Maybe you know that p5.js already comes with functions to create input elements and these functions are very easy to use. However, I decided for another route: In the online course I want to teach you how to implement the UI directly in HTML, because that’s the proper and scalable way to do it. It’s more flexible.
There are two folders in the package:
The first one, called “lessons”, contains the code snippets for the single UI elements. They will be embedded in the lessons on the website later.
The second folder is called “templates” and there you’ll find a first, simple application starter template.
Feel free to play around with it and even use it as the foundation for a tool. 🛠️
And as always, please leave feedback here in the comments.
I wish you a great weekend! ✌️
Warm greets from Barcelona, ☀️
Tim
