TL;DR 📝

Setting up P5.js in Visual Studio Code involves installing VS Code, adding the p5.vscode extension, creating a new project, and using the Live Server extension to run your first sketch. Optionally, you can view your sketch directly in VS Code using the Simple Browser extension.

Getting Started with P5.js in Visual Studio Code 🚀

Welcome, fellow developers ! 👋 If you're looking to dive into creative coding, P5.js is an excellent choice. This tool makes it easy to create captivating visuals and interactive web experiences using JavaScript. In this post, I'll walk you through setting up P5.js in Visual Studio Code and running your first sketch. Let's get started ! 🎨

What is P5.js ? 🤔

P5.js is a JavaScript library that simplifies the process of creating graphics and interactive content. It's based on the popular Processing language, but with a focus on web development. Whether you're new to coding or an experienced developer, P5.js offers a fun and intuitive way to bring your ideas to life.

I personally use it for quickly prototyping ideas, ranging from machine learning to full ant colony simulations, and even genetic algorithms. (Don't miss the upcoming blog posts) 💡

See my sketches on P5.js by clicking this link

Setting Up Your Development Environment

Step 1 : Install Visual Studio Code

First, you'll need to have Visual Studio Code installed on your machine. You can download it from VSC Download.

Step 2 : Install the P5.js VS Code Extension

You'll need to install the p5.vscode extension. Follow these steps :

1. Open VS Code and go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window or by pressing Ctrl + Shift + X.

2. In the Extensions view, type "p5.vscode" into the search box.

3. Find the p5.vscode extension in the list and click the "Install" button.

If you don't find the option in VS Code, you can install the p5.vscode extension from this link.

Step 3 : Install the Live Server VS Code extension

To run your P5.js sketch, you can use the Live Server extension in VS Code. Follow these steps:

1. In the Extensions view, type "Live Server" into the search box.

2. Find the Live Server extension in the list and click the "Install" button.

If you don't find the option in VS Code, you can install the p5.vscode extension from this link.

Step 4 : Create a New Project 📁

1. Open your Command Palette by pressing Ctrl + Shift + P.

2. Type Create p5.js Project in the search bar.

3. Select the folder on your machine where you would like to save your project.

4. Modify your draw() function to look like this.

function draw() {
    background(220);
    ellipse(200, 200, 100, 100);
}

Step 5 : Running Your First Sketch

1. In your Explorer view, where your project is Right-click on your index.html file and select "Open with Live Server".

2. Your default web browser should open and display your first P5.js sketch—a simple canvas with a circle in the middle.

Optionnal Step ✨

If you are like me, and like to have it all at one place. There is a way to open your sketch directly in VSC by using the built-in support for viewing HTML. You can follow below steps to open a browser like window in VS Code:

1. Open your Command Palette by pressing Ctrl + Shift + X.

2. Type "Simple" in the command pallete and then select "Simple Browser: Show" from the list of suggestions.

3. Write the following URL "http://127.0.0.1:5500/"

And you have your sketch right next to your code without changing tabs. Isn't it awesome ? It's even more usefull when you store all your sketch inside a workspace, so you can navigate throught them easier.

Conclusion 🎊

Congratulations ! 🎉 You've successfully set up P5.js in Visual Studio Code and run your first sketch. From here, the possibilities are endless. Experiment as much as you can and don't forget to have fun.

Feel free to share your creations I'll be happy to see them, and don't hesitate to ask questions in the comments below.

Happy coding ! 💻

See my sketches on P5.js by clicking this link

---

Thank you for reading my blog ! If you enjoyed this post and want to stay connected, feel free to connect with me on LinkedIn. I love networking with fellow developers, exchanging ideas, and discussing exciting projects.

Connect with me on LinkedIn 🔗

Looking forward to connecting with you! 🚀