Sunday, September 1, 2013

Folding Polygons the Naughty Way: in 3D, with Intersections and a Video Veneer

My recent post on displaying video on wobbly surfaces amused ArtS of Meno Park CA and to make a long story short we had a delightful lunch together today. It's not often that I find anybody like Art in the meatworld that likes to talk about 3D.

We talked about many aspects of 3D. For example, a great introdution to JavaScript coding in 3D is here: Look for the word 'wireframeLinewidth' ( at the end of the long sentence in the middle) and change the '2' to an '8'. Bingo! You are a programmer.

And we talked a lot about tween.js - a brilliant way of morphing all matter of stuff in 3D and 3D.

But mostly we talked about displaying video on folding polygons, Folding polygons are things that look like the images in the link provide by Art to this book: Basically, if you like origami then you like folding polygons.

Many of the discussions on folding polygons relate to morphing the polygons on a 2D plane
such that no vertex is 'naughty' and crosses over or intersects anybody else's line. This is certainly fun stuff. But even more fun - or fun in a different way - is the exploration of 'naughty' folding and 3D folding.

After lunch I built some demos that begin to explore the naughty bits.


This first demo is a version of the Three.js demo:

The code is greatly simplified, and made suitable for being used as boilerplate for further apps/

The next demo is here:

Question: can you make a video with holes in it? This app shows the answer is 'yes!'

The fun thing here is the array that is used to layout the position of the holes. See below - if you look carefully you can see the word 'Art' spelled out. Now is that the Art I had lunch with or is it that thing that people do with chemicals and brushes? Who knows.

You can see that the array is laid out as 20 x10 grid - just as  the cubes in the grid are laid out. A 1 indicates inserting the cube. A 0 indicates leaving the cube out. I enjoyed this cute, ever so simple 'Art'istic method for creating a 'pixelated' video.

var pixels = [


This is the actual 'naughty' folded polygon demo. You will note that the 'teeth; are splayed out in 3D
but if they were laid out flat the teeth would intersect. In other words, you could not cut this thing out of a single sheet of paper.

And then again, even if you could, you might also have some trouble displaying video on the impossibly cut sheet of paper.

If you asked me a year ago if a script-kiddie of my ability could code the display of a video on an impossible origami fold, I would have laughed. Actually, I am still laughing because the demo kind of sucks. Looking at the video from the back or from the side is vaguely interesting - for about four seconds. And sometimes the video feels a bit 3D-like.  But, frankly, I am happiest when it's all 3D through and through. But if you do have any good "Can you do this?" challenges, I would be delighted to hear about them. Art, I am looking at you.

Source Code: