Work in progress for bayesian optimization sample

Stefan Fenn · Stefan Fenn · commit dbb2974af368 · 2020-04-21T00:00:33.000+02:00
diff --git a/baysianOptimization.html b/baysianOptimization.html
@@ -0,0 +1,97 @@
+<style>
+    .canvasContainer {
+        position: relative;
+    }
+
+    .canvasContainer canvas {
+        position: absolute;
+        left: 0;
+        top: 0;
+    }
+</style>
+
+<div class="canvasContainer">
+    <canvas id="grid" width="600px" height="600px"></canvas>
+    <canvas id="fn2" width="600px" height="600px"></canvas>
+    <canvas id="observations" width="600px" height="600px"></canvas>
+</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/6.6.4/math.min.js"></script>
+<script src="graphplot.js" type="module"></script>
+<script type="module">
+    import {drawFunction, drawGrid, drawPoints} from './graphplot.js';
+
+    const canvas = document.getElementById("grid");
+    const config = {
+        xMin: -0.2,
+        xMax: 3.4,
+        yMin: -0.2,
+        yMax: 4.2,
+        ctx: canvas.getContext("2d")
+    };
+
+    const canvasF2 = document.getElementById("fn2");
+    const configF2 = Object.assign({}, config);
+    configF2.ctx = canvasF2.getContext("2d");
+
+    const canvasObs = document.getElementById("observations");
+    const configObs = Object.assign({}, config);
+    configObs.ctx = canvasObs.getContext("2d");
+
+    drawGrid(config);
+    const func = x => {
+        if ((x < 0) || (x > Math.PI)) return 0;
+        let result = 0;
+        for (let i = 1; i <= 10; i++) {
+            result += Math.sin(x) * Math.pow(Math.sin(i * x * x / Math.PI), 20);
+        }
+        return result;
+    };
+    drawFunction(configF2, "#000000", func);
+
+    let observations = [0.9, 1.2, 1.5, 1.6, 2.1, 2.5, 2.8].map(x => [x, func(x)]);
+    drawPoints(
+        configObs,
+        "#0000FF",
+        observations
+    );
+
+    const kernel = function (x1, x2) {
+        let n = math.norm(math.subtract(x1, x2));
+        return math.exp(-0.5 * n * n);
+    }
+    console.log(kernel([1,2],[3,5]));
+
+    /*
+    "def K(X0, X1, kernel=sq_exp_kernel):\n",
+    "    K = []\n",
+    "    for x0 in X0:\n",
+    "        k_x_x = []\n",
+    "        for x1 in X1:\n",
+    "            k_x_x.append(kernel(x0, x1))\n",
+    "        K.append(k_x_x)\n",
+    "    if len(K) == 1:\n",
+    "        K = K[0]\n",
+    "    return np.array(K)"
+
+     */
+
+    /*
+     "def posterior_Mean(X, X_new, sigma, y):\n",
+    "    X_new = [X_new]\n",
+    "    return np.dot(np.dot(K(X_new, X), np.linalg.inv(K(X, X)+ sigma*np.eye(len(X)))), np.array([y]).T).flatten()"
+     */
+</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;padding-top:620px">
+    <h3>Plot of function</h3>
+
+    <p>
+        \[ f(x) = \sum_{i=1}^{10}\sin(x)*\sin(\frac{i*x^2}{\pi})^{20} \]
+    </p>
+</div>
diff --git a/graphplot.js b/graphplot.js
@@ -136,6 +136,16 @@ export function drawFunction(c, strokeStyle, func) {
     c.ctx.stroke();
 }
 
+export function drawPoints(c, fillStyle, points) {
+    clear(c);
+    c.ctx.fillStyle = fillStyle;
+    for(let point of points){
+        c.ctx.beginPath();
+        c.ctx.arc(xCoordToPix(c,point[0]), yCoordToPix(c,point[1]), 5, 0, 2 * Math.PI, true);
+        c.ctx.fill();
+    }
+}
+
 export function getGradientVector(colorMapIndex, levels) {
     const gradientColors1 = {
         0.0: "rgb(51, 59, 126)",
