[css-shapes] New `<shape-command>`: `plot` to draw graphs

[Crissov]

If you are somewhat like me, you never quite got the grip of Bézier curves with their control points, but you have a good understanding of plots, i.e. graphs of functions, continuous ones in particular. CSS has now gained several ones for trigometry and polynomials, as well as numeric constants e and pi. Furthermore, custom functions are being specified right now.

Most shape() commands draw from the current, start point to an absolute or relative end point. The proposed plot is no different. In the degenerate case without any function specified, it equals line.

We need to define an interval from the graph, say [a, b], that is to be scaled to the length from start to end point. Although we can adjust any function with offsets and scale factors so a and b equal, say, 0 and 1 (or 0% and 100%), respectively, it seems more author-friendly to select them from the unscaled range, e.g. [−2π, +2π], although defaulting a to 0 seems sensible.

Within the function, there needs to be something new: a variable that runs from a to b and does not use var(), intuitively this would simply be called x. I'm pretty sure that authors would find many creative uses if all kinds of relative units were available within this formula. (Personally, I would be fine without.)

While the direction and scale of the x axis is given by a and b, there needs to be a convention where up and down, i.e. positive and negative y axis are.

Example

shape( plot to x-end with sin(x) from 0 to 2*pi )

Preliminary grammar

<shape-command> = … | <plot-command>

<plot-command> = plot <command-end-point>
        [ with <expression> [ [ from <number> ]? to <number> ]? ]?

<expression> = <math-function-name>( <calc-sum> | <expression> )

<calc-keyword> = … | x

[tabatkins]

Okay, so just making sure I understand this proposal:

• We start with a theoretical straight line stretching from the starting point to the ending point, with numeric values at those two points identified by the from and to values.
• We evaluate the with <expr> (can just be a with <calc-sum>, fwiw) at "sufficient" points between the start/end value, letting the x calc-keyword resolve to the value at that point, and the result dictates how far away from the line the corresponding point should be.
  • Presumably the output value needs to resolve to a length?
• All the points are connected as if by line, or maybe with a smoother function like curve.

So I think your example would need to be:

shape( plot to x-end with sin(x)*5px from 0 to calc(2*pi) )

I think this is potentially interesting, but do you have some examples of things that would be nicer to write like this?

[ByteEater-pl]

I have a different proposal. Maybe complementary, or maybe the two can be unified, with @Crissov's being a special case whereby some syntactic part is omitted (just like an omission in his gives line).

We should be able to vary both coordinates from 0 to 1 independently, therefore giving a curve in parametric form. Values below 0 and above 1 are allowed.

Bézier curves of any degree are expressible with this.

[ByteEater-pl]

An issue I see with either proposal is when the function isn't continuous. I'll consider jump discontinuities (other kinds left as an exercise 😉). Just sampling and connecting the dots would fill the jumps with segments. Sometimes it may be what the author desires, so perhaps there should be an option (a keyword?) for that. But I think most of the time they want there to be a discontinuity. With what little maths is expressible in this way, I believe it's feasible to determine all the jumps and arbitrarily well approximate both ends of each. The sampling would then proceed with maximal intervals of continuity, their ends approximated.

Some technicalities come to mind:

• If a jump is small (like, less than a tiny fraction of a CSS pixel; though the spec would probably state it as an implementation-dependent cutoff), it can be filled with a segment anyway, removing the discontinuity. This reduces the number of arcs over which sampling proceeds.
• The above MUST be used, increasing the cutoff distance if necessary, to reduce the number of arcs to a finite value, if infinite. (It can happen, but only countably many, with currently available functions.)
• Implementations MAY fill some jumps if the number thereof is excessive. Additionally, state is as MUST, SHOULD or MAY (with recommendation to make best effort; implementation quality issue) that if a jump is thus filled, so are all jumps of smaller distances.
• Possibly, if it makes implementations easier and doesn't significantly limit use cases, allow segments to be substituted for small jumps over more than one (including infinitely many) discontinuities at once, from the start of the first one to the end of the last one included.
• Possibly, limit the above only to cases in which the mathematical curve deviates from the substituted segment by only a small distance.

And two more, orthogonal to handling discontinuity:

• Possibly, state it as a SHOULD requirement that the sampling granularity, as well as the cutoff numbers discussed above, depend on magnification and resolution. Authors may e.g. use transform to extract a particular miniscule bend from a mathematical curve.
• The sampling granularity SHOULD increase on some intervals in order to better approximate the curve where it has many bends or its parametrization goes over some arc faster.

[ByteEater-pl]

A version of this with more bells and whistles would perhaps be a good fit for SVG. If needed, CSS could link to paths thus defined in SVG in order to use it.

[Crissov]

@tabatkins Yes, I think you understood and summarized correctly what I am proposing. Alas, I’m not sure where the 5px factor in your version of the example comes from.

If I remember correctly, Bézier curves, in general, can only approximate those plots, although often remarkably well, so this would be more than syntactic sugar. In SVG, I’ve tried to draw graphs where this feature would have been very handy, but in CSS I did not have an actual need for it yet, although I believe some curves are simpler to express with functions rather than control points.

How to deal with lengths and discontinuities is exactly where I was stuck with, and why I thought I’d bring it to the public table to get more insight.

[tabatkins]

Alas, I’m not sure where the 5px factor in your version of the example comes from.

The expression needs to resolve to a <length> so we know how far out from the line to draw.

[ByteEater-pl]

Or maybe just sample, the same way as everything were continuous. If people want finer control, e.g. jumps, they can combine plot with other commands, figuring out the maths themselves. That would be a bit less powerful if e.g. part of the expression comes from a CSS variable and discontinues cannot therefore be determined in advance. But, as usual, more advanced featured can be added later if there are compelling use cases.