Update VS Code tutorial section with p5.js 2.x Project Generator extension

src/content/libraries/config.ts

@@ -20,6 +20,7 @@ export const categories = [
   "networking",
   "export",
   "utils",
+  "integrations",
 ] as const;
 
 /**

src/content/libraries/en/p5js-project-generator.yaml

@@ -0,0 +1,11 @@
+name: p5.js 2.x Project Generator
+description: A Visual Studio Code extension that quickly generates new p5.js 2.0 projects with a clean, minimal setup, including autocomplete, IntelliSense, and parameter hints for p5.js functions
+category: integrations
+sourceUrl: https://github.com/IrtizaNasar/p5-2.vscode
+websiteUrl: https://marketplace.visualstudio.com/items?itemName=Irti.p5js-project-generator
+featuredImage: "../images/p5js-project-generator.png"
+featuredImageAlt: Screenshot of p5.js 2.x Project Generator VSCode extension interface showing project creation options
+author:
+  name: IrtizaNasar
+  url: https://github.com/IrtizaNasar
+license: MIT

src/content/tutorials/en/setting-up-your-environment.mdx

@@ -13,6 +13,7 @@ relatedContent:
 authors:
   - Layla Quiñones
   - Jaleesa Trapp
+  - Shaikh Irtiza Nasar
 ---
 
 import EditableSketch from "../../../components/EditableSketch/index.astro";
@@ -304,22 +305,39 @@ Once your project is saved, you can share it!
 ### Step 2: Install the p5.js library extension
 
 - Open VS Code and navigate to the extensions manager on the left toolbar.
-- Type [*p5.vscode*](https://marketplace.visualstudio.com/items?itemName=samplavigne.p5-vscode) in the search bar, select the extension, and click the install button.
-- Familiarize yourself with details for this extension [here](https://github.com/antiboredom/p5.vscode/blob/master/README.md).
+- Type [*p5.js 2.x Project Generator*](https://marketplace.visualstudio.com/items?itemName=Irti.p5js-project-generator) in the search bar, select the extension, and click the install button.
+- Familiarize yourself with details for this extension [here](https://github.com/IrtizaNasar/p5-2.vscode/blob/main/README.md).
 
+**This extension provides:**
+- Quick project setup with p5.js 2.0
+- IntelliSense and autocomplete for p5.js functions  
+- Online/offline library options
+- Parameter hints for most p5.js functions
 
 ### Step 3: Create a p5.js project
 
-- Click on *View* on the top toolbar and select Command Palette.
-- Type *Create p5.js Project* in the search bar and select the folder on your machine in which you would like to save your project.
+#### Method 1 - From Command Palette:
+- Click on *View* on the top toolbar and select Command Palette or Press `Ctrl+Shift+P` (or `Cmd+Shift+P` on macOS)
+- Type *Create a new p5.js 2.x Project* in the search bar and select the folder on your machine in which you would like to create your project.
+- Follow the prompts to configure your project
+- **When prompted, click "Open Project"** to open the new project in your current VS Code window, or **"Open in New Window"** if you prefer to keep your current work open
+- **For beginners, "Open Project" is recommended**
 
 
-### Step 4: View your first sketch
+#### Method 2 - From Explorer Context Menu:
+- Right-click on a folder in the Explorer
+- Select "Create p5.js 2.x Project Here"
+- Follow the prompts to configure your project
+- **When prompted, click "Open Project"** to open the new project in your current VS Code window, or **"Open in New Window"** if you prefer to keep your current work open
+- **For beginners, "Open Project" is recommended**
+
+
+### Step 4: Preview your sketch
 
 To view the preview for your code:
 
-- Right click on the *index.html* file in the *VSCODE* tab on the left Explorer panel.
-- Select *Open Live Server*. 
+- Right click on the `index.html` file in the *VSCODE* tab on the left Explorer panel.
+- Select *Open Live Server* (this will start a local development server). 
 - A window will open in your default browser with the output of your project.
 
 A *p5.js sketch* is a text file with code written in the *JavaScript* programming language. *JavaScript* is a programming language used to make web pages interactive. p5.js is a library written in *JavaScript* – which is why it ends in “*.js*” for *JavaScript*. With p5.js, you can create programs that are colorful and animated, with features that users can interact with! To learn more about some of the things you can do with p5.js, watch the [p5.js Welcome Video!](https://hello.p5js.org/) To learn more about JavaScript, you can visit [this resource.](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
@@ -328,19 +346,19 @@ The editor begins with the following code in the *sketch.js* file and preview:
 
 <EditableSketch code={`
 function setup() {
-  createCanvas(400, 400);
+  createCanvas(800, 600);
 }
 function draw() {
   background(220);
 }
 `} />
 
-The code above creates a canvas element in the preview that is 400 pixels wide and 400 pixels high. It also sets the background to a shade of gray. 
+The code above creates a canvas element in the preview that is 800 pixels wide and 600 pixels high. It also sets the background to a shade of gray. 
 
 
 #### `createCanvas()`
 
-Computer screens are made up of tiny lights called *pixels*, which are the smallest elements that make up any image. The line of code that creates a canvas in the preview window is [`createCanvas(400, 400)`](/reference/p5/createCanvas). Without this line of code, there will be no canvas to draw on! The numbers 400, 400 correspond to the width and the height of the canvas in pixels. These numbers are also known as *arguments* for the [`createCanvas()`](/reference/p5/createCanvas) function. 
+Computer screens are made up of tiny lights called *pixels*, which are the smallest elements that make up any image. The line of code that creates a canvas in the preview window is [`createCanvas(800, 600)`](/reference/p5/createCanvas). Without this line of code, there will be no canvas to draw on! The numbers 800, 600 correspond to the width and the height of the canvas in pixels. These numbers are also known as *arguments* for the [`createCanvas()`](/reference/p5/createCanvas) function. 
 
 Any values that you place within parentheses of a function are called *arguments*: any value used to customize functions. [`createCanvas()`](/reference/p5/createCanvas) appears within the [`setup()`](/reference/p5/setup) function to create an HTML canvas element that you can draw on. 
 
@@ -350,16 +368,16 @@ To learn more, visit the [p5.js reference](/reference/) pages for [`setup()`](/r
 ### Step 5: Change the color of the canvas
 
 - Change the background color of your canvas by changing the *argument* for the [`background()`](/reference/p5/background) function. 
-  - Change `background(220);` to `background("aqua");` and press *Play*.
+  - Change `background(220);` to `background("yellow");` and press *Play*.
 
 Your code should look like this:
 
 <EditableSketch code={`
 function setup() {
-  createCanvas(400, 400);
+  createCanvas(800, 600);
 }
 function draw() {
-  background("aqua");
+  background("yellow");
 }
 `} />
 
@@ -386,12 +404,13 @@ Your code should look like this:
 
 <EditableSketch code={`
 function setup() {
-  createCanvas(400, 400);
+  createCanvas(800, 600);
 }
 function draw() {
-  background(220);
-  //circle in the center with a width of 100
-  circle(200,200,100);
+// Set background color to yellow as shown in Step 5
+  background("yellow");
+  //Draw a circle in the center with a width of 100
+  circle(400,400,100);
 }
 `} />
 
@@ -400,7 +419,7 @@ function draw() {
 
 You can draw shapes on the canvas by typing specific commands for shapes within the curly brackets `{}` after [`function draw()`](/reference/p5/draw). 
 
-The sketch above draws a circle on the canvas by calling the [`circle()`](/reference/p5/circle) function within [`draw()`](/reference/p5/draw). The first two *arguments* – `200, 200` – place the circle in the center of the canvas, and the last *argument* – `100` – indicates that the circle is 100 pixels wide. The comments embedded in the sketch in the lines above the [`circle()`](/reference/p5/circle)` `function describe what the code does. To learn more, visit the [p5.js reference](/reference/) pages for [`draw()`](/reference/p5/draw) and [`circle()`](/reference/p5/circle).
+The sketch above draws a circle on the canvas by calling the [`circle()`](/reference/p5/circle) function within [`draw()`](/reference/p5/draw). The first two *arguments* – `400, 400` – place the circle in the center of the canvas, and the last *argument* – `100` – indicates that the circle is 100 pixels wide. The comments embedded in the sketch in the lines above the [`circle()`](/reference/p5/circle)` `function describe what the code does. To learn more, visit the [p5.js reference](/reference/) pages for [`draw()`](/reference/p5/draw) and [`circle()`](/reference/p5/circle).
 
 
 ### Step 7: Create!
@@ -425,18 +444,19 @@ Your code should look like this:
 
 <EditableSketch code={`
 function setup() {
-  createCanvas(400, 400);
+  createCanvas(800, 600);
 }
 function draw() {
-  background(220);
+// Set background color to yellow as shown in Step 5
+  background("yellow");
   //when mouse button is pressed, circles turn black
 if (mouseIsPressed === true) {
     fill(0);
   } else {
     fill(255);
   }
 
- //white circles drawn at mouse position
+ //Draw a white circle at mouse position (mouseX, mouseY) with a width of 100 similar to Step 6
   circle(mouseX, mouseY, 100);
 }
 `} />

src/content/ui/en.yaml

@@ -93,6 +93,7 @@ libraryCategories:
   networking: "Networking"
   export: "Export"
   utils: "Utilities"
+  integrations: "Integrations"
 tutorialCategories:
   introduction: "Introduction to p5.js"
   drawing: "Drawing"