diff --git a/public/assets/mont-photo-low.jpg b/public/assets/mont-photo-low.jpg
new file mode 100644
index 0000000000..01a1b98002
Binary files /dev/null and b/public/assets/mont-photo-low.jpg differ
diff --git a/src/content/tutorials/en/hello-color-world-p5-strands.mdx b/src/content/tutorials/en/hello-color-world-p5-strands.mdx
new file mode 100644
index 0000000000..a951df02f0
--- /dev/null
+++ b/src/content/tutorials/en/hello-color-world-p5-strands.mdx
@@ -0,0 +1,857 @@
+---
+title: "Hello Color World: p5.strands"
+description: An introduction to fragment shaders using p5.strands
+category: "2.0"
+categoryIndex: 0
+featuredImage: ../images/featured/intro-to-p5-strands.png
+featuredImageAlt: " "
+relatedContent:
+  references:
+    - en/p5/p5shader
+authors:
+  - ilithya
+---
+
+import { Columns, Column } from "../../../components/Columns";
+import EditableSketch from "../../../components/EditableSketch/index.astro";
+import Callout from "../../../components/Callout/index.astro";
+
+## 3 Ways To Work With Color In Shaders
+
+Let's discover a few techniques for manipulating color using p5.strands, and learn a bit of fragment shader fundamentals in the process. 
+
+We'll explore color in shaders to enhance our p5.js sketches with more sophisticated effects that pure JavaScript wouldn't let us do. 
+
+<Callout title="What is p5.strands?">
+It's a new way of writing shaders using JavaScript in p5.js. 
+- [p5.strands: Writing shaders in JavaScript](https://www.davepagurek.com/blog/writing-shaders-in-js/), blog post by Dave Pagurek
+- [p5.strands: Introduction to shaders](/tutorials/intro-to-p5-strands), tutorial by Luke Plowden
+</ Callout>
+
+To understand what advantages using p5.strands brings to us when dealing with shaders, we'll look at each technique through examples with variations of creating a p5 sketch together with p5.strands and comparing them to GLSL.
+
+Each technique will present a few ideas for using p5.js syntax that you can try in the sketches with p5.strands. This can help you learn how to combine them.
+
+<Callout title="What is a shader?">
+A set of instructions implementing algorithms that control how a mesh is rendered into pixels on the screen. In WebGL shaders are written in GLSL, and there are two types: vertex and fragment.
+- [Introduction to GLSL](https://p5js.org/tutorials/intro-to-glsl/), tutorial by Dave Pagurek, Austin Lee Slominski, Adam Ferriss
+</ Callout>
+
+Although GLSL can be used alongside JavaScript in a p5.js sketch, it is a separate shader language that shaders require. With p5.strands you can focus only in JavaScript, given that GLSL is managed by p5.js.
+
+Let's start from simple to complex, like having a three-course meal, by first dipping our toes into an appetizer.
+
+<div class="mt-12"></div>
+
+### 1. Solid Colors
+
+We'll begin by simply painting the canvas of our sketch and one 3D primitive.
+
+<Callout title="What is a fragment shader?">  
+A shader that sets the color of each pixel on the screen, using RGBA values from 0.0 to 1.0.
+- [RGBA color](https://hughsk.io/fragment-foundry/chapters/03-rgb.html), self-guided workshop on fragment shaders by Hugh Kennedy
+- [RGB color model](https://courses.ilithya.rocks/p/courses/intro-to-shaders/3486602-module-02-color/11410544-07-rgb-color-model), fragment shader course by ilithya
+</ Callout>
+
+With p5.strands we can modify the color of a shader and have the benefit of using several color notations and models that we already know from p5.js, since it translates them for us into the GLSL specific one with hooks (e.g. [`finalColor`](/reference/p5/finalColor/)).
+
+These hooks allow us to speak GLSL when we use them with familiar p5.js language:
+
+<table class="border-collapse border border-gray-400 full-width">
+  <thead>
+    <tr>
+      <th class="border border-gray-400 bg-(--bg-blue)">p5.strands</th>
+      <th class="border border-gray-400 bg-(--bg-blue)">GLSL (fragment)</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td class="border border-gray-400"><code>hook.set(val)</code></td>
+      <td class="border border-gray-400"><code>gl_FragColor = val</code></td>
+    </tr>
+  </tbody>
+</table>
+
+
+<Callout>  
+We can use p5.js functions like [`color()`](/reference/p5/color) to paint with the shader:
+- named color, `color('blue')`
+- hex color value, `color('#0000ff')`
+- hsl values, `color('hsl(40, 100%, 50%)')`
+- RGB 8-bit values, `color(0, 255, 0)` 
+</ Callout>
+
+<Columns>
+<Column>
+
+#### sketch with p5.strands
+<EditableSketch code={`
+  let shaderCanvas;
+  let shaderPrimitive;
+
+  function setup() {
+    createCanvas(300, 300, WEBGL);
+    pixelDensity(1);
+
+    // Custom shaders using p5.strands
+    shaderCanvas = buildColorShader(
+      colorCanvas
+    );
+    shaderPrimitive = buildMaterialShader(
+      colorPrimitive
+    );
+  }
+
+  function colorCanvas() {
+    // p5.strands hook 
+    // connects p5.js with GLSL
+    finalColor.begin();
+
+    const solidColor = color('blue');
+    finalColor.set(solidColor);
+
+    finalColor.end();
+  } 
+
+  function colorPrimitive() {
+    // p5.strands hook 
+    // connects p5.js with GLSL
+    finalColor.begin();
+
+    const solidColor = color('#ff0000');
+    finalColor.set(solidColor);
+
+    finalColor.end();
+  } 
+
+  function draw() {
+    // Apply color shader in canvas
+    filter(shaderCanvas);
+
+    // Apply color shader in 3D primitive
+    shader(shaderPrimitive);
+
+    // Rotate 3D primitive
+    const anim = millis() * 0.00025;
+    rotateY(anim);
+
+    box(120);
+  }
+`} />
+
+</Column>
+
+<Column>
+
+#### sketch with GLSL
+<EditableSketch code={`
+  let shaderCanvas;
+  let shaderPrimitive;
+
+  function setup() {
+    createCanvas(300, 300, WEBGL);
+    pixelDensity(1);
+
+    // Custom shaders using GLSL
+    shaderCanvas = createShader(
+      vertex, fragmentCanvas
+    );
+    shaderPrimitive = createShader(
+      vertex, fragmentPrimitive
+    );
+  }
+
+  let vertex = \`
+// GLSL
+precision highp float;
+
+attribute vec3 aPosition;
+
+uniform mat4 uModelViewMatrix;
+uniform mat4 uProjectionMatrix;
+
+void main() {
+  gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
+}
+\`;
+
+  let fragmentCanvas = \`
+// GLSL
+precision highp float;
+
+void main() {
+  // Blue color as RGB(0%, 0%, 100%)
+  vec3 color = vec3(0.0, 0.0, 1.0);
+
+  gl_FragColor = vec4(color, 1.0);
+}
+\`;
+
+  let fragmentPrimitive = \`
+// GLSL
+precision highp float;
+
+void main() {
+  // Red color as RGB(100%, 0%, 0%)
+  vec3 color = vec3(1.0, 0.0, 0.0);
+
+  gl_FragColor = vec4(color, 1.0);
+}
+\`;
+
+  function draw() {
+    // Apply color shader in canvas
+    filter(shaderCanvas);
+
+    // Apply color shader in 3D primitive
+    shader(shaderPrimitive);
+
+    // Rotate 3D primitive
+    const anim = millis() * 0.00025;
+    rotateY(anim);
+
+    box(120);
+  }
+`} />
+
+</Column>
+</Columns>
+
+### 2. Textured Colors
+We'll continue evolving our canvas and 3D primitive sketch as we learn more techniques to color with our fragment shaders. Let's add a colored texture to them.
+
+<Callout title="What is a p5.strands hook?">
+An access point into a shader that connects p5.js with GLSL to modify its behavior.
+- `Cheat sheet link?`
+</ Callout>
+
+With p5.strands we can apply randomness to a color equation, creating visually smooth organic textures such as clouds, as well as rougher textures found in crystals, by using the [`noise()`](/reference/p5/noise) p5.js function with a hook (e.g. [`pixelInputs`](/reference/p5/pixelInputs/)) instead of implementing GLSL algorithms from scratch.
+
+We can also add the time elapsed with [`millis()`](/reference/p5/millis) to our textures to simulate natural-looking movements. This value becomes a GLSL uniform, useful to adjust the shader.
+
+Here are other p5.strands syntax examples we'll use, and their GLSL translations.
+
+<table class="border-collapse border border-gray-400 full-width">
+  <thead>
+    <tr>
+      <th class="border border-gray-400 bg-(--bg-blue)">p5.strands</th>
+      <th class="border border-gray-400 bg-(--bg-blue)">GLSL (fragment)</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td class="border border-gray-400"><code>hook.texCoord </code></td>
+      <td class="border border-gray-400"><code>varying vec2 uv</code></td>
+    </tr>
+    <tr>
+      <td class="border border-gray-400"><code>hook.color</code></td>
+      <td class="border border-gray-400"><code>gl_FragColor</code></td>
+    </tr>
+  </tbody>
+</table>
+
+<Callout>
+Experiment with different inputs for the cloud texture:
+- static, `noise(uv);`
+- animated, `noise(uv + millis() * 0.00015);`
+- horizontal mouse movement, `noise(uv + mouseX / width);`
+- vertical mouse movement, `noise(uv + mouseY / height);`
+</ Callout>
+
+<Columns>
+<Column>
+
+#### sketch with p5.strands
+<EditableSketch code={`
+  let shaderCanvas;
+  let shaderPrimitive;
+
+  function setup() {
+    createCanvas(300, 300, WEBGL);
+    pixelDensity(1);
+
+    // Custom shaders using p5.strands
+    shaderCanvas = buildMaterialShader(
+      colorCanvas
+    );
+    shaderPrimitive = buildMaterialShader(
+      colorPrimitive
+    );
+  }
+
+  function colorCanvas() {
+    const time = millis() * 0.00015;
+
+    // p5.strands hook 
+    // connects p5.js with GLSL
+    pixelInputs.begin();
+
+    // Coordinates of rendered space 
+    // (X and Y)
+	  const uv = pixelInputs.texCoord;
+
+    const cloudTexture = noise(uv + time);
+
+    const r = mouseX / width;
+    const g = 0;
+    const b = cloudTexture * 1.5;
+
+    const cloudColor = [r, g, b, 1];
+
+    pixelInputs.color = cloudColor;
+
+    pixelInputs.end();
+  } 
+
+  function colorPrimitive() {
+    // p5.strands hook 
+    // connects p5.js with GLSL
+    pixelInputs.begin();
+
+    // Coordinates of rendered space 
+    // (X and Y)
+	  const uv = pixelInputs.texCoord;
+
+    const grainTexture = noise(uv * 50.0);
+    pixelInputs.color = grainTexture;
+
+    pixelInputs.end();
+  } 
+
+  function draw() {
+    // Apply color shader in canvas
+    filter(shaderCanvas);
+
+    // Apply color shader in 3D primitive
+    shader(shaderPrimitive);
+
+    // Rotate 3D primitive
+    const anim = millis() * 0.00015;
+    rotateY(anim);
+
+    stroke(120);
+    box(120);
+  }
+`} />
+
+</Column>
+
+<Column>
+
+#### sketch with GLSL
+<EditableSketch code={`
+  let shaderCanvas;
+  let shaderPrimitive;
+
+  function setup() {
+    createCanvas(300, 300, WEBGL);
+    pixelDensity(1);
+
+    // Custom shaders using GLSL
+    shaderCanvas = createShader(
+      vertex, fragmentCanvas
+    );
+    shaderPrimitive = createShader(
+      vertex, fragmentPrimitive
+    );
+  }
+
+  let vertex = \`
+// GLSL
+precision highp float;
+
+attribute vec2 aTexCoord;
+attribute vec3 aPosition;
+
+uniform mat4 uModelViewMatrix;
+uniform mat4 uProjectionMatrix;
+
+varying vec2 uv;
+
+void main() {
+  uv = aTexCoord;
+
+  gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
+}
+\`;
+
+  let fragmentCanvas = \`
+// GLSL
+precision highp float;
+
+uniform vec2 u_resolution;
+uniform float u_mouseX;
+uniform float u_time;
+
+// Coordinates of rendered space
+// (X and Y)
+varying vec2 uv;
+
+// GLSL Noise Algorithms by Patricio Gonzalez Vivo
+// https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83
+float rand(vec2 n) { 
+	return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
+}
+
+float noise(vec2 p){
+	vec2 ip = floor(p);
+	vec2 u = fract(p);
+	u = u*u*(3.0-2.0*u);
+	
+	float res = mix(
+		mix(rand(ip),rand(ip+vec2(1.0,0.0)),u.x),
+		mix(rand(ip+vec2(0.0,1.0)),rand(ip+vec2(1.0,1.0)),u.x),
+    u.y);
+	return res*res;
+}
+
+// GLSL Noise Algorithm by Inigo Quilez
+// https://www.shadertoy.com/view/MdX3Rr
+const mat2 m2 = mat2(0.8,-0.6,0.6,0.8);
+float fbm( in vec2 p ){
+    float f = 0.0;
+    f += 0.5000*noise( p ); p = m2*p*2.02;
+    f += 0.2500*noise( p ); p = m2*p*2.03;
+    f += 0.1250*noise( p ); p = m2*p*2.01;
+    f += 0.0625*noise( p );
+
+    return f/0.9375;
+}
+
+void main() {
+	float cloudTexture = fbm(uv * 2.5 + u_time);
+
+  float r = u_mouseX / u_resolution.x;
+  float g = 0.0;
+  float b = cloudTexture * 1.5;
+
+  vec3 color = vec3(r, g, b + 0.16);
+
+	gl_FragColor = vec4(color, 1.0);
+}
+\`;
+
+  let fragmentPrimitive = \`
+// GLSL
+precision highp float;
+
+// Coordinates of rendered space
+// (X and Y)
+varying vec2 uv;
+
+// GLSL Noise Algorithms by Patricio Gonzalez Vivo
+// https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83
+float rand(vec2 n) { 
+	return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
+}
+
+float noise(vec2 p){
+	vec2 ip = floor(p);
+	vec2 u = fract(p);
+	u = u*u*(3.0-2.0*u);
+	
+	float res = mix(
+		mix(rand(ip),rand(ip+vec2(1.0,0.0)),u.x),
+		mix(rand(ip+vec2(0.0,1.0)),rand(ip+vec2(1.0,1.0)),u.x),
+    u.y);
+	return res*res;
+}
+
+void main() {
+  float grainTexture = noise(uv * 200.0);
+  grainTexture -= 0.05;
+
+  vec3 color = vec3(grainTexture);
+
+	gl_FragColor = vec4(color, 0.3);
+}
+\`;
+
+  function draw() {
+    const time = millis() * 0.00015;
+
+    // Setup uniforms for
+    // canvas fragment shader
+    shaderCanvas.setUniform(
+      'u_time', time
+    );
+    shaderCanvas.setUniform(
+      'u_mouseX', mouseX
+    );
+    shaderCanvas.setUniform(
+      'u_resolution', [width, height]
+    );
+
+    // Apply color shader in canvas
+    filter(shaderCanvas);
+
+    // Apply color shader in 3D primitive
+    shader(shaderPrimitive);
+
+    // Rotate 3D primitive
+    rotateY(time);
+
+    stroke(120);
+    box(120);
+  }
+`} />
+
+</Column>
+</Columns>
+
+### 3. Image Color Filters
+Let's add an image to our canvas and 3D primitive to learn how we can create a color filter with adjustments in the fragment shader. To simplify things, we’ll use the same image for both.
+
+<Callout title="What is chromatic aberration?">
+It's a color distortion that occurs when the colors of light don't focus on the same point. The RGB channels appear to be separated, making the colors of an image appear shifted.
+- [Chromatic aberration](https://en.wikipedia.org/wiki/Chromatic_aberration), wikipedia
+- [Filter Shader (p5.strands)](/examples/3D-Filter-Shader-p5strands/), example by Dave Pagurek
+- [Filter Shader (GLSL)](/examples/3D-Filter-Shader/), example by Dave Pagurek
+</ Callout>
+
+With p5.strands we can customize an image filter to our liking, and create a chromatic aberration effect with hooks (e.g. [`filterColor`](/reference/p5/filterColor/)). We can displace the image colors vertically and horizontally, using the p5.js variables [`mouseX`](/reference/p5/mouseX) and [`mouseY`](/reference/p5/mouseY), which are translated into GLSL uniforms to control the shader.
+
+We'll add these p5.strands vs. GLSL translations to our knowledge base:
+
+<table class="border-collapse border border-gray-400 full-width">
+  <thead>
+    <tr>
+      <th class="border border-gray-400 bg-(--bg-blue)">p5.strands</th>
+      <th class="border border-gray-400 bg-(--bg-blue)">GLSL (fragment)</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td class="border border-gray-400"><code>hook.canvasContent</code></td>
+      <td class="border border-gray-400"><code>uniform sampler2D u_texture</code></td>
+    </tr>
+    <tr>
+      <td class="border border-gray-400"><code>uniformTexture(texture)</code></td>
+      <td class="border border-gray-400"><code>uniform sampler2D u_texture</code></td>
+    </tr>
+    <tr>
+      <td class="border border-gray-400"><code>getTexture(texture, uv)</code></td>
+      <td class="border border-gray-400"><code>texture2D(u_texture, uv)</code></td>
+    </tr>
+  </tbody>
+</table>
+
+<Callout>  
+Explore different offsets, in both axes (X, Y), for the image displacement:
+- animated, `noise(uv + millis() * 0.00025)` 
+- linear animation, `sin(millis() * 0.001) * 0.5`
+- centered horizontal mouse movement, `(0.5 - mouseX / width) * 0.5`
+- centered vertical mouse movement, `(0.5 - mouseY / height) * 0.5`
+</ Callout>
+
+<Columns>
+<Column>
+
+#### sketch with p5.strands
+<EditableSketch code={`
+  let img;
+let shaderCanvas;
+let shaderPrimitive;
+  
+  async function setup() {
+    createCanvas(300, 300, WEBGL);
+    pixelDensity(1);
+
+    // Image by Mont fotografias
+    // https://www.pexels.com/photo/white-and-purple-cloud-2948636/
+    img = await loadImage(
+      'mont-photo-low.jpg'
+    );
+
+    // Custom shaders using p5.strands
+    shaderCanvas = buildFilterShader(
+      colorCanvas
+    );
+    shaderPrimitive = buildMaterialShader(
+      colorPrimitive
+    );
+  }
+
+  function colorCanvas() {
+    // p5.strands hook 
+    // connects p5.js with GLSL
+    filterColor.begin();
+      
+    // Coordinates of rendered space 
+    // (X and Y)
+    const uv = filterColor.texCoord;
+
+    // Canvas texture
+	  const canvasTexture = filterColor.canvasContent;
+	  
+    // Amount of color displacement
+    const offsetX = (0.5 - mouseX / width) * 0.5;
+	  const offsetY = (0.5 - mouseY / height) * 0.5;
+
+    const r = getTexture(
+      canvasTexture, 
+      uv + [offsetX, 0]
+    ).r;
+    const g = getTexture(
+      canvasTexture, 
+      uv
+    ).g;
+    const b = getTexture(
+      canvasTexture, 
+      uv + [offsetX, offsetY]
+    ).b + 0.2;
+
+    const imgEffect = [r, g, b, 1];
+
+    filterColor.set(imgEffect);
+
+    filterColor.end();
+  } 
+
+  function colorPrimitive() {
+    const time = millis() * 0.001;
+
+    // Image texture
+    const imgTexture = uniformTexture(img);
+
+    // p5.strands hook 
+    // connects p5.js with GLSL
+    pixelInputs.begin();
+
+    // Coordinates of rendered space 
+    // (X and Y)
+    const uv = pixelInputs.texCoord;
+    
+    // Amount of color displacement
+    const offsetX = sin(time) * 0.5;
+    const offsetY = cos(time) * 0.5;
+
+    const r = getTexture(
+      imgTexture, 
+      uv + [offsetX, 0]
+    ).r;
+    const g = getTexture(
+      imgTexture, 
+      uv
+    ).g;
+    const b = getTexture(
+      imgTexture, 
+      uv + [offsetX, offsetY]
+    ).b;
+
+    const imgEffect = [r, g, b, 1];
+
+    pixelInputs.color = imgEffect;
+
+    pixelInputs.end();
+  }
+
+  function draw() {
+    // Add image to canvas
+    image(
+      img, 
+      width/-2, 
+      height/-2, 
+      width, 
+      height
+    );
+
+    // Apply color shader in canvas
+    filter(shaderCanvas);
+
+    push();
+
+    // Apply color shader in 3D primitive
+    shader(shaderPrimitive);
+
+    // Rotate 3D primitive
+    const anim = millis() * 0.00015;
+    rotateY(anim);
+
+    stroke(120);
+    box(120);
+
+    pop();
+  }
+`} />
+
+</Column>
+
+<Column>
+
+#### sketch with GLSL
+<EditableSketch code={`
+  let img;
+  let shaderCanvas;
+  let shaderPrimitive;
+
+  async function setup() {
+    createCanvas(300, 300, WEBGL);
+    pixelDensity(1);
+
+    // Image by Mont fotografias
+    // https://www.pexels.com/photo/white-and-purple-cloud-2948636/
+    img = await loadImage(
+      'mont-photo-low.jpg'
+    );
+
+    // Custom shaders using GLSL
+    shaderCanvas = createShader(
+      vertex, fragmentCanvas
+    );
+    shaderPrimitive = createShader(
+      vertex, fragmentPrimitive
+    );
+  }
+
+  let vertex = \`
+// GLSL
+precision highp float;
+
+attribute vec2 aTexCoord;
+attribute vec3 aPosition;
+
+uniform mat4 uModelViewMatrix;
+uniform mat4 uProjectionMatrix;
+
+varying vec2 uv;
+
+void main() {
+  uv = aTexCoord;
+
+  gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
+}
+\`;
+
+  let fragmentCanvas = \`
+// GLSL
+precision highp float;
+
+uniform float u_mouseX;
+uniform float u_mouseY;
+uniform vec2 u_resolution;
+
+// Canvas texture
+uniform sampler2D u_texture;
+
+// Coordinates of rendered space 
+// (X and Y)
+varying vec2 uv;
+
+void main() {
+  // Amount of color displacement
+  float offsetX = (0.5 - u_mouseX / u_resolution.x) * 0.5;
+  float offsetY = (0.5 - u_mouseY / u_resolution.y) * 0.5;
+
+  float r = texture2D(
+    u_texture,
+    uv + vec2(offsetX, 0.0)
+  ).r;
+
+  float g = texture2D(
+    u_texture,
+    uv
+  ).g;
+
+  float b = texture2D(
+    u_texture,
+    uv + vec2(offsetX, offsetY)
+  ).b + 0.2;
+
+  vec3 color = vec3(r, g, b);
+
+  gl_FragColor = vec4(color, 1.0);
+}
+\`;
+
+  let fragmentPrimitive = \`
+// GLSL
+precision highp float;
+
+uniform float u_time;
+
+// Image texture
+uniform sampler2D u_texture;
+
+// Coordinates of rendered space 
+// (X and Y)
+varying vec2 uv;
+
+void main() {
+  // Amount of color displacement
+  float offsetX = sin(u_time * 6.5) * 0.5;
+  float offsetY = cos(u_time * 6.5) * 0.5;
+
+  float r = texture2D(
+    u_texture,
+    uv + vec2(offsetX, 0.0)
+  ).r;
+
+  float g = texture2D(
+    u_texture,
+    uv
+  ).g;
+
+  float b = texture2D(
+    u_texture,
+    uv + vec2(offsetX, offsetY)
+  ).b;
+
+  vec3 color = vec3(r, g, b);
+
+  gl_FragColor = vec4(color, 1.0);
+}
+\`;
+
+  function draw() {
+    const time = millis() * 0.00015;
+
+    // Add image to canvas
+    image(
+      img, 
+      width/-2, 
+      height/-2, 
+      width, 
+      height
+    );
+
+    // Apply color shader in canvas
+    filter(shaderCanvas);
+
+    // Setup uniforms for
+    // canvas fragment shader
+    shaderCanvas.setUniform(
+      'u_mouseX', mouseX
+    );
+    shaderCanvas.setUniform(
+      'u_mouseY', mouseY
+    );
+    shaderCanvas.setUniform(
+      'u_resolution', [width, height]
+    );
+    shaderCanvas.setUniform(
+      'u_texture', img
+    );
+
+    // Setup uniforms for
+    // primitive fragment shader
+    shaderPrimitive.setUniform(
+      'u_time', time
+    );
+    shaderPrimitive.setUniform(
+      'u_texture', img
+    );
+
+    // Apply color shader in 3D primitive
+    shader(shaderPrimitive);
+
+    // Rotate 3D primitive
+    rotateY(time);
+
+    stroke(120);
+    box(120);
+  }
+`} />
+
+</Column>
+</Columns>
\ No newline at end of file