Re: [csswg-drafts] [css-values] Trigonometric functions (#2331)

The CSS Working Group just discussed `trig`.

<details><summary>The full IRC log of that discussion</summary>
&lt;astearns> topic: trig<br>
&lt;astearns> github: https://github.com/w3c/csswg-drafts/issues/2331<br>
&lt;fantasai> leaverou: We should keep it cos()/sin() maybe tan() and only accept angle<br>
&lt;chris> atan2 though, surely<br>
&lt;fantasai> leaverou: That would solve all the usecase I listed<br>
&lt;fantasai> AmeliaBR: So initial proposal is to add simple trig functions in calc()<br>
&lt;fantasai> AmeliaBR: Once you start doing graphical layouts involving arcs and stuff, you need trig functions to convert from width/height distances to angular distances<br>
&lt;leaverou> s/That would solve all the usecase I listed/That would solve all the use cases listed in the issue/<br>
&lt;fantasai> AmeliaBR: Currently to do this you either have to do it either in a preprocessor, or if in dynamic variables have to do it in JS<br>
&lt;fantasai> AmeliaBR: which is a pain<br>
&lt;fantasai> AmeliaBR: JS only take radians, SVG only takes degrees, etc.<br>
&lt;fantasai> AmeliaBR: Let's just do it in CSS which has everything<br>
&lt;fantasai> AmeliaBR: I'd also like to get the arc functions<br>
&lt;dbaron> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math might be an interesting source...<br>
&lt;fantasai> AmeliaBR: CSS lengths, calculate angles, woudl be great<br>
&lt;fantasai> AmeliaBR: You can't get a diagonal across the veiwport e.g. without this<br>
&lt;fantasai> TabAtkins: There's a demo of the Taylor expansion of sin() using stacked variable :)<br>
&lt;tantek> +1 dbaron get your trig funcs from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math<br>
&lt;fantasai> leaverou: There's lots of examples of usage<br>
&lt;fantasai> AmeliaBR: I asked anatudor about it the other day<br>
&lt;leaverou> s/There's lots of examples of usage/We can look at preprocessors for usage stats, they've been supporting trig functions for years/<br>
&lt;fantasai> AmeliaBR: &lt;quotes anatudor><br>
&lt;fantasai> TabAtkins: Very useful for transforms<br>
&lt;fantasai> myles__: People are doing this already to day, and implementation burden is close to trivial<br>
&lt;fantasai> myles__: If doing arc, maybe also want atan, but probably just those<br>
&lt;fantasai> chris: atan2 deals with that<br>
&lt;fantasai> TabAtkins: ...<br>
&lt;fantasai> dbaron: Only add functions that are on the JS math object? Not all of them, but a subset.<br>
&lt;fantasai> fantasai_: atan2?<br>
&lt;fantasai> AmeliaBR: [explains the theory of atan]<br>
&lt;TabAtkins> s/.../someone asked for hypot(), rather than having to do calc(sqrt(var(--x) * var(--x) + var(--y) * var(--y))/<br>
&lt;fantasai> dbaron: If you have x and y coords on a graph, you typically want the tangent of y over x<br>
&lt;fantasai> dbaron: if you have x=1  y=1 you're in Q1, i fyou're x=-1 x=-1 your'e in Q3<br>
&lt;fantasai> dbaron: atan(x/y) gives you Q1 always. atan2() let's you get 270deg<br>
&lt;dbaron> s/x\/y/y\/x/<br>
&lt;fantasai> myles__: so we gonna resolve on a list of functions?<br>
&lt;fantasai> TabAtkins: resolve on a small list, and then maybe do more research to see if anything else needed<br>
&lt;fantasai> TabAtkins: but can resolve on basic trigs right now<br>
&lt;myles__> Sin() cos() tan() acos() asin() atan() atan2()<br>
&lt;fantasai> emilio: angles calc...<br>
&lt;fantasai> emilio: Don't want sin(calc(10px + 20%))<br>
&lt;AmeliaBR> and probably hypot(), sqrt(), and pow()<br>
&lt;fantasai> emilio: what is the type of these functions?<br>
&lt;fantasai> TabAtkins: I think the output is always numbers<br>
&lt;fantasai> TabAtkins: radians are numbers<br>
&lt;fantasai> fantasai_: not in CSS<br>
&lt;fantasai> TabAtkins: Right. Inverse ones do need to return &lt;angle><br>
&lt;cbiesinger> q+<br>
&lt;fantasai> TabAtkins: others return &lt;number><br>
&lt;dbaron> sin() cos() tan() take an &lt;angle> or a &lt;number> (radians) and return a number<br>
&lt;dbaron> asin() acos() atan() atan2() take a &lt;number> (or 2, for atan2) and return an angle<br>
&lt;fantasai_> chris: Surely you can do atan2(20px, 4em) lengths in general<br>
&lt;fantasai_> ?: Yes, of course<br>
&lt;fantasai_> leaverou: ...<br>
&lt;xfq> ack cbiesinger<br>
&lt;fantasai_> cbiesinger: You suggested that radians can be an input, but without a pi constant how do you type that in a CSS style sheet?<br>
&lt;dholbert> s/.../in theory we can divide lengths and get numbers in CSS, but no browser supports that yet/<br>
&lt;fantasai_> TabAtkins: Use the turn unit. 0.5turn = pi<br>
&lt;fantasai_> AmeliaBR: We don't radians much in CSS because we have better units<br>
&lt;leaverou> s/leaverou: .../leaverou: (to Chris) yes, CSS in theory supports dividing lengths and it gives you a number. In practice, no UA supports this yet/<br>
&lt;fantasai_> AmeliaBR: But if you're calcuating it somewhere else, we can bring it in<br>
&lt;dbaron> so atan2(&lt;number>, &lt;number>) or atan2(&lt;length>, &lt;length>) ?<br>
&lt;fantasai_> TabAtkins: This is why I want to accept numbers (meaning radians) in addition to &lt;angle><br>
&lt;fantasai_> myles__: So atan2() will accept lenghts and numbers?<br>
&lt;fantasai_> TabAtkins: Yes<br>
&lt;fantasai_> myles__: atan2(10px, 5) ?<br>
&lt;fantasai_> TabAtkins: No, type has to match<br>
&lt;fantasai_> dbaron: [repeats what's above]<br>
&lt;fantasai_> dbaron: sin() cos() tan() take an &lt;angle> or a &lt;number> (radians) and return a number<br>
&lt;leaverou> atan2(calc(45deg * 1px), 1em)?<br>
&lt;fantasai_> dbaron: asin() acos() atan() atan2() take a &lt;number> (or 2, for atan2) and return an<br>
&lt;fantasai_>                 angle<br>
&lt;fantasai_> AmeliaBR: ...<br>
&lt;fantasai_> TabAtkins: Unit division calc() should be implemented.<br>
&lt;dbaron> s/.../We need people to implement unit division in calc() so that people can use that as an argument to asin() and acos()/<br>
&lt;fantasai_> astearns: OK, I think we can resolve to add these things<br>
&lt;fantasai_> astearns: Objections to dbaron's proposal?<br>
&lt;fantasai_> TabAtkins: I think the 10 from dbaron and emilio are good<br>
&lt;emilio> s/emilio/AmeliaBR<br>
&lt;fantasai_> TabAtkins: hypot() sqrt() and ?<br>
&lt;florian> s/?/powe/<br>
&lt;florian> s/?/pow/<br>
&lt;xfq> sin() cos() tan() acos() asin() atan() atan2() hypot() sqrt() pow()<br>
&lt;fantasai_> TabAtkins: They would not adjust the unit, just multiply the magnitude<br>
&lt;fantasai_> fremy: Can you use these directly, or has to be inside calc()<br>
&lt;fantasai_> TabAtkins: Both<br>
&lt;fantasai_> [discussion of edits]<br>
&lt;fantasai_> fantasai: pow() is exponents, right? we don't want to use the ^ notation?<br>
&lt;fantasai_> TabAtkins: JS uses **, others use ^, but everyone's function is called pow()<br>
&lt;fantasai_> AmeliaBR: If you multiply two lengths together you still get a single-dimension length?<br>
&lt;fantasai_> TabAtkins: Multiplying two lengths would give you squared unit, but pow() and sqrt() wouldn't<br>
&lt;fantasai_> AmeliaBR points out inconsitency of this<br>
&lt;tantek> +1 pow() http://php.net/manual/en/function.pow.php<br>
&lt;fantasai_> TabAtkins: So maybe pow() and sqrt() should only take numbers<br>
&lt;fantasai_> ...<br>
&lt;fantasai_> myles__: If you pow(3.5, 4.7) what's the dimension in CSS?<br>
&lt;tantek> do we need a unit(number, unit-name) function?<br>
&lt;fantasai_> TabAtkins: Maybe go back to pow() and sqrt() only accept numbers.<br>
&lt;fantasai_> AmeliaBR: and hypot() makes it easier to deal with the most common case<br>
&lt;fantasai_> TabAtkins: Good argument to keep hypot()<br>
&lt;fantasai_> AmeliaBR: So I could draft this up?<br>
&lt;fantasai_> fantasai: Would be edits to css-values-4<br>
&lt;fantasai_> AmeliaBR: Matter of 1-2 days of writing things up now that we've hashed this out<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2331#issuecomment-467990627 using your GitHub account

Received on Wednesday, 27 February 2019 19:09:06 UTC