๐Ÿง  Let's Learn About Slopes with Cubes! (f(x) = x³)

-

Graph of f(x) = x³ and Its Tangent Line

f′(x) = 3x²

๐Ÿง  Let's Learn About Slopes with Cubes! (f(x) = x³)

Hi friends! ๐Ÿ‘‹
Have you ever wondered how we can figure out how steep a curve is at one single point?

Well, that’s what slopes and derivatives help us do! Today, we’re going to use a special math function:

f(x)=x3f(x) = x^3

This just means we multiply a number by itself 3 times. So if x = 2, then f(2) = 2 × 2 × 2 = 8.

๐Ÿ“ˆ What Does This Program Do?

This fun little program lets you:

  1. Type in any number for x

  2. Draw the curve of f(x) = x³ (it’s a bendy line!)

  3. Show the slope (how steep it is) at the point you typed in

  4. Draw a red line that touches the curve at just that point — this is called the tangent line

๐Ÿ” What is a Derivative?

A derivative is like a magic formula that tells us the slope of a curve at any point.

To find the slope, we use this formula:

f′(x)=lim⁡h→0f(x+h)−f(x)hf'(x) = \lim_{h \to 0} \frac{f(x + h) - f(x)}{h}

This means we take two very, very close points and see how much the function changes. That gives us the slope!

For our cube function:

f(x)=x3f(x) = x^3

the derivative (slope formula) is:

f′(x)=3x2f'(x) = 3x^2

So, if you type x = 2, the slope is:

f′(2)=3×22=3×4=12f'(2) = 3 × 2^2 = 3 × 4 = 12

That means the curve is going up super fast at x = 2!

๐ŸŽจ What’s in the Drawing?

๐ŸŸฆ Blue curve = the function f(x) = x³
๐Ÿ”ด Red line = the slope (or tangent) at your point
➕ You also see:

  • What f(x) equals

  • What f′(x) (the slope) is

  • The red line’s formula like: y = 12x - 16

๐Ÿงช Try Changing the x Value!

Try typing in:

  • 0 — the slope is flat!

  • 1 — slope is 3

  • -2 — slope is positive again, because (-2)² = 4

It’s fun to explore how steep the curve is at different spots. ๐Ÿ˜Š

๐Ÿ“œ Full Source Code (Copy & Paste into a .html file!)

<!DOCTYPE html>
<html>
<head>
  <title>f(x) = x³ and Its Derivative</title>
  <style>
    canvas {
      border: 1px solid black;
      margin-top: 10px;
    }
    body {
      font-family: sans-serif;
    }
    .formula {
      font-size: 18px;
      margin: 10px 0;
    }
  </style>
</head>
<body>
  <h2>Graph of f(x) = x³ and Its Tangent Line</h2>
  <label for="xInput">Enter x value:</label>
  <input type="number" id="xInput" value="1" step="any">
  <button onclick="drawGraph()">Draw</button>

  <div class="formula" id="fxValue"></div>
  <div class="formula" id="derivativeFormula">f′(x) = 3x²</div>
  <div class="formula" id="slopeValue"></div>
  <div class="formula" id="tangentFormula"></div>

  <canvas id="graphCanvas" width="600" height="400"></canvas>

  <script>
    const canvas = document.getElementById('graphCanvas');
    const ctx = canvas.getContext('2d');
    const width = canvas.width;
    const height = canvas.height;
    const scaleX = 40; // pixels per unit x
    const scaleY = 0.01; // pixels per unit y (y grows fast for x³)

    function f(x) {
      return x * x * x;
    }

    function fPrime(x) {
      return 3 * x * x;
    }

    function drawAxes() {
      ctx.strokeStyle = '#aaa';
      ctx.lineWidth = 1;

      // x-axis
      ctx.beginPath();
      ctx.moveTo(0, height / 2);
      ctx.lineTo(width, height / 2);
      ctx.stroke();

      // y-axis
      ctx.beginPath();
      ctx.moveTo(width / 2, 0);
      ctx.lineTo(width / 2, height);
      ctx.stroke();
    }

    function drawFunction() {
      ctx.beginPath();
      ctx.strokeStyle = 'blue';
      ctx.lineWidth = 2;

      for (let px = 0; px < width; px++) {
        const x = (px - width / 2) / scaleX;
        const y = f(x);
        const py = height / 2 - y / scaleY;

        if (px === 0) {
          ctx.moveTo(px, py);
        } else {
          ctx.lineTo(px, py);
        }
      }
      ctx.stroke();
    }

    function drawTangent(x0, y0, slope) {
      const lineLength = 2;

      const x1 = x0 - lineLength;
      const y1 = y0 - slope * lineLength;
      const x2 = x0 + lineLength;
      const y2 = y0 + slope * lineLength;

      const px1 = width / 2 + x1 * scaleX;
      const py1 = height / 2 - y1 / scaleY;
      const px2 = width / 2 + x2 * scaleX;
      const py2 = height / 2 - y2 / scaleY;

      ctx.beginPath();
      ctx.strokeStyle = 'red';
      ctx.lineWidth = 2;
      ctx.moveTo(px1, py1);
      ctx.lineTo(px2, py2);
      ctx.stroke();
    }

    function drawGraph() {
      const x0 = parseFloat(document.getElementById('xInput').value);
      const y0 = f(x0);
      const slope = fPrime(x0);
      const b = y0 - slope * x0;

      const slopeText = `f′(${x0}) = 3 × ${x0}² = ${slope}`;
      const tangentText = `Tangent line: y = ${slope.toFixed(2)}x + ${b.toFixed(2)}`;

      // Update formulas
      document.getElementById('fxValue').innerText = `f(${x0}) = ${y0}`;
      document.getElementById('slopeValue').innerText = slopeText;
      document.getElementById('tangentFormula').innerText = tangentText;

      // Clear canvas and draw everything
      ctx.clearRect(0, 0, width, height);
      drawAxes();
      drawFunction();
      drawTangent(x0, y0, slope);
    }

    // Draw on page load
    drawGraph();
  </script>
</body>
</html>


Comments

Post a Comment

Popular posts from this blog

๐Ÿง  Building a Korean Character Recognition Model with PyTorch

-
Image
Hangul, the Korean writing system, is both elegant and systematic. Each character is a combination of components called Jamo: ์ดˆ์„ฑ (initial), ์ค‘์„ฑ (medial), and ์ข…์„ฑ (final). In this project, I built a deep learning model using PyTorch to recognize these components from rendered character images. Here's how I did it. ✨ Project Overview This project involves: Generating synthetic images of Hangul characters with their bounding boxes. Decomposing characters into Jamo components. Training a convolutional neural network to classify each character's ์ดˆ์„ฑ, ์ค‘์„ฑ, and ์ข…์„ฑ. Performing inference on single or multiple images and visualizing the results. Let’s break it down. ๐Ÿ—️ Step 1: Generate Hangul Character Dataset We use a TrueType font (like Malgun Gothic ) to render images of Hangul syllables and compute their bounding boxes. Each image is saved along with Jamo annotations in JSON. generate_korean_chars.py from PIL import Image , ImageDraw , ImageFont import os i...
Read more

๐Ÿง  Bayes' Theorem Interactive Game – Understand Conditional Probability Through Play

-
Bayes' Theorem Game This game helps you understand Bayes' Theorem: P(A|B) = [P(B|A) × P(A)] / P(B) You're a doctor testing for a disease. Fill in the values: P(Disease): P(Positive | Disease): P(Positive | No Disease): Calculate P(Disease | Positive) Explanation: P(A) = probability of the disease P(B|A) = probability of a positive test given disease P(B|¬A) = probability of a positive test without disease P(B) = total probability of a positive test P(A|B) = probability of having the disease if the test is positive Visualize the Effect of Each Variable ๐Ÿง  Bayes' Theorem Interactive Game – Understand Conditional Probability Through Play Bayes' Theorem is a powerful tool in probability theory that helps us reason about uncertain events. While it's often introdu...
Read more

๐ŸŽฏ Building an Object Detection Model for MNIST with PyTorch (COCO-style Dataset)

-
Image
Object detection is one of the core tasks in computer vision, and in this post, we'll walk through a complete pipeline: from downloading and converting the MNIST dataset to COCO format, to building and training a custom object detector in PyTorch. We'll also visualize predictions, plot training history, and analyze failure cases! This project demonstrates how to: Convert a dataset to the COCO format. Build a lightweight CNN-based object detector. Train and validate the model with bounding box and class predictions. Evaluate model performance visually and statistically. ๐Ÿ”ง 1. Step-by-Step: Convert MNIST to COCO Format We’ll start by downloading MNIST and converting each digit into a COCO-style annotation: each image will have one bounding box and one label. ๐Ÿ—‚ mnist_download.py import torch import torchvision from torchvision import datasets import os import json from PIL import Image import numpy as np from tqdm import tqdm import matplotli...
Read more