diff --git a/calc-backend/graph-gen/graph-deriv.py b/calc-backend/graph-gen/graph-deriv.py index 3dfa218..a484024 100644 --- a/calc-backend/graph-gen/graph-deriv.py +++ b/calc-backend/graph-gen/graph-deriv.py @@ -77,29 +77,29 @@ def derivative(func, x, h=1e-5): # Create a slider to control the animation. sliders = [dict( + active=0, currentvalue={"visible": False}, + ticklen=0, # Hides the line ticks (not enough alone) + len=1.0, + y=-0.05, steps=[ dict( method='animate', args=[ [frame.name], dict(mode='immediate', - frame=dict(duration=50, redraw=True), + frame=dict(duration=40, redraw=True), transition=dict(duration=0)) ], - label=str(int(round(float(frame.name)))) - if abs(float(frame.name) - round(float(frame.name))) < 1e-6 - else "" + label="", # Hides numbers ) for frame in frames ], - transition=dict(duration=0), - y=-0.05, - len=1.0 + tickcolor='rgba(0,0,0,0)', )] # Adjust padding and final layout settings. -pad = max(np.abs(np.min(f_vals)), np.abs(np.max(f_vals))) // 10 +pad = min(np.abs(np.min(f_vals)), np.abs(np.max(f_vals))) + (max(np.abs(np.min(f_vals)), np.abs(np.max(f_vals))) // 20) fig.update_layout( xaxis_title='x-axis', yaxis_title='y-axis', diff --git a/calc-backend/graph-gen/graph-limits.py b/calc-backend/graph-gen/graph-limits.py new file mode 100644 index 0000000..0d7a68b --- /dev/null +++ b/calc-backend/graph-gen/graph-limits.py @@ -0,0 +1,92 @@ +import plotly.graph_objects as go +import numpy as np + +# === USER DEFINES ONLY THESE TWO === +func = lambda x: x**3 # ← your function +limit_x = 0 # ← point to approach + +# === Slider & sampling settings (fixed) === +num_steps = 50 +dx = 1e-3 + +# === Estimate y(limit) and local slope to pick a sensible x‑window === +try: + y_limit = func(limit_x) + slope = abs(func(limit_x + dx) - func(limit_x - dx)) / (2*dx) +except: + y_limit = 0 + slope = 1 + +# domain_width based on function value & slope (at least 1, cap at 100) +domain_width = max(1, abs(y_limit), slope * 2) +domain_width = min(domain_width, 100) + +# === Sample curve around limit_x === +x_vals = np.linspace(limit_x - domain_width, + limit_x + domain_width, + 300) +y_vals = func(x_vals) + +# === Helper to get “approach” segments at step i === +x0, x1 = x_vals[0], x_vals[-1] +def segment(i): + t = i / (num_steps - 1) + left_x = np.interp(t, [0,1], [x0, limit_x]) + right_x = np.interp(t, [0,1], [x1, limit_x]) + left_mask = x_vals <= left_x + right_mask = x_vals >= right_x + return (x_vals[left_mask], y_vals[left_mask], + x_vals[right_mask], y_vals[right_mask]) + +# === Build figure === +fig = go.Figure() + +# full curve +fig.add_trace(go.Scatter( + x=x_vals, y=y_vals, + mode="lines", + line=dict(color="lightgray", width=2), + name="f(x)" +)) + +# approaching segments +xL0, yL0, xR0, yR0 = segment(0) +fig.add_trace(go.Scatter(x=xL0, y=yL0, mode="lines", + line=dict(color="black", width=4), + name="From Left")) +fig.add_trace(go.Scatter(x=xR0, y=yR0, mode="lines", + line=dict(color="#FFCC00", width=4), + name="From Right")) + +# limit‑point marker +fig.add_trace(go.Scatter( + x=[limit_x], y=[y_limit], + mode="markers+text", + marker=dict(color="red", size=10), + text=[f"Limit (x={limit_x})"], + textposition="top center", + showlegend=False +)) + +# slider steps +steps = [] +for i in range(num_steps): + xL, yL, xR, yR = segment(i) + steps.append(dict( + method="restyle", + args=[{"x": [xL.tolist(), xR.tolist()], + "y": [yL.tolist(), yR.tolist()]}, + [1, 2]], + label="" + )) + +fig.update_layout( + sliders=[dict(active=0, steps=steps, + currentvalue={"visible": False}, + pad={"t": 50}, ticklen=0)], + xaxis=dict(autorange=True, fixedrange=True, title="x-axis"), + yaxis=dict(autorange=True, fixedrange=True, title="y-axis"), + showlegend=True +) + +fig.show() diff --git a/calc-frontend/src/App/RoutesList.tsx b/calc-frontend/src/App/RoutesList.tsx index 81b467d..4676c9e 100644 --- a/calc-frontend/src/App/RoutesList.tsx +++ b/calc-frontend/src/App/RoutesList.tsx @@ -29,8 +29,6 @@ import EulerDeriv from "../components/Euler/EulerDeriv"; import EulerInt from "../components/Euler/EulerInt"; import ErrorPage from "../pages/ErrorPage"; -import LimitDef from "../components/Limits/LimitDef"; - import CustomInt from "../pages/CustomIntegral"; import CustomDeriv from "../pages/CustomDerivative"; @@ -68,8 +66,6 @@ const RoutesList = } /> } /> } /> - - } /> } /> diff --git a/calc-frontend/src/components/Cosine/CosineDeriv.tsx b/calc-frontend/src/components/Cosine/CosineDeriv.tsx index 5919c73..121da1a 100644 --- a/calc-frontend/src/components/Cosine/CosineDeriv.tsx +++ b/calc-frontend/src/components/Cosine/CosineDeriv.tsx @@ -1,37 +1,24 @@ import { useLayoutEffect, useRef } from "react"; +import CosineDerivGraph from "./CosineDerivGraph" function CosineDeriv() { - const heading = useRef(null); const container = useRef(null); useLayoutEffect(() =>{ //@ts-ignore let MQ = MathQuill.getInterface(2); - MQ.StaticMath(heading.current, { }) MQ.StaticMath(container.current, { }) }, []); return ( -
-
-

Derivative of y = cos(x)

-
- -
- - -

- The cosine function starts with a value of 1 and ends with a value of 1 on the - interval [0, \quad 2\pi] -

+ +
+
-
) } diff --git a/calc-frontend/src/components/Cosine/CosineDerivGraph.tsx b/calc-frontend/src/components/Cosine/CosineDerivGraph.tsx new file mode 100644 index 0000000..ba946f8 --- /dev/null +++ b/calc-frontend/src/components/Cosine/CosineDerivGraph.tsx @@ -0,0 +1,15 @@ +import { useLayoutEffect } from "react"; + +function CosineGraph() { + useLayoutEffect(() =>{ + + }, []); + + return ( +
+
+ ) + +} + +export default CosineGraph \ No newline at end of file diff --git a/calc-frontend/src/components/Cubic/CubicDeriv.tsx b/calc-frontend/src/components/Cubic/CubicDeriv.tsx index c1fb69b..234233d 100644 --- a/calc-frontend/src/components/Cubic/CubicDeriv.tsx +++ b/calc-frontend/src/components/Cubic/CubicDeriv.tsx @@ -1,35 +1,24 @@ import { useLayoutEffect, useRef } from "react"; +import CubicDerivGraph from "./CubicDerivGraph" function CubicDeriv() { - const heading = useRef(null); + const container = useRef(null); useLayoutEffect(() =>{ //@ts-ignore let MQ = MathQuill.getInterface(2); - - MQ.StaticMath(heading.current, { }) + MQ.StaticMath(container.current, { }) }, []); return ( -
-
-

Derivative of y = x^{3}

-
+ -
- - -

- The cubic function cubes each input value, raising it to the third power -

+
+
-
- ) } diff --git a/calc-frontend/src/components/Cubic/CubicDerivGraph.tsx b/calc-frontend/src/components/Cubic/CubicDerivGraph.tsx new file mode 100644 index 0000000..646b8a0 --- /dev/null +++ b/calc-frontend/src/components/Cubic/CubicDerivGraph.tsx @@ -0,0 +1,15 @@ +import { useLayoutEffect } from "react"; + +function CubicGraph() { + useLayoutEffect(() =>{ + + }, []); + + return ( +
+
+ ) + +} + +export default CubicGraph \ No newline at end of file diff --git a/calc-frontend/src/components/Euler/EulerDeriv.tsx b/calc-frontend/src/components/Euler/EulerDeriv.tsx index 147e859..877019e 100644 --- a/calc-frontend/src/components/Euler/EulerDeriv.tsx +++ b/calc-frontend/src/components/Euler/EulerDeriv.tsx @@ -1,44 +1,24 @@ import { useLayoutEffect, useRef } from "react"; +import EulerDerivGraph from "./EulerDerivGraph" -function EulerDeriv() -{ +function EulerDeriv() { - const heading = useRef(null); const container = useRef(null); - const con2 = useRef(null); - const con3 = useRef(null); useLayoutEffect(() =>{ //@ts-ignore let MQ = MathQuill.getInterface(2); - - MQ.StaticMath(heading.current, { }) MQ.StaticMath(container.current, { }) - MQ.StaticMath(con2.current, { }) - MQ.StaticMath(con3.current, { }) }, []); return ( -
-
-

Derivative of y = e^{x}

-
+ -
- - -

- The exponential function grows the fastest. It has a horizontal asymptote - at y = 0. - The e in e^{x} is - called Euler's number, and it is equal to 2.718... (the digits go on forever) -

+
+
- -
+ ) } diff --git a/calc-frontend/src/components/Euler/EulerDerivGraph.tsx b/calc-frontend/src/components/Euler/EulerDerivGraph.tsx new file mode 100644 index 0000000..3bad596 --- /dev/null +++ b/calc-frontend/src/components/Euler/EulerDerivGraph.tsx @@ -0,0 +1,15 @@ +import { useLayoutEffect } from "react"; + +function EulerDerivGraph() { + useLayoutEffect(() =>{ + + }, []); + + return ( +
+
+ ) + +} + +export default EulerDerivGraph \ No newline at end of file diff --git a/calc-frontend/src/components/Limits/LimitDef.tsx b/calc-frontend/src/components/Limits/LimitDef.tsx deleted file mode 100644 index 676e456..0000000 --- a/calc-frontend/src/components/Limits/LimitDef.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { useLayoutEffect, useRef } from "react"; - -function LimitDef() { - - const heading = useRef(null); - - useLayoutEffect(() =>{ - //@ts-ignore - let MQ = MathQuill.getInterface(2); - - MQ.StaticMath(heading.current, { }) - - }, []); - - return ( -
-
-

Limit of y = x^{2}

-
- -
-
- -
- ) -} - -export default LimitDef \ No newline at end of file diff --git a/calc-frontend/src/components/Line/LineDeriv.tsx b/calc-frontend/src/components/Line/LineDeriv.tsx index 6d9838d..832246f 100644 --- a/calc-frontend/src/components/Line/LineDeriv.tsx +++ b/calc-frontend/src/components/Line/LineDeriv.tsx @@ -1,43 +1,24 @@ import { useLayoutEffect, useRef } from "react"; +import LineDerivGraph from "./LineDerivGraph" -function LineDeriv() -{ +function LineDeriv() { - const heading = useRef(null); const container = useRef(null); - const con2 = useRef(null); - const con3 = useRef(null); useLayoutEffect(() =>{ //@ts-ignore let MQ = MathQuill.getInterface(2); - - MQ.StaticMath(heading.current, { }) MQ.StaticMath(container.current, { }) - MQ.StaticMath(con2.current, { }) - MQ.StaticMath(con3.current, { }) }, []); return ( - -
-
-

Derivative of y = \frac{1}{2} \quad x

-
-
- - -

- The derivative of a linear function is equal to its slope: \frac{\Delta \text{ } y} - {\Delta \text{ } x} -

- -
- + + +
+
+ ) } diff --git a/calc-frontend/src/components/Line/LineDerivGraph.tsx b/calc-frontend/src/components/Line/LineDerivGraph.tsx new file mode 100644 index 0000000..b038dc6 --- /dev/null +++ b/calc-frontend/src/components/Line/LineDerivGraph.tsx @@ -0,0 +1,15 @@ +import { useLayoutEffect } from "react"; + +function LineGraph() { + useLayoutEffect(() =>{ + + }, []); + + return ( +
+
+ ) + +} + +export default LineGraph \ No newline at end of file diff --git a/calc-frontend/src/components/NatLog/NatLogDeriv.tsx b/calc-frontend/src/components/NatLog/NatLogDeriv.tsx index 228e59d..aac90a0 100644 --- a/calc-frontend/src/components/NatLog/NatLogDeriv.tsx +++ b/calc-frontend/src/components/NatLog/NatLogDeriv.tsx @@ -1,45 +1,24 @@ import { useLayoutEffect, useRef } from "react"; +import NatLogDerivGraph from "./NatLogDerivGraph" -function NatLogDeriv(){ +function NatLogDeriv() { - const heading = useRef(null); const container = useRef(null); - const con2 = useRef(null); - const con3 = useRef(null); useLayoutEffect(() =>{ //@ts-ignore let MQ = MathQuill.getInterface(2); - - MQ.StaticMath(heading.current, { }) MQ.StaticMath(container.current, { }) - MQ.StaticMath(con2.current, { }) - MQ.StaticMath(con3.current, { }) }, []); return ( -
-
-

Derivative of y = ln(x)

-
- -
- - -

- The logarithmic function grows the slowest. It has a vertical asymptote - at x = 0. Logarithms are the inverse of exponents, - so y = ln(x) is the same - as y = e^{x} rotated 180 degrees. -

+ + +
+
- -
- ) } diff --git a/calc-frontend/src/components/NatLog/NatLogDerivGraph.tsx b/calc-frontend/src/components/NatLog/NatLogDerivGraph.tsx new file mode 100644 index 0000000..84b64a7 --- /dev/null +++ b/calc-frontend/src/components/NatLog/NatLogDerivGraph.tsx @@ -0,0 +1,15 @@ +import { useLayoutEffect } from "react"; + +function NatLogDerivGraph() { + useLayoutEffect(() =>{ + + }, []); + + return ( +
+
+ ) + +} + +export default NatLogDerivGraph \ No newline at end of file diff --git a/calc-frontend/src/components/Quadratic/QuadraticDeriv.tsx b/calc-frontend/src/components/Quadratic/QuadraticDeriv.tsx index aebc803..24dabbb 100644 --- a/calc-frontend/src/components/Quadratic/QuadraticDeriv.tsx +++ b/calc-frontend/src/components/Quadratic/QuadraticDeriv.tsx @@ -1,34 +1,24 @@ import { useLayoutEffect, useRef } from "react"; +import QuadraticDerivGraph from "./QuadraticDerivGraph" -function QuadraticDeriv(){ +function QuadraticDeriv() { - const heading = useRef(null); + const container = useRef(null); useLayoutEffect(() =>{ //@ts-ignore let MQ = MathQuill.getInterface(2); - - MQ.StaticMath(heading.current, { }) + MQ.StaticMath(container.current, { }) }, []); return ( -
-
-

Derivative of y = x^{2}

-
- -
- - -

- The quadratic function squares each input value, raising it to the second power -

-
- + + +
+
+ ) } diff --git a/calc-frontend/src/components/Quadratic/QuadraticDerivGraph.tsx b/calc-frontend/src/components/Quadratic/QuadraticDerivGraph.tsx new file mode 100644 index 0000000..d0b5d6f --- /dev/null +++ b/calc-frontend/src/components/Quadratic/QuadraticDerivGraph.tsx @@ -0,0 +1,15 @@ +import { useLayoutEffect } from "react"; + +function QuadraticDerivGraph() { + useLayoutEffect(() =>{ + + }, []); + + return ( +
+
+ ) + +} + +export default QuadraticDerivGraph \ No newline at end of file diff --git a/calc-frontend/src/components/Sine/SineDeriv.tsx b/calc-frontend/src/components/Sine/SineDeriv.tsx index 196e7fe..38be504 100644 --- a/calc-frontend/src/components/Sine/SineDeriv.tsx +++ b/calc-frontend/src/components/Sine/SineDeriv.tsx @@ -1,36 +1,24 @@ import { useLayoutEffect, useRef } from "react"; +import SineDerivGraph from "./SineDerivGraph" -function SineDeriv(){ +function SineDeriv() { - const heading = useRef(null); const container = useRef(null); useLayoutEffect(() =>{ //@ts-ignore let MQ = MathQuill.getInterface(2); - MQ.StaticMath(heading.current, { }) MQ.StaticMath(container.current, { }) }, []); return ( -
-
-

Derivative of y = sin(x)

-
- -
- - -

- The sine function starts with a value of 0 and ends with a value of 0 on the - interval [0, \quad 2\pi] -

+ + +
+
- -
+ ) } diff --git a/calc-frontend/src/components/Sine/SineDerivGraph.tsx b/calc-frontend/src/components/Sine/SineDerivGraph.tsx new file mode 100644 index 0000000..1369b85 --- /dev/null +++ b/calc-frontend/src/components/Sine/SineDerivGraph.tsx @@ -0,0 +1,15 @@ +import { useLayoutEffect } from "react"; + +function SineDerivGraph() { + useLayoutEffect(() =>{ + + }, []); + + return ( +
+
+ ) + +} + +export default SineDerivGraph \ No newline at end of file diff --git a/calc-frontend/src/components/Tangent/TangentDeriv.tsx b/calc-frontend/src/components/Tangent/TangentDeriv.tsx index bafcbd1..b7cbc8f 100644 --- a/calc-frontend/src/components/Tangent/TangentDeriv.tsx +++ b/calc-frontend/src/components/Tangent/TangentDeriv.tsx @@ -1,37 +1,24 @@ import { useLayoutEffect, useRef } from "react"; +import TangentDerivGraph from "./TangentDerivGraph" function TangentDeriv() { - const heading = useRef(null); const container = useRef(null); useLayoutEffect(() =>{ //@ts-ignore let MQ = MathQuill.getInterface(2); - MQ.StaticMath(heading.current, { }) MQ.StaticMath(container.current, { }) }, []); return ( -
-
-

Derivative of y = tan(x)

-
- -
- - -

- The tangent function has vertical asymptotes at multiples - of x = \frac{\pi} {2} -

+ +
+
-
) } diff --git a/calc-frontend/src/components/Tangent/TangentDerivGraph.tsx b/calc-frontend/src/components/Tangent/TangentDerivGraph.tsx new file mode 100644 index 0000000..6dafa7e --- /dev/null +++ b/calc-frontend/src/components/Tangent/TangentDerivGraph.tsx @@ -0,0 +1,15 @@ +import { useLayoutEffect } from "react"; + +function TangentDerivGraph() { + useLayoutEffect(() =>{ + + }, []); + + return ( +
+
+ ) + +} + +export default TangentDerivGraph \ No newline at end of file