5 ms·

Single div Sierpinski triangle

142 points by spirit23 7y ago

forgotmypw 7y ago
This is awesome!
_hardwaregeek 7y ago
Y'know, I suspect certain groups of modernist painters would have a field day with CSS. De Stijl for instance would love it. There is something so elegant and fun about using a medium that forces you to use only circles, rectangles and a few select curves under a few simple transformations. I was visiting a 20th century art gallery and was joking with my friends about which painters could be implemented in CSS (Yves Klein ofc). Maybe I should go ahead and do it. There's a few Mondrians that'd be fairly easy.
- Vendan 7y ago
  You can go pretty darn far with CSS if you are ok with multiple divs... https://diana-adrianne.com/purecss-francine/ https://diana-adrianne.com/purecss-francine/
  - johnmorrison 7y ago
    That thing is insane! Although I guess if you have an arbitrary number of divs, CSS just becomes a much more esoteric equivalent to SVG
  - tapland 7y ago
    Ok. It crashes my galaxy s9s chrome browser so let's put up a warning about it being an insane browser expwriment
    - cookie_monsta 7y ago
      That's weird - works fine on Chrome on my s8
    - larkeith 7y ago
      Seems to be okay on Firefox on my S5 (though it takes a minute to load), in case you want to view it.
  - ebg13 7y ago
    > You can go pretty darn far with CSS if you are ok with multiple divs... Of course, if you're OK with multiple divs, the ultimate extension is to just make a giant rectangular grid of 1x1 pixel divs and color them appropriately.
    - dannyw 7y ago
      Or you can use `background-image: url()` in a single div, but that's cheating too ;)
wruza 7y ago
>Chrome can render as many triangles as possible but Safari and Firefox don't work well as the triangle is getting smaller. Web is awesome, and browsers are the most advanced tech! But it seems to be hard to draw flipping triangles at fixed coordinates. Maybe that could be fixed with e.g. a special planar geometry library that makes precise calculations. Like 500x3.125%==15.625 and not 27.
- Aardwolf 7y ago
  I also didn't find a way to reliably draw a non-smooth line on HTML 5 canvas, one that does not use sub pixel rendering. Sub-pixel rendering is often nice, but when you actually want a simple monochrome diagonal line filling only whole pixels on purpose (because, e.g., you don't want your intended 1-pixel wide black line to become a two-pixel wide gray line, or you're simply making something pixel-arty), the only reliable portable way to do it is to implement bresenham and draw it pixel by pixel yourself... The standard methods on a canvas that are supposed to make a non-smooth line, such as using exact pixel centers (shift 0.5) and width 1, work in some browsers, not in others, not for some angles of the line, and sometimes it even depends on the width and height in pixels of the canvas whether it'll look smooth or sharp, even for the exact same absolute coordinates of the line.
mcalus3 7y ago
I have made a funny Sierpinski carpet clicker recently, it's only 30 lines of code in react and unfortunately not one div, but it's still quite performant (safe to open, even on low-tier phones) https://recursivebuttons.mcalus.dev/ https://recursivebuttons.mcalus.dev/ i love all kinds of fractal generative art :)
- deleted 7y ago
  [deleted]
aidos 7y ago
Beautiful. I love that it looks like it’s all being built on its side but then he skews it back and it’s really just been there the whole time, leaning over so you don’t notice the structure.

142 points by spirit23 7y ago

This is awesome!

Y'know, I suspect certain groups of modernist painters would have a field day with CSS. De Stijl for instance would love it. There is something so elegant and fun about using a medium that forces you to use only circles, rectangles and a few select curves under a few simple transformations. I was visiting a 20th century art gallery and was joking with my friends about which painters could be implemented in CSS (Yves Klein ofc). Maybe I should go ahead and do it. There's a few Mondrians that'd be fairly easy.

Vendan 7y ago
You can go pretty darn far with CSS if you are ok with multiple divs... https://diana-adrianne.com/purecss-francine/ https://diana-adrianne.com/purecss-francine/
- johnmorrison 7y ago
  That thing is insane! Although I guess if you have an arbitrary number of divs, CSS just becomes a much more esoteric equivalent to SVG
- tapland 7y ago
  Ok. It crashes my galaxy s9s chrome browser so let's put up a warning about it being an insane browser expwriment
  - cookie_monsta 7y ago
    That's weird - works fine on Chrome on my s8
  - larkeith 7y ago
    Seems to be okay on Firefox on my S5 (though it takes a minute to load), in case you want to view it.
- ebg13 7y ago
  > You can go pretty darn far with CSS if you are ok with multiple divs... Of course, if you're OK with multiple divs, the ultimate extension is to just make a giant rectangular grid of 1x1 pixel divs and color them appropriately.
  - dannyw 7y ago
    Or you can use `background-image: url()` in a single div, but that's cheating too ;)

wruza 7y ago

>Chrome can render as many triangles as possible but Safari and Firefox don't work well as the triangle is getting smaller. Web is awesome, and browsers are the most advanced tech! But it seems to be hard to draw flipping triangles at fixed coordinates. Maybe that could be fixed with e.g. a special planar geometry library that makes precise calculations. Like 500x3.125%==15.625 and not 27.

Aardwolf 7y ago
I also didn't find a way to reliably draw a non-smooth line on HTML 5 canvas, one that does not use sub pixel rendering. Sub-pixel rendering is often nice, but when you actually want a simple monochrome diagonal line filling only whole pixels on purpose (because, e.g., you don't want your intended 1-pixel wide black line to become a two-pixel wide gray line, or you're simply making something pixel-arty), the only reliable portable way to do it is to implement bresenham and draw it pixel by pixel yourself... The standard methods on a canvas that are supposed to make a non-smooth line, such as using exact pixel centers (shift 0.5) and width 1, work in some browsers, not in others, not for some angles of the line, and sometimes it even depends on the width and height in pixels of the canvas whether it'll look smooth or sharp, even for the exact same absolute coordinates of the line.

mcalus3 7y ago

I have made a funny Sierpinski carpet clicker recently, it's only 30 lines of code in react and unfortunately not one div, but it's still quite performant (safe to open, even on low-tier phones) https://recursivebuttons.mcalus.dev/ https://recursivebuttons.mcalus.dev/ i love all kinds of fractal generative art :)

deleted 7y ago
[deleted]

aidos 7y ago

Beautiful. I love that it looks like it’s all being built on its side but then he skews it back and it’s really just been there the whole time, leaning over so you don’t notice the structure.