From 988f697d81ab989c3bc26a833c6ee7817e998e62 Mon Sep 17 00:00:00 2001
From: PIYUSH RATHORE <163632958+Piyushrathoree@users.noreply.github.com>
Date: Sat, 10 Jan 2026 21:37:59 +0000
Subject: [PATCH 1/2] update the intro to p5.strands file

---
 src/content/tutorials/en/intro-to-p5-strands.mdx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/content/tutorials/en/intro-to-p5-strands.mdx b/src/content/tutorials/en/intro-to-p5-strands.mdx
index 6df84f54ee..dd4c8ec849 100644
--- a/src/content/tutorials/en/intro-to-p5-strands.mdx
+++ b/src/content/tutorials/en/intro-to-p5-strands.mdx
@@ -167,25 +167,25 @@ function instancingCallback() {
 	getWorldInputs((inputs) => {
 		// Offset each instance by its ID
 		inputs.position.x += instanceID() * 20;
-    // Move the particles left on the screen
-    inputs.position.x -= 150;
+        // Move the particles left on the screen
+        inputs.position.x -= 150;
 		return inputs;
 	});
 }
 
 async function setup() {
 	createCanvas(300, 300, WEBGL);
-  pixelDensity(1);
-  particleModel = buildGeometry(() => sphere(10, 10, 2));
+    pixelDensity(1);
+    particleModel = buildGeometry(() => sphere(10, 10, 2));
 	instancingShader = baseColorShader().modify(instancingCallback);
-  instancingStrokeShader = baseStrokeShader().modify(instancingCallback);
+    instancingStrokeShader = baseStrokeShader().modify(instancingCallback);
 }
 
 function draw() {
 	background(0);
 	orbitControl();
 	shader(instancingShader)
-  strokeShader(instancingStrokeShader)
+    strokeShader(instancingStrokeShader)
 	model(particleModel, 16);
 }
 `} />

From 8d9d4bd2ae3ca395a32694e20e3864d399776ff4 Mon Sep 17 00:00:00 2001
From: PIYUSH RATHORE <163632958+Piyushrathoree@users.noreply.github.com>
Date: Sun, 11 Jan 2026 19:28:40 +0000
Subject: [PATCH 2/2] fixed the whole formatting

---
 .../tutorials/en/intro-to-p5-strands.mdx      | 68 +++++++++----------
 1 file changed, 34 insertions(+), 34 deletions(-)

diff --git a/src/content/tutorials/en/intro-to-p5-strands.mdx b/src/content/tutorials/en/intro-to-p5-strands.mdx
index dd4c8ec849..3dbd159889 100644
--- a/src/content/tutorials/en/intro-to-p5-strands.mdx
+++ b/src/content/tutorials/en/intro-to-p5-strands.mdx
@@ -103,23 +103,23 @@ let firstShader;
 // which determines how to modify the baseColorShader()
 
 function firstShaderCallback() {
-	getFinalColor((color) => {
-		color = [1, 1, 0, 1]; // Yellow in RGBA (0-1 scale)
-		return color;
-	});
+  getFinalColor((color) => {
+	color = [1, 1, 0, 1]; // Yellow in RGBA (0-1 scale)
+	return color;
+  });
 } 
 
 async function setup() {
-	createCanvas(200, 200, WEBGL);
+  createCanvas(200, 200, WEBGL);
   pixelDensity(1);
-	// p5.strands are made using the modify function on a shader 
-	firstShader = baseColorShader().modify(firstShaderCallback);
+  // p5.strands are made using the modify function on a shader 
+  firstShader = baseColorShader().modify(firstShaderCallback);
 }
 
 function draw() {
   background(0);
-	shader(firstShader);
-	sphere(80);
+  shader(firstShader);
+  sphere(80);
 }
 `}/>
 
@@ -164,29 +164,29 @@ let instancingStrokeShader;
 let particleModel;
 
 function instancingCallback() {
-	getWorldInputs((inputs) => {
-		// Offset each instance by its ID
-		inputs.position.x += instanceID() * 20;
-        // Move the particles left on the screen
-        inputs.position.x -= 150;
-		return inputs;
-	});
+  getWorldInputs((inputs) => {
+  // Offset each instance by its ID
+  inputs.position.x += instanceID() * 20;
+    // Move the particles left on the screen
+    inputs.position.x -= 150;
+    return inputs;
+  });
 }
 
 async function setup() {
-	createCanvas(300, 300, WEBGL);
-    pixelDensity(1);
-    particleModel = buildGeometry(() => sphere(10, 10, 2));
-	instancingShader = baseColorShader().modify(instancingCallback);
-    instancingStrokeShader = baseStrokeShader().modify(instancingCallback);
+  createCanvas(300, 300, WEBGL);
+  pixelDensity(1);
+  particleModel = buildGeometry(() => sphere(10, 10, 2));
+  instancingShader = baseColorShader().modify(instancingCallback);
+  instancingStrokeShader = baseStrokeShader().modify(instancingCallback);
 }
 
 function draw() {
-	background(0);
-	orbitControl();
-	shader(instancingShader)
-    strokeShader(instancingStrokeShader)
-	model(particleModel, 16);
+  background(0);
+  orbitControl();
+  shader(instancingShader)
+  strokeShader(instancingStrokeShader)
+  model(particleModel, 16);
 }
 `} />
 
@@ -343,14 +343,14 @@ This perspective makes it easier to determine how surfaces appear to the viewer:
 
 ```js
 function fresnelCallback() {
-	getCameraInputs((inputs) => {
-		// The normal vector on the sphere's surface
-		let normalVector = normalize(inputs.normal);
-		// This creates a vector pointing from the surface to the camera
-		let viewVector = normalize(-inputs.position);
-		// ...
-		return inputs;
-	})
+  getCameraInputs((inputs) => {
+    // The normal vector on the sphere's surface
+    let normalVector = normalize(inputs.normal);
+    // This creates a vector pointing from the surface to the camera
+    let viewVector = normalize(-inputs.position);
+    // ...
+    return inputs;
+  })
 }
 ```