O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Exploring fractals in CSS, @fronttrends, Warsaw, 2015

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio

Confira estes a seguir

1 de 72 Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Anúncio

Semelhante a Exploring fractals in CSS, @fronttrends, Warsaw, 2015 (20)

Mais recentes (20)

Anúncio

Exploring fractals in CSS, @fronttrends, Warsaw, 2015

  1. 1. dzień dobry
  2. 2. Romanesco
  3. 3. Frost
  4. 4. Snowflake
  5. 5. Seaurchin
  6. 6. Tree
  7. 7. Lightning
  8. 8. GregorAdams web developer / front-end architect SINNERSCHRADER Hamburg, Germany
  9. 9. Exploringfractals inCSS
  10. 10. - Wikipedia “A fractal is a natural phenomenon or a mathematical set that exhibits a repeating pattern that displays at every scale. If the replication is exactly the same at every scale, it is called a self-similar pattern.”
  11. 11. - Wikipedia “A fractal is a natural phenomenon or a mathematical set that exhibits a repeating pattern that displays at every scale. If the replication is exactly the same at every scale, it is called a self-similar pattern.”
  12. 12. MandelbrotSet
  13. 13. Zn + 1 = Zn² + C Xn + 1 = Xn * Xn - Yn * Yn + X and Yn + 1 = 2 * Xn * Yn + Y http://rosettacode.org/wiki/Mandelbrot_set
  14. 14. $canvasWidth: 40; $canvasHeight: 40; $iterations: 20; $xCorner: -2; $yCorner: -1.5; $dotSize: 8px; $zoom: 3; $data: ()!global; @mixin plot ($x,$y,$count){ $index: ($y * $canvasWidth + $x) * 4; $r: $count * -12 + 255; $g: $count * -12 + 255; $b: $count * -12 + 255; $a: 255; $data: append($data, $x*$dotSize $y*$dotSize 0 rgba($r,$g,$b,$a), comma)!global; } @for $x from 1 through $canvasWidth { @for $y from 1 through $canvasHeight { $count: 0; $size: 0; $cx: $xCorner + (($x * $zoom) / $canvasWidth); $cy: $yCorner + (($y * $zoom) / $canvasHeight); $zx: 0; $zy: 0; @while $count < $iterations and $size <= 4 { $count: $count + 1; $temp: ($zx * $zx) - ($zy * $zy); $zy: (2 * $zx * $zy) + $cy; $zx: $temp + $cx; $size: ($zx * $zx) + ($zy * $zy); } @include plot($x, $y, $count); } } mandelbrot-set { $marginRight: $dotSize*$canvasWidth; $marginBottom: $dotSize*$canvasHeight; display: inline-block; height: $dotSize; width: $dotSize; margin: 0 $marginRight $marginBottom 0; box-shadow: $data; }
  15. 15. $data: ()!global; @mixin plot ($x,$y,$count){ $index: ($y * $canvasWidth + $x) * 4; $r: $count * -12 + 255; $g: $count * -12 + 255; $b: $count * -12 + 255; $a: 255; $data: append($data, $x*$dotSize $y*$dotSize 0 rgba($r,$g,$b,$a), comma)!global; }
  16. 16. $data: ()!global; @mixin plot ($x,$y,$count){ $index: ($y * $canvasWidth + $x) * 4; $r: $count * -12 + 255; $g: $count * -12 + 255; $b: $count * -12 + 255; $a: 255; $data: append($data, $x*$dotSize $y*$dotSize 0 rgba($r,$g,$b,$a), comma)!global; }
  17. 17. @for $x from 1 through $canvasWidth { @for $y from 1 through $canvasHeight { $count: 0; $size: 0; $cx: $xCorner + (($x * $zoom) / $canvasWidth); $cy: $yCorner + (($y * $zoom) / $canvasHeight); $zx: 0; $zy: 0; @while $count < $iterations and $size <= 4 { $count: $count + 1; $temp: ($zx * $zx) - ($zy * $zy); $zy: (2 * $zx * $zy) + $cy; $zx: $temp + $cx; $size: ($zx * $zx) + ($zy * $zy); } @include plot($x, $y, $count); } }
  18. 18. @for $x from 1 through $canvasWidth { @for $y from 1 through $canvasHeight { $count: 0; $size: 0; $cx: $xCorner + (($x * $zoom) / $canvasWidth); $cy: $yCorner + (($y * $zoom) / $canvasHeight); $zx: 0; $zy: 0; @while $count < $iterations and $size <= 4 { $count: $count + 1; $temp: ($zx * $zx) - ($zy * $zy); $zy: (2 * $zx * $zy) + $cy; $zx: $temp + $cx; $size: ($zx * $zx) + ($zy * $zy); } @include plot($x, $y, $count); } }
  19. 19. @for $x from 1 through $canvasWidth { @for $y from 1 through $canvasHeight { $count: 0; $size: 0; $cx: $xCorner + (($x * $zoom) / $canvasWidth); $cy: $yCorner + (($y * $zoom) / $canvasHeight); $zx: 0; $zy: 0; @while $count < $iterations and $size <= 4 { $count: $count + 1; $temp: ($zx * $zx) - ($zy * $zy); $zy: (2 * $zx * $zy) + $cy; $zx: $temp + $cx; $size: ($zx * $zx) + ($zy * $zy); } @include plot($x, $y, $count); } }
  20. 20. mandelbrot-set { $marginRight: $dotSize*$canvasWidth; $marginBottom: $dotSize*$canvasHeight; display: inline-block; height: $dotSize; width: $dotSize; margin: 0 $marginRight $marginBottom 0; box-shadow: $data; }
  21. 21. mandelbrot-set { $marginRight: $dotSize*$canvasWidth; $marginBottom: $dotSize*$canvasHeight; display: inline-block; height: $dotSize; width: $dotSize; margin: 0 $marginRight $marginBottom 0; box-shadow: $data; }
  22. 22. 160,000 dots 20 iterations 5 1/2 hours mandelbrot.cssnerd.com/v2/ codepen.io/pixelass/pen/OPryeM
  23. 23. The number of iterations defines the detail of the fractal
  24. 24. 160,000 dots 70 iterations 3 1/2 hours codepen.io/pixelass/pen/HbnCv mandelbrot.cssnerd.com/detail/
  25. 25. 100.000 iterations 2 hours codepen.io/pixelass/pen/NqWEmd barnsley.cssnerd.com/ Barnsleyfern
  26. 26. Chaos game | x | | r*cos(a) -s*sin(b) | | x | | h | w1 | | = | | | | + | | | y | | r*sin(a) s*cos(b) | | y | | k | Translation Rotation Scaling h,k a,b r,s w1 0,0 0,0 0,0.16 w2 0,1.6 -2.5,-2.5 0.85,0.85 w3 0,1.6 49,49 0.3,0.3 w4 0,0.44 120,-50 0.3,0.37
  27. 27. Chaos&Sass arenotfriends
  28. 28. different systems to draw fractals Iterated Function System (IFS) Lindenmayer-System (L-System)
  29. 29. codepen.io/pixelass/pen/yNyORy SierpinskiTriangle
  30. 30. .side { position: absolute; top: 0; height: 0; width: 1em; box-shadow: 0 0 0 1px black; font-size: 0.5em; } .side:nth-child(1) { left: 50%; transform-origin: 0% 50%; transform: rotate(240deg); } .side:nth-child(2) { right: 50%; transform-origin: 100% 50%; transform: rotate(-240deg); } .side:nth-child(3) { left: 25%; transform: translateY(-0.86603em); } .base { position: absolute; top: 50%; left: 50%; font-size: 40em; margin-top: -0.1em; } .base > .side { top: 50%; left: 50%; margin: 0 -0.5em; transform-origin: 50% 50%; } .base > .side:nth-child(1) { transform: rotate(0deg) translateY(0.28868em) rotate(180deg); } .base > .side:nth-child(2) { transform: rotate(120deg) translateY(0.28868em) rotate(180deg); } .base > .side:nth-child(3) { transform: rotate(240deg) translateY(0.28868em) rotate(180deg); }
  31. 31. <div class="base"> <div class="side"> <div class="side"> <div class="side"> <div class="side"> <div class="side"> <div class="side"> </div> <div class="side"> </div> <div class="side"> </div> </div> <div class="side"> <div class="side"> </div> <div class="side"> </div> <div class="side"> </div> </div> <div class="side"> <div class="side"> </div> <div class="side"> </div> <div class="side"> </div> </div> </div> ...
  32. 32. codepen.io/pixelass/pen/KpPqjR SierpinskyCarpet
  33. 33. .square { height: 10em; width: 10em; display: flex; flex-flow: row wrap; font-size: 0.33333em; background: white; box-shadow: 0 0 0 3.33333em black inset; transform-origin: 0 0; } .square:nth-child(5) { visibility: hidden; }
  34. 34. codepen.io/pixelass/pen/NqWLBY MengerSponge
  35. 35. .cube { font-size: 7em; height: 1em; width: 1em; position: absolute; top: 50%; left: 50%; margin: -0.5em; } .cube .cube { font-size: 0.34em; } .cube .cube:nth-child(1) { transform: translate3d(-1em, -1em, -1em); } ... ... ... ... .cube .cube:nth-child(27) { transform: translate3d(1em, 1em, 1em); } .cube .sides { visibility: visible; transform: translate3d(0, 0, 0.5em); background: #3d3d3d; } .cube .sides, .cube .sides:before, .cube .sides:after { height: 100%; width: 100%; position: absolute; top: 0; left: 0; box-shadow: inset 0 0 0 1px rgba(178, 178, 178, 0.3); } .cube .sides:before, .cube .sides:after { content: ''; } .cube .sides:before { transform-origin: 100% 50%; transform: rotateY(-90deg); background: #666; } .cube .sides:after { transform-origin: 50% 0%; transform: rotateX(-90deg); background: #848484; }
  36. 36. codepen.io/collection/tvJqF/ CSSFractals
  37. 37. codepen.io/pixelass/pen/wavNmN Rep-tile
  38. 38. codepen.io/pixelass/pen/qdBQNY T-square
  39. 39. codepen.io/pixelass/pen/xGKPQe QuadraticCross
  40. 40. codepen.io/pixelass/pen/rVNbrb KochSnowflake
  41. 41. codepen.io/pixelass/pen/doyxEp KochSnowflake
  42. 42. codepen.io/pixelass/pen/MwYjjG Tree
  43. 43. codepen.io/pixelass/pen/LVPWoy PythagorasTree
  44. 44. a b c a² + b² = c² Pythagorean Theorem
  45. 45. a b c c / sqrt(2) = a = b Right Isosceles Triangle
  46. 46. $nested-size: 100%/sqrt(2);// ~70.71% div { height: $nested-size; width: $nested-size; }
  47. 47. $nested-size: 100%/sqrt(2); div { height: $nested-size; width: $nested-size; position: absolute; bottom: 100%; left: 0; transform-origin: 0% 100%; transform: rotate(-45deg); background: black; }
  48. 48. codepen.io/pixelass/pen/Hrkmt
  49. 49. Ihaveanidea
  50. 50. Simplify the tree to the half of one branch
  51. 51. -webkit-box-reflect
  52. 52. $nested-size: 100%/sqrt(2); div { position: absolute; bottom: 100%; left: 0; height: $nested-size; width: $nested-size; transform-origin: 0% 100%; transform: rotate(-45deg); background: black; // fractal magic -webkit-box-reflect: right; }
  53. 53. codepen.io/pixelass/pen/Hrkmt
  54. 54. codepen.io/pixelass/pen/zhtyp
  55. 55. codepen.io/pixelass/pen/sdjLH
  56. 56. Confused? Let’scodethislive
  57. 57. @GregorAdams @pixelass @pixelass
  58. 58. …onemorething
  59. 59. dziękuję

×