Show HN: Minimal 3D creative coding tool – control 8×8×8 dots with JavaScript

Show HN: Minimal 3D creative coding tool – control 8×8×8 dots with JavaScript(doersino.github.io)

206 points by doersino 5 years ago | 30 comments

doersino 5 years ago |

Repeatedly click the dots for a tutorial, click and drag to rotate, and – after writing a function of your own – hit "enter" to generate a shareable URL!

The source code can be found here: https://github.com/doersino/tixyz

Let me be clear: This thing is wholly derivative, merely adding a third dimension to Martin Kleppe's excellent creative code golfing tool tixy [0] (which you should definitely check out if you find yourself liking this 3D variant of it) by mashing it up with David DeSandro's equally-excellent 3D library Zdog [1]. Those two deserve any and all credit.

[0]: https://tixy.land and previously discussed at https://news.ycombinator.com/item?id=24974534

[1]: https://zzz.dog and https://news.ycombinator.com/item?id=20036169

huhtenberg 5 years ago | |

This looks way to close to the original, and deceptively so at that.

I doubt it was your intent, but at the very least you should give the credit to tixy.land, with a link, front and center right there on the page.

Also, something as simple as using a different color pair would really help to distance it from the original.

doersino 5 years ago | | |

The author of tixy.land didn't seem to take issue with my "clone" (or the many others) – quite the opposite: https://twitter.com/aemkei/status/1325525563579244548

I don't think "deceptively" is the best word here – there's no money or private data involved, at most a small bit of street cred. The near-identical look was intended to preserve the simplicity of the original. Note that there's a reference to tixy.land in my comment here, in the README.md on GitHub, and in the tweet that's behind the "more info here" link. Anyone looking to do more than just idly play around with this tool will come across one of them.

But I get your point – I'll be adding an unobtrusive link back directly to tixy.land soon!

EDIT: Done.

chaosmachine 5 years ago |

My best:

  tan(i*t/999)*(~~(t*24%7)==i%7)

https://doersino.github.io/tixyz/?code=tan%28i*t%2F999%29*%2...

Play with the frame rate ("24") for some interesting effects.

Edit: One more:

https://doersino.github.io/tixyz/?code=sin%28i*t%2F999%29*%2...

yesenadam 5 years ago |

This is so cool! Great job.

sin(i+t) : https://doersino.github.io/tixyz/?code=sin(i%2Bt)

If you stop that one rotating with the mouse, it's some kind of brain-damaging illusion. Or thousands of illusions, most of which do something weird to your eyes–it looks very different from different angles. Hmm that is such a great way of generating (2D) optical illusions!

peanutz454 5 years ago | |

This is so cool, I am still unable to clearly comprehend what is going on at one layer. I wonder if there is some way to set others layers to zero!

doersino 5 years ago | | |

There sure is – one way is using the good ol' conditional operator:

  (x==3)?sin(i+t):0

Result: https://doersino.github.io/tixyz/?code=%28x%3D%3D3%29%3Fsin%...

Another is multiplying with a boolean expression that's automatically cast to 0 or 1 depending on its value:

  sin(i+t)*(x==3)

Result: https://doersino.github.io/tixyz/?code=sin%28i%2Bt%29*%28x%3...

rjmunro 5 years ago |

I think this would might better with a slight perspective transformation, at least for some effects - sometimes the 3d is hard to appreciate.

Also once you drag manually there is no way to put it back into auto-rotate mode. It would be great if there was a bit of momentum when you drag - it should carry on at the speed you dragged it.

richrichardsson 5 years ago | |

Also came here to make the same suggestion.

A configurable perspective transform would be brilliant.

azhenley 5 years ago |

Inspired by tixy.land, I recently made a simple game engine with 16x16 animated “pixels”. We used it as an in-class activity during the last week of the semester.

https://github.com/AZHenley/wiggleface

_Microft 5 years ago |

Did you fix the bug in the tixy.land code where one could inject as much code as wanted via location.hash?

Here is the post from when I discovered it:

https://news.ycombinator.com/item?id=24980221

Edit: no, that still works, here is an example:

https://doersino.github.io/tixyz/?code=eval(%27%2F*%27%2Bpar...

doersino 5 years ago | |

That "bug" has become sort of a feature – the author of tixy.land added support for it a while ago [1], which I also merged into tixyz.

[1]: https://twitter.com/aemkei/status/1325918933375987712

AntonyGarand 5 years ago | | |

I assume he means the size of the payload remains technically below 32 while the "real" code is larger due to evaluating location.hash. `eval(location.hash.substring(1))` is 32 characters, but the hash itself can be few kilobytes

I used this to merge two tixies a while back, and execute an XSS as proof of concept [0]

[0] https://twitter.com/AntoGarand/status/1327101941760086017

simlevesque 5 years ago |

Old ambulance light: https://doersino.github.io/tixyz/?code=%28Math.random%28%29%...

Edit: i just figured out that t is a float, I thought it was the seconds as an int.

Edit 2: if anyone reads this, try to make a barbershop type thing.

schaefer 5 years ago |

I love this project.

but also, if you are sensitive to flashing lights, this web page has 512 of them.

tuukkah 5 years ago | |

Easiest fix could be to tone down the white and red colors by default so that any flashing stays under the accessibility threshold.

It would also be cheap to render frames one second ahead, but I don't know if a client-side accessibility analyzer exists to create a warning dialog in case the frames contain too much flashing.

gregmac 5 years ago |

I've wanted to build a LED cube [1] for a while, but just haven't had the time to get to it yet. This is basically a virtual version of the same thing, very cool. And significantly simpler to experiment with before committing to several days of soldering.

[1] https://www.instructables.com/Led-Cube-8x8x8/

abstractfoundry 5 years ago | |

Blatant self promotion, but my friend and I just launched an LED cube kit on Kickstarter [1] which you might be interested in (no soldering). It's just the outermost LEDs on three sides, but the idea is similar, you create all sorts of animations in just a few lines of Python, e.g. use 4D noise to create a digital lava lamp effect etc. Also every component exposes a REST endpoint, so you can use other languages too.

[1] https://www.kickstarter.com/projects/1202256831/lumicube-an-...

Draken93 5 years ago | | |

I am happy that this great idea is so successfull! Congrats!

doersino 5 years ago | | |

Wow, what a cool idea!

pantelisk 5 years ago |

ha, awesome! I love how minimal the whole approach is

I call this, "Sweeping Vertigo" https://doersino.github.io/tixyz/?code=tan%28i%2Bt%29*random...

quickthrower2 5 years ago |

Jelly: Math.random(1)

https://doersino.github.io/tixyz/?code=Math.random(1)

quickthrower2 5 years ago | |

James Bond: https://doersino.github.io/tixyz/?code=%21y%26%21z%26%26x-t%...

quickthrower2 5 years ago | | |

Filler: https://doersino.github.io/tixyz/?code=%21z%26%26x%2By*8-t*2...

24h clock: https://doersino.github.io/tixyz/?code=x%3C6%26z%3C3%26z*48%...

Each ball is 10 minutes, it first counts to 6 for 1 line is 1 hour, then fills a rectangle for 8 hours, then fills two more rectangles to 24 hours.

rsiqueira 5 years ago |

There can be a real-life 2D version of this: it probably can be integrated to an Arduino project using a LED 8x8 Red Dot Matrix Display (piece code MAX7219).

doersino 5 years ago | |

That's been done before with tixy.land, the project that inspired my tool:

https://twitter.com/atesgoral/status/1325947885817565185

https://twitter.com/aemkei/status/1325888127102226432

3D LED cubes are also a thing, as another commenter in this thread noted:

https://news.ycombinator.com/item?id=26978173