Viz Studio: code-based live animation editor | Hacker News Reader

Viz Studio: code-based live animation editor

viz.intelligence.rocks

118 pointsmemalign33 comments

Open articleView on HN

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

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.

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.

Well, even if the math is correct, the simulation will be lossy if one works with finite precision. And because of the chaotic nature of the double pendulum, small errors will eventually add up to big deviations.

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.

> 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!

I've mentioned this on HackerNews before: it was spring of '86 when the fractal research group was finally getting around to playing with the software we'd been using to create our publication images. I was a sr graphics consultant at the Boston University 3D Graphics Lab, and due to my being staff at the graphics lab my user account had unlimited processing privileges. This was necessary to get the fractal renders in any reasonable time, running on the University's IBM 3090 mainframe which the entire university used for practically everything. Not really considering the consequences, I made a short program that would generate a 256x256x256 fractal cube of sin()+cos(), which is the specific formula contribution of mine for the "Beauty of Fractals" book. Well, I should have considered the consequences: I launched the program, and immediately everyone's terminals in the graphics lab froze. Suspicious it was due to my program, I figured it would finish in a minute and everything would be okay. Someone mentioned the larger terminal room downstairs with a few hundred terminals was also frozen. Then I heard someone in the hallways shouting "who the hell is bsln5!" (my username.) In a minute the graphics labs will full of the mainframe admins shouting red faced at me to kill my process. I killed it and was immediately escorted out of the building and told I'd be in a hearing for my malicious use of the mainframe. Well, once everything was figured out, I had my unlimited processing privilege revoked, and a new policy was put in place for high compute research projects. During the evaluation it was determined if let run to completion, the program would have run for 35 years - finishing just last year.

Manually sliding the slider in that example is particularly fun!

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.

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

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

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

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?

My favourite of the classic Viz classified adverts:

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

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

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

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

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

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

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

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

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

Awesome!

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

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

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!

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.

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.

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

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.

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

I will post a separate comment too.

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

Thanks!

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

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.

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

Unfortunately it uses JavaScript instead ;)

Reply on news.ycombinator.com