live coding visuals with javascript

Discussion of modular and standalone video generating/processing techniques and associated hardware.

Moderators: Joe., lisa, luketeaford, Kent, daverj

Post Reply
User avatar
htor
Common Wiggler
Posts: 121
Joined: Sun Dec 01, 2019 6:20 am
Location: Leipzig, Germany

live coding visuals with javascript

Post by htor » Sat Jan 18, 2020 12:47 pm

hi muff,
new here,

i wrote an editor for live coding visuals with javascript directly in the browser. it's called repeat.
it is inspired by "processing" and aims to make it easy to live code visuals quickly.
you have to know javascript and the canvas api to use it.
don't know if this counts as video synthesis, but hopefully some of you ppl could enjoy it!

live example (edit code and press ctrl/cmd + enter re-evaluate code):
https://hermantorjussen.no/repeat/?id=J ... dden=false
Screenshot 2020-01-18 at 18.45.13.png

you can find more info, keyboard shortcuts, examples in the github repo:
https://github.com/htor/repeat-editor/
You do not have the required permissions to view the files attached to this post.
Last edited by htor on Thu Jan 30, 2020 3:25 am, edited 5 times in total.

User avatar
fac
wig MUffler
Posts: 3573
Joined: Wed Aug 04, 2010 11:33 am
Location: Mexico

Re: live coding visuals with javascript

Post by fac » Mon Jan 20, 2020 7:21 am

Interesting! I'm a fan of Processing and its genius "Tweak" feature. I don't know Javascript but this would be a good opportunity to learn.

User avatar
htor
Common Wiggler
Posts: 121
Joined: Sun Dec 01, 2019 6:20 am
Location: Leipzig, Germany

Re: live coding visuals with javascript

Post by htor » Thu Jan 23, 2020 2:01 pm

some more examples:

https://hermantorjussen.no/repeat/?id=J ... MEElN0Q%3D
Screenshot 2020-01-23 at 19.59.53.png

https://hermantorjussen.no/repeat/?id=J ... MEElN0Q%3D
Screenshot 2020-01-23 at 19.58.39.png

gif:
bits2.gif
You do not have the required permissions to view the files attached to this post.

User avatar
htor
Common Wiggler
Posts: 121
Joined: Sun Dec 01, 2019 6:20 am
Location: Leipzig, Germany

Re: live coding visuals with javascript

Post by htor » Thu Jan 23, 2020 3:28 pm

fac wrote:
Mon Jan 20, 2020 7:21 am
Interesting! I'm a fan of Processing and its genius "Tweak" feature. I don't know Javascript but this would be a good opportunity to learn.
thanks,
interesting this tweak mode. would be nice to have something like it in repeat-editor.

User avatar
mildheadwound
Wiggling with Experience
Posts: 456
Joined: Wed May 12, 2010 9:40 am

Re: live coding visuals with javascript

Post by mildheadwound » Wed Jan 29, 2020 6:24 pm

Can you load libraries with this animation system? There’s some great easing animations, in greensock, etc, which could add some smoothing to the animations. I’m not really sure what platform you’re planning this on, but i can imagine making controllable objects, with timing/shape sliders, as envelopes, using java script. But, for the record, it will never be as good as flash! :twisted:

User avatar
htor
Common Wiggler
Posts: 121
Joined: Sun Dec 01, 2019 6:20 am
Location: Leipzig, Germany

Re: live coding visuals with javascript

Post by htor » Thu Jan 30, 2020 2:49 am

mildheadwound wrote:
Wed Jan 29, 2020 6:24 pm
Can you load libraries with this animation system? There’s some great easing animations, in greensock, etc, which could add some smoothing to the animations. ...
yes, since all code in the editor gets evaluated as normal JS you could inject script tags containing libraries or other external code and then use that in your setup. you could then also draw boxes using the DOM api or capture video or do something else that you could do on a web page. this editor is focused on animating stuff on the canvas using the canvas api, but anything you'd like to add is possible as long as it can run in the browser.
https://developer.mozilla.org/en-US/doc ... Canvas_API
peronally i like to build my things from scratch using just basic functionality.
I’m not really sure what platform you’re planning this on
just the browser.
Last edited by htor on Thu Jan 30, 2020 3:00 am, edited 2 times in total.

User avatar
BadPixel
Learning to Wiggle
Posts: 39
Joined: Tue Nov 06, 2018 8:23 am
Location: Stockholm, Sweden

Re: live coding visuals with javascript

Post by BadPixel » Thu Jan 30, 2020 2:58 am

Wow! This looks awesome :tu:

User avatar
htor
Common Wiggler
Posts: 121
Joined: Sun Dec 01, 2019 6:20 am
Location: Leipzig, Germany

Re: live coding visuals with javascript

Post by htor » Mon Mar 30, 2020 11:45 am

simple and complex visuals using XOR:
Screenshot 2020-03-30 at 18.43.12.png
let it run for while and many different patterns emerge:
https://hermantorjussen.no/repeat/?id=b ... dden=false

alt+f for fullscreen, alt+h to toggle code
You do not have the required permissions to view the files attached to this post.
Last edited by htor on Mon Mar 30, 2020 12:11 pm, edited 1 time in total.

User avatar
thealienthing
Common Wiggler
Posts: 53
Joined: Fri Feb 09, 2018 11:27 am
Location: Provo, Utah

Re: live coding visuals with javascript

Post by thealienthing » Mon Mar 30, 2020 11:52 am

Thanks for sharing this! I’ll definitely be taking a close look at this.

User avatar
chachi
Wiggling with Experience
Posts: 484
Joined: Fri Feb 22, 2013 11:50 am
Location: north portland, OR

Re: live coding visuals with javascript

Post by chachi » Mon Mar 30, 2020 11:59 am

this is super cool.

User avatar
Voltcontrol
Ravey Dave
Posts: 842
Joined: Thu Jan 25, 2018 1:31 pm
Location: The Netherlands

Re: live coding visuals with javascript

Post by Voltcontrol » Mon Mar 30, 2020 12:22 pm


User avatar
htor
Common Wiggler
Posts: 121
Joined: Sun Dec 01, 2019 6:20 am
Location: Leipzig, Germany

Re: live coding visuals with javascript

Post by htor » Mon Mar 30, 2020 12:43 pm

a work of art right there! :hihi:

Post Reply

Return to “Video Synthesis”