{"id":1799,"date":"2013-01-26T05:56:16","date_gmt":"2013-01-26T05:56:16","guid":{"rendered":"http:\/\/tedcoe.com\/math\/?page_id=172"},"modified":"2024-07-24T15:54:13","modified_gmt":"2024-07-24T22:54:13","slug":"slope-fields","status":"publish","type":"page","link":"https:\/\/www.tedcoe.com\/math\/calculus\/slope-fields\/","title":{"rendered":"Slope Fields"},"content":{"rendered":"

This is totally interactive. Use the slider to increase the number of steps. Grab the point and move it to explore the impact of changing initial values.
<\/iframe><\/p>\n<p>From Claude Sonnet 3.5:<\/p>\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Differential Equation Slope Field Plotter<\/title>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/mathjs\/9.4.4\/math.js\"><\/script>\n <style>\n body { font-family: Arial, sans-serif; margin: 20px; }\n canvas { border: 1px solid #ddd; cursor: crosshair; }\n input, button { margin: 5px 0; }\n #coordinates { margin-top: 10px; }\n <\/style>\n<\/head>\n<body>\n <h1>Differential Equation Slope Field Plotter<\/h1>\n <div>\n <label for=\"function\">Enter differential equation (use x and y):<\/label>\n <input type=\"text\" id=\"function\" value=\"x+y\" size=\"30\">\n <\/div>\n <div>\n <label for=\"step-size\">Step size:<\/label>\n <input type=\"number\" id=\"step-size\" value=\"0.1\" step=\"0.01\" min=\"0.01\" max=\"1\">\n <\/div>\n <button onclick=\"updatePlot()\">Plot<\/button>\n <div id=\"coordinates\">Starting point: (0, 0)<\/div>\n <br>\n <canvas id=\"plotCanvas\" width=\"500\" height=\"500\"><\/canvas>\n\n <script>\n const canvas = document.getElementById('plotCanvas');\n const ctx = canvas.getContext('2d');\n const width = canvas.width;\n const height = canvas.height;\n let startX = 0;\n let startY = 0;\n const scale = 25; \/\/ pixels per unit\n let solutionCurvePoints = [];\n let hoverPoint = null;\n\n function evaluateSlope(func, x, y) {\n return math.evaluate(func, { x: x, y: y });\n }\n\n function drawSlope(x, y, slope) {\n const length = 10;\n const dx = length \/ Math.sqrt(1 + slope * slope);\n const dy = slope * dx;\n ctx.beginPath();\n ctx.moveTo(x - dx, y + dy);\n ctx.lineTo(x + dx, y - dy);\n ctx.strokeStyle = '#4682B4'; \/\/ Steel Blue, a darker shade of blue\n ctx.stroke();\n }\n\n function drawSlopeField(func) {\n const step = scale;\n for (let x = 0; x <= width; x += step) {\n for (let y = 0; y <= height; y += step) {\n const xCoord = (x - width \/ 2) \/ scale;\n const yCoord = (height \/ 2 - y) \/ scale;\n const slope = evaluateSlope(func, xCoord, yCoord);\n drawSlope(x, y, slope);\n }\n }\n }\n\n function drawSolutionCurve(func, x0, y0, h) {\n ctx.beginPath();\n ctx.moveTo(x0 * scale + width \/ 2, height \/ 2 - y0 * scale);\n \n let x = x0;\n let y = y0;\n solutionCurvePoints = [{x: x, y: y}];\n \n for (let i = 0; i < 1000; i++) {\n \/\/ 4th-order Runge-Kutta method\n let k1 = evaluateSlope(func, x, y);\n let k2 = evaluateSlope(func, x + h\/2, y + h\/2 * k1);\n let k3 = evaluateSlope(func, x + h\/2, y + h\/2 * k2);\n let k4 = evaluateSlope(func, x + h, y + h * k3);\n \n x += h;\n y += h * (k1 + 2*k2 + 2*k3 + k4) \/ 6;\n \n const canvasX = x * scale + width \/ 2;\n const canvasY = height \/ 2 - y * scale;\n \n if (canvasX < 0 || canvasX > width || canvasY < 0 || canvasY > height) break;\n \n ctx.lineTo(canvasX, canvasY);\n solutionCurvePoints.push({x: x, y: y});\n }\n \n ctx.strokeStyle = 'red';\n ctx.stroke();\n }\n\n function drawStartPoint() {\n ctx.beginPath();\n ctx.arc(startX * scale + width \/ 2, height \/ 2 - startY * scale, 5, 0, 2 * Math.PI);\n ctx.fillStyle = 'red';\n ctx.fill();\n }\n\n function drawAxes() {\n ctx.beginPath();\n ctx.moveTo(0, height \/ 2);\n ctx.lineTo(width, height \/ 2);\n ctx.moveTo(width \/ 2, 0);\n ctx.lineTo(width \/ 2, height);\n ctx.strokeStyle = 'black';\n ctx.stroke();\n }\n\n function drawAxisLabels() {\n ctx.font = '12px Arial';\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n ctx.fillStyle = 'black';\n for (let i = -10; i <= 10; i++) {\n if (i !== 0) {\n \/\/ X-axis\n ctx.fillText(i, i * scale + width \/ 2, height \/ 2 + 15);\n ctx.beginPath();\n ctx.moveTo(i * scale + width \/ 2, height \/ 2 - 5);\n ctx.lineTo(i * scale + width \/ 2, height \/ 2 + 5);\n ctx.stroke();\n\n \/\/ Y-axis\n ctx.fillText(i, width \/ 2 - 20, height \/ 2 - i * scale);\n ctx.beginPath();\n ctx.moveTo(width \/ 2 - 5, height \/ 2 - i * scale);\n ctx.lineTo(width \/ 2 + 5, height \/ 2 - i * scale);\n ctx.stroke();\n }\n }\n }\n\n function drawHoverCoordinates() {\n if (hoverPoint) {\n const canvasX = hoverPoint.x * scale + width \/ 2;\n const canvasY = height \/ 2 - hoverPoint.y * scale;\n \n ctx.font = '12px Arial';\n ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';\n ctx.fillRect(canvasX + 10, canvasY - 20, 100, 20);\n ctx.fillStyle = 'white';\n ctx.fillText(`(${hoverPoint.x.toFixed(2)}, ${hoverPoint.y.toFixed(2)})`, canvasX + 60, canvasY - 10);\n }\n }\n\n function updatePlot() {\n ctx.clearRect(0, 0, width, height);\n \n const funcString = document.getElementById('function').value;\n const h = parseFloat(document.getElementById('step-size').value);\n \n drawSlopeField(funcString);\n drawAxes();\n drawSolutionCurve(funcString, startX, startY, h);\n drawStartPoint();\n drawAxisLabels();\n drawHoverCoordinates();\n }\n\n function updateCoordinates() {\n document.getElementById('coordinates').textContent = `Starting point: (${startX.toFixed(2)}, ${startY.toFixed(2)})`;\n }\n\n canvas.addEventListener('mousedown', function(event) {\n const rect = canvas.getBoundingClientRect();\n startX = (event.clientX - rect.left - width \/ 2) \/ scale;\n startY = (height \/ 2 - (event.clientY - rect.top)) \/ scale;\n updateCoordinates();\n updatePlot();\n });\n\n canvas.addEventListener('mousemove', function(event) {\n const rect = canvas.getBoundingClientRect();\n const mouseX = (event.clientX - rect.left - width \/ 2) \/ scale;\n const mouseY = (height \/ 2 - (event.clientY - rect.top)) \/ scale;\n\n if (event.buttons === 1) {\n startX = mouseX;\n startY = mouseY;\n updateCoordinates();\n updatePlot();\n }\n\n \/\/ Check if mouse is near the solution curve\n let nearestPoint = null;\n let minDistance = Infinity;\n\n for (let point of solutionCurvePoints) {\n const distance = Math.sqrt((point.x - mouseX)**2 + (point.y - mouseY)**2);\n if (distance < minDistance) {\n minDistance = distance;\n nearestPoint = point;\n }\n }\n\n if (minDistance < 0.2) { \/\/ Adjust this threshold as needed\n hoverPoint = nearestPoint;\n } else {\n hoverPoint = null;\n }\n\n updatePlot();\n });\n\n updatePlot();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>This is totally interactive. Use the slider to increase the number of steps. Grab the point and move it to explore the impact of changing initial values. From Claude Sonnet 3.5: Differential Equation Slope Field Plotter Differential Equation Slope Field Plotter Enter differential equation (use x and y): Step size: Plot Starting point: (0, 0)<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":15,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"class_list":["post-1799","page","type-page","status-publish","hentry"],"featured_image_src":null,"_links":{"self":[{"href":"https:\/\/www.tedcoe.com\/math\/wp-json\/wp\/v2\/pages\/1799","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tedcoe.com\/math\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.tedcoe.com\/math\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.tedcoe.com\/math\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tedcoe.com\/math\/wp-json\/wp\/v2\/comments?post=1799"}],"version-history":[{"count":1,"href":"https:\/\/www.tedcoe.com\/math\/wp-json\/wp\/v2\/pages\/1799\/revisions"}],"predecessor-version":[{"id":3137,"href":"https:\/\/www.tedcoe.com\/math\/wp-json\/wp\/v2\/pages\/1799\/revisions\/3137"}],"up":[{"embeddable":true,"href":"https:\/\/www.tedcoe.com\/math\/wp-json\/wp\/v2\/pages\/15"}],"wp:attachment":[{"href":"https:\/\/www.tedcoe.com\/math\/wp-json\/wp\/v2\/media?parent=1799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}