diff --git a/src/content/examples/en/11_3D/07_Filter_Shader_p5strands/code.js b/src/content/examples/en/16_Shaders/01_Filter_Shader_p5strands/code.js similarity index 100% rename from src/content/examples/en/11_3D/07_Filter_Shader_p5strands/code.js rename to src/content/examples/en/16_Shaders/01_Filter_Shader_p5strands/code.js diff --git a/src/content/examples/en/11_3D/07_Filter_Shader_p5strands/description.mdx b/src/content/examples/en/16_Shaders/01_Filter_Shader_p5strands/description.mdx similarity index 93% rename from src/content/examples/en/11_3D/07_Filter_Shader_p5strands/description.mdx rename to src/content/examples/en/16_Shaders/01_Filter_Shader_p5strands/description.mdx index 90417c456b..8fc33b7e1c 100644 --- a/src/content/examples/en/11_3D/07_Filter_Shader_p5strands/description.mdx +++ b/src/content/examples/en/16_Shaders/01_Filter_Shader_p5strands/description.mdx @@ -20,7 +20,7 @@ remix: URL: https://dorinetipo.vercel.app/ code: - label: 2026 p5.strands translation - URL: https://github.com/processing/p5.js-website/tree/main/src/content/examples/en/11_3D/07_Filter_Shader_p5strands + URL: https://github.com/processing/p5.js-website/tree/main/src/content/examples/en/16_Shaders/01_Filter_Shader_p5strands - collectivelyAttributedSince: 2026 --- diff --git a/src/content/examples/en/11_3D/04_Filter_Shader/code.js b/src/content/examples/en/16_Shaders/02_Filter_Shader/code.js similarity index 100% rename from src/content/examples/en/11_3D/04_Filter_Shader/code.js rename to src/content/examples/en/16_Shaders/02_Filter_Shader/code.js diff --git a/src/content/examples/en/11_3D/04_Filter_Shader/description.mdx b/src/content/examples/en/16_Shaders/02_Filter_Shader/description.mdx similarity index 87% rename from src/content/examples/en/11_3D/04_Filter_Shader/description.mdx rename to src/content/examples/en/16_Shaders/02_Filter_Shader/description.mdx index 435e427865..705ba85cb8 100644 --- a/src/content/examples/en/11_3D/04_Filter_Shader/description.mdx +++ b/src/content/examples/en/16_Shaders/02_Filter_Shader/description.mdx @@ -2,7 +2,7 @@ featuredImage: "../../../images/featured/11_3D-04_Filter_Shader-thumbnail.png" featuredImageAlt: A screenshot of a video of a city crosswalk, with offset colors. title: Filter Shader (GLSL) -oneLineDescription: Manipulate imagery with a shader. +oneLineDescription: Manipulate imagery with a shader, using GLSL. remix: - description: Creared by diff --git a/src/content/examples/en/11_3D/08_Adjusting_Positions_With_A_Shader_p5strands/code.js b/src/content/examples/en/16_Shaders/03_Adjusting_Positions_With_A_Shader_p5strands/code.js similarity index 100% rename from src/content/examples/en/11_3D/08_Adjusting_Positions_With_A_Shader_p5strands/code.js rename to src/content/examples/en/16_Shaders/03_Adjusting_Positions_With_A_Shader_p5strands/code.js diff --git a/src/content/examples/en/11_3D/08_Adjusting_Positions_With_A_Shader_p5strands/description.mdx b/src/content/examples/en/16_Shaders/03_Adjusting_Positions_With_A_Shader_p5strands/description.mdx similarity index 92% rename from src/content/examples/en/11_3D/08_Adjusting_Positions_With_A_Shader_p5strands/description.mdx rename to src/content/examples/en/16_Shaders/03_Adjusting_Positions_With_A_Shader_p5strands/description.mdx index b5c4906012..e7a24689fa 100644 --- a/src/content/examples/en/11_3D/08_Adjusting_Positions_With_A_Shader_p5strands/description.mdx +++ b/src/content/examples/en/16_Shaders/03_Adjusting_Positions_With_A_Shader_p5strands/description.mdx @@ -20,7 +20,7 @@ remix: URL: https://dorinetipo.vercel.app/ code: - label: 2026 p5.strands translation - URL: https://github.com/processing/p5.js-website/tree/main/src/content/examples/en/11_3D/08_Adjusting_Positions_With_A_Shader_p5strands + URL: https://github.com/processing/p5.js-website/tree/main/src/content/examples/en/16_Shaders/03_Adjusting_Positions_With_A_Shader_p5strands - collectivelyAttributedSince: 2026 --- diff --git a/src/content/examples/en/11_3D/05_Adjusting_Positions_With_A_Shader/code.js b/src/content/examples/en/16_Shaders/04_Adjusting_Positions_With_A_Shader/code.js similarity index 100% rename from src/content/examples/en/11_3D/05_Adjusting_Positions_With_A_Shader/code.js rename to src/content/examples/en/16_Shaders/04_Adjusting_Positions_With_A_Shader/code.js diff --git a/src/content/examples/en/11_3D/05_Adjusting_Positions_With_A_Shader/description.mdx b/src/content/examples/en/16_Shaders/04_Adjusting_Positions_With_A_Shader/description.mdx similarity index 87% rename from src/content/examples/en/11_3D/05_Adjusting_Positions_With_A_Shader/description.mdx rename to src/content/examples/en/16_Shaders/04_Adjusting_Positions_With_A_Shader/description.mdx index 6ab784355e..b1fc8a2eca 100644 --- a/src/content/examples/en/11_3D/05_Adjusting_Positions_With_A_Shader/description.mdx +++ b/src/content/examples/en/16_Shaders/04_Adjusting_Positions_With_A_Shader/description.mdx @@ -2,7 +2,7 @@ featuredImage: "../../../images/featured/11_3D-05_Adjusting_Positions_With_A_Shader-thumbnail.png" featuredImageAlt: A red-to-blue waving ribbon on a white background. title: Adjusting Positions with a Shader (GLSL) -oneLineDescription: Use a shader to adjust shape vertices. +oneLineDescription: Use a shader to adjust shape vertices, using GLSL. remix: - description: Created by diff --git a/src/content/examples/en/16_Shaders/05_Strands_Gradient/code.js b/src/content/examples/en/16_Shaders/05_Strands_Gradient/code.js new file mode 100644 index 0000000000..f51d7a24ca --- /dev/null +++ b/src/content/examples/en/16_Shaders/05_Strands_Gradient/code.js @@ -0,0 +1,40 @@ +let gradientShader; +function setup() { + createCanvas(400, 400, WEBGL); + gradientShader = buildFilterShader(gradient); +} + +// This function is p5.strands code: it's like JavaScript, but +// where you can write vectors as arrays and use math oeprators on them +function gradient() { + // filterColor is an example of a *hook* in a strands shader, which + // lets you control different parts of the shader's job + filterColor.begin(); + // Texture coordinates like filterColor.texCoord go from [0,0] in the + // top left to [1,1] in the bottom right + let start = [0.1, 0.1]; + // Convert mouse coords to texture coordinate range by dividing + // by canvas size + let end = [mouseX, mouseY] / [width, height]; + let startToPixel = length(filterColor.texCoord - start); + let startToEnd = length(end - start); + let gradientProgress = map( + startToPixel, + 0, + startToEnd, + 0, + 1, + true + ); + let outColor = lerpColor( + color('#F00'), + color('#0214f3'), + gradientProgress + ); + filterColor.set(outColor); + filterColor.end(); +} + +function draw() { + filter(gradientShader); +} diff --git a/src/content/examples/en/16_Shaders/05_Strands_Gradient/description.mdx b/src/content/examples/en/16_Shaders/05_Strands_Gradient/description.mdx new file mode 100644 index 0000000000..fbfb8d3b8a --- /dev/null +++ b/src/content/examples/en/16_Shaders/05_Strands_Gradient/description.mdx @@ -0,0 +1,19 @@ +--- +featuredImage: "../../../images/featured/11_3D_09_gradient.png" +featuredImageAlt: A gradient from red to blue. +title: Gradient (p5.strands) +oneLineDescription: Draw a radial gradient between two points in p5.strands. +featured: false + +remix: + - description: Created by + attribution: + - name: Dave Pagurek + URL: https://www.davepagurek.com/ + code: + - label: Code + URL: https://github.com/processing/p5.js-website/tree/main/src/content/examples/en/16_Shaders/05_Strands_Gradient + - collectivelyAttributedSince: 2026 +--- + +This demonstrates a radial gradient, `lerp`ing between two colors, based on two points. It runs in a full-screen filter shader. diff --git a/src/content/examples/en/16_Shaders/06_Dithered_Strands_Gradient/code.js b/src/content/examples/en/16_Shaders/06_Dithered_Strands_Gradient/code.js new file mode 100644 index 0000000000..1f404c1d82 --- /dev/null +++ b/src/content/examples/en/16_Shaders/06_Dithered_Strands_Gradient/code.js @@ -0,0 +1,43 @@ +let ditherGradientShader; +function setup() { + createCanvas(400, 400, WEBGL); + ditherGradientShader = buildFilterShader(ditherGradient); +} + +// This function is p5.strands code: it's like JavaScript, but +// where you can write vectors as arrays and use math oeprators on them +function ditherGradient() { + // filterColor is an example of a *hook* in a strands shader, which + // lets you control different parts of the shader's job + filterColor.begin(); + randomSeed(0); // Comment out for a flickery output + // Or use the one below to use a low frame rate flicker + // randomSeed(floor(frameCount / 5)) + + // Texture coordinates like filterColor.texCoord go from [0,0] in the + // top left to [1,1] in the bottom right + let start = [0.1, 0.1]; + // Convert mouse coords to texture coordinate range by dividing + // by canvas size + let end = [mouseX, mouseY] / [width, height]; + let startToPixel = length(filterColor.texCoord - start); + let startToEnd = length(end - start); + let gradientProgress = map( + startToPixel, + 0, + startToEnd, + 0, + 1, + true + ); + let outColor = color('#F00'); + if (gradientProgress + random(-0.3, 0.3) > 0.5) { + outColor = color('#0214f3'); + } + filterColor.set(outColor); + filterColor.end(); +} + +function draw() { + filter(ditherGradientShader); +} diff --git a/src/content/examples/en/16_Shaders/06_Dithered_Strands_Gradient/description.mdx b/src/content/examples/en/16_Shaders/06_Dithered_Strands_Gradient/description.mdx new file mode 100644 index 0000000000..f82e9bc532 --- /dev/null +++ b/src/content/examples/en/16_Shaders/06_Dithered_Strands_Gradient/description.mdx @@ -0,0 +1,19 @@ +--- +featuredImage: "../../../images/featured/11_3D_10_dithered_gradient.png" +featuredImageAlt: A dithered gradient from red to blue. +title: Dithered Gradient (p5.strands) +oneLineDescription: Draw a dithered radial gradient between two points in p5.strands. +featured: false + +remix: + - description: Created by + attribution: + - name: Dave Pagurek + URL: https://www.davepagurek.com/ + code: + - label: Code + URL: https://github.com/processing/p5.js-website/tree/main/src/content/examples/en/16_Shaders/06_Dithered_Strands_Gradient + - collectivelyAttributedSince: 2026 +--- + +This demonstrates a radial gradient based on two points, but where it picks one color or the other without mixing between them. It runs in a full-screen filter shader. diff --git a/src/content/examples/en/16_Shaders/07_Framebuffer_Blur_p5strands/code.js b/src/content/examples/en/16_Shaders/07_Framebuffer_Blur_p5strands/code.js new file mode 100644 index 0000000000..b67b6d5563 --- /dev/null +++ b/src/content/examples/en/16_Shaders/07_Framebuffer_Blur_p5strands/code.js @@ -0,0 +1,102 @@ +let layer; +let blur; + +function setup() { + createCanvas(windowWidth, windowHeight, WEBGL); + angleMode(DEGREES); + noStroke(); + + // Create framebuffer and shader objects + layer = createFramebuffer(); + blur = buildFilterShader(blurCallback); + + describe( + 'A row of five spheres rotating in front of the camera. The closest and farthest spheres from the camera appear blurred.' + ); +} + +// This function is p5.strands code: it's like JavaScript, but +// where you can write vectors as arrays and use math oeprators on them +function blurCallback() { + // In draw, the depth info is passed in with setUniform + let depth = uniformTexture('depth'); + + // A helper function to tell us how blurry something a given + // distance away should be + function howBlurry(d) { + // Blur more the farther away we go from the + // focal point at depth=0.909 + return min(abs(d - 0.909) * 200, 4); + } + + function maxBlurDistance(blurriness) { + return blurriness * 0.01; + } + + // filterColor is an example of a *hook* in a strands shader, which + // lets you control different parts of the shader's job + filterColor.begin(); + let coord = filterColor.texCoord; + let color = getTexture(filterColor.canvasContent, coord); + let samples = 1; + let centerDepth = getTexture(depth, coord).r; + let blurriness = howBlurry(centerDepth); + + for (let i = 0; i < 20; i++) { + // Sample nearby pixels in a spiral going out from the + // current pixel + let angle = i; + let distance = (i / 20) * maxBlurDistance(blurriness); + let offset = [cos(angle), sin(angle)] * distance; + + // How close is the object at the nearby pixel? + let sampleDepth = getTexture(depth, coord + offset).r; + + // How far should its blur reach? + let sampleBlurDistance = maxBlurDistance(getBlurriness(sampleDepth)); + + // If it's in front of the current pixel, or its blur overlaps + // with the current pixel, add its color to the average + if (sampleDepth >= centerDepth || sampleBlurDistance >= distance) { + color += getTexture(filterColor.canvasContent, coord + offset); + samples++; + } + } + + filterColor.set(color / samples); + filterColor.end(); +} + +function draw() { + // Start drawing to framebuffer + layer.begin(); + background(255); + ambientLight(100); + directionalLight(255, 255, 255, -1, 1, -1); + ambientMaterial(255, 0, 0); + fill(255, 255, 100); + specularMaterial(255); + shininess(150); + + // Rotate 1° per frame + rotateY(frameCount); + + // Place 5 spheres across canvas at equal distance + let sphereDistance = width / 4; + for (let x = -width / 2; x <= width / 2; x += sphereDistance) { + push(); + translate(x, 0, 0); + sphere(width / 16); + pop(); + } + + // Stop drawing to framebuffer + layer.end(); + + // Draw the framebuffer to the canvas, then blur the canvas using + // the framebuffer's depth information + imageMode(CENTER); + image(layer, 0, 0); + blur.setUniform('depth', layer.depth); + filter(blur); +} diff --git a/src/content/examples/en/16_Shaders/07_Framebuffer_Blur_p5strands/description.mdx b/src/content/examples/en/16_Shaders/07_Framebuffer_Blur_p5strands/description.mdx new file mode 100644 index 0000000000..2749b7e91a --- /dev/null +++ b/src/content/examples/en/16_Shaders/07_Framebuffer_Blur_p5strands/description.mdx @@ -0,0 +1,43 @@ +--- +featuredImage: "../../../images/featured/11_3D-06_Framebuffer_Blur-thumbnail.png" +featuredImageAlt: A row of five orange spheres. The closest and farthest spheres from the camera appear blurred. +title: Depth Blur (p5.strands) +oneLineDescription: Simulate a camera's depth of field, with a shader written in p5.strands. + +remix: + - description: Created by + attribution: + - name: Dave Pagurek + URL: https://www.davepagurek.com/ + code: + - label: pre-2023 example + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/20_3D/12_framebuffer_blur.js + + - description: Revised by + attribution: + - name: Caleb Foss + URL: https://github.com/calebfoss + code: + - label: 2023 code + URL: https://github.com/processing/p5.js-example/tree/main/examples/11_3D/06_Framebuffer_Blur + + - description: Remixed by + attribution: + - name: Dave Pagurek + URL: https://www.davepagurek.com/ + code: + - label: 2026 p5.strands translation + URL: https://github.com/processing/p5.js-website/tree/main/src/content/examples/en/16_Shaders/07_Framebuffer_Blur_p5strands + + - collectivelyAttributedSince: 2026 +--- + +The +shader +in this example uses depth information from a +p5.Framebuffer +to apply a blur. On a real camera, objects appear blurred if they +are closer or farther than the lens's focus. This simulates that +effect. First, the sketch renders five spheres to the framebuffer. +Then, it renders the framebuffer to the canvas and applies the blur +shader, which is written in p5.strands. diff --git a/src/content/examples/en/11_3D/06_Framebuffer_Blur/code.js b/src/content/examples/en/16_Shaders/08_Framebuffer_Blur/code.js similarity index 100% rename from src/content/examples/en/11_3D/06_Framebuffer_Blur/code.js rename to src/content/examples/en/16_Shaders/08_Framebuffer_Blur/code.js diff --git a/src/content/examples/en/11_3D/06_Framebuffer_Blur/description.mdx b/src/content/examples/en/16_Shaders/08_Framebuffer_Blur/description.mdx similarity index 81% rename from src/content/examples/en/11_3D/06_Framebuffer_Blur/description.mdx rename to src/content/examples/en/16_Shaders/08_Framebuffer_Blur/description.mdx index 95730d3ab8..10ae41e21e 100644 --- a/src/content/examples/en/11_3D/06_Framebuffer_Blur/description.mdx +++ b/src/content/examples/en/16_Shaders/08_Framebuffer_Blur/description.mdx @@ -1,17 +1,23 @@ --- featuredImage: "../../../images/featured/11_3D-06_Framebuffer_Blur-thumbnail.png" featuredImageAlt: A row of five orange spheres. The closest and farthest spheres from the camera appear blurred. -title: Framebuffer Blur -oneLineDescription: Simulate a camera's depth of field. +title: Depth Blur (GLSL) +oneLineDescription: Simulate a camera's depth of field, written in GLSL. remix: + - description: Created by + attribution: + - name: Dave Pagurek + URL: https://www.davepagurek.com/ + code: + - label: pre-2023 example + URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/20_3D/12_framebuffer_blur.js + - description: Revised by attribution: - name: Caleb Foss URL: https://github.com/calebfoss code: - - label: pre-2023 example - URL: https://github.com/processing/p5.js-website-legacy/blob/main/src/data/examples/en/20_3D/12_framebuffer_blur.js - label: 2023 code URL: https://github.com/processing/p5.js-example/tree/main/examples/11_3D/06_Framebuffer_Blur --- diff --git a/src/content/examples/en/16_Shaders/09_Strands_Variable_Blur/code.js b/src/content/examples/en/16_Shaders/09_Strands_Variable_Blur/code.js new file mode 100644 index 0000000000..aa551bea22 --- /dev/null +++ b/src/content/examples/en/16_Shaders/09_Strands_Variable_Blur/code.js @@ -0,0 +1,38 @@ +let video; +let blurShader; +function setup() { + createCanvas(400, 400, WEBGL); + video = createVideo( + '/assets/DiagonalCrosswalkYongeDundas.mp4' + ); + video.volume(0); + video.hide(); + video.loop(); + blurShader = buildFilterShader(myBlur); +} + +// This function is p5.strands code: it's like JavaScript, but +// where you can write vectors as arrays and use math oeprators on them +function myBlur() { + // filterColor is an example of a *hook* in a strands shader, which + // lets you control different parts of the shader's job + filterColor.begin(); + // The range of texture coordinates is [0,0] in the top left to [1,1] in + // the bottom right. These are the units shaders use to tell you where you + // are on the canvas for filter shaders, or on a shape for a material shader. + let coord = filterColor.texCoord; + let distFromCenter = length(coord - [0.5, 0.5]); + // Map distance from center to blurriness, also in texture coordinate units. + // Since the whole canvas is only 1 unit across, a max blurriness of 0.1 is + // actually pretty blurry (10% of the canvas size!) + let blurAmount = map(distFromCenter, 0.2, 1, 0, 0.1, true); + coord += blurAmount * [random(-1, 1), random(-1, 1)]; + filterColor.set(getTexture(filterColor.canvasContent, coord)); + filterColor.end(); +} + +function draw() { + imageMode(CENTER); + image(video, 0, 0, width, height, 0, 0, video.width, video.height, COVER); + filter(blurShader); +} diff --git a/src/content/examples/en/16_Shaders/09_Strands_Variable_Blur/description.mdx b/src/content/examples/en/16_Shaders/09_Strands_Variable_Blur/description.mdx new file mode 100644 index 0000000000..021d27e276 --- /dev/null +++ b/src/content/examples/en/16_Shaders/09_Strands_Variable_Blur/description.mdx @@ -0,0 +1,19 @@ +--- +featuredImage: "../../../images/featured/11_3D_11_variable_blur.jpg" +featuredImageAlt: A city scene blurred around the edges of the frame +title: Variable Blur (p5.strands) +oneLineDescription: Create a blur shader with a different amount of blur at different parts of the canvas. +featured: false + +remix: + - description: Created by + attribution: + - name: Dave Pagurek + URL: https://www.davepagurek.com/ + code: + - label: Code + URL: https://github.com/processing/p5.js-website/tree/main/src/content/examples/en/16_Shaders/09_Strands_Variable_Blur + - collectivelyAttributedSince: 2026 +--- + +This demonstrates a custom blur shader in p5.strands. The blur is accomplished by adding a random offset to the coordinate at which the texture is sampled. By using only one sample, the blur ends up noisy. Try averaging a few samples to get a smoother blur! diff --git a/src/content/examples/es/11_3D/07_Filter_Shader_p5strands/description.mdx b/src/content/examples/es/16_Shaders/01_Filter_Shader_p5strands/description.mdx similarity index 100% rename from src/content/examples/es/11_3D/07_Filter_Shader_p5strands/description.mdx rename to src/content/examples/es/16_Shaders/01_Filter_Shader_p5strands/description.mdx diff --git a/src/content/examples/es/11_3D/04_Filter_Shader/description.mdx b/src/content/examples/es/16_Shaders/02_Filter_Shader/description.mdx similarity index 100% rename from src/content/examples/es/11_3D/04_Filter_Shader/description.mdx rename to src/content/examples/es/16_Shaders/02_Filter_Shader/description.mdx diff --git a/src/content/examples/es/11_3D/08_Adjusting_Positions_With_A_Shader_p5strands/description.mdx b/src/content/examples/es/16_Shaders/03_Adjusting_Positions_With_A_Shader_p5strands/description.mdx similarity index 100% rename from src/content/examples/es/11_3D/08_Adjusting_Positions_With_A_Shader_p5strands/description.mdx rename to src/content/examples/es/16_Shaders/03_Adjusting_Positions_With_A_Shader_p5strands/description.mdx diff --git a/src/content/examples/es/11_3D/05_Adjusting_Positions_With_A_Shader/description.mdx b/src/content/examples/es/16_Shaders/04_Adjusting_Positions_With_A_Shader/description.mdx similarity index 100% rename from src/content/examples/es/11_3D/05_Adjusting_Positions_With_A_Shader/description.mdx rename to src/content/examples/es/16_Shaders/04_Adjusting_Positions_With_A_Shader/description.mdx diff --git a/src/content/examples/es/11_3D/06_Framebuffer_Blur/description.mdx b/src/content/examples/es/16_Shaders/08_Framebuffer_Blur/description.mdx similarity index 100% rename from src/content/examples/es/11_3D/06_Framebuffer_Blur/description.mdx rename to src/content/examples/es/16_Shaders/08_Framebuffer_Blur/description.mdx diff --git a/src/content/examples/hi/11_3D/07_Filter_Shader_p5strands/description.mdx b/src/content/examples/hi/16_Shaders/01_Filter_Shader_p5strands/description.mdx similarity index 100% rename from src/content/examples/hi/11_3D/07_Filter_Shader_p5strands/description.mdx rename to src/content/examples/hi/16_Shaders/01_Filter_Shader_p5strands/description.mdx diff --git a/src/content/examples/hi/11_3D/04_Filter_Shader/description.mdx b/src/content/examples/hi/16_Shaders/02_Filter_Shader/description.mdx similarity index 100% rename from src/content/examples/hi/11_3D/04_Filter_Shader/description.mdx rename to src/content/examples/hi/16_Shaders/02_Filter_Shader/description.mdx diff --git a/src/content/examples/hi/11_3D/08_Adjusting_Positions_With_A_Shader_p5strands/description.mdx b/src/content/examples/hi/16_Shaders/03_Adjusting_Positions_With_A_Shader_p5strands/description.mdx similarity index 100% rename from src/content/examples/hi/11_3D/08_Adjusting_Positions_With_A_Shader_p5strands/description.mdx rename to src/content/examples/hi/16_Shaders/03_Adjusting_Positions_With_A_Shader_p5strands/description.mdx diff --git a/src/content/examples/hi/11_3D/05_Adjusting_Positions_With_A_Shader/description.mdx b/src/content/examples/hi/16_Shaders/04_Adjusting_Positions_With_A_Shader/description.mdx similarity index 100% rename from src/content/examples/hi/11_3D/05_Adjusting_Positions_With_A_Shader/description.mdx rename to src/content/examples/hi/16_Shaders/04_Adjusting_Positions_With_A_Shader/description.mdx diff --git a/src/content/examples/hi/11_3D/06_Framebuffer_Blur/description.mdx b/src/content/examples/hi/16_Shaders/08_Framebuffer_Blur/description.mdx similarity index 100% rename from src/content/examples/hi/11_3D/06_Framebuffer_Blur/description.mdx rename to src/content/examples/hi/16_Shaders/08_Framebuffer_Blur/description.mdx diff --git a/src/content/examples/images/featured/11_3D_09_gradient.png b/src/content/examples/images/featured/11_3D_09_gradient.png new file mode 100644 index 0000000000..e44a129e58 Binary files /dev/null and b/src/content/examples/images/featured/11_3D_09_gradient.png differ diff --git a/src/content/examples/images/featured/11_3D_10_dithered_gradient.png b/src/content/examples/images/featured/11_3D_10_dithered_gradient.png new file mode 100644 index 0000000000..43c1653ad3 Binary files /dev/null and b/src/content/examples/images/featured/11_3D_10_dithered_gradient.png differ diff --git a/src/content/examples/images/featured/11_3D_11_variable_blur.jpg b/src/content/examples/images/featured/11_3D_11_variable_blur.jpg new file mode 100644 index 0000000000..6c2a2ae5e2 Binary files /dev/null and b/src/content/examples/images/featured/11_3D_11_variable_blur.jpg differ diff --git a/src/content/examples/ko/11_3D/07_Filter_Shader_p5strands/description.mdx b/src/content/examples/ko/16_Shaders/01_Filter_Shader_p5strands/description.mdx similarity index 100% rename from src/content/examples/ko/11_3D/07_Filter_Shader_p5strands/description.mdx rename to src/content/examples/ko/16_Shaders/01_Filter_Shader_p5strands/description.mdx diff --git a/src/content/examples/ko/11_3D/04_Filter_Shader/description.mdx b/src/content/examples/ko/16_Shaders/02_Filter_Shader/description.mdx similarity index 100% rename from src/content/examples/ko/11_3D/04_Filter_Shader/description.mdx rename to src/content/examples/ko/16_Shaders/02_Filter_Shader/description.mdx diff --git a/src/content/examples/ko/11_3D/08_Adjusting_Positions_With_A_Shader_p5strands/description.mdx b/src/content/examples/ko/16_Shaders/03_Adjusting_Positions_With_A_Shader_p5strands/description.mdx similarity index 100% rename from src/content/examples/ko/11_3D/08_Adjusting_Positions_With_A_Shader_p5strands/description.mdx rename to src/content/examples/ko/16_Shaders/03_Adjusting_Positions_With_A_Shader_p5strands/description.mdx diff --git a/src/content/examples/ko/11_3D/05_Adjusting_Positions_With_A_Shader/description.mdx b/src/content/examples/ko/16_Shaders/04_Adjusting_Positions_With_A_Shader/description.mdx similarity index 100% rename from src/content/examples/ko/11_3D/05_Adjusting_Positions_With_A_Shader/description.mdx rename to src/content/examples/ko/16_Shaders/04_Adjusting_Positions_With_A_Shader/description.mdx diff --git a/src/content/examples/ko/11_3D/06_Framebuffer_Blur/description.mdx b/src/content/examples/ko/16_Shaders/08_Framebuffer_Blur/description.mdx similarity index 100% rename from src/content/examples/ko/11_3D/06_Framebuffer_Blur/description.mdx rename to src/content/examples/ko/16_Shaders/08_Framebuffer_Blur/description.mdx diff --git a/src/content/examples/zh-Hans/11_3D/07_Filter_Shader_p5strands/description.mdx b/src/content/examples/zh-Hans/16_Shaders/01_Filter_Shader_p5strands/description.mdx similarity index 100% rename from src/content/examples/zh-Hans/11_3D/07_Filter_Shader_p5strands/description.mdx rename to src/content/examples/zh-Hans/16_Shaders/01_Filter_Shader_p5strands/description.mdx diff --git a/src/content/examples/zh-Hans/11_3D/04_Filter_Shader/description.mdx b/src/content/examples/zh-Hans/16_Shaders/02_Filter_Shader/description.mdx similarity index 100% rename from src/content/examples/zh-Hans/11_3D/04_Filter_Shader/description.mdx rename to src/content/examples/zh-Hans/16_Shaders/02_Filter_Shader/description.mdx diff --git a/src/content/examples/zh-Hans/11_3D/08_Adjusting_Positions_With_A_Shader_p5strands/description.mdx b/src/content/examples/zh-Hans/16_Shaders/03_Adjusting_Positions_With_A_Shader_p5strands/description.mdx similarity index 100% rename from src/content/examples/zh-Hans/11_3D/08_Adjusting_Positions_With_A_Shader_p5strands/description.mdx rename to src/content/examples/zh-Hans/16_Shaders/03_Adjusting_Positions_With_A_Shader_p5strands/description.mdx diff --git a/src/content/examples/zh-Hans/11_3D/05_Adjusting_Positions_With_A_Shader/description.mdx b/src/content/examples/zh-Hans/16_Shaders/04_Adjusting_Positions_With_A_Shader/description.mdx similarity index 100% rename from src/content/examples/zh-Hans/11_3D/05_Adjusting_Positions_With_A_Shader/description.mdx rename to src/content/examples/zh-Hans/16_Shaders/04_Adjusting_Positions_With_A_Shader/description.mdx diff --git a/src/content/examples/zh-Hans/11_3D/06_Framebuffer_Blur/description.mdx b/src/content/examples/zh-Hans/16_Shaders/08_Framebuffer_Blur/description.mdx similarity index 100% rename from src/content/examples/zh-Hans/11_3D/06_Framebuffer_Blur/description.mdx rename to src/content/examples/zh-Hans/16_Shaders/08_Framebuffer_Blur/description.mdx