Tangent Line Approximator

{"name":"Tangent Line Approximator","description":"Explore the world of calculus through interactive visualization! Graph mathematical functions, approximate tangent lines from secants, and zoom in to understand the concepts in a whole new way.","photo":null,"view_count":10,"fork_count":1,"expires_at":null,"created_at":"2024-06-27T21:07:32.990436Z","updated_at":"2024-06-27T21:07:32.990437Z","user_id":60,"status":"PRIVATE","parent_id":null,"id":2078,"user":{"photo":null,"email":"jacob@jippity.pro","recess_id":"34481dd2-2bdf-14f9-99da-131de59dc90f","created_at":"2024-02-26T18:31:54.473216Z","reset_token":null,"stripe_customer_id":"cus_RPbovGjLueUufv","seats":100,"username":"2718281828459045","id":60,"password_hash":"$2b$12$ZpelZmCi5wEA/VuXSdOJXeylQ6vOUks0sfwQxIKdjwBAeamaWIMOW","updated_at":"2024-02-26T18:31:54.473218Z","reset_token_expiry":null,"subscription_status":"active"},"code":{"script.js":"let func;\nlet offsetX = 0;\nlet offsetY = 0;\nlet startX, startY;\nlet isDragging = false;\nlet points = []; // Array to store the points\n\nfunction setup() {\n createCanvas(800, 600);\n background(220);\n drawGrid();\n drawAxes();\n}\n\ndocument.getElementById('renderButton').addEventListener('click', () => {\n const functionInput = document.getElementById('functionInput').value;\n func = math.compile(functionInput);\n renderFunction(functionInput);\n points = []; // Clear points when rendering a new function\n drawGraph();\n});\n\nfunction renderFunction(func) {\n const math = `$$y = ${func}$$`;\n document.getElementById('latexOutput').innerHTML = math;\n MathJax.typeset();\n}\n\n\nfunction drawGraph() {\n background(220);\n drawGrid();\n drawAxes();\n stroke(0);\n noFill();\n beginShape();\n for (let x = -width; x < width * 2; x += 1) {\n let y = func.evaluate({ x: (x - width / 2 - offsetX) / 50 }) * -50 + height / 2 + offsetY;\n vertex(x, y);\n }\n endShape();\n\n // Draw points with different colors\n if (points.length > 0) {\n stroke('yellow');\n fill('yellow');\n ellipse(points[0].x + offsetX, points[0].y + offsetY, 8, 8);\n }\n if (points.length > 1) {\n stroke('red');\n fill('red');\n ellipse(points[1].x + offsetX, points[1].y + offsetY, 8, 8);\n }\n\n let slopeText = \"\";\n\n // Draw secant line if there are two points\n if (points.length == 2) {\n stroke('blue');\n line(points[0].x + offsetX, points[0].y + offsetY, points[1].x + offsetX, points[1].y + offsetY);\n\n // Calculate the slope\n let deltaY = (points[1].y - points[0].y) / -50; // Adjust for canvas scale\n let deltaX = (points[1].x - points[0].x) / 50; // Adjust for canvas scale\n let slope = deltaY / deltaX;\n\n // Create LaTeX string for slope\n slopeText = `\\\\frac{${deltaY.toFixed(2)}}{${deltaX.toFixed(2)}} = ${slope.toFixed(2)}`;\n }\n\n // Render the slope in LaTeX format\n document.getElementById('slopeOutput').innerHTML = `$$${slopeText}$$`;\n MathJax.typeset();\n}\n\nfunction drawGrid() {\n stroke(200); // Light grey color for grid lines\n for (let x = -width; x < width * 2; x += 50) {\n line(x + offsetX, 0, x + offsetX, height);\n }\n for (let y = -height; y < height * 2; y += 50) {\n line(0, y + offsetY, width, y + offsetY);\n }\n}\n\nfunction drawAxes() {\n stroke(0); // Black color for axes\n line(width / 2 + offsetX, 0, width / 2 + offsetX, height); // y-axis\n line(0, height / 2 + offsetY, width, height / 2 + offsetY); // x-axis\n}\n\nfunction mousePressed() {\n startX = mouseX;\n startY = mouseY;\n isDragging = true;\n\n // Adjust mouse coordinates by the current offsets\n let adjustedMouseX = mouseX - offsetX;\n let adjustedMouseY = mouseY - offsetY;\n\n // Find the nearest point on the function\n let closestPoint = null;\n let minDist = 10; // Maximum distance to snap\n\n for (let x = 0; x < width; x += 1) {\n let graphX = (x - width / 2) / 50;\n let graphY = func.evaluate({ x: graphX }) * -50 + height / 2;\n let d = dist(adjustedMouseX, adjustedMouseY, x, graphY);\n\n if (d < minDist) {\n minDist = d;\n closestPoint = { x: x, y: graphY };\n }\n }\n\n // Add or update point if close enough to the function\n if (closestPoint) {\n if (points.length < 1) {\n points.push(closestPoint);\n } else if (points.length === 1) {\n points.push(closestPoint);\n } else {\n points[1] = closestPoint;\n }\n drawGraph();\n }\n}\n\n\nfunction mouseDragged() {\n if (isDragging) {\n offsetX += mouseX - startX;\n offsetY += mouseY - startY;\n startX = mouseX;\n startY = mouseY;\n drawGraph();\n }\n}\n\nfunction mouseReleased() {\n isDragging = false;\n}\n\n","style.css":"","index.html":"\n\n\n\n \n \n Tangent Line Approximator\n \n \n \n \n \n\n\n\n

\n Enter a function. y = \n \n \n \n

\n \n\n\n"},"chat_history":[],"assets":[],"messages_sent":36,"comments":[{"content":"👍","id":707,"user_id":14,"user":{"photo":null,"email":"howardthomasclaire@gmail.com","recess_id":"7c8ecf78-a75e-15ec-b11f-b7d4661ff838","created_at":"2023-12-12T21:13:30.547316Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"lemonsarecool","id":14,"password_hash":"$2b$12$fiGY3tGGyHz6d8u/bsXIY.eGGFMpgKjFPhgdsoTZQ4DTnLohYNhFi","updated_at":"2023-12-12T21:13:30.547318Z","reset_token_expiry":null,"subscription_status":null},"project_id":2078,"created_at":"2024-06-27T22:12:20.169886Z","updated_at":"2024-06-27T22:12:20.169888Z"}],"steps":[]}