dipamsen/p5-intellisense.md

## p5-intellisense.md

      
    Raw
  

              p5-intellisense.md
            
          
    (This guide was created with the help of ChatGPT.)
p5 + VSCode

This guide will walk you through the process of setting up autocompletion and documentation for p5.js, right inside of VSCode.
Section 1: Using p5.js in Global Mode

In this section, we will guide you through the process of setting up autocompletion and documentation for p5.js in VSCode when using p5.js in Global Mode without a bundler.
Step 1: Create a project folder

First, create a new folder for your p5.js project. Choose a suitable location on your computer and give the folder a meaningful name.
Step 2: Initialize a new Node.js project using npm

Open your preferred terminal or command prompt and navigate to the project folder you created in the previous step. Run the following command to initialize a new Node.js project:
npm init -y
This command will create a package.json file in your project folder.
Step 3: Install the @types/p5 package

With your project initialized, you can now install the @types/p5 package, which provides TypeScript type definitions for p5.js. (Don't worry, we won't be using TypeScript to write our code! We just need the type definitions for autocompletion and documentation support.)
Run the following command in your terminal:
npm install @types/p5
This will install the @types/p5 package as a development dependency in your project.
Step 4: Add p5.js CDN to your HTML file

In your project folder, create a two new files: index.html and sketch.js. Add boilerplate HTML code to index.html and add a reference to sketch.js in the <body> section of your HTML file.
In order to use p5.js in Global Mode, you need to include the p5.js library in your HTML file. You can do this by adding the following <script> tag to the <head> section of your HTML file:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>p5.js Project</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}
Make sure to replace 1.6.0 with the desired version of p5.js.
Step 5: Use the reference directive to add the p5 global types file

To enable autocompletion and documentation for p5.js in your VSCode editor, you need to reference the p5 global types file in your JavaScript file. Add the following reference directive at the beginning of your JavaScript file:
/// <reference types="p5/global" />
This reference directive tells VSCode to load the p5 global types and provide autocompletion and documentation support for p5.js.
Congratulations! You have successfully set up autocompletion and documentation for p5.js in Global Mode without a bundler using VSCode. You can now start coding with p5.js and enjoy the benefits of enhanced development experience.
p5 + VSCode

Section 2: Using p5.js in Instance Mode (with a bundler)

In this section, we will guide you through the process of setting up autocompletion and documentation for p5.js in VSCode when using p5.js in Instance Mode with a bundler.
Step 1: Create a new Vite.js project

To begin, open your preferred terminal or command prompt and navigate to the directory where you want to create your p5.js project. Run the following command to create a new Vite.js project:
npx create-vite@latest project_name
Replace project_name with the desired name for your project. Choose either TypeScript (ts) or JavaScript (js) as per your preference when prompted. Select the vanilla template when asked to choose a framework.
Step 2: Install the p5 package and @types/p5

Navigate to the project folder of your newly created Vite.js project. Run the following command to install the p5 package and @types/p5:
npm install p5 @types/p5
This command installs the p5 package, which includes the p5.js library, as well as the @types/p5 package for TypeScript type definitions.
Step 3: Delete unnecessary files

In the project folder of your Vite.js project, delete the following files:

counter.js
*.svg

In the files main.js and style.css, remove all the code inside, so the file becomes empty.
Step 5: Import p5 in your JavaScript or TypeScript file

Open the main.js file in your project folder and import the p5 package at the top of the file:
import p5 from "p5";

new p5((/** @type {p5} */ p) => {
  // p5 setup function
  p.setup = () => {
    p.createCanvas(400, 400);
  };

  // p5 draw function
  p.draw = () => {
    p.background(220);
  };
});
This import statement allows us to use p5.js in Instance Mode.
Inside the setup and draw functions, you can write your p5.js code.
Congratulations! You have successfully set up autocompletion and documentation for p5.js in Instance Mode with Vite.js using VSCode. You can now start coding with p5.js and enjoy the benefits of enhanced development experience.