From 68c214d2e1860216a192dc017b9b54412339fc5d Mon Sep 17 00:00:00 2001 From: soumikadevarakonda Date: Thu, 27 Mar 2025 14:49:49 +0530 Subject: [PATCH 1/4] Added getting started with instance mode file in mdx --- .../en/getting-started-with-instance-mode.mdx | 184 ++++++++++++++++++ 1 file changed, 184 insertions(+) create mode 100644 src/content/tutorials/en/getting-started-with-instance-mode.mdx diff --git a/src/content/tutorials/en/getting-started-with-instance-mode.mdx b/src/content/tutorials/en/getting-started-with-instance-mode.mdx new file mode 100644 index 0000000000..5e7edafb97 --- /dev/null +++ b/src/content/tutorials/en/getting-started-with-instance-mode.mdx @@ -0,0 +1,184 @@ +## title: "Getting Started with Instance Mode in p5.js" description: "Learn how to use p5.js in instance mode for modular and framework-friendly coding." category: "drawing" + +# Getting Started with Instance Mode in p5.js + +## Introduction + +By default, p5.js uses **global mode**, which means functions like `setup()` and `draw()` are automatically recognized. However, **instance mode** allows us to create multiple independent p5.js sketches and avoid polluting the global namespace. + +In instance mode, we encapsulate our p5.js code inside a function and pass a `p5` instance as an argument. This approach is useful when working with multiple sketches on the same page or integrating p5.js with other frameworks. + +## Setting Up Instance Mode + +### 1. Include p5.js + +First, ensure you have p5.js included in your project. You can add this in your HTML file: + +```html + + + + + + p5.js Instance Mode + + + + + + +``` + +### 2. Writing an Instance Mode Sketch + +Create a `sketch.js` file and define your p5 instance like this: + +```javascript +const mySketch = (p) => { + p.setup = function() { + p.createCanvas(400, 400); + p.background(200); + }; + + p.draw = function() { + p.fill(255, 0, 0); + p.ellipse(p.mouseX, p.mouseY, 50, 50); + }; +}; + +let myP5 = new p5(mySketch); +``` + +### 3. Explanation + +- The function `mySketch` takes `p` as an argument, which represents the p5 instance. +- All p5 functions (like `setup()`, `draw()`, `createCanvas()`, etc.) are accessed through `p`. +- Finally, we create a new p5 instance using `new p5(mySketch);`. + +## Creating Multiple Sketches + +You can define multiple instance mode sketches independently: + +```javascript +const sketch1 = (p) => { + p.setup = function() { + p.createCanvas(200, 200); + p.background(100); + }; +}; + +const sketch2 = (p) => { + p.setup = function() { + p.createCanvas(200, 200); + p.background(50); + }; +}; + +let p5_1 = new p5(sketch1, 'container1'); +let p5_2 = new p5(sketch2, 'container2'); +``` + +Then, modify your JSX to add containers for the sketches: + +```jsx + +
+
+ +``` + +## Global Mode vs. Instance Mode + +| Feature | Global Mode | Instance Mode | +|-------------------------|--------------|--------------| +| Function Scope | Global | Encapsulated | +| Multiple Sketches | Not supported | Supported | +| Namespace Pollution | Yes | No | +| Framework Compatibility | Limited | High | + +## Handling Events in Instance Mode + +In instance mode, event functions like `mousePressed()` need to be accessed through `p`: + +```javascript +const sketch = (p) => { + p.setup = function() { + p.createCanvas(200, 200); + }; + + p.mousePressed = function() { + console.log("Mouse pressed inside instance mode"); + }; +}; + +let myP5 = new p5(sketch); +``` + +For global event handling, you may need to use `document.addEventListener`: + +```javascript +document.addEventListener("keydown", function(event) { + console.log("Key pressed: ", event.key); +}); +``` + +## Performance Optimization Tips + +- Use `p.remove()` to clean up unused instances. +- Use `noLoop()` to stop unnecessary redraws. +- Limit the number of instances when possible. + +## Using p5.js with React + +Instance mode makes it easier to use p5.js with frameworks like React. Example: + +```javascript +const P5Component = () => { + useEffect(() => { + const sketch = (p) => { + p.setup = function() { + p.createCanvas(400, 400).parent('p5-container'); + }; + }; + let myP5 = new p5(sketch); + + return () => myP5.remove(); + }, []); + + return
; +}; + +export default P5Component; +``` + +## Advantages of Instance Mode + +- **Avoids Global Namespace Pollution**: Helps prevent conflicts when using p5.js with other libraries. +- **Multiple Sketches**: Allows running multiple independent sketches on a single page. +- **Better Encapsulation**: Makes code modular and maintainable. +- **Compatibility with Other Frameworks**: Makes it easier to integrate p5.js with React, Vue, or other JavaScript frameworks. + +## Limitations of Instance Mode + +- **Increased Complexity**: Requires a different syntax (`p.functionName()`) compared to global mode, which can be harder for beginners. +- **Potential Performance Overhead**: Managing multiple instances can lead to performance issues if not handled efficiently. +- **Event Handling Differences**: Some event listeners may behave differently in instance mode. + +## When to Use Instance Mode + +Use instance mode when: + +- You need to run multiple independent p5.js sketches on the same page. +- You want to integrate p5.js with other JavaScript frameworks. +- You need to prevent variable conflicts in complex applications. + +Use global mode when: + +- You're working on simple sketches that don't require encapsulation. +- You prefer a more traditional, easier-to-read p5.js syntax. + +## Conclusion + +Instance mode is a powerful way to structure p5.js sketches, especially for complex projects. By wrapping our sketch inside a function and passing a p5 instance, we gain flexibility and prevent conflicts with other code. While it comes with some added complexity, it offers better modularity, reusability, and compatibility with frameworks. + +Happy coding with p5.js instance mode! From e80bbe997501542b4b508ec08ec56a2cf39127a8 Mon Sep 17 00:00:00 2001 From: Soumika Devarakonda <142423331+soumikadevarakonda@users.noreply.github.com> Date: Thu, 27 Mar 2025 14:54:47 +0530 Subject: [PATCH 2/4] Update getting-started-with-instance-mode.mdx --- .../tutorials/en/getting-started-with-instance-mode.mdx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/content/tutorials/en/getting-started-with-instance-mode.mdx b/src/content/tutorials/en/getting-started-with-instance-mode.mdx index 5e7edafb97..b3103de4b1 100644 --- a/src/content/tutorials/en/getting-started-with-instance-mode.mdx +++ b/src/content/tutorials/en/getting-started-with-instance-mode.mdx @@ -1,4 +1,8 @@ -## title: "Getting Started with Instance Mode in p5.js" description: "Learn how to use p5.js in instance mode for modular and framework-friendly coding." category: "drawing" +--- +title: "Getting Started with Instance Mode in p5.js" +description: "Learn how to use p5.js in instance mode for modular and framework-friendly coding." +category: "drawing" +--- # Getting Started with Instance Mode in p5.js From 5850ba5b1784d7c6a540aad2944ff498dd2b92d5 Mon Sep 17 00:00:00 2001 From: Soumika Devarakonda <142423331+soumikadevarakonda@users.noreply.github.com> Date: Thu, 27 Mar 2025 15:16:25 +0530 Subject: [PATCH 3/4] Update getting-started-with-instance-mode.mdx --- .../en/getting-started-with-instance-mode.mdx | 210 +++++------------- 1 file changed, 52 insertions(+), 158 deletions(-) diff --git a/src/content/tutorials/en/getting-started-with-instance-mode.mdx b/src/content/tutorials/en/getting-started-with-instance-mode.mdx index b3103de4b1..f18c96311a 100644 --- a/src/content/tutorials/en/getting-started-with-instance-mode.mdx +++ b/src/content/tutorials/en/getting-started-with-instance-mode.mdx @@ -1,188 +1,82 @@ --- -title: "Getting Started with Instance Mode in p5.js" -description: "Learn how to use p5.js in instance mode for modular and framework-friendly coding." -category: "drawing" +title: Getting Started with p5.js Instance Mode +description: Learn how to set up and use p5.js in instance mode for better modularity and compatibility. +category: drawing --- -# Getting Started with Instance Mode in p5.js +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; -## Introduction +## Getting Started with p5.js Instance Mode -By default, p5.js uses **global mode**, which means functions like `setup()` and `draw()` are automatically recognized. However, **instance mode** allows us to create multiple independent p5.js sketches and avoid polluting the global namespace. +p5.js supports two modes: **Global Mode** and **Instance Mode**. Instance Mode is recommended for better modularity and compatibility with other JavaScript libraries. -In instance mode, we encapsulate our p5.js code inside a function and pass a `p5` instance as an argument. This approach is useful when working with multiple sketches on the same page or integrating p5.js with other frameworks. +### Installation -## Setting Up Instance Mode +You can use p5.js via a CDN or install it using npm. -### 1. Include p5.js + + -First, ensure you have p5.js included in your project. You can add this in your HTML file: + Add the following script to your HTML file: -```html - - - - - - p5.js Instance Mode - - - - - - -``` + ```html + + ``` + + + + + Install p5.js using npm: -### 2. Writing an Instance Mode Sketch + ```sh + npm install p5 + ``` + + -Create a `sketch.js` file and define your p5 instance like this: +### Basic Setup in Instance Mode -```javascript -const mySketch = (p) => { - p.setup = function() { - p.createCanvas(400, 400); - p.background(200); - }; +Instead of relying on global functions like `setup()` and `draw()`, instance mode requires you to create a `p5` instance and pass your functions as parameters. - p.draw = function() { - p.fill(255, 0, 0); - p.ellipse(p.mouseX, p.mouseY, 50, 50); - }; +```js +const sketch = (p) => { + p.setup = () => { + p.createCanvas(400, 400); + p.background(220); + }; + + p.draw = () => { + p.ellipse(p.width / 2, p.height / 2, 50, 50); + }; }; -let myP5 = new p5(mySketch); +new p5(sketch); ``` -### 3. Explanation - -- The function `mySketch` takes `p` as an argument, which represents the p5 instance. -- All p5 functions (like `setup()`, `draw()`, `createCanvas()`, etc.) are accessed through `p`. -- Finally, we create a new p5 instance using `new p5(mySketch);`. - -## Creating Multiple Sketches +### Using Multiple Sketches -You can define multiple instance mode sketches independently: +Instance mode allows multiple p5.js sketches to run independently: -```javascript +```js const sketch1 = (p) => { - p.setup = function() { - p.createCanvas(200, 200); - p.background(100); - }; + p.setup = () => p.createCanvas(200, 200); + p.draw = () => p.background(255, 0, 0); }; const sketch2 = (p) => { - p.setup = function() { - p.createCanvas(200, 200); - p.background(50); - }; -}; - -let p5_1 = new p5(sketch1, 'container1'); -let p5_2 = new p5(sketch2, 'container2'); -``` - -Then, modify your JSX to add containers for the sketches: - -```jsx - -
-
- -``` - -## Global Mode vs. Instance Mode - -| Feature | Global Mode | Instance Mode | -|-------------------------|--------------|--------------| -| Function Scope | Global | Encapsulated | -| Multiple Sketches | Not supported | Supported | -| Namespace Pollution | Yes | No | -| Framework Compatibility | Limited | High | - -## Handling Events in Instance Mode - -In instance mode, event functions like `mousePressed()` need to be accessed through `p`: - -```javascript -const sketch = (p) => { - p.setup = function() { - p.createCanvas(200, 200); - }; - - p.mousePressed = function() { - console.log("Mouse pressed inside instance mode"); - }; -}; - -let myP5 = new p5(sketch); -``` - -For global event handling, you may need to use `document.addEventListener`: - -```javascript -document.addEventListener("keydown", function(event) { - console.log("Key pressed: ", event.key); -}); -``` - -## Performance Optimization Tips - -- Use `p.remove()` to clean up unused instances. -- Use `noLoop()` to stop unnecessary redraws. -- Limit the number of instances when possible. - -## Using p5.js with React - -Instance mode makes it easier to use p5.js with frameworks like React. Example: - -```javascript -const P5Component = () => { - useEffect(() => { - const sketch = (p) => { - p.setup = function() { - p.createCanvas(400, 400).parent('p5-container'); - }; - }; - let myP5 = new p5(sketch); - - return () => myP5.remove(); - }, []); - - return
; + p.setup = () => p.createCanvas(200, 200); + p.draw = () => p.background(0, 0, 255); }; -export default P5Component; +new p5(sketch1, 'container1'); +new p5(sketch2, 'container2'); ``` -## Advantages of Instance Mode - -- **Avoids Global Namespace Pollution**: Helps prevent conflicts when using p5.js with other libraries. -- **Multiple Sketches**: Allows running multiple independent sketches on a single page. -- **Better Encapsulation**: Makes code modular and maintainable. -- **Compatibility with Other Frameworks**: Makes it easier to integrate p5.js with React, Vue, or other JavaScript frameworks. - -## Limitations of Instance Mode - -- **Increased Complexity**: Requires a different syntax (`p.functionName()`) compared to global mode, which can be harder for beginners. -- **Potential Performance Overhead**: Managing multiple instances can lead to performance issues if not handled efficiently. -- **Event Handling Differences**: Some event listeners may behave differently in instance mode. - -## When to Use Instance Mode - -Use instance mode when: - -- You need to run multiple independent p5.js sketches on the same page. -- You want to integrate p5.js with other JavaScript frameworks. -- You need to prevent variable conflicts in complex applications. - -Use global mode when: - -- You're working on simple sketches that don't require encapsulation. -- You prefer a more traditional, easier-to-read p5.js syntax. - -## Conclusion +### Why Use Instance Mode? -Instance mode is a powerful way to structure p5.js sketches, especially for complex projects. By wrapping our sketch inside a function and passing a p5 instance, we gain flexibility and prevent conflicts with other code. While it comes with some added complexity, it offers better modularity, reusability, and compatibility with frameworks. +- **Avoids global namespace conflicts** +- **Works well with module-based JavaScript** +- **Allows multiple independent sketches** -Happy coding with p5.js instance mode! +Now you're ready to build interactive projects using p5.js in a structured way! 🚀 From 7b041cf988f518c3605f9e9cad4b17d2b1fa77c7 Mon Sep 17 00:00:00 2001 From: Soumika Devarakonda <142423331+soumikadevarakonda@users.noreply.github.com> Date: Thu, 27 Mar 2025 15:22:07 +0530 Subject: [PATCH 4/4] Update getting-started-with-instance-mode.mdx --- .../en/getting-started-with-instance-mode.mdx | 86 +++++-------------- 1 file changed, 21 insertions(+), 65 deletions(-) diff --git a/src/content/tutorials/en/getting-started-with-instance-mode.mdx b/src/content/tutorials/en/getting-started-with-instance-mode.mdx index f18c96311a..65e4c3d2dc 100644 --- a/src/content/tutorials/en/getting-started-with-instance-mode.mdx +++ b/src/content/tutorials/en/getting-started-with-instance-mode.mdx @@ -4,79 +4,35 @@ description: Learn how to set up and use p5.js in instance mode for better modul category: drawing --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; +# Getting Started with Instance Mode -## Getting Started with p5.js Instance Mode +## What is Instance Mode? -p5.js supports two modes: **Global Mode** and **Instance Mode**. Instance Mode is recommended for better modularity and compatibility with other JavaScript libraries. +Instance mode allows you to create multiple independent instances of the library, rather than relying on a single global instance. This approach provides better encapsulation, flexibility, and avoids conflicts in complex applications. -### Installation +## Why Use Instance Mode? -You can use p5.js via a CDN or install it using npm. +Instance mode is preferred in scenarios where multiple independent configurations are needed within the same application. Unlike global mode, which shares state across all components, instance mode ensures better isolation and control. - - +## Advantages of Instance Mode - Add the following script to your HTML file: +- **Encapsulation**: Each instance maintains its own state, avoiding unintended side effects. +- **Flexibility**: Different configurations can be applied to different instances. +- **Scalability**: Easier to manage in large applications with multiple independent modules. +- **Avoids Conflicts**: Prevents state pollution from shared global variables. +- **Better Testability**: Each instance can be tested independently. - ```html - - ``` - - - +## Limitations of Instance Mode - Install p5.js using npm: +- **Increased Memory Usage**: Multiple instances consume more resources compared to a single global instance. +- **More Setup Required**: Requires explicit initialization for each instance. +- **Potential Redundancy**: If all instances share the same configuration, a global instance might be more efficient. - ```sh - npm install p5 - ``` - - +## When to Choose Instance Mode Over Global Mode? -### Basic Setup in Instance Mode +- **When working with multiple independent modules** that require different configurations. +- **When developing modular applications**, ensuring isolated behavior. +- **When avoiding global state conflicts** is necessary. +- **When testing individual components**, making unit testing easier. -Instead of relying on global functions like `setup()` and `draw()`, instance mode requires you to create a `p5` instance and pass your functions as parameters. - -```js -const sketch = (p) => { - p.setup = () => { - p.createCanvas(400, 400); - p.background(220); - }; - - p.draw = () => { - p.ellipse(p.width / 2, p.height / 2, 50, 50); - }; -}; - -new p5(sketch); -``` - -### Using Multiple Sketches - -Instance mode allows multiple p5.js sketches to run independently: - -```js -const sketch1 = (p) => { - p.setup = () => p.createCanvas(200, 200); - p.draw = () => p.background(255, 0, 0); -}; - -const sketch2 = (p) => { - p.setup = () => p.createCanvas(200, 200); - p.draw = () => p.background(0, 0, 255); -}; - -new p5(sketch1, 'container1'); -new p5(sketch2, 'container2'); -``` - -### Why Use Instance Mode? - -- **Avoids global namespace conflicts** -- **Works well with module-based JavaScript** -- **Allows multiple independent sketches** - -Now you're ready to build interactive projects using p5.js in a structured way! 🚀 +By choosing instance mode in the right scenarios, you can achieve better modularity and maintainability in your project.