A presentation at Upfront in in Berlin, Germany by Gunnar Bittersmann
Sassematics Gunnar Bittersmann @g16n
Goal: scale images to equal area Photos: Gunnar Bittersmann
px
a·b=A b a a/b=r a=r·b r·b·b=A b² = A / r b = √A / r a = r · √A / r a = √A · r
@function sqrt($a) { } ? @function height($area, $ratio) { @return sqrt($area / $ratio) * 100%; } @function width($area, $ratio) { @return sqrt($area * $ratio) * 100%; } b = √A / r a = √A · r
Babylonian method (Heron’s method) a=2 x0 ≈ √a > 0 xn+1 = (xn + a / xn) / 2 x0 = 1 x1 = (1 + 2 / 1) / 2 = 1.5 x2 = (1.5 + 2 / 1.5) / 2 = 1.41666667 lim xn = √a n→∞ x3 = (1.41666667 + 2 / 1.41666667) / 2 = 1.41421568… √2 = 1.41421356…
Babylonian method (Heron’s method) x0 ≈ √a > 0 @function sqrt($a, $iterations: 10) { $x: 1; @for $i from 1 through $iterations { $x: ($x + $a / $x) / 2; } xn+1 = (xn + a / xn) / 2 lim xn = √a n→∞ } @return $x;
_math.scss @function sqrt($a) { } ! @import “math”; @function height($area, $ratio) { @return sqrt($area / $ratio) * 100%; } @function width($area, $ratio) { @return sqrt($area * $ratio) * 100%; } b = √A / r a = √A · r
@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; }
<img src=”img1.jpg” id=”img1” alt=”Collosseum” /> <img src=”img2.jpg” id=”img2” alt=”Collosseum” /> <img src=”img3.jpg” id=”img3” alt=”Collosseum” /> $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); }
<img src=”img1.jpg” class=”ratio3/2” alt=”Collosseum” /> <img src=”img2.jpg” class=”ratio2/3” alt=”Collosseum” /> <img src=”img3.jpg” class=”ratio3/2” alt=”Collosseum” /> $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); }
<img src=”img1.jpg” data-ratio=”3/2” alt=”Collosseum” /> <img src=”img2.jpg” data-ratio=”2/3” alt=”Collosseum” /> <img src=”img3.jpg” data-ratio=”3/2” alt=”Collosseum” /> $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); }
<img src=”img1.jpg” alt=”Collosseum” /> <img src=”img2.jpg” alt=”Collosseum” /> <img src=”img3.jpg” alt=”Collosseum” /> $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); }
Goal: scale images to equal area ✔ Photos: Gunnar Bittersmann
φ -x-linear-gradient(bottom left, black, white) linear-gradient( #{$phi}deg, black, white) linear-gradient(to top right, black, white)
b tan φ = b / a φ = arctan (b / a) φ a
Taylor series: arctan ∞ arctan x = ∑ x2k+1 (−1)k _____ 2k+1 $pi: 3.14159; @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; } k=0 5 x3 __ x7 x1 __ x __ __ − − =+ ±… + 3 7 1 5 } @return $sum;* 180deg / $pi;
Taylor series: sin ∞ sin x = ∑ x2k+1 (−1)k _______ (2k+1)! @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); } k=0 5 x3 __ x7 x1 __ x __ __ − − =+ ±… + 1! 3! 5! 7! } @return $sum;
Taylor series: cos ∞ cos x = ∑ x2k (−1)k ____ (2k)! @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); } k=0 4 x2 __ x6 x0 __ x __ __ − − =+ ±… + 0! 2! 4! 6! } @return $sum;
Compass + mathematics Gunnar Bittersmann @g16n
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!
