doxas / twigl

twigl.app is an online editor for One tweet shader, with gif generator and sound shader, and broadcast live coding.

twigl

twigl.app is an online editor for One tweet shader, with gif(or webm, jpeg, png) generator and sound shader, and broadcast live coding.

get started

$ npm install
$ npm start

screen shot

Example:

precision highp float;
uniform float time;
void main(){vec4 p=vec4((gl_FragCoord.xy/4e2),0,-4);for(int i=0;i<9;++i)p+=vec4(sin(-(p.x+time*.2))+atan(p.y*p.w),cos(-p.x)+atan(p.z*p.w),cos(-(p.x+sin(time*.8)))+atan(p.z*p.w),0);gl_FragColor=p;}

Live: DEMO

regulation

There are four modes in twigl.app, each of which has a sub-mode that uses GLSL ES 3.0, or in addition to it, a mode that enables MRT.

classic:

This mode is compatible with GLSLSandbox.

The uniform variables are "resolution", "mouse", "time", "frame", and "backbuffer".

geek:

In this mode, the various uniform variables are in a single-character style.

"r", "m", "t", "f", and "b", respectively.

geeker:

In this mode, there is no need to declare precision and uniform. They are automatically complemented on the implementation side. Otherwise, it is the same as in geek mode.

geekest:

In this mode, the description of "void main(){}" may be omitted (or not), and "gl_FragCoord" can be described as "FC". In addition, a variety of GLSL snippets are available.

The reason why we support the notation that does not omit the definition of the main function is to allow users to define their own functions.

For more information on snippets, please see below.

advanced

backbuffers

As a general rule, attempt to process in the highest precision texture format possible. Under ideal circumstances, a 32-bit floating-point format is used.

However, there may be cases where floating-point textures are not available, depending on the execution environment and whether or not extensions can be enabled. In such cases, textures generated in RGBA8(unsigned byte) format are used.

300 es

GLSL ES 3.0 is available for WebGL 2.0 enabled environments.

When using GLSL ES 3.0, use outColor instead of gl_FragColor for the final output in classic mode.

In the other geek, geeker, and geekest modes, outColor is shortened to o.

MRT (Multiple Render Targets)

In classic mode, outColor0 and outColor1 can be used to output to two channels simultaneously.

In non-classical mode, these are written as o0 and o1.

The result of the previous frame can be referenced as backbuffer0 and backbuffer1 in classic mode. In other modes, they are written as b0 and b1.

Input from the sound shader

The audio data generated by the sound shader can be received as a uniform variable in the shader for graphics.

In classic mode, this is a floating-point variable named sound. In other modes, it is denoted as s.

GLSL snippets in GEEKEST mode

twigl with geekest mode have included simplex-noise, you can call it as follows.

float f = snoise2D(v.xy);
float g = snoise3D(v.xyz);
float h = snoise4D(v.xyzw);

If you are more concerned with speed than accuracy, the following functions may be more appropriate.

// fract sin noise
float fsnoise(vec2 c){
    return fract(sin(dot(c, vec2(12.9898, 78.233))) * 43758.5453);
}

// fsnoise for macOS
float fsnoiseDigits(vec2 c){
    return fract(sin(dot(c, vec2(0.129898, 0.78233))) * 437.585453);
}

// for example
float i = fsnoise(v.xy);
float j = fsnoiseDigits(v.xy);

Other pre-defined constants and functions are as follows.

vec3 hsv(float h, float s, float v){
    vec4 t = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
    vec3 p = abs(fract(vec3(h) + t.xyz) * 6.0 - vec3(t.w));
    return v * mix(vec3(t.x), clamp(p - vec3(t.x), 0.0, 1.0), s);
}

mat2 rotate2D(float r){
    return mat2(cos(r), sin(r), -sin(r), cos(r));
}

mat3 rotate3D(float angle, vec3 axis){
    vec3 a = normalize(axis);
    float s = sin(angle);
    float c = cos(angle);
    float r = 1.0 - c;
    return mat3(
        a.x * a.x * r + c,
        a.y * a.x * r + a.z * s,
        a.z * a.x * r - a.y * s,
        a.x * a.y * r - a.z * s,
        a.y * a.y * r + c,
        a.z * a.y * r + a.x * s,
        a.x * a.z * r + a.y * s,
        a.y * a.z * r - a.x * s,
        a.z * a.z * r + c
    );
}

const float PI = 3.141592653589793;
const float PI2 = PI * 2.0;

Note that the above snippets are only available in GEEKEST mode.

keyboard shortcut

key	action
Alt + Enter	play sound
Ctrl + Alt + Enter	stop sound
Ctrl + Alt + v	vim mode
Ctrl + Alt + t	change view
Ctrl + Alt + .	up font size
Ctrl + Alt + ,	down font size

You can use Command instead Ctrl on the macOS.

credit

spite/ccapture.js: A library to capture canvas-based animations at a fixed framerate

jnordberg/gif.js: JavaScript GIF encoding library

Ace - The High Performance Code Editor for the Web

ashima/webgl-noise: Procedural Noise Shader Routines compatible with WebGL

Shadertoy BETA

interface design by @iY0Yi

license

MIT licensed.

twigl's Issues

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

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

• sorted by date, likes, etc.

Backbuffer is set to GL_NEAREST

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.

Defining functions in geekest mode

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.

Amazing. How to publish tweet?

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.

Idea for saving a link to a long script

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

Live coding suggestions

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... (-;

[Feature request] GLSL code formatting feature

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

Exposed Google Cloud API Key

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.

長時間動かしていると重くなる

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

Upgrade to WebGL 2

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

[Feature request] Uniform with number of frame

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?

High-resolution screenshot exporting

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!

doc: what are o0, o1, b1 ? ( and more )

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 !

beforeunloadでリロード事故を防ぎたい

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

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

twigl/src/script.js

Line 1439 in 5dab032

window.addEventListener('beforeunload', (evt) => {

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