fixed plot bug. added new gradient

Stefan Fenn · Stefan Fenn · commit 0cf598753c87 · 2020-04-17T22:08:03.000+02:00
diff --git a/exampleFunction2d.html b/exampleFunction2d.html
@@ -49,6 +49,6 @@
     <h3>Plot of function</h3>
 
     <p>
-    \[ \frac{x^2}{10}\ \sin(x) + 0.4 + \frac{\sin(100 x)}{100} \]
+    \[ f(x) = \frac{x^2}{10}\ \sin(x) + 0.4 + \frac{\sin(100 x)}{100} \]
     </p>
 </div>
diff --git a/exampleFunction3d.html b/exampleFunction3d.html
@@ -37,6 +37,36 @@
     };
 
     drawGrid(config);
-    const gv = getGradientVector(0, 512);
-    draw3dFunction(configF3, -3.5, 3.5, 0.8, gv, func3);
-</script>
+    window.draw3dFunctionWithGradient = function(gradientIndex) {
+        console.log("draw3dFunctionWithGradient", gradientIndex);
+        const gv = getGradientVector(gradientIndex, 512);
+        draw3dFunction(configF3, -3.5, 3.5, 0.9, gv, func3);
+    };
+    window.draw3dFunctionWithGradient(0);
+</script>
+
+<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+<script id="MathJax-script" async
+        src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
+</script>
+
+<div style="width:600px;height:600px;padding-left:620px">
+    <select onchange="window.draw3dFunctionWithGradient(this.selectedIndex);">
+        <option value="0">Gradient 0</option>
+        <option value="1">Gradient 1</option>
+        <option value="2">Gradient 2</option>
+        <option value="3">Gradient 3</option>
+        <option value="4">Gradient 4</option>
+        <option value="5">Gradient 5</option>
+        <option value="6">Gradient 6</option>
+        <option value="7">Gradient 7</option>
+        <option value="8">Gradient 8</option>
+    </select>
+</div>
+
+<div style="width:600px;">
+    <h3>Plot of function</h3>
+    <p>
+        \[ f(x,y) = \sin(2 x) y + \cos(5 y) x \]
+    </p>
+</div>
diff --git a/graphplot.js b/graphplot.js
@@ -251,6 +251,16 @@ export function getGradientVector(colorMapIndex, levels) {
         0.66: "rgb(122, 76, 47)",
         1.0: "rgb(142, 143, 79)"
     };
+    const gradientColors9 = {
+        0:'#ff3800',
+        0.1429:'#ff6500',
+        0.2857:'#ffa54f',
+        0.4286:'#ffc78f',
+        0.5714:'#ffe1c6',
+        0.7143:'#fef9ff',
+        0.8571:'#c9d9ff',
+        1:'#9fbfff'
+    };
 
     const gradientColorList = [
         gradientColors1,
@@ -260,7 +270,8 @@ export function getGradientVector(colorMapIndex, levels) {
         gradientColors5,
         gradientColors6,
         gradientColors7,
-        gradientColors8
+        gradientColors8,
+        gradientColors9
     ];
 
     const gradientColors = gradientColorList[colorMapIndex];
@@ -319,7 +330,9 @@ export function draw3dFunction(c, zMin, zMax, alpha, gv, func) {
             data.data[index + 3] = a;
         }
         c.ctx.putImageData(data, 0, 0);
-        setTimeout(drawInTimeSlot);
+        if (w < c.ctx.canvas.width) {
+            drawInTimeSlot();
+        }
     };
 
     drawInTimeSlot();
