32 ms·

Viz Studio: code-based live animation editor

118 points by memalign 4y ago

nwsm 4y ago
Here are docs on Processing, the graphics library this is running: https://p5js.org/ https://p5js.org/
jasonjmcghee 4y 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 https://m.youtube.com/watch?v=PUv66718DII
nonameking2026 4y ago
This is very cool - good job. (Source code available?)
- jasonjmcghee 4y 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.
- jasonjmcghee 4y ago
  Here it is: https://github.com/jasonjmcghee/viz-studio https://github.com/jasonjmcghee/viz-studio I will post a separate comment too.
  - nonameking2026 4y ago
    I want to connect some of the parameters to my midi knobs :) Thanks!
jasonjmcghee 4y ago
There was interest in the source code so I open sourced it: https://github.com/jasonjmcghee/viz-studio https://github.com/jasonjmcghee/viz-studio
memalign 4y 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 https://viz.intelligence.rocks/#pendulum Mandelbrot: https://viz.intelligence.rocks/#mandelbrot https://viz.intelligence.rocks/#mandelbrot (This one is melting my brain) 0: https://jason.today/ https://jason.today/ 1: https://news.ycombinator.com/item?id=31309616 https://news.ycombinator.com/item?id=31309616
- ArtWomb 4y 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 ;)
  - memalign 4y 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)=r%20=%203&v1=true&f2(x,t)=y%5Ey%20=%20x%5Ex&v2=true&f3(x,t)=(x+5)%5E2+(y-((x+5)%5E2)%5E(1/3))%5E2%20%3C%201&v3=true&f4(x,t)=r%20=%202*sin(2*theta)&v4=true&f5(x,t)=(x-5)%5E100%20+%20(y+5)%5E100%20%3C=%202&v5=true&f6(x,t)=-(x-floor(x))%20+%205&v6=true&grid=true&coords=0,0,12&paused=true https://memalign.github.io/m/formulagraph/index.html?f1(x,t)...
- HWR_14 4y 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.
  - 4y ago
reificator 4y 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.
- jasonjmcghee 4y 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 4y ago
Easier to just roll your own with processing.org and java
- vanderZwan 4y 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.
- davbryn1 4y 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
  - nwsm 4y ago
    Unfortunately it uses JavaScript instead ;)
davbryn1 4y ago
Awesome! It's a shame you can't browse other peoples work thouugh (like in shadertoy)
- jasonjmcghee 4y 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
  - memalign 4y 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 https://memalign.github.io/m/pceimage/index.html “Submit an Example” One person submitted something!
solarkraft 4y 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 4y 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) https://en.wikipedia.org/wiki/Viz_(comics) They probably hold the trademark for animation in the UK or Europe, I guess?
- Lio 4y ago
  My favourite of the classic Viz classified adverts: "Want to stop being gullible? Find out how, send £4000 to Box 6, Wakefield"
  - Jaruzel 4y ago
    You are in luck, Viz sell that joke as an official t-shirt! https://www.moretvicar.com/collection/viz-magazine-shop/product/gullible-t-shirt https://www.moretvicar.com/collection/viz-magazine-shop/prod...
  - jjgreen 4y ago
    Mine: "Left school? No job? No money? Then fuck off; GnatWest, the frank bank" https://www.moretvicar.com/collection/viz-magazine-shop/product/gnatwest-t-shirt https://www.moretvicar.com/collection/viz-magazine-shop/prod...
- InvisibleUp 4y ago
  There's also VIZ Media, the manga publishing company, to confuse things even further.

118 points by memalign 4y ago

nwsm 4y ago

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

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 https://m.youtube.com/watch?v=PUv66718DII

nonameking2026 4y ago

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

jasonjmcghee 4y 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.
jasonjmcghee 4y ago
Here it is: https://github.com/jasonjmcghee/viz-studio https://github.com/jasonjmcghee/viz-studio I will post a separate comment too.
- nonameking2026 4y ago
  I want to connect some of the parameters to my midi knobs :) Thanks!

jasonjmcghee 4y ago

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

memalign 4y 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 https://viz.intelligence.rocks/#pendulum Mandelbrot: https://viz.intelligence.rocks/#mandelbrot https://viz.intelligence.rocks/#mandelbrot (This one is melting my brain) 0: https://jason.today/ https://jason.today/ 1: https://news.ycombinator.com/item?id=31309616 https://news.ycombinator.com/item?id=31309616

ArtWomb 4y 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 ;)
- memalign 4y 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)=r%20=%203&v1=true&f2(x,t)=y%5Ey%20=%20x%5Ex&v2=true&f3(x,t)=(x+5)%5E2+(y-((x+5)%5E2)%5E(1/3))%5E2%20%3C%201&v3=true&f4(x,t)=r%20=%202*sin(2*theta)&v4=true&f5(x,t)=(x-5)%5E100%20+%20(y+5)%5E100%20%3C=%202&v5=true&f6(x,t)=-(x-floor(x))%20+%205&v6=true&grid=true&coords=0,0,12&paused=true https://memalign.github.io/m/formulagraph/index.html?f1(x,t)...
HWR_14 4y 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.
- 4y ago

reificator 4y 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.

jasonjmcghee 4y 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 4y ago

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

vanderZwan 4y 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.
davbryn1 4y 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
- nwsm 4y ago
  Unfortunately it uses JavaScript instead ;)

davbryn1 4y ago

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

jasonjmcghee 4y 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
- memalign 4y 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 https://memalign.github.io/m/pceimage/index.html “Submit an Example” One person submitted something!

solarkraft 4y 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 4y 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) https://en.wikipedia.org/wiki/Viz_(comics) They probably hold the trademark for animation in the UK or Europe, I guess?

Lio 4y ago
My favourite of the classic Viz classified adverts: "Want to stop being gullible? Find out how, send £4000 to Box 6, Wakefield"
- Jaruzel 4y ago
  You are in luck, Viz sell that joke as an official t-shirt! https://www.moretvicar.com/collection/viz-magazine-shop/product/gullible-t-shirt https://www.moretvicar.com/collection/viz-magazine-shop/prod...
- jjgreen 4y ago
  Mine: "Left school? No job? No money? Then fuck off; GnatWest, the frank bank" https://www.moretvicar.com/collection/viz-magazine-shop/product/gnatwest-t-shirt https://www.moretvicar.com/collection/viz-magazine-shop/prod...
InvisibleUp 4y ago
There's also VIZ Media, the manga publishing company, to confuse things even further.