Mafs.cljs

A Reagent interface to the Mafs interactive 2d math visualization library.

Mafs is a JavaScript library for building declarative, interactive 2d mathematical scenes.

Mafs.cljs extends Mafs with a set of Reagent components that make it easy to define Mafs constructions inside of a user interface built with ClojureScript.

Quickstart

Install Mafs.cljs into your Clojurescript project using the instructions at its Clojars page:

Or grab the most recent code using a Git dependency:

;; deps
{io.github.mentat-collective/mafs.cljs
  {:git/sha "$GIT_SHA"}}

Require mafs and any of the component namespaces that you'd like to use in your ClojureScript namespace:

(ns my-app
  (:require [mafs.core :as mafs]
            [mafs.coordinates]
            [mafs.plot]
            [mafs.line]
            [mafs.debug]
            [mafs.vec]
            [reagent.core :as reagent]))

Construct a Mafs scene with a Cartesian coordinate plane, a plot of Math/sin and a movable point constrained to the x axis that allows you to interactively phase-shift the plot:

(reagent/with-let [!phase (reagent/atom [0 0])]
  [:<>
   [mafs/Mafs
    {:view-box {:x [-10 10] :y [-2 2]}
     :preserve-aspect-ratio false}
    [mafs.coordinates/Cartesian
     {:subdivisions 4
      :x-axis
      {:lines Math/PI
       :labels mafs/labelPi}}]
    [mafs.plot/OfX
     {:y (fn [x]
           (let [shift (first @!phase)]
             (Math/sin (- x shift))))}]
    [mafs/MovablePoint
     {:atom !phase
      :constrain "horizontal"}]]
   [:pre
    (str "Phase shift: " (first @!phase))]])

See the project's interactive documentation notebook for many more guides and examples.

Clerk Support

If you want to use Mafs.cljs with Clerk, check out the mafs/clerk template. This deps-new template will generate a Clerk project for you, fully configured to use Mafs.cljs in your Clerk notebooks.

Interactive Documentation via Clerk

The project's interactive documentation was generated using Nextjournal's Clerk. If you'd like to edit or play with the documentation, you'll need to install

• node.js
• The clojure command line tool
• Babashka

Once this is done, run this command:

bb clerk-watch

This should open a browser window to http://localhost:7777 with the contents of the documentation notebook. Any edits you make to dev/mafs/notebook.clj will be picked up and displayed in the browser on save.

Thanks and Support

To support this work and my other open source projects, consider sponsoring me via my GitHub Sponsors page. Thank you to my current sponsors!

I'm grateful to Clojurists Together for financial support during this library's creation. Please consider becoming a member to support this work and projects like it.

License

Copyright © 2022-2023 Sam Ritchie.

Distributed under the MIT License. See LICENSE.