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

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