Back to the roots again

Back to the roots

Back to the Future

THE FUTURE IS NOW

BACK TO THE ROOTS AGAIN

BEISPIEL: BILDERGALERIE

BEISPIEL: BILDERGALERIE

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

Sassematics Gunnar Bittersmann @g16n

Babylonian method (Heron’s method)
x0 ≈ √a > 0
xn+1 = (xn + a / xn) / 2
lim xn = √a

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…

Babylonian method (Heron’s method)
@function sqrt($a, $iterations: 10) {
$x: 1;
@for $i from 1 through $iterations { $x: ($x + $a / $x) / 2; }
@return $x;
}

Custom properties sind mehr als bloß CSS-Variablen

Heron-Verfahren (babylonisches Wurzelziehen) —area: 0.4; —a: calc(var(!—area) * var(—aspect-ratio)); —x0: 1; —x1: calc((var(!—x0) + var(!—a) / var(!—x0)) / 2); —x2: calc((var(!—x1) + var(!—a) / var(!—x1)) / 2); —x3: calc((var(!—x2) + var(!—a) / var(!—x2)) / 2); width: calc(var(!—x3) * 100%);

THE FUTURE IS NOW sqrt()

6 10 1 0 5 14

BACK TO THE ROOTS AGAIN FOTOS: GUNNAR BITTERSMANN