Banksy Shredder Built with CSS Grid | Hacker News Reader

Banksy Shredder Built with CSS Grid

codepen.io

121 pointsleemartin25 comments

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.

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.

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...

How would you approach adding physics to the shreds? Someone asked me for cross-cutting.

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

Everything old is new again:

https://en.wikipedia.org/wiki/Auto-destructive_art

For reference.

https://www.instagram.com/p/BomXijJhArX/?utm_source=ig_share...

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)?

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.

Interesting story.

Perhaps Banksy needs to read this:

https://en.wikipedia.org/wiki/Digital_signature

I think part of the point is that Banksy doesn't really care.

Most of the pieces show up on their instagram

There's a site that authenticates pieces for him: 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.

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.

His instagram page and website show his works and the latter keeps a running tally of unauthorized exhibitions[1], so I imagine they'd list any fake/unauthorized works if discovered.

[1] http://banksy.co.uk/shows.asp

How do we know the Instagram is run by the original Banksy? Maybe "Banksy" is like the Dread Pirate Roberts, a title held by many people at different times.

I expect the real Banksy would make it known.

I believe klipt's point is that a group of people may agree to use the name (potentially at different times), not that someone is using it without the originator's consent.

"how do we know that Banksy's art is all by the same person?"

We don't.

"What prevents others to publish art under Banksy's name (with or without approval)?"

Whoever owns or manages Banksy's brand and instagram profile.

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

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.

Thanks @leemartin - i used this already for a quick blog post on Hortonworks + Cloudera:

https://www.logicalclocks.com/the-hortonworks-cloudera-merge...

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

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

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

Reply on news.ycombinator.com