Made code blocks editable in the first Shaders Case Study post

_posts/2020-10-19-shaders-case-study-pokemon-battles.md

@@ -51,6 +51,7 @@ void main() {
   }
 }
 ```
+{: spellcheck="false" contenteditable="true"}
 
 {% include canvas-playground.html %}
 
@@ -71,6 +72,7 @@ void main() {
   }
 }
 ```
+{: spellcheck="false" contenteditable="true"}
 
 {% include canvas-playground.html %}
 
@@ -90,6 +92,7 @@ void main() {
   }
 }
 ```
+{: spellcheck="false" contenteditable="true"}
 
 {% include canvas-playground.html %}
 
@@ -113,6 +116,7 @@ void main() {
   gl_FragColor = mix(color, white, cutoff);
 }
 ```
+{: spellcheck="false" contenteditable="true"}
 
 {% include canvas-playground.html %}
 
@@ -136,6 +140,7 @@ void main() {
   gl_FragColor = color;
 }
 ```
+{: spellcheck="false" contenteditable="true"}
 
 {% include canvas-playground.html %}
 
@@ -176,6 +181,7 @@ void main() {
   }
 }
 ```
+{: spellcheck="false" contenteditable="true"}
 
 {% include canvas-playground.html %}
 
@@ -195,21 +201,24 @@ float maxRadius = sqrt(0.5 * 0.5 + 0.5 * 0.5);
 void main() {
   float distanceMiddle = length(uv - 0.5);
   float radiusCutoff = (1.0 - cutoff) * maxRadius;
-  if (distanceMiddle >= radiusCutoff) {
-    gl_FragColor = vec4(0, 0, 0, 1);
-  } else {
+  if (distanceMiddle < radiusCutoff) {
     gl_FragColor = texture2D(texture, uv);
+  } else {
+    gl_FragColor = vec4(0, 0, 0, 1);
   }
 }
 ```
+{: spellcheck="false" contenteditable="true"}
 
 {% include canvas-playground.html %}
 
 Here each pixel's distance to the center (or "radius") is measured and compared against the `cutoff`. The `cutoff` travels from the maximum distance possible (one of the corners) to `0`.
 
 First, this maximum distance to the center is precomputed so that it is not repeated for every pixel. `- 0.5` centers the image in clip space. `length` calculates the distance of each pixel to the center. Finally, that distance is compared with the `cutoff`.
 
-If the condition was `dist < cutoff` the black circle would expand from the middle of the screen. By changing the condition to `dist >= 1 - cutoff`, the black circle collapses into the middle.
+By doing `dist < (1.0 - cutoff) * maxRadius` the black circle collapses into the middle. If the condition was `dist > cutoff * maxRadius` the black circle would expand from the middle of the screen.
+
+All code blocks are editable. You can modify each example to see what happens. Give it a try!
 </div>
 
 <hr />

assets/js/shaders-case-study-pokemon-battles-part-2.js

@@ -92,7 +92,7 @@ function createDrawCommand(regl, frag, texture, gradient) {
   });
 }
 
-async function loadImage(imageUrl) {
+function loadImage(imageUrl) {
   var image = new Image();
   var imgLoadPromise = onload2promise(image);
   image.src = imageUrl;

assets/js/shaders-case-study-pokemon-battles.js

@@ -2,7 +2,9 @@ window.addEventListener('load', function onLoad() {
   Array.from(document.querySelectorAll('.scene')).forEach(setupScene);
 });
 
-async function setupScene(sceneEl) {
+var drawFns = [];
+
+async function setupScene(sceneEl, index) {
   var canvas = sceneEl.querySelector('canvas');
 
   if (!window.WebGLRenderingContext) {
@@ -17,20 +19,23 @@ async function setupScene(sceneEl) {
   var lastCutoff;
   var imagePromise = loadImage(sceneEl.getAttribute('data-texture-src'));
   var slider = new Slider(sceneEl.querySelector('.slider-container'));
-  var fragMain = sceneEl.querySelector('code').textContent;
-  var frag = createFragmentShader(fragMain);
   var maxSliderValue = parseFloat(slider.max);
   var gl = canvas.getContext('webgl');
   var regl = createREGL({ gl });
-
   var image = await imagePromise;
   var texture = regl.texture(image);
-  var drawScreen = createDrawCommand(regl, frag, texture);
+
+  var fragMainCodeEl = sceneEl.querySelector('[contenteditable="true"]');
+  fragMainCodeEl.addEventListener('blur', function onLoad() {
+    drawFns[index] = createDrawCommand(regl, texture, fragMainCodeEl.textContent);
+  });
+  drawFns[index] = createDrawCommand(regl, texture, fragMainCodeEl.textContent);
 
   regl.frame(() => {
     cutoff = slider.value;
     if (cutoff !== lastCutoff) {
       lastCutoff = cutoff;
+      var drawScreen = drawFns[index];
       drawScreen({ cutoff: cutoff / maxSliderValue });
     }
   });
@@ -46,7 +51,8 @@ function createFragmentShader(main) {
   `;
 }
 
-function createDrawCommand(regl, frag, texture) {
+function createDrawCommand(regl, texture, fragMain) {
+  var frag = createFragmentShader(fragMain);
   return regl({
     frag,
     vert: `
@@ -88,7 +94,7 @@ function createDrawCommand(regl, frag, texture) {
   });
 }
 
-async function loadImage(imageUrl) {
+function loadImage(imageUrl) {
   var image = new Image();
   var imgLoadPromise = onload2promise(image);
   image.src = imageUrl;