{"id":49743367,"url":"https://github.com/mmmerl/shader-doodle","last_synced_at":"2026-05-26T13:01:01.589Z","repository":{"id":34627029,"uuid":"180878739","full_name":"mmmerl/shader-doodle","owner":"mmmerl","description":"A friendly web-component for writing and rendering shaders.","archived":false,"fork":false,"pushed_at":"2026-04-30T06:44:50.000Z","size":74320,"stargazers_count":587,"open_issues_count":2,"forks_count":38,"subscribers_count":13,"default_branch":"main","last_synced_at":"2026-05-01T06:39:54.501Z","etag":null,"topics":["canvas","creative-coding","fragment-shader","glsl","glsl-sandbox","html-canvas","javascript","pixel-shader","shader-playback","shaders","shadertoy","texture","uniform","vertex-shaders","webgl"],"latest_commit_sha":null,"homepage":"https://shader-doodle-overview.glitch.me/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mmmerl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2019-04-11T21:12:40.000Z","updated_at":"2026-04-30T07:59:16.000Z","dependencies_parsed_at":"2024-05-03T11:14:13.639Z","dependency_job_id":"b6112070-a31c-4b73-b574-148ca897491e","html_url":"https://github.com/mmmerl/shader-doodle","commit_stats":{"total_commits":108,"total_committers":7,"mean_commits":"15.428571428571429","dds":0.2592592592592593,"last_synced_commit":"7afed13c6b31699d99d6684d192e22f6b19b3d83"},"previous_names":["mmmerl/shader-doodle"],"tags_count":26,"template":false,"template_full_name":null,"purl":"pkg:github/mmmerl/shader-doodle","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmmerl%2Fshader-doodle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmmerl%2Fshader-doodle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmmerl%2Fshader-doodle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmmerl%2Fshader-doodle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mmmerl","download_url":"https://codeload.github.com/mmmerl/shader-doodle/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmmerl%2Fshader-doodle/sbom","scorecard":{"id":453712,"data":{"date":"2025-08-11","repo":{"name":"github.com/halvves/shader-doodle","commit":"7afed13c6b31699d99d6684d192e22f6b19b3d83"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":2,"reason":"Found 2/8 approved changesets -- score normalized to 2","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'main'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 26 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"19 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-6fw4-hr69-g3rv","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-3f95-r44v-8mrg","Warn: Project is vulnerable to: GHSA-28xr-mwxg-3qc8","Warn: Project is vulnerable to: GHSA-9p95-fxvg-qgq2","Warn: Project is vulnerable to: GHSA-9w5j-4mwv-2wj8"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-19T08:57:13.510Z","repository_id":34627029,"created_at":"2025-08-19T08:57:13.510Z","updated_at":"2025-08-19T08:57:13.510Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33521333,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T03:12:49.672Z","status":"ssl_error","status_checked_at":"2026-05-26T03:12:47.976Z","response_time":63,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","creative-coding","fragment-shader","glsl","glsl-sandbox","html-canvas","javascript","pixel-shader","shader-playback","shaders","shadertoy","texture","uniform","vertex-shaders","webgl"],"created_at":"2026-05-09T23:00:27.100Z","updated_at":"2026-05-26T13:01:01.571Z","avatar_url":"https://github.com/mmmerl.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# \u0026lt;shader-doodle /\u0026gt;\n\n*A friendly web-component for writing and rendering shaders.*\n\n[![hello shader-doodle](screenshot/hello.gif)](https://hello-shader-doodle.glitch.me) [![fire rings](screenshot/fire-rings.gif)](https://codepen.io/pjkarlik/pen/abOVwaB) [![contrast bath](screenshot/contrast-bath.gif)](https://codepen.io/halvves/pen/xxGXdRv)\n[![audiovisualizer w/ feedback](screenshot/audio-visualizer.gif)](https://codepen.io/halvves/pen/abOwJbR) [![rainbow woozy](screenshot/rainbow-woozy.gif)](https://codepen.io/halvves/pen/WNbgvNx) [![vertigo truchet tiles](screenshot/vertigo-truchet-tiles.gif)](https://codepen.io/pjkarlik/pen/yLNEoBK)\n[![raymarching + clouds](screenshot/raymarching-clouds.gif)](https://codepen.io/mhazani/pen/VwwQYvE) [![audio reactive](screenshot/audio-reactive.gif)](https://codepen.io/pjkarlik/pen/JjdVmqv) [![space flame orb](screenshot/space-flame-orb.gif)](https://codepen.io/pjkarlik/pen/poJYLea)\n[![spooky](screenshot/spooky.gif)](https://codepen.io/halvves/pen/dyyvrxN) [![vhs webcam](screenshot/webcam.gif)](https://codepen.io/halvves/pen/VwwdQEN) [![audio + mouse](screenshot/audio-mouse.gif)](https://codepen.io/halvves/pen/PoqGvVG)\n\nNOTE: this README and branch are for the new `\u003cshader-doodle /\u003e` alpha. To view the current stable version go to the [v0 branch](https://github.com/shader-doodle/shader-doodle/tree/v0).\n\n`\u003cshader-doodle /\u003e` is a simple web-component loosely based on the [The Book of Shaders](https://thebookofshaders.com/)'s glsl previewer and [Shadertoy](https://www.shadertoy.com/). It sets up a flat responsive canvas on which to draw fragment shaders, and provides several built in uniforms relating to time, resolution, mouse position, etc.\n\n## Usage\n\n### Script Include\n\n```html\n\u003cscript src=\"https://unpkg.com/shader-doodle@alpha\"\u003e\u003c/script\u003e\n\u003cshader-doodle\u003e\n  \u003cscript type=\"x-shader/x-fragment\"\u003e\n    void main() {\n      vec2 st = gl_FragCoord.xy / u_resolution.xy;\n      vec3 color = vec3(st.x, st.y, abs(sin(u_time)));\n\n      gl_FragColor = vec4(color, 1.0);\n    }\n  \u003c/script\u003e\n\u003c/shader-doodle\u003e\n```\n\n### Import\n\n`npm install shader-doodle@alpha`\n\n```javascript\nimport 'shader-doodle';\n```\n\n```html\n\u003cshader-doodle\u003e\n  \u003cscript type=\"x-shader/x-fragment\"\u003e\n    void main() {\n      vec2 st = gl_FragCoord.xy / u_resolution.xy;\n      vec3 color = vec3(st.x, st.y, abs(sin(u_time)));\n\n      gl_FragColor = vec4(color, 1.0);\n    }\n  \u003c/script\u003e\n\u003c/shader-doodle\u003e\n```\n\n## API\n\nRight now the api is fairly basic. The default syntax is vanilla glsl and there are several built in uniforms following the conventions seen in [The Book of Shaders](https://thebookofshaders.com/). If you prefer ShaderToy's syntax you can set an attribute like so: `\u003cshader-doodle shadertoy /\u003e`.\n\n### Pre-Defined Uniforms\n\n#### Default (`\u003cshader-doodle /\u003e`)\n\n* `uniform float u_time;`: shader playback time (in seconds)\n* `uniform float u_delta;`: delta time between frames (in seconds)\n* `uniform int u_frame;`: shader playback frame\n* `uniform vec4 u_date;`: year, month, day and seconds\n* `uniform vec2 u_resolution;`: viewport resolution (in pixels)\n* `uniform vec2 u_mouse;`: mouse pixel coords (x \u0026 y)\n* `uniform vec4 u_mousedrag`: xy: last click or current drag position, zw: starting drag position (flipped negative when not mousedown)\n* `uniform vec3 u_orientation;`: [device orientation api](https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation) values: alpha, beta, gamma\n\n#### Shadertoy (`\u003cshader-doodle shadertoy /\u003e`)\n\n* `uniform float iTime;`: shader playback time (in seconds)\n* `uniform float iDelta;`: delta time between frames (in seconds)\n* `uniform int iFrame;`: shader playback frame\n* `uniform vec4 iDate;`: year, month, day and seconds\n* `uniform vec2 iResolution;`: viewport resolution (in pixels)\n* `uniform vec2 iCurrentMouse;`: mouse pixel coords (x \u0026 y)\n* `uniform vec4 iMouse`: xy: last click or current drag position, zw: starting drag position (flipped negative when not mousedown)\n* `uniform vec3 iOrientation;`: [device orientation api](https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation) values: alpha, beta, gamma\n\n_NOTE: the slight difference in mouse uniform naming_\n\n### Textures\n\nTextures can be used as a `sampler2D` in a shader by using the `\u003csd-texture /\u003e` component. This will pass in two uniforms:\n\n* `uniform sampler2D {texture_name}`\n* `uniform vec2 {texture_name}_resolution`\n\n#### Attributes\n\n* `src`: source of an image/video or selector for a canvas\n* `name`: specify a name for the texture uniform (will default to `u_texture{index}`)\n* `webcam`: overrides `src` and tries to use webrtc webcam as texture source\n* `force-update`: forces a texture to always update (useful when using a canvas animation or animated gif as a texture)\n\n#### Examples\n\n##### Image:\n```html\n\u003cshader-doodle\u003e\n  \u003csd-texture src=\"image.jpg\"\u003e\u003c/sd-texture\u003e\n  \u003cscript type=\"x-shader/x-fragment\"\u003e\n    uniform sampler2D u_texture0;\n\n    void main() {\n      vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n      vec4 texture = texture2D(u_texture0, uv);\n\n      gl_FragColor = texture;\n    }\n  \u003c/script\u003e\n\u003c/shader-doodle\u003e\n```\n\n##### Video:\n```html\n\u003cshader-doodle\u003e\n  \u003csd-texture src=\"video.mp4\" name=\"video\"\u003e\u003c/sd-texture\u003e\n  \u003cscript type=\"x-shader/x-fragment\"\u003e\n    uniform sampler2D video;\n\n    void main() {\n      vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n      vec4 texture = texture2D(video, uv);\n\n      gl_FragColor = texture;\n    }\n  \u003c/script\u003e\n\u003c/shader-doodle\u003e\n```\n\n##### Canvas:\n```html\n\u003ccanvas id=\"canvas\"\u003e\u003c/canvas\u003e\n\u003cshader-doodle\u003e\n  \u003csd-texture src=\"#canvas\" name=\"u_canvas\"\u003e\u003c/sd-texture\u003e\n  \u003cscript type=\"x-shader/x-fragment\"\u003e\n    uniform sampler2D u_canvas;\n\n    void main() {\n      vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n      vec4 texture = texture2D(u_canvas, uv);\n\n      gl_FragColor = texture;\n    }\n  \u003c/script\u003e\n\u003c/shader-doodle\u003e\n\u003cscript\u003e\n  const text = 'L  O  R  E  M     I  P  S  U  M';\n  const canvas = document.getElementById(\"canvas\");\n  canvas.height = 1024; canvas.width = 1024;\n  const ctx = canvas.getContext(\"2d\");\n  ctx.font = \"Bold \" + canvas.width / 12 + \"px 'Helvetica'\";\n  ctx.textAlign = \"center\";\n  ctx.textBaseline = \"top\";\n  ctx.fillStyle = '#000';\n  ctx.fillRect(0, 0, canvas.width, canvas.height);\n  ctx.fillStyle = '#fff';\n  ctx.translate(canvas.width / 2, 0);\n  for (var i = -1; i \u003c 6; i++) {\n    ctx.fillText(text, 0, i * canvas.height / 6);\n  }\n\u003c/script\u003e\n```\n\n##### Camera:\n```html\n\u003cshader-doodle\u003e\n  \u003csd-texture webcam name=\"cam\"\u003e\u003c/sd-texture\u003e\n  \u003cscript type=\"x-shader/x-fragment\"\u003e\n    uniform sampler2D cam;\n    uniform vec2 cam_resolution;\n\n    vec2 coverScreen(vec2 fragCoord, vec2 resolution, float aspect) {\n      vec2 uv = 0.5 * (2.0 * fragCoord - resolution);\n      if (resolution.x / resolution.y \u003e aspect) {\n        uv = 0.5 - uv / vec2(resolution.x, -resolution.x / aspect);\n      } else {\n        uv = 0.5 - uv / vec2(resolution.y * aspect, -resolution.y);\n      }\n      return uv;\n    }\n\n    void main() {\n      float aspect = cam_resolution.x / cam_resolution.y;\n      vec2 uv = coverScreen(gl_FragCoord.xy, u_resolution, aspect);\n      vec4 texture = texture2D(cam, uv);\n\n      gl_FragColor = texture;\n    }\n  \u003c/script\u003e\n\u003c/shader-doodle\u003e\n```\n\n### Audio Data\n\nThe frequency and waveform data from an audio source can be used in a shader as a `sampler2D` by using the `\u003csd-audio /\u003e` component. This will pass in one uniform:\n\n* `uniform sampler2D {audio_name}`\n\nThe audio data is setup as two rows of texels.\n\nThe first row is frequency data. The x/u axis corresponds to frequency (scaled to 0..1), and the value of a texel at a given x/u is the amplitude of the corresponding frequency.\n\nThe second row is wave data. The x/u axis corresponds to the x axis of the waveform. (scaled to 0..1), and the value of a texel at a given x/u is the y axis of the waveform.\n\n#### Attributes\n\n* `src`: a url to an audio file or an id selector for an `\u003caudio /\u003e` element.\n* `name`: specify a name for the texture uniform (will default to `u_audio{index}`)\n* `loop`: (_temporarily disabled as part of an ios13 fix_) loop the audio file (_doesn't work on an existing audio tag_)\n* `autoplay`: (_temporarily disabled as part of an ios13 fix_) autoplay the audio file (_doesn't work on an existing audio tag_)\n* `crossorigin`: (_temporarily disabled as part of an ios13 fix_) specify cors (_doesn't work on an existing audio tag_)\n\nNot yet implemented is a `mic` attribute that will allow using audio from a webrtc source.\n\n#### Examples\n\n##### File:\n```html\n\u003cshader-doodle\u003e\n  \u003csd-audio src=\"./audio.mp3\" autoplay loop\u003e\u003c/sd-audio\u003e\n  \u003cscript type=\"x-shader/x-fragment\"\u003e\n    uniform sampler2D u_audio0;\n\n    float amplitude(sampler2D audio, float f) {\n      return texture2D(audio, vec2(f, .25)).x;\n    }\n\n    float wave(sampler2D audio, float t) {\n      return texture2D(audio, vec2(t, .75)).x;\n    }\n\n    void main() {\n      vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n\n      float w = wave(u_audio0, uv.x);\n      float a = amplitude(u_audio0, abs(.5 - uv.y) / w);\n\n      vec3 color = vec3(a * .5, (1. - a), 5. * a * (1. - a)) * a;\n      color.rb += (1. - smoothstep(.0, .1, abs(w - uv.y))) * a;\n\n      gl_FragColor = vec4(color, 1.);\n    }\n  \u003c/script\u003e\n\u003c/shader-doodle\u003e\n```\n\n##### Audio Tag:\n```html\n\u003caudio src=\"./audio.mp3\" autoplay loop id=\"audio\"\u003e\u003c/audio\u003e\n\u003cshader-doodle\u003e\n  \u003csd-audio src=\"#audio\"\u003e\u003c/sd-audio\u003e\n  \u003cscript type=\"x-shader/x-fragment\"\u003e\n    uniform sampler2D u_audio0;\n\n    float amplitude(sampler2D audio, float f) {\n      return texture2D(audio, vec2(f, .25)).x;\n    }\n\n    float wave(sampler2D audio, float t) {\n      return texture2D(audio, vec2(t, .75)).x;\n    }\n\n    void main() {\n      vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n\n      float w = wave(u_audio0, uv.x);\n      float a = amplitude(u_audio0, abs(.5 - uv.y) / w);\n\n      vec3 color = vec3(a * .5, (1. - a), 5. * a * (1. - a)) * a;\n      color.rb += (1. - smoothstep(.0, .1, abs(w - uv.y))) * a;\n\n      gl_FragColor = vec4(color, 1.);\n    }\n  \u003c/script\u003e\n\u003c/shader-doodle\u003e\n```\n\n## Next steps (ordered by priority)\n\n* shader precision attribute\n* clearColor attribute\n* mouseover 0-1 uniform\n* LinearCopy/NearestCopy helpers\n* lerp attribute for mouse, mouseover, and deviceorientation\n* custom uniforms\n* webgl2\n* improvements to buffers (shared buffers etc...)\n\n## See Also\n\n* [shaderpen](https://github.com/shader-doodle/shaderpen/) - This library's predecessor.\n* [css-doodle](https://github.com/css-doodle/css-doodle) - The inspiration behind rewriting shaderpen as a web-component.\n* [The Book of Shaders](https://thebookofshaders.com/) - A gentle step-by-step guide through the world Fragment Shaders.\n* [Shadertoy](https://www.shadertoy.com/) - Shader playground.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmmerl%2Fshader-doodle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmmmerl%2Fshader-doodle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmmerl%2Fshader-doodle/lists"}