I wrote another function plotter where you can write your function in simple JavaScript code. Something like func("f", x => sin(x)). No new special math-like syntax you have to learn, just JavaScript.

Features:

• Plot updates each time you change the code
• Multiple plots
• Non-function objects like points, lines, rects and circles.
• Draggable objects (set draggable: true then shift+click to drag)
• Save and load to local files
• The tool is a single self-contained HTML file, you can download it and use it as an offline tool.
• Sharable links that contain entire data (deflate-raw compressed)
• All Math.* functions and many GLSL 2D functions directly available, no Math namespace required.
• Resizeable code panel (use resize handle in the lower right corner)

Downsides / limits:

• No 2D vectors or operator overloading. Right now I'm using {x, y} objects for that and duplicate the calculation for each component. Not great, not terrible, but a bit annoying.
• No plots for implicit functions where a value is calculated (and plotted) for each pixel on the plot. I didn't need it and not having 2D vectors gets really painful there.

For me the most important parts are draggable items and code that can react to those user interactions. And that I can use that tool offline and save the scripts into files. That's why it's a single self-contained HTML file, no backend anywhere. 🙂

Why it exists ¶

In one of my current side-projects I had a strange math problem. Somehow, Palpatine returned… err, ok, no. Somehow a discontinuity appeared somewhere and was causing visual artifacts. A lot less dramatic but a lot more relevant to me. Time to investigate.

Unfortunately I'm not good enough at math to find the cause via derivation in this case. It's just to complicated for me. And anyway, the math might be fine and it just doesn't look like I expect or want it to. Usually I'm using a function plotter to build each part of the math I need, check the plot to see if it does what I want and build an intuition about each part.

I was mostly using Graphtoy in this project but was constantly running into limits. For example it only supports up to 6 functions, which sounds like plenty, but once to you do some meaty stuff it gets rather limiting. If you know Graphtoy you might guess I'm doing something with SDFs (Signed Distance Fields), more specifically soft union of 2D SDFs. But with a lot of twists and constraints to them. For my level pretty meaty stuff. I was juggling at least 3 distance functions, transforming them into different spaces, doing some smoothing and normalizing stuff there, inverse transformation and other stuff. More like an algorithm than just (relatively simple) functions. So yeah, I was reaching the limits of Graphtoy.

I was thinking about using desmos instead. You can drag points around and do some interactive stuff, but when I was using it for another project complex stuff quickly became rather cumbersome. A lot of time went into "how do I tell desmos I want this…". Most of the time, actually. Not what I wanted here.

Shadertoy was also a possibility, but I wanted to quickly try different point and circle positions. In other projects dragging stuff on a 2D visualization really helped me with finding ugly cornercases really quickly. And with Shadertoy I would have to build all that by myself. I could use GLSL that way, but plotting lines (function graphs) would be a real pain there.

For a few hours I looked for a function plotter that did what I needed… and found none. Well, you already know the answer: I built the tool I needed myself. Ok, not quite. I already had a function plotter lying around which already did most of what I wanted. So I just added what I needed an was done. Ok, again, who am I kidding. I wrote a lot of code for the new features and the code I reused was extensively refactored. You know the drill.

Random ramblings ¶

Honestly, by now working with Browser APIs reminds me of working with the Win32 API. You salvage bits and pieces to get something done that's trivial in most other languages or environments. It feels like finding your way through a maze of APIs that were never quite intended to do what you want. An with luck it even works and isn't too buggy. It's either that or drowning in an unmaintainable mess of fashionable dependencies (that wasn't an option with the Win API… so progress?).

Anyway, because I didn't want to embed a heavy-weight "mini IDE" into this project. So instead I took an old syntax highlighter I wrote for few years ago and extended it a bit. Similar to the simple server-side highlighting I use in my blog it takes one large RegExp. Each matching named group it then wrapped into an HTML element and styled with CSS. But JavaScript doesn't support extended regular expressions, so I wrote a small translation function. Might be useful for others.

I've also extracted the textarea with syntax highlighting as well as the plotting stuff into web components. They still need a bit of cleaning up, but I hope to reuse them in other projects in the future. We'll see how those side-side-side projects turn out.

There's a lot of other stuff going on in the plotting tool. But I want to end this side-side project for now and go back to my side-project. So if you have any questions, just ask in the comments. 🙂