top | item 31311463

Viz Studio: code-based live animation editor

118 points| memalign | 3 years ago |viz.intelligence.rocks

33 comments

order
[+] memalign|3 years ago|reply
I found this cool tool browsing the website[0] of another popular post on HN today[1].

Here are some cool examples:

Double Pendulum: https://viz.intelligence.rocks/#pendulum

Mandelbrot: https://viz.intelligence.rocks/#mandelbrot (This one is melting my brain)

0: https://jason.today/

1: https://news.ycombinator.com/item?id=31309616

[+] bsenftner|3 years ago|reply
Having coded some of the original fractal math research for DeVanney and Mandelbrot, watching that fractal render so many frames per second is a mind blow. We used to have to wait several minutes for a single 256x256 image.
[+] ArtWomb|3 years ago|reply
Whoa, love the "hot re-loading" on edit. It's super fun but as there's no undo, kind of live coding with no safety net.

I use Inigo Quilez' Graph Toy as well. I figure combing the two into a pipeline, one to generate interesting looking (implicit surface) functions, and one to visualize them in a voxel system with monte carlo rendering is sort of the viz tool I'm evolving toward. Shader toy requires so much code for rapid prototyping because everyone has to constantly re-invent everything from scratch! It's a unified shading model sans standard lib ;)

[+] HWR_14|3 years ago|reply
Is the physics on the double pendulum accurate. I understand with the conservation of angular momentum and shrinking the moment of inertia it could look like that intellectually, but my instinctive self is unsure.
[+] jasonjmcghee|3 years ago|reply
Wow! What a fun thing to see this in the front page.

It's certainly not production ready, just a little side project I made for myself- definitely inspired by Manim (3blue1brown) and by Inventing on Principle by Bret Victor https://m.youtube.com/watch?v=PUv66718DII

[+] bencollier49|3 years ago|reply
Interesting, this is another one of those product names which have strange connotations in the UK.

Viz Comic: https://en.wikipedia.org/wiki/Viz_(comics)

They probably hold the trademark for animation in the UK or Europe, I guess?

[+] Lio|3 years ago|reply
My favourite of the classic Viz classified adverts:

  "Want to stop being gullible?  Find out how, send £4000 to Box 6, Wakefield"
[+] InvisibleUp|3 years ago|reply
There's also VIZ Media, the manga publishing company, to confuse things even further.
[+] solarkraft|3 years ago|reply
I like that it has a controllable timeline, which other JavaScript-canvas tools generally do not. This means it's easier to choreograph and view animations, rather than just having to wait for them to play out.

It would be cool to have the ability to export to an easily distributable format (APNG, MP4, GIF ...).

[+] davbryn1|3 years ago|reply
Awesome!

It's a shame you can't browse other peoples work thouugh (like in shadertoy)

[+] jasonjmcghee|3 years ago|reply
There's no back-end! It's just a static webpage hosted on GitHub. It would be cool though.

It does serialize the code to the url bar, which is, not the most elegant solution, but it works

[+] reificator|3 years ago|reply
It looks like this works well from mobile until you try to edit and the keyboard covers the code.

Sliding the animation off screen to make room if a soft keyboard is detected might allow this to be used on phones.

[+] jasonjmcghee|3 years ago|reply
Sorry for not having any instructions- just hold right on the edge of the code and slider- and drag.

You can resize it. I know it's not ideal. Did not realize this would get used widely.

[+] carvking|3 years ago|reply
This is very cool - good job. (Source code available?)
[+] jasonjmcghee|3 years ago|reply
Yeah I didn't obfuscate it- it should be all right there in the browser.

But I can open source the repo too. It's not very clean or at all something I'd like to slap my name on, but I will do it!

Give me a few minutes to make sure I'm not leaking any private info by open sourcing the repo.

[+] DontMindit|3 years ago|reply
Easier to just roll your own with processing.org and java
[+] vanderZwan|3 years ago|reply
How do you figure? I don't think that installing an entire application is easier than browsing to a website. Not to mention that modern js is arguably less of a pain than Java if you don't have a capable IDE, which you don't with the processing editor.

Speaking as someone who loves and has programmed a ton in p5js, processing, and openframeworks.

edit: also this has link-sharing, which makes it easier to share with anyone with a browser, and it's more likely to be properly sandboxed so it's probably safer than sharing Processind sketches too.

[+] davbryn1|3 years ago|reply
Tell that to codepen etc

I think this site is fantastic, and the live editing is great for visual feedback.

And as a plus, it doesn't use Java