5 ms·

Banksy Shredder Built with CSS Grid

121 points by leemartin 8y ago

jypepin 8y ago
This is pretty neat, but I think the shredded part would have been much easier/clean to make using linear-gradient, instead of having 1 div per shredded piece. Lynn Fisher has a great project[1] that shows great usage and powers of linear-gradients. [1] https://a.singlediv.com https://a.singlediv.com
- leemartin 8y ago
  Yeh, for sure. This was a quick little hack and I suspect my original thought was that I would animate each piece, hence the individual elements.
mikeryan 8y ago
For reference. https://www.instagram.com/p/BomXijJhArX/?utm_source=ig_share_sheet&igshid=qvhqfchno3hl https://www.instagram.com/p/BomXijJhArX/?utm_source=ig_share...
Theodores 8y ago
That is not CSS Grid! A true CSS grid would use shorthand notation. (This is constructive criticism, all mention of CSS Grid is good) Instead of: grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; Use the easy to read, maintainable syntax: grid-template-columns: repeat(11, 1fr); The rest of the CSS might as well be 'built with Flex' or 'built with block layout'. It is okay to mix and match but 'as advertised' one expects more Grid-ness to it. You could build all of it in actual CSS grid with no block/flex layouts, plus the quantity of javascript libraries is a bit excessive for 'grid'. CSS grid assumes an evergreen modern browser so you can use modern javascript without adding in large chunks of stuff that older browsers might need to download. The CSS definitions on a per-strip basis are also a bit excessive, if you wanted 12 instead of 11 strips then you would need to update a dozen lines of CSS, not so good for whomever maintains the shredder code. Perhaps use javascript there if you want to animate everything? I wouldn't be posting this comment if I wasn't impressed and a little entertained.
- leemartin 8y ago
  Oh shit, I didn't even know about shorthand notation. That saves me a line break in my Medium writeup. THANK YOU. Thanks for the in-depth critique! I'd be worried if you saw the code I wrote for a living.
  - Theodores 8y ago
    Don't worry, you haven't seen mine and mine is not finished, at least your pet-project code is! I enjoy the learning and discovery that goes with CSS grid, if I look at my first attempts I realise how I wasn't thinking straight then...
    - leemartin 8y ago
      How would you approach adding physics to the shreds? Someone asked me for cross-cutting.
      - Theodores 8y ago
        Back to the drawing board, sometimes you need a better starting point. How is your 3D modelling? If done in 3D and made web possible with ThreeJS then the world is your oyster. You could model the frame, the reflection on the glass, maybe even add a gentle breeze. The strips would be low polygon count squares with the vertex normals set to smooth shading but fully 'cut-able'. Add some physics engine and you could have the cut pieces of paper behave like confetti. As for a starting point: https://threejs.org/examples/#webgl_animation_cloth https://threejs.org/examples/#webgl_animation_cloth
amelius 8y ago
Somewhat related question: how do we know that Banksy's art is all by the same person? What prevents others to publish art under Banksy's name (with or without approval)?
- EnnuiRB 8y ago
  I once had a job in which I was asked to modify the girl with a balloon. I was never given any contact details except for an email address to who I was told was Banksys manager. Considering the extent to which I butchered the artwork for a specific event I was quite shocked at how quickly I was given approval to show the piece that I had modified. I guessed that there probably was no such manager. I also guess a few people do help out with the projects but I think it's one person conceptually behind it all.
  - amelius 8y ago
    Interesting story. Perhaps Banksy needs to read this: https://en.wikipedia.org/wiki/Digital_signature https://en.wikipedia.org/wiki/Digital_signature
    - untog 8y ago
      I think part of the point is that Banksy doesn't really care.
- leonnoel 8y ago
  Most of the pieces show up on their instagram
- gmu3 8y ago
  There's a site that authenticates pieces for him: https://www.pestcontroloffice.com/whatispco.html https://www.pestcontroloffice.com/whatispco.html although I don't think they'll authenticate the counterfeit Diana notes he made and obviously that wouldn't stop with approval.
- pvarangot 8y ago
  Almost every single big graphic artist from the first painters up to current ones has a workshop with sometimes three or four "layers" of management, but plans and controls the vision himself. I suspect Banksy is no exception.
amelius 8y ago
Everything old is new again: https://en.wikipedia.org/wiki/Auto-destructive_art https://en.wikipedia.org/wiki/Auto-destructive_art
jacquesm 8y ago
Anybody that felt this was interesting should check out Jean Tinguely.
jamesblonde 8y ago
Thanks @leemartin - i used this already for a quick blog post on Hortonworks + Cloudera: https://www.logicalclocks.com/the-hortonworks-cloudera-merger-and-hopsworks/ https://www.logicalclocks.com/the-hortonworks-cloudera-merge...
scolby33 8y ago
Something about the linked page breaks my Chrome scrollbar. Going there, then back button to the HN page and it looks like this[1] and no longer moves as I scroll. [1] https://imgur.com/a/ac8BMfG https://imgur.com/a/ac8BMfG
_mrmnmly 8y ago
this is broken - it should shred only half of the painting xD

121 points by leemartin 8y ago

This is pretty neat, but I think the shredded part would have been much easier/clean to make using linear-gradient, instead of having 1 div per shredded piece. Lynn Fisher has a great project[1] that shows great usage and powers of linear-gradients. [1] https://a.singlediv.com https://a.singlediv.com

leemartin 8y ago
Yeh, for sure. This was a quick little hack and I suspect my original thought was that I would animate each piece, hence the individual elements.

mikeryan 8y ago

For reference. https://www.instagram.com/p/BomXijJhArX/?utm_source=ig_share_sheet&igshid=qvhqfchno3hl https://www.instagram.com/p/BomXijJhArX/?utm_source=ig_share...

Theodores 8y ago

That is not CSS Grid! A true CSS grid would use shorthand notation. (This is constructive criticism, all mention of CSS Grid is good) Instead of: grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; Use the easy to read, maintainable syntax: grid-template-columns: repeat(11, 1fr); The rest of the CSS might as well be 'built with Flex' or 'built with block layout'. It is okay to mix and match but 'as advertised' one expects more Grid-ness to it. You could build all of it in actual CSS grid with no block/flex layouts, plus the quantity of javascript libraries is a bit excessive for 'grid'. CSS grid assumes an evergreen modern browser so you can use modern javascript without adding in large chunks of stuff that older browsers might need to download. The CSS definitions on a per-strip basis are also a bit excessive, if you wanted 12 instead of 11 strips then you would need to update a dozen lines of CSS, not so good for whomever maintains the shredder code. Perhaps use javascript there if you want to animate everything? I wouldn't be posting this comment if I wasn't impressed and a little entertained.

leemartin 8y ago
Oh shit, I didn't even know about shorthand notation. That saves me a line break in my Medium writeup. THANK YOU. Thanks for the in-depth critique! I'd be worried if you saw the code I wrote for a living.
- Theodores 8y ago
  Don't worry, you haven't seen mine and mine is not finished, at least your pet-project code is! I enjoy the learning and discovery that goes with CSS grid, if I look at my first attempts I realise how I wasn't thinking straight then...
  - leemartin 8y ago
    How would you approach adding physics to the shreds? Someone asked me for cross-cutting.
    - Theodores 8y ago
      Back to the drawing board, sometimes you need a better starting point. How is your 3D modelling? If done in 3D and made web possible with ThreeJS then the world is your oyster. You could model the frame, the reflection on the glass, maybe even add a gentle breeze. The strips would be low polygon count squares with the vertex normals set to smooth shading but fully 'cut-able'. Add some physics engine and you could have the cut pieces of paper behave like confetti. As for a starting point: https://threejs.org/examples/#webgl_animation_cloth https://threejs.org/examples/#webgl_animation_cloth

amelius 8y ago

Somewhat related question: how do we know that Banksy's art is all by the same person? What prevents others to publish art under Banksy's name (with or without approval)?

EnnuiRB 8y ago
I once had a job in which I was asked to modify the girl with a balloon. I was never given any contact details except for an email address to who I was told was Banksys manager. Considering the extent to which I butchered the artwork for a specific event I was quite shocked at how quickly I was given approval to show the piece that I had modified. I guessed that there probably was no such manager. I also guess a few people do help out with the projects but I think it's one person conceptually behind it all.
- amelius 8y ago
  Interesting story. Perhaps Banksy needs to read this: https://en.wikipedia.org/wiki/Digital_signature https://en.wikipedia.org/wiki/Digital_signature
  - untog 8y ago
    I think part of the point is that Banksy doesn't really care.
leonnoel 8y ago
Most of the pieces show up on their instagram
gmu3 8y ago
There's a site that authenticates pieces for him: https://www.pestcontroloffice.com/whatispco.html https://www.pestcontroloffice.com/whatispco.html although I don't think they'll authenticate the counterfeit Diana notes he made and obviously that wouldn't stop with approval.
pvarangot 8y ago
Almost every single big graphic artist from the first painters up to current ones has a workshop with sometimes three or four "layers" of management, but plans and controls the vision himself. I suspect Banksy is no exception.

amelius 8y ago

Everything old is new again: https://en.wikipedia.org/wiki/Auto-destructive_art https://en.wikipedia.org/wiki/Auto-destructive_art

jacquesm 8y ago

Anybody that felt this was interesting should check out Jean Tinguely.

jamesblonde 8y ago

Thanks @leemartin - i used this already for a quick blog post on Hortonworks + Cloudera: https://www.logicalclocks.com/the-hortonworks-cloudera-merger-and-hopsworks/ https://www.logicalclocks.com/the-hortonworks-cloudera-merge...

scolby33 8y ago

Something about the linked page breaks my Chrome scrollbar. Going there, then back button to the HN page and it looks like this[1] and no longer moves as I scroll. [1] https://imgur.com/a/ac8BMfG https://imgur.com/a/ac8BMfG

_mrmnmly 8y ago

this is broken - it should shred only half of the painting xD