Viz Studio: code-based live animation editor

https://viz.intelligence.rocks/

by memalign • 4 years ago

118 33 4 years ago

viz.intelligence.rocks

memalign3• 4 years ago

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

HWR_14• 4 years ago

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.

nstart• 4 years ago

It’s not. Increase the duration to 20,000 and you see a classic gaming bug of the momentum going haywire eventually. Unsure if it’s anything to do with the environment or the coding. On mobile so can’t really analyze it.

bsenftner2• 4 years ago

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.

antoineMoPa• 4 years ago

Having coded some of the original fractal math research for DeVanney and Mandelbrot,

Really? I would love to read any story you have about this!

jasonjmcghee7• 4 years ago

Manually sliding the slider in that example is particularly fun!

cronix• 4 years ago

Fractint was one of the first programs I discovered with my 1990 high school graduation present, a 386sx16. It took forever. I eventually got the math coprocessor for it and was amazed at how much faster it could calculate. I made frame by frame animations with it and stitching the gif's together with the DOS version of Adobe Premiere, which was at version 1. I was lucky to have a 3.5" floppy, so it came on one less disk than the 5.25" floppy version.

ArtWomb• 4 years ago

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

memalign3• 4 years ago

I love Inigo’s work too!

Speaking of Graph Toy, I forked it and made a version which supports polar coordinates and which doesn’t require you to solve for y (for example, you can graph y^2+x^2=1):

https://memalign.github.io/m/formulagraph/index.html?f1(x,t)...

reificator• 4 years ago

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.

jasonjmcghee7• 4 years ago

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.

DontMindit• 4 years ago

Easier to just roll your own with processing.org and java

vanderZwan• 4 years ago

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.

davbryn12• 4 years ago

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

nwsm2• 4 years ago

Unfortunately it uses JavaScript instead ;)

davbryn12• 4 years ago

Awesome!

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

jasonjmcghee7• 4 years ago

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

memalign3• 4 years ago

One thing I’ve tried on a static site like this is to give people a link to create a GitHub PR to submit their work — example here:

https://memalign.github.io/m/pceimage/index.html

“Submit an Example”

One person submitted something!

solarkraft• 4 years ago

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

bencollier49• 4 years ago

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• 4 years ago

My favourite of the classic Viz classified adverts:

  "Want to stop being gullible?  Find out how, send £4000 to Box 6, Wakefield"

Jaruzel• 4 years ago

You are in luck, Viz sell that joke as an official t-shirt!

https://www.moretvicar.com/collection/viz-magazine-shop/prod...

jjgreen• 4 years ago

Mine: "Left school? No job? No money? Then fuck off; GnatWest, the frank bank"

https://www.moretvicar.com/collection/viz-magazine-shop/prod...

InvisibleUp• 4 years ago

There's also VIZ Media, the manga publishing company, to confuse things even further.

nwsm2• 4 years ago

Here are docs on Processing, the graphics library this is running: https://p5js.org/

jasonjmcghee7• 4 years ago

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

nonameking20262• 4 years ago

This is very cool - good job. (Source code available?)

jasonjmcghee7• 4 years ago

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.

jasonjmcghee7• 4 years ago

Here it is: https://github.com/jasonjmcghee/viz-studio

I will post a separate comment too.

nonameking20262• 4 years ago

I want to connect some of the parameters to my midi knobs :)

Thanks!

jasonjmcghee7• 4 years ago

There was interest in the source code so I open sourced it: https://github.com/jasonjmcghee/viz-studio

Viz Studio: code-based live animation editor

Related Stories