doxas / twigl Goto Github PK

Would it be possible to get an image export button (perhaps under the dropdown menu in "Download") for exporting high-resolution screenshots? JPEG or PNG (which would be preferable). It could use the same resolution dialogue as with the GIFs and WebM, where you can type in any value you need (ideally up to 8k or so).

That would be perfect for my needs and would help a lot. If I'm dreaming big, I'd also ask for transparency on PNGs and a slider for time so that you can choose exactly when you want to take the screenshot. But I can totally understand if this is beyond the scope of the project. Just the ability to capture screenshots at any resolution will be more than enough.

Thanks!

This makes it impossible to do fluid sim, reaction diffusion.
Linear or mipmap would be a good option I think, maybe even setting to default Linear/mipmap.

If the code is over 1200 symbols, it's not saving to bitly. I guess due to limitations of bitly. In this case undefined is saved to a clipboard.

What if go without bitly in this case? If the link can't be shortened, let's save it in full length, often it's not a problem.

Or maybe there's a sort of workaroud I'm not aware of?

Just yesterday we had a live coding session in our club and we had to code-golf to have the code saved :-)

Hi! Would you be interested on bringing support for lygia.xyz?

Using include macros like

#include "lygia/math/const.glsl"
#include "lygia/color/space.glsl"

it will help users to keep their code extra short.

There is several ways to full fill those dependencies, the easiest is through this functions that just fetch them for you https://lygia.xyz/resolve.js

You code editor can even autocomplete their functions using this request https://lygia.xyz/glsl.json

Hello,

I found your project through https://shhgit.darkport.co.uk/ because it seems like you exposed your Google Cloud API Key in https://github.com/doxas/twigl/blob/master/src/script.js#L87

Here's how to safely remove it https://help.github.com/en/github/authenticating-to-github/removing-sensitive-data-from-a-repository in case it's critical.

Thank you for the amazing tool, I use it almost every day. Would be really handy to have the frame count uniform, like iFrame on Shadertoy. What's your take on that?

Hi there, this is a great project! I like the "geekest" mode, where you have a few extra helpers and definitions like snoise2D() available, and don't need to write the main() definition. However, this means you can't create/use helper functions. Since the calling code just wraps the main() definition before and adds a closing brace afterwards, it is actually possible to define functions after, like this (which compiles fine under geekest 300 es):

vec2 uv = (FC.xy - 0.5*r) / r.y * 1.;
for (int i = 0; i < 8; ++i) {
  uv = abs(uv) / dot(uv, uv) - 0.7 + sin(t*0.75) * 0.2;
  uv += snoise3D(vec3(uv * 0.2, 0.01*t)) * 0.25;
}
o.xyz = (1. - vec3(pow(length(uv), 0.25))) * hsv(sin(uv.x*PI + t),1.,1.) * 2.;
} // end of main()

float test(float x) {
  return x * 2.;
// Note: no closing brace because it's provided by the wrapper!

However, you can't call test(), because it's not declared before main(). Besides #define macros, is there no "hack" to allow you to define and call functions in geekest mode? Otherwise, could the helper methods (and FC) be also exposed in geeker mode? Basically, what I'd like would be a "geekest" mode that allows you to write the main() definition. Maybe the code could check if it finds a void main() in the code, and if so, doesn't wrap it.

This one does not support bitwise operators and for(;i<70.;i++) loops.

Thanks again for this project! Last night I used Twigl to to perform visuals, live coding from-scratch to accompany music in eight different mini-sessions (nine minutes each)... I usually use my own live coding environment, but it was a pleasure to work within the minimalism of Twigl. The only thing I really missed was some audio reactivity.

I think it's good if Twigl stays quite minimal (though of course, this is up to you). But I can think of a few things that might be interesting, to use it in a live coding (visuals) context:

• support live audio reactivity. Doesn't need to be full set of frequency bins or a texture, or even three (high/mid/low) frequencies...even just a single volume uniform would be nice. With optional smoothing/filtering would be nice. I assume one can get the mic input from the browser?
• (alternative solution) allow a way to send arbitrary values to Twigl, to be available as uniforms. Then, an external program (e.g. SuperCollider) could send audio info, or MIDI slider info, perhaps via OSC or something.
• optionally allow the clock/time to continue even after recompilation of the shader, so it doesn't always reset back to zero. (With a button to reset it when desired).
• optionally a scaling factor on the clock time, so you can adjust it to match musical tempo (approximately). The clock should continue forward as you adjust tempo (not just implemented in the shader as t * speedScale), so you can stop or slow down time (again, an added bonus would be to be able to set this time scale from an external place, e.g. using OSC).
• a few more key shortcuts, e.g. one to toggle on and off the code display (a shortcut for the existing button).

I'm not saying these should be implemented, but I thought I'd mention these as things that would make it more useful for live coding visuals (for performance). But as I say, a big part of Twigl's attraction to me is its minimalism, so maybe adding too much would ruin that, and make things unnecessarily complicated. Sometimes simpler tools are better. And having constraints is good for creativity... (-;

コードを書いている途中にいつもの癖でCtrl+Rを押してしまうのですが、これをするとコードが失われてしまいます。
この挙動を beforeunload で防ぎたいです。

beforeunload は一箇所使われてはいますが、これはライブを視聴中の場合のコードでしょうか？
普通にコードを書いているときは発動しません。

上のコードを加味すると、おそらく「コードが一度でも編集されたとき」または「配信を視聴中」に事故リロードを防ぎたそうですね。

Just want to say, this is awesome.

Curious as to how to publish from twigl.app to Twitter?

Or do people generate a link, download a gif, and publish manually?

Maybe we can add a button to one-click publish to Twitter.

なにかレンダリングをする手続きが残り続けている予感がします。あくまで予感です。

I like to look at the twigl code on Twitter.
However, much of that code is obfuscated to keep it short.
How about a formatting feature to make the obfuscated code easier to read?

I think js-beautify can be used to format the code.
https://github.com/beautify-web/js-beautify

The following is an implementation image.

before:

after:

I think js-beautify can be called as follows.

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.13.13/beautify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.13.13/beautify-css.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.13.13/beautify-html.js"></script>

beautify.addEventListener('click', () => {
    const opts = {
        indent_size: 4
    };
    editor.setValue(js_beautify(editor.getValue(), opts));
}, false);

compare to what I see in some demos, the doc ( readme here ) doesn't seem to be complete ! ;-)
E.g. what are o0 and o1 ?
What is b1 ? ( sounds like binding, but I don't see texture binding info in the app ).

Also, I see most people not initializing variables. Is the environment safely doing it, or will this break shaders on some systems as it does on Shadertoy ?

thanks !

is there a way to browse Twigls ? all / per user ?

• sorted by date, likes, etc.