Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sassematics (upfront 2014)

Sassematics (upfront 2014)

Sass + mathematics. Many web developers nowadays use CSS preprocessors, and do simple calculations like ($a + $b) * $c in them. But we can do more. Much more: sin, cos, tan, … and calculate square roots like the ancient Babylonians. A short trip into geometry. Bring your rulers and compasses!

Video: https://www.youtube.com/watch?v=IjW_36VlwQc

Gunnar Bittersmann

January 14, 2014
Tweet

More Decks by Gunnar Bittersmann

Other Decks in Programming

Transcript

  1. Sassematics
    Gunnar Bittersmann @g16n

    View Slide

  2. Goal: scale images to equal area Photos: Gunnar Bittersmann

    View Slide

  3. px

    View Slide

  4. r · b · b = A
    b = √A / r
    a · b = A
    a / b = r
    a = r · b
    b² = A / r
    a = r · √A / r
    a = √A · r
    a
    b

    View Slide

  5. @function height($area, $ratio)
    {
    @return sqrt($area / $ratio) * 100%;
    }
    @function width($area, $ratio)
    {
    @return sqrt($area * $ratio) * 100%;
    }
    @function sqrt($a)
    {
    }
    ?
    b = √A / r
    a = √A · r

    View Slide

  6. Babylonian method (Heron’s method)
    a = 2
    x0
    = 1
    x1
    = (1 + 2 / 1) / 2 = 1.5
    x2
    = (1.5 + 2 / 1.5) / 2 = 1.41666667
    x3
    = (1.41666667 + 2 / 1.41666667) / 2 = 1.41421568…
    √2 = 1.41421356…
    x0
    ≈ √a > 0
    xn+1
    = (xn
    + a / xn
    ) / 2
    lim xn
    = √a
    n → ∞

    View Slide

  7. @function sqrt($a, $iterations: 10)
    {
    $x: 1;
    @for $i from 1 through $iterations
    {
    $x: ($x + $a / $x) / 2;
    }
    @return $x;
    }
    x0
    ≈ √a > 0
    xn+1
    = (xn
    + a / xn
    ) / 2
    lim xn
    = √a
    n → ∞
    Babylonian method (Heron’s method)

    View Slide

  8. @function height($area, $ratio)
    {
    @return sqrt($area / $ratio) * 100%;
    }
    @function width($area, $ratio)
    {
    @return sqrt($area * $ratio) * 100%;
    }
    @function sqrt($a)
    {
    }
    b = √A / r
    a = √A · r
    @import "math”;
    !
    _math.scss

    View Slide

  9. @import "math”;
    @function height($area, $ratio)
    {
    @return sqrt($area / $ratio) * 100%;
    }
    @function width($area, $ratio)
    {
    @return sqrt($area * $ratio) * 100%;
    }
    @function margin-top($area, $ratio)
    {
    @return (100% - height($area, $ratio)) / 2;
    }

    View Slide




  10. $area = 1/4;
    #img1, #img3
    {
    $ratio: 3/2;
    height: height($area, $ratio);
    width: width($area, $ratio);
    margin-top: margin-top($ratio);
    }
    #img2
    {
    $ratio: 2/3;
    height: height($area, $ratio);
    width: width($area, $ratio);
    margin-top: margin-top($area, $ratio);
    }

    View Slide

  11. View Slide




  12. $area = 1/4;
    .ratio3/2
    {
    $ratio: 3/2;
    height: height($area, $ratio);
    width: width($area, $ratio);
    margin-top: margin-top($ratio);
    }
    .ratio2/3
    {
    $ratio: 2/3;
    height: height($area, $ratio);
    width: width($area, $ratio);
    margin-top: margin-top($area, $ratio);
    }

    View Slide




  13. $area = 1/4;
    [data-ratio="3/2"]
    {
    $ratio: 3/2;
    height: height($area, $ratio);
    width: width($area, $ratio);
    margin-top: margin-top($ratio);
    }
    [data-ratio="2/3"]
    {
    $ratio: 2/3;
    height: height($area, $ratio);
    width: width($area, $ratio);
    margin-top: margin-top($area, $ratio);
    }

    View Slide




  14. $area = 1/4;
    [src^="img1.jpg"], [src^="img3.jpg"]
    {
    $ratio: 3/2;
    height: height($area, $ratio);
    width: width($area, $ratio);
    margin-top: margin-top($ratio);
    }
    [src^="img2.jpg"]
    {
    $ratio: 3/2;
    height: height($area, $ratio);
    width: width($area, $ratio);
    margin-top: margin-top($area, $ratio);
    }

    View Slide

  15. Goal: scale images to equal area ✔ Photos: Gunnar Bittersmann

    View Slide

  16. -x-linear-gradient(bottom left, black, white)
    linear-gradient( #{$phi}deg, black, white)
    linear-gradient(to top right, black, white)
    φ

    View Slide

  17. tan φ = b / a
    a
    b
    φ = arctan (b / a)
    φ

    View Slide

  18. @function arctan($x, $terms: 10)
    {
    $sum: 0;
    $sign: 1;
    $numerator: $x;
    $denominator: 1;
    @for $i from 1 through $terms
    {
    $sum: $sum + $sign * $numerator/$denominator;
    $sign: -1 * $sign;
    $numerator: $numerator * $x * $x;
    $denominator: $denominator + 2;
    }
    @return $sum;
    }
    Taylor series: arctan


    k = 0
    arctan x = (−1)k
    x2k+1
    2k+1
    _____
    ± …
    __
    x1
    1
    = +
    $pi: 3.14159;
    __
    x3
    3
    − __
    x5
    5
    + __
    x7
    7

    * 180deg / $pi;

    View Slide

  19. @function sin($x, $terms: 10)
    {
    $sum: 0;
    $sign: 1;
    $numerator: $x;
    $denominator: 1;
    @for $i from 1 through $terms
    {
    $sum: $sum + $sign * $numerator/$denominator;
    $sign: -1 * $sign;
    $numerator: $numerator * $x * $x;
    $denominator: $denominator * 2*$i * (2*$i+1);
    }
    @return $sum;
    }


    k = 0
    sin x = (−1)k
    x2k+1
    (2k+1)!
    _______
    ± …
    __
    x1
    1!
    = + __
    x3
    3!
    − __
    x5
    5!
    + __
    x7
    7!

    Taylor series: sin

    View Slide

  20. @function cos($x, $terms: 10)
    {
    $sum: 0;
    $sign: 1;
    $numerator: 1;
    $denominator: 1;
    @for $i from 1 through $terms
    {
    $sum: $sum + $sign * $numerator/$denominator;
    $sign: -1 * $sign;
    $numerator: $numerator * $x * $x;
    $denominator: $denominator * 2*$i * (2*$i-1);
    }
    @return $sum;
    }


    k = 0
    cos x = (−1)k
    x2k
    (2k)!
    ____
    ± …
    __
    x0
    0!
    = + __
    x2
    2!
    − __
    x4
    4!
    + __
    x6
    6!

    Taylor series: cos

    View Slide

  21. Compass + mathematics
    Gunnar Bittersmann @g16n

    View Slide