Setting Up a p5.js Project Locally – A Step-by-Step Tutorial for Artists
What Make Art What Make Art
19.5K subscribers
405 views
0

 Published On Jan 11, 2024

Project Template Link - https://github.com/whatmakeart/p5-pro...

In this comprehensive tutorial, we delve into the world of programming for artists by guiding you through setting up a p5.js project on your local machine. Whether you're aiming for a larger project or seeking the flexibility of having files hosted locally, this video is your gateway to customizing and enhancing your programming skills in the p5.js environment.

Install Visual Studio Code -    • How to Install Visual Studio Code  
Setup VSC and Git -    • Visual Studio Code and Git  
Configure Git username and email -    • Configure your "user.name" and "user....  

What You'll Learn:

1. Choosing the Right Text Editor: We explore various text editors like Visual Studio Code, Sublime Text, Brackets, Notepad++, and more, helping you select the one that best fits your needs.
2. Installing Git: Step-by-step instructions for setting up Git, essential for version control and project management.
3. Acquiring the p5.js Library: Discover two methods to obtain the p5.js library - using a Content Delivery Network (CDN) or downloading it for local use. We cover the benefits and considerations for each method.
4. Downloading and Organizing Files: A walkthrough on downloading the "p5.js complete" package, extracting it, and organizing files into a structured project folder.
5. Setting Up the Project Template: Practical steps to create a customizable project template in Visual Studio Code, including arranging folders, linking scripts, and setting up your index.html file.
6. Utilizing Live Server in Visual Studio Code: Learn how to use the Live Server extension to view your p5.js projects in real-time.
7. Initializing a Git Repository: Instructions on initializing your p5.js project as a Git repository for efficient version control and how to sync it with GitHub.
8. Creating an External Stylesheet: Transition from inline CSS to an external stylesheet for better organization and efficiency.

Timestamps:
0:00 - Introduction to Setting Up a p5.js Project
0:25 - Choosing a Text Editor
0:48 - Installing Git
1:18 - Downloading the p5.js Library
2:08 - Organizing Project Files
3:20 - Setting Up Project Template in Visual Studio Code
4:40 - Using Live Server for Real-Time Preview
5:39 - Initializing Git Repository and Syncing with GitHub
6:35 - Creating an External Stylesheet
7:55 - Final Thoughts and Next Steps

Whether you're a beginner or seasoned artist-programmer, this video ensures you have the knowledge and tools to start programming in p5.js effectively. Remember to check the description for additional resources and links. Happy programming!

show more

Share/Embed