2d:null 2e:["$","title",null,{"children":"Gradient Descent in 3D (three.js) | Martin C. Arnold | Observable"}] 33:T49a,function step(x_guess, y_guess, lr, amplitudes) { const alpha = 0.8; let optimalReached = false; let v_x = 0; let v_y = 0; // Clear any existing interval before starting a new one if (mutable intervalId) { clearInterval(mutable intervalId); } mutable intervalId = setInterval(() => { const grad = df(x_guess, y_guess, amplitudes); // Update velocities v_x = alpha * v_x + lr * grad.dx; v_y = alpha * v_y + lr * grad.dy; // Update positions x_guess += v_x; y_guess += v_y; optimalReached = Math.abs(grad.dx) <= 0.0001 && Math.abs(grad.dy) <= 0.0001 && Math.abs(v_x) <= 0.0001 && Math.abs(v_y) <= 0.0001; // Update point position in the 3D space point.position.set(x_guess, y_guess, f(x_guess, y_guess, amplitudes)); if (optimalReached | Math.abs(x_guess) > 4 | Math.abs(y_guess) > 4 ) { clearInterval(mutable intervalId); mutable intervalId = null; console.log("Optimal point reached"); console.log(f(x_guess, y_guess, amplitudes)); } }, 33); // Loop interval set to 33 milliseconds }34:T5db,{ // Add lights const ambientLight = new THREE.AmbientLight(0x404040); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(5, 5, 5).normalize(); scene.add(directionalLight); // Add axes helper const axesHelper = new THREE.AxesHelper(5); axesHelper.material = new THREE.LineBasicMaterial({ color: 0x000000 }); scene.add(axesHelper); // Add labels const loader = new FL.FontLoader(); loader.load("https://threejs.org/examples/fonts/helvetiker_regular.typeface.json", function (font) { const xLabelGeometry = new TG.TextGeometry("x", { font: font, size: 0.2, depth: 0.01, }); const yLabelGeometry = new TG.TextGeometry("y", { font: font, size: 0.2, depth: 0.01, }); const zLabelGeometry = new TG.TextGeometry("f(x,y)", { font: font, size: 0.2, depth: 0.01, }); const labelMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 }); const xLabel = new THREE.Mesh(xLabelGeometry, labelMaterial); xLabel.position.set(5, 0, 0); xLabel.rotateX(Math.PI / 2); scene.add(xLabel); const yLabel = new THREE.Mesh(yLabelGeometry, labelMaterial); yLabel.position.set(0, 5, 0); yLabel.rotateX(Math.PI / 2); yLabel.rotateY(Math.PI * 1.5); scene.add(yLabel); const zLabel = new THREE.Mesh(zLabelGeometry, labelMaterial); zLabel.position.set(0, 0, 5); scene.add(zLabel); }); }35:[{"id":"6a3685399c18fdaf4d9651431cabff0f22f0bc0cf2d0a7ff7867ba233b6243c33c2f789e919fc55124e8aeb67b1defb890966b6559de176a71eaa0bbde1b22a8","href":"https://static.observableusercontent.com/files/6a3685399c18fdaf4d9651431cabff0f22f0bc0cf2d0a7ff7867ba233b6243c33c2f789e919fc55124e8aeb67b1defb890966b6559de176a71eaa0bbde1b22a8","name":"DALLEgradientdescent.webp","type":"image/webp","lastModified":1718104108528.308,"size":934550}] 31:{"id":"b4c6e146fc40fbb0","slug":"gradient-descent-in-3d-three-js","title":"Gradient Descent in 3D (three.js)","thumbnail":"bcba9c64a3e2b132bf6258308c274db87ad0c2c5fb58b12289d2755015a6cd1d","access_level":"public","create_time":"$D2024-05-20T12:32:59.897Z","update_time":"$D2024-12-20T12:27:12.348Z","view_time":null,"first_public_time":"$D2024-11-04T21:44:51.531Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a15f09cdacc76604","login":"mca91","name":"Martin C. Arnold","avatar_url":"https://avatars-next.observableusercontent.com/32a29503786d2aa1a44c308c128c4358cc9b14b88b44d07021d13aec19546bd4","tier":"starter_2024"},"version":871,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"904bd4d0c1146834","login":"mca91","name":"Martin C. Arnold","avatar_url":"https://avatars-next.observableusercontent.com/32a29503786d2aa1a44c308c128c4358cc9b14b88b44d07021d13aec19546bd4","tier":null}],"members":[{"type":"individual","id":"904bd4d0c1146834","login":"mca91","name":"Martin C. Arnold","avatar_url":"https://avatars-next.observableusercontent.com/32a29503786d2aa1a44c308c128c4358cc9b14b88b44d07021d13aec19546bd4","tier":null,"role":"editor"},{"type":"team","id":"a15f09cdacc76604","login":"mca91","name":"Martin C. Arnold","avatar_url":"https://avatars-next.observableusercontent.com/32a29503786d2aa1a44c308c128c4358cc9b14b88b44d07021d13aec19546bd4","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Gradient Descent in 3D (three.js)","cells":[{"id":0,"value":"# Gradient Descent in 3D (three.js)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":857,"value":"html`

\n ${await FileAttachment(\"DALLEgradientdescent.webp\").image({\n style: \"border-radius: 5%; box-shadow: 8px 8px 8px;\",\n width: 350,\n title: \"A DALL-E showing a scientist performing gradient descent\"\n })}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":869,"value":"### It may take a few second for the graphic to load!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"renderer = {\n const renderer = new THREE.WebGLRenderer({antialias: true});\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n \n const controls = new OC.OrbitControls(camera, renderer.domElement);\n //controls.addEventListener(\"change\", () => renderer.render(scene, camera));\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n\n{\n while (true) {\n renderer.render(scene, camera);\n yield renderer.domElement;\n } \n}\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"viewof restart = Inputs.button(\"(Re)Start Animation\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":836,"value":"viewof gridinit = Inputs.toggle({label: \"Grid search initialization?\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"value":"viewof themin = Inputs.range([-2, 2], {label: \"Point 1\", step: .01, value: -2})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":788,"value":"viewof themin2 = Inputs.range([-2, 2], {label: \"Point 2\", step: .01, value: -1.2})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"viewof themin3 = Inputs.range([-2, 2], {label: \"Point 3\", step: .01, value: -1.2})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"viewof themin4 = Inputs.range([-2, 2], {label: \"Point 4\", step: .01, value: -1.2})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":817,"value":"viewof themin5 = Inputs.range([-2, 2], {label: \"Point 5\", step: .01, value: -1.2})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"viewof themin6 = Inputs.range([-2, 2], {label: \"Point 6\", step: .01, value: -1.2})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"mutable intervalId = null;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"viewof restart.addEventListener(\"click\", () => {\n if(gridinit) {\n step(startingPoint.x, startingPoint.y, .05, amplitudes); \n } else {\n step(0, 0, .05, amplitudes);\n }\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"height = 650;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0xffffff);\n scene.rotateX(-Math.PI / 2);\n scene.rotateZ(-Math.PI / 2);\n return scene;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"camera = {\n const fov = 85;\n const aspect = width / height;\n const near = 1;\n const far = 1000;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far); \n camera.position.set(5, 5, 5);\n return camera;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"FL = import('https://unpkg.com/three@0.164.1/examples/jsm/loaders/FontLoader.js?module')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"TG = import('https://unpkg.com/three@0.164.1/examples/jsm/geometries/TextGeometry.js?module')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"OC = import('https://unpkg.com/three@0.164.1/examples/jsm/controls/OrbitControls.js?module')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"THREE = import('https://unpkg.com/three@0.164.1/build/three.module.js?module')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"mutable amplitudes = [themin, themin2, themin3, themin4, themin5, themin6]; // Adjusted for other quadrants","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"function f(x, y, amps) {\n const means = [\n { x: 1, y: 2 }, // Global minimum\n { x: 2.5, y: 2 }, // Local minimum\n { x: -.5, y: -1 }, // Additional point\n { x: -1, y: 3 }, // Additional point\n { x: 2, y: -2 }, // Additional point\n { x: -2.5, y: -3 } // Additional point\n ];\n \n const sigmas = [1.4, 1.4, 1.4, 1.4, 1.4, 1.4];\n \n let z = 2; // Constant offset to make the function positive\n \n for (let i = 0; i < means.length; i++) {\n const mean = means[i];\n const sigma = sigmas[i];\n const A = amps[i];\n \n z += A * Math.exp(-((x - mean.x) * (x - mean.x) + (y - mean.y) * (y - mean.y)) / (2 * sigma * sigma));\n }\n \n return z;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"function df(x, y, amps) {\n const means = [\n { x: 1, y: 2 },\n { x: 2.5, y: 2 },\n { x: -.5, y: -1 },\n { x: -1, y: 3 },\n { x: 2, y: -2 },\n { x: -3, y: -3 }\n ];\n \n const sigmas = [1.4, 1.4, 1.4, 1.4, 1.4, 1.4];\n \n let dx = 0;\n let dy = 0;\n \n for (let i = 0; i < means.length; i++) {\n const mean = means[i];\n const sigma = sigmas[i];\n const A = amps[i];\n \n const factor = A * Math.exp(-((x - mean.x) * (x - mean.x) + (y - mean.y) * (y - mean.y)) / (2 * sigma * sigma)) / (sigma * sigma);\n \n dx += (x - mean.x) * factor;\n dy += (y - mean.y) * factor;\n }\n \n return { dx: dx, dy: dy };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"scene.add(point);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"point = {// Add point for current iteration value of objective function\n const pointGeometry = new THREE.SphereGeometry(0.05, 32, 32);\n const pointMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });\n const point = new THREE.Mesh(pointGeometry, pointMaterial);\n return point;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"point_extrem = {\n const pointGeometry = new THREE.SphereGeometry(0.05, 32, 32);\n const pointMaterial = new THREE.MeshBasicMaterial({ color: \"blue\" });\n const point = new THREE.Mesh(pointGeometry, pointMaterial);\n return point;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"function generateSurface() {\n // Add surface\n const geometry = new THREE.PlaneGeometry(8, 8, 60, 60);\n \n const material = new THREE.MeshStandardMaterial({\n color: 0x156289,\n side: THREE.DoubleSide,\n flatShading: true,\n wireframe: true,\n });\n \n // Access the position attribute of the geometry\n const positionAttribute = geometry.getAttribute('position');\n const vertex = new THREE.Vector3();\n \n for (let i = 0; i < positionAttribute.count; i++) {\n vertex.fromBufferAttribute(positionAttribute, i);\n const x = vertex.x;\n const y = vertex.y;\n const z = f(x, y, amplitudes); \n vertex.setZ(z);\n positionAttribute.setXYZ(i, vertex.x, vertex.y, vertex.z);\n }\n \n // Update the position attribute and compute vertex normals\n positionAttribute.needsUpdate = true;\n geometry.computeVertexNormals();\n \n const surface = new THREE.Mesh(geometry, material);\n surface.name = \"thesurface\";\n return surface;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"scene.children","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"{ \n // Iterate over the children of the scene\n scene.children.forEach(child => {\n // Check if the child has a geometry and if it is a PlaneGeometry\n if (child.name == \"thesurface\") {\n scene.remove(child);\n child.geometry.dispose();\n child.material.dispose();\n }\n });\n\n scene.add(generateSurface())\n if(gridinit) {\n point.position.set(startingPoint.x, startingPoint.y, f(startingPoint.x, startingPoint.y, amplitudes)); \n } else {\n point.position.set(0, 0, f(0, 0, amplitudes));\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":840,"value":"startingPoint = {\n // Function to find the best starting point on a uniform grid\nfunction StartingPoint(f, range, gridSize) {\n let bestPoint = null;\n let bestValue = Infinity;\n const stepSize = (range[1] - range[0]) / (gridSize - 1);\n\n for (let i = 0; i < gridSize; i++) {\n for (let j = 0; j < gridSize; j++) {\n let x = range[0] + i * stepSize;\n let y = range[0] + j * stepSize;\n\n let value = f(x, y, amplitudes);\n\n if (value < bestValue) {\n bestValue = value;\n bestPoint = { x: x, y: y};\n }\n }\n }\n\n return bestPoint;\n}\n\nconst range = [-4, 4]; // Define the range for each variable\nconst gridSize = 5; // gridSize x gridSize points\n\nconst bestStartingPoint = StartingPoint(f, range, gridSize);\n return bestStartingPoint;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"