Skip to content

Visualizing concepts is a great way to learn them. It is also a great way to teach them. Vizcal is a tool to help you visualize Calculus concepts. Find visualization tools for Limits, Derivatives, Riemman Sums, and Arc Length. Made using Electron, Vite, and React.

Notifications You must be signed in to change notification settings

bensaine/vizcal

Repository files navigation

vizcal

What is it?

Visualizing concepts is a great way to learn them. It is also a great way to teach them. Vizcal is a tool to help you visualize Calculus concepts. Find visualization tools for Limits, Derivatives, Riemman Sums, and Arc Length. Made using Electron, Vite, and React - see evite.

Demo

Loading a file from an existing file in home menu

This functionality is useful when the user wants to open a file that they have previously saved on their device. By clicking on the "load an existing experiment from a file" text, the user can navigate through their device and select the file they want to open.

Loading from existing file gif

Customizable parameters

This functionality allows the user to adjust various parameters in each experiment.Each parameter is specific to its experiment.

Customizable parameters gif

Two different themes

This functionality allows the user to switch between two different visual themes in the application. This includes light and dark modes.

Different themes gif

Customizable colors

This functionality allows the user to customize the colors used in the application. For example, they are able to change the color of the graph's function.

Customizable colors gif

Customizable font

This functionality allows the user to adjust the font used throughout the application.

Customizable font gif

Math Concepts

Limit

A limit is a fundamental concept in calculus and mathematical analysis that describes the behavior of a function as its input approaches a particular value. In other words, it is the value that a function approaches as the input gets arbitrarily close to a specific point. Limits are used to define the concepts of continuity, derivatives, and integrals in calculus.

limit explanation image

Limit explanation. Reference: https://tutorial.math.lamar.edu/classes/calcI/defnoflimit.aspx.

Derivative

The derivative of a function at a given point is the instaneous slope of said function at said point. The values for the run and rise dictate the range of points at which the derivative is calculated and then yields the average slope of the function between these points.

derivative explanation image

Derivative explanation. Reference: https://machinelearningmastery.com/a-gentle-introduction-to-function-derivatives/.

Riemann Sums

In mathematics, a Riemann sum is a certain kind of approximation of an integral by a finite sum. Riemann sums help us approximate definite integrals, but they also help us formally define definite integrals. Through Rieman sums, we give the answer to a problem with an approximation, refine it to make it more precice, and use limits to obtain an exact answer. This application focuses on the two first parts of the process.

riemann sums explanation image

Riemann sums explanation. Reference: https://math.libretexts.org/Bookshelves/Calculus/Calculus_3e_(Apex)/05%3A_Integration/5.03%3A_Riemann_Sums.

Arc Length

The arc length is an application of integration that lets us find the length of a function within a certain range. The method by which this is achieved is very similar to the approximation of the area under a curve where Riemann sums where exhaustively used. In short, subdivisions in x of a function are joined by straight lines and they are all joined to approximate the curve of the function. The approximation is simply given by the sum of the length of each small line section.

arc length explanation image

Arc Length explanation. Reference: https://www.mathsisfun.com/calculus/arc-length.html

Recommended IDE Setup

Project Structure

.
├──src # Electron
│  ├──main
│  │  └──index.js
│  ├──preload
│  │  └──index.js
│  └──renderer # React
│     ├──src
│     │  ├──assets
│     │  ├──components
│     │  └──hooks
│     ├──index.html
│     └──...
├──electron.vite.config.js
├──package.json
└──...

Project Setup (Node.js & NPM required)

Install Dependencies

$ npm install

Run for Development

$ npm run dev

Run Unit Tests

$ npm run test

Build a Single-File Executable

# For windows
$ npm run build:win

# For macOS
$ npm run build:mac

# For Linux
$ npm run build:linux

Notable Libraries Used

About

Visualizing concepts is a great way to learn them. It is also a great way to teach them. Vizcal is a tool to help you visualize Calculus concepts. Find visualization tools for Limits, Derivatives, Riemman Sums, and Arc Length. Made using Electron, Vite, and React.

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages