Created
June 18, 2017 11:03
-
-
Save stereokai/7666bfe93929b14c2dced148c79e0e97 to your computer and use it in GitHub Desktop.
Trigonometry in CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//----------------------------------*\ | |
// TRIGONOMETRY FUNCTIONS | |
//----------------------------------*/ | |
// # Trigonometry in CSS | |
// | |
// - Through Taylor/Maclaurin polynomial representation: http://people.math.sc.edu/girardi/m142/handouts/10sTaylorPolySeries.pdf | |
// - Useful if you don't want to use JS. | |
// - With CSS Variables. | |
// - `calc()` can't do power (x ^ y) so I used multiplication instead. | |
// `--angle` is in radians! Convert from degrees using `α * π / 180` (or `α * 0.01745329251`) :) | |
// Sine function representation | |
.sin { | |
--sin-term1: var(--angle); | |
--sin-term2: calc((var(--angle) * var(--angle) * var(--angle)) / 6); | |
--sin-term3: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 120); | |
--sin-term4: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 5040); | |
--sin-term5: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 362880); | |
--sin: calc(var(--sin-term1) - var(--sin-term2) + var(--sin-term3) - var(--sin-term4) + var(--sin-term5)); | |
} | |
// Cosine function representation | |
.cos { | |
--cos-term1: 1; | |
--cos-term2: calc((var(--angle) * var(--angle)) / 2); | |
--cos-term3: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 24); | |
--cos-term4: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 720); | |
--cos-term5: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 40320); | |
--cos: calc(var(--cos-term1) - var(--cos-term2) + var(--cos-term3) - var(--cos-term4) + var(--cos-term5)); | |
} | |
// Tangent function representation | |
.tan { | |
--tan-term1: var(--angle); | |
--tan-term2: calc((1/3) * var(--angle) * var(--angle) * var(--angle)); | |
--tan-term3: calc((2 / 15) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)); | |
--tan-term4: calc((17/315) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)); | |
--tan: calc(var(--tan-term1) + var(--tan-term2) + var(--tan-term3) + var(--tan-term4)); | |
} |
Thanks! I'll check that out.
The 100vw was just for demonstration purposes - it will be given in px, taken from the browser window width at that moment. Maybe easier to see what I mean here: https://www.franzk.net
Resize the window - of course, this site just mimics the behavior I want, using a partially white PNG sliver bg and a lot of media queries to adjust the modules below ;). It would be cool to adjust the angle of the whole header and the modules below the header dynamically.
Besides the jumping when resizing the window, the biggest problem is that my header is a rectangle, and so there are parts on the right, underneath it, that are visible but not clickable.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@r3dvorak that might not work, because every value has the unit measurement with it, and the
calc
doesn't quite work when you mix then expecting the result be in one unit. You probably will get some result if you doesn't use units (and consequently fixed values), then in the last step you can "cast" the unit by multiplying the value by1[unit]
, likecalc(1px * 100)
.Here is my attempt to do what you want: https://codepen.io/Alynva/pen/gOjXJyW
But for values greater than 1 (in rad)(45º), the approximation of the arctan gets worse.
I don't know if I coded the original generator right to get the arctan approximation, as far I tested, with more terms it gets worse (???). If you spot something wrong in the code I can fix it: https://codepen.io/Alynva/pen/gOgWqQmI read some books and thats exactlly what should happen, with that formula:So, I think that the code is correct.