Welcome to our programming for artists tutorial, where we delve into the fascinating world of creative coding using the p5.js Web Editor. This tutorial is perfect for beginners looking to explore the realm of creative coding with just a web browser and internet access. We start by explaining the basics of the p5.js environment, demonstrating how to manipulate canvas dimensions and background colors, and introducing essential functions like `createCanvas` and `background`.

As we progress, you'll learn how to use the "Auto Refresh" feature for real-time updates to your code, making the learning process more interactive and engaging. We'll also guide you through adding elements like ellipses and experimenting with colors to create dynamic visuals. A special highlight of this tutorial is learning how to use built-in variables like `mouseX` and `mouseY` to make shapes follow the mouse cursor, adding an interactive dimension to your sketches.

Additionally, we cover essential skills like saving and sharing your p5.js sketches. You'll learn how to save your work by logging into the p5.js Web Editor and how to share your creations with friends or embed them on your website.

Timestamps:
- 0:00 Introduction to p5.js Web Editor
- 0:30 Creating and Modifying Canvas
- 1:07 Understanding Background Function
- 1:20 Using "Auto Refresh" for Real-Time Coding
- 2:21 Drawing Shapes and Using Colors
- 3:03 Interactive Elements with Mouse Variables
- 3:57 Saving and Sharing Your Sketches
- 4:35 Interactive Drawing with `mouseIsPressed`
- 5:19 Embedding and Sharing Your Work Online

By the end of this tutorial, you'll have a solid foundation in using the p5.js Web Editor for creative coding projects. Whether you're an artist, a programmer, or just curious about coding, this guide will set you on a path to creating interactive and visually appealing web-based sketches. Happy programming!

For more tutorials and insights into creative coding, make sure to subscribe to our channel and check out our other videos. Don't forget to like and comment with your thoughts or any questions you might have!

Full screen p5.js demo - https://editor.p5js.org/whatmakeart/f...


#p5js #CreativeCoding #ProgrammingTutorial #ArtistsInTech #WebDevelopment #InteractiveArt #CodingForBeginners #JavaScript #p5jsTutorial

Happy programming.

Full screen p5.js demo - https://editor.p5js.org/whatmakeart/f...