
Banksy Shredder Built with CSS Grid - leemartin
https://codepen.io/leemartin/pen/pxNvod
======
Theodores
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
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
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
How would you approach adding physics to the shreds? Someone asked me for
cross-cutting.

~~~
Theodores
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
Everything old is new again:

[https://en.wikipedia.org/wiki/Auto-
destructive_art](https://en.wikipedia.org/wiki/Auto-destructive_art)

------
mikeryan
For reference.

[https://www.instagram.com/p/BomXijJhArX/?utm_source=ig_share...](https://www.instagram.com/p/BomXijJhArX/?utm_source=ig_share_sheet&igshid=qvhqfchno3hl)

------
amelius
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
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
Interesting story.

Perhaps Banksy needs to read this:

[https://en.wikipedia.org/wiki/Digital_signature](https://en.wikipedia.org/wiki/Digital_signature)

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

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

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

[https://www.logicalclocks.com/the-hortonworks-cloudera-
merge...](https://www.logicalclocks.com/the-hortonworks-cloudera-merger-and-
hopsworks/)

------
scolby33
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
this is broken - it should shred only half of the painting xD

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

