{"id":19323040,"url":"https://github.com/geikha/hyper-hydra","last_synced_at":"2025-09-13T12:43:28.368Z","repository":{"id":74245836,"uuid":"443672344","full_name":"geikha/hyper-hydra","owner":"geikha","description":"hyper-usable hydra extensions","archived":false,"fork":false,"pushed_at":"2024-06-11T20:45:22.000Z","size":428,"stargazers_count":52,"open_issues_count":3,"forks_count":3,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-02T03:09:19.950Z","etag":null,"topics":["hydra-synth","javascript","regl","webgl"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/geikha.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"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},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":"geikha","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2022-01-02T03:22:35.000Z","updated_at":"2025-03-05T13:51:40.000Z","dependencies_parsed_at":"2023-07-25T23:20:58.910Z","dependency_job_id":"9b5c339e-fd0f-4ed9-a6f0-a505d97beb2d","html_url":"https://github.com/geikha/hyper-hydra","commit_stats":null,"previous_names":["ritchse/hydra-extensions","geikha/hyper-hydra"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geikha%2Fhyper-hydra","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geikha%2Fhyper-hydra/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geikha%2Fhyper-hydra/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geikha%2Fhyper-hydra/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/geikha","download_url":"https://codeload.github.com/geikha/hyper-hydra/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250308505,"owners_count":21409282,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["hydra-synth","javascript","regl","webgl"],"created_at":"2024-11-10T01:44:55.461Z","updated_at":"2025-04-22T19:32:05.560Z","avatar_url":"https://github.com/geikha.png","language":"JavaScript","funding_links":["https://ko-fi.com/geikha"],"categories":[],"sub_categories":[],"readme":"# hyper-hydra\r\n\r\nExtensions for [Hydra](https://github.com/ojack/hydra) focusing on usability.\r\n\r\n## How to load extensions\r\n\r\nYou can load extensions into Hydra with the following syntax:\r\n\r\n```js\r\nawait loadScript(\"https://hyper-hydra.glitch.me/hydra-src.js\")\r\nawait loadScript(\"https://hyper-hydra.glitch.me/hydra-wrap.js\")\r\n\r\nosc().out()\r\n```\r\n\r\n---\r\n\r\n## List of extensions\r\n\r\nOrder is merely alphabetical\r\n\r\n### hydra-abbreviations\r\n\r\nWrite very small hydra code.\r\n\r\n[source](./hydra-abbreviations.js) / [url](https://hyper-hydra.glitch.me/hydra-abbreviations.js)\r\n\r\n```js\r\no(10, 0.1, 1.2).bl(ns(3)).df(sh(4, 0.6).rt(0, 0.1)).out()\r\n```\r\n[open in hydra!](https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlwZXItaHlkcmEuZ2xpdGNoLm1lJTJGaHlkcmEtYWJicmV2aWF0aW9ucy5qcyUyMiklMEElMEFvKDEwJTJDJTIwMC4xJTJDJTIwMS4yKS5ibChucygzKSkuZGYoc2goNCUyQyUyMDAuNikucnQoMCUyQyUyMDAuMSkpLm91dCgp)\r\n\r\n---\r\n\r\n### hydra-arithmetics\r\n\r\nAll the functions you needed to make complex visual arithmetics, easily.\r\n\r\n[docs](./doc/hydra-arithmetics.md) / [url](https://hyper-hydra.glitch.me/hydra-arithmetics.js)\r\n\r\n```js\r\nosc(10,.1,2)\r\n\t.mod(gradient().asin().cos())\r\n\t.step(noise(2).unipolar().div(o0))\r\n\t.blend(o0,.2)\r\n\t.out()\r\n```\r\n[open in hydra](https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlwZXItaHlkcmEuZ2xpdGNoLm1lJTJGaHlkcmEtYXJpdGhtZXRpY3MuanMlMjIpJTBBJTBBb3NjKDEwJTJDLjElMkMyKSUwQSUwOS5tb2QoZ3JhZGllbnQoKS5hc2luKCkuY29zKCkpJTBBJTA5LnN0ZXAobm9pc2UoMikudW5pcG9sYXIoKS5kaXYobzApKSUwQSUwOS5ibGVuZChvMCUyQy4yKSUwQSUwOS5vdXQoKQ%3D%3D)\r\n\r\n---\r\n\r\n### hydra-arrays\r\n\r\nExtends the functionality of arrays in Hydra, letting you operate between different arrays and generate new ones.\r\n\r\n[docs](./doc/hydra-arrays.md) / [url](https://hyper-hydra.glitch.me/hydra-arrays.js)\r\n\r\n```js\r\ngradient().diff(o0)\r\n\t.hue([0,2,3,8].div(10).addWrap([0.2,0.1]).smooth())\r\n\t.rotate(Array.run(8).mult(Math.PI*2/8))\r\n\t.add(shape(64,.02)\r\n  \t\t\t.scrollX(Array.random(16,-0.4,0.4).smooth())\r\n  \t\t\t.scrollY(Array.random(16,-0.4,0.4).smooth()))\r\n\t.blend(o0,.6)\r\n\t.out()\r\nbpm = 50\r\n```\r\n[open in hydra](https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlwZXItaHlkcmEuZ2xpdGNoLm1lJTJGaHlkcmEtYXJyYXlzLmpzJTIyKSUwQSUwQWdyYWRpZW50KCklMEElMDkuZGlmZihvMCklMEElMDkuaHVlKCU1QjAlMkMyJTJDMyUyQzglNUQuZGl2KDEwKS5hZGRXcmFwKCU1QjAuMiUyQzAuMSU1RCkuc21vb3RoKCkpJTBBJTA5LnJvdGF0ZShBcnJheS5ydW4oOCkubXVsdChNYXRoLlBJKjIlMkY4KSklMEElMDkuYWRkKCUwQSUyMCUyMCUwOSUwOXNoYXBlKDY0JTJDLjAyKSUwQSUyMCUyMCUwOSUwOSUwOS5zY3JvbGxYKEFycmF5LnJhbmRvbSgxNiUyQy0wLjQlMkMwLjQpLnNtb290aCgpKSUwQSUyMCUyMCUwOSUwOSUwOS5zY3JvbGxZKEFycmF5LnJhbmRvbSgxNiUyQy0wLjQlMkMwLjQpLnNtb290aCgpKSUwQSUwOSklMEElMDkuYmxlbmQobzAlMkMuNiklMEElMDkub3V0KCklMEFicG0lMjAlM0QlMjA1MA%3D%3D)\r\n\r\n---\r\n\r\n### hydra-blend\r\n\r\nAdds most blending modes you know from raster image softwares. Ideal for compositing.\r\n\r\n[docs](./doc/hydra-blend.md) / [url](https://hyper-hydra.glitch.me/hydra-blend.js)\r\n\r\n```js\r\nosc(30)\r\n\t.screen(noise(3,1).pm())\r\n\t.linearBurn(gradient(1).hue(.3))\r\n\t.out()\r\n```\r\n[open in hydra](https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlwZXItaHlkcmEuZ2xpdGNoLm1lJTJGaHlkcmEtYmxlbmQuanMlMjIpJTBBJTBBb3NjKDMwKSUwQSUwOS5zY3JlZW4obm9pc2UoMyUyQzEpLnBtKCkpJTBBJTA5LmxpbmVhckJ1cm4oZ3JhZGllbnQoMSkuaHVlKC4zKSklMEElMDkub3V0KCk%3D)\r\n\r\n---\r\n\r\n### hydra-canvas\r\n\r\nLet's you easily control Hydra's canvas.\r\n\r\n[docs](./doc/hydra-canvas.md) / [url](https://hyper-hydra.glitch.me/hydra-canvas.js)\r\n\r\n```js\r\nsetResolution(256,256)\r\ncanvas.setRelativeSize(2)\r\ncanvas.setAlign(\"right\")\r\ncanvas.setLinear()\r\n\r\nsolid(1).diff(o0).scale(.5).diff(noise(2,0.4)).out()\r\n```\r\n[open in hydra](https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlwZXItaHlkcmEuZ2xpdGNoLm1lJTJGaHlkcmEtY2FudmFzLmpzJTIyKSUwQSUwQXNldFJlc29sdXRpb24oMjU2JTJDMjU2KSUwQWNhbnZhcy5zZXRSZWxhdGl2ZVNpemUoMiklMEFjYW52YXMuc2V0QWxpZ24oJTIycmlnaHQlMjIpJTBBY2FudmFzLnNldExpbmVhcigpJTBBJTBBc29saWQoMSkuZGlmZihvMCkuc2NhbGUoLjUpLmRpZmYobm9pc2UoMiUyQzAuNCkpLm91dCgp)\r\n\r\n---\r\n\r\n### hydra-colorspaces\r\n\r\nAll the function you might need to work with color in different colorspaces such as CMYK, HSV, YUV, etc.\r\n\r\n[docs](./doc/hydra-colorspaces.md) / [url](https://hyper-hydra.glitch.me/hydra-colorspaces.js)\r\n\r\n```js\r\ngradient().rgb.aSet(0)\r\n  \t.cmyk.from()\r\n\t.hsv.hOffsetFrom(noise(1,1),.3)\r\n\t.yuv(1,.5)\r\n\t.out()\r\n```\r\n[open in hydra](https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlwZXItaHlkcmEuZ2xpdGNoLm1lJTJGaHlkcmEtY29sb3JzcGFjZXMuanMlMjIpJTBBJTBBZ3JhZGllbnQoKS5yZ2IuYVNldCgwKSUwQSUyMCUyMCUwOS5jbXlrLmZyb20oKSUwQSUwOS5oc3YuaE9mZnNldEZyb20obm9pc2UoMSUyQzEpJTJDLjMpJTBBJTA5Lnl1digxJTJDLjUpJTBBJTA5Lm91dCgp)\r\n\r\n---\r\n\r\n### hydra-debug\r\n\r\n**WARNING:** doesn't work in atom / pulsar\r\n\r\nAdds a `.debug()` function that allows you to easily read the fragment shader of your sketch and test changes in real time.\r\n\r\n[docs](./doc/hydra-debug.md) / [url](https://hyper-hydra.glitch.me/hydra-debug.js)\r\n\r\n```js\r\nosc().rotate().debug(o0)\r\n```\r\n[open in hydra](https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlwZXItaHlkcmEuZ2xpdGNoLm1lJTJGaHlkcmEtZGVidWcuanMlMjIpJTBBJTBBb3NjKCkucm90YXRlKCkub3V0KCklMjAlMkYlMkYlMjB0cnklMjB0byUyMCU2MGRlYnVnJTYwJTIwbWUlMjAhISUwQSUwQSUyRiUyRiUyMG9zYygpLnJvdGF0ZSgpLmRlYnVnKG8wKQ%3D%3D)\r\n\r\n---\r\n\r\n### hydra-fractals\r\n\r\nAdds some functions that when feedbacked are useful for creating fractals. Thanks to [Kali](https://www.shadertoy.com/user/Kali) for the idea.\r\n\r\n[docs](./doc/hydra-fractals.md) / [url](https://hyper-hydra.glitch.me/hydra-fractals.js)\r\n\r\n```js\r\nsrc(o0)\r\n\t.scale(.75)\r\n\t.add(noise(2,1),.4)\r\n\t.invert()\r\n\t.inversion()\r\n\t.mirrorX2()\r\n\t.blend(o0,.3)\r\n\t.out()\r\n```\r\n[open in hydra](https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlwZXItaHlkcmEuZ2xpdGNoLm1lJTJGaHlkcmEtZnJhY3RhbHMuanMlMjIpJTBBYXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlwZXItaHlkcmEuZ2xpdGNoLm1lJTJGaHlkcmEtb3V0cHV0cy5qcyUyMiklMEElMEFvUy5zZXRMaW5lYXIoKSUwQSUwQXNyYyhvMCklMEElMDkuc2NhbGUoLjc1KSUwQSUwOS5hZGQobm9pc2UoMiUyQzEpJTJDLjQpJTBBJTA5LmludmVydCgpJTBBJTA5LmludmVyc2lvbigpJTBBJTA5Lm1pcnJvclgyKCklMEElMDkuYmxlbmQobzAlMkMuMyklMEElMDkub3V0KCk%3D)\r\n\r\n---\r\n\r\n### hydra-gif\r\n\r\n**WARNING:** doesn't work on instance mode as of now\r\n\r\nLet's you load `.gif` files into Hydra.\r\n\r\n[docs](./doc/hydra-gif.md) / [url](https://hyper-hydra.glitch.me/hydra-gif.js)\r\n\r\n```js\r\ns0.initGif('https://i.giphy.com/media/kZqbBT64ECtjy/giphy.gif')\r\n\r\nsrc(s0)\r\n\t.out()\r\n```\r\n[open in hydra](https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlwZXItaHlkcmEuZ2xpdGNoLm1lJTJGaHlkcmEtZ2lmLmpzJTIyKSUwQSUwQXMwLmluaXRHaWYoJ2h0dHBzJTNBJTJGJTJGaS5naXBoeS5jb20lMkZtZWRpYSUyRmtacWJCVDY0RUN0anklMkZnaXBoeS5naWYnKSUwQSUwQXNyYyhzMCkuc2NhbGUoMSUyQy42KSUwQSUwOS5vdXQoKQ%3D%3D)\r\n\r\n---\r\n\r\n### hydra-glsl\r\n\r\nWrite GLSL code directly in your patches.\r\n\r\n[docs](./doc/hydra-glsl.md) / [url](https://hyper-hydra.glitch.me/hydra-glsl.js)\r\n\r\n```js\r\nglsl('vec4(sin(uv.x*i0+(time*i1*vec3(i2,i2*2.,i2*3.))),1.0)',16,2,.3)\r\n    .glslColor('vec4(c0.brg-(sin(c0.b)*i0),1.)',()=\u003eMath.cos(time))\r\n    .out()\r\n```\r\n[open in hydra](https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlwZXItaHlkcmEuZ2xpdGNoLm1lJTJGaHlkcmEtZ2xzbC5qcyUyMiklMEElMEFnbHNsKCd2ZWM0KHNpbih1di54KmkwJTJCKHRpbWUqaTEqdmVjMyhpMiUyQ2kyKjIuJTJDaTIqMy4pKSklMkMxLjApJyUyQzE2JTJDMiUyQy4zKSUwQSUwOS5nbHNsQ29sb3IoJ3ZlYzQoYzAuYnJnLShzaW4oYzAuYikqaTApJTJDMS4pJyUyQygpJTNEJTNFTWF0aC5jb3ModGltZSkpJTBBJTA5Lm91dCgp)\r\n\r\n---\r\n\r\n### hydra-gradientmap\r\n\r\nCreate gradients with css colors and use them for gradient mapping.\r\n\r\n[url](https://hyper-hydra.glitch.me/hydra-gradientmap.js)\r\n\r\n```js\r\nconst myGradient = createGradient(\"#000\", \"#0bf\", \"red\", \"white\");\r\n \r\nosc(30,.05).kaleid(720).scale(1,()=\u003einnerHeight/innerWidth)\r\n\t.lookupX(myGradient)\r\n\t.out()\r\n```\r\n[open in hydra](https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlkcmEtZXh0ZW5zaW9ucy5nbGl0Y2gubWUlMkZoeWRyYS1ncmFkaWVudHMuanMlMjIpJTBBJTBBY29uc3QlMjBteUdyYWRpZW50JTIwJTNEJTIwY3JlYXRlR3JhZGllbnQoJTIyJTIzMDAwJTIyJTJDJTIwJTIyJTIzMGJmJTIyJTJDJTIwJTIycmVkJTIyJTJDJTIwJTIyd2hpdGUlMjIpJTNCJTBBJTIwJTBBb3NjKDMwJTJDLjA1KS5rYWxlaWQoNzIwKS5zY2FsZSgxJTJDKCklM0QlM0Vpbm5lckhlaWdodCUyRmlubmVyV2lkdGgpJTBBJTA5Lmxvb2t1cFgobXlHcmFkaWVudCklMEElMDkub3V0KCklMEElMjAlMEFzcmMobXlHcmFkaWVudCkub3V0KG8xKSUwQSUwQXJlbmRlcigp)\r\n\r\n---\r\n\r\n### hydra-mouse\r\n\r\nReplaces Hydra's standard `mouse` object adding useful properties.\r\n\r\n[docs](./doc/hydra-mouse.md) / [url](https://hyper-hydra.glitch.me/hydra-mouse.js)\r\n\r\n```js\r\nnoise(1)\r\n\t.add(shape(64,.01,.2).scrollX(()=\u003emouse.posx).scrollY(()=\u003emouse.posy))\r\n\t.out()\r\n```\r\n[open in hydra](https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlwZXItaHlkcmEuZ2xpdGNoLm1lJTJGaHlkcmEtbW91c2UuanMlMjIpJTBBJTBBbm9pc2UoMSklMEElMDkuYWRkKHNoYXBlKDY0JTJDLjAxJTJDLjIpLnNjcm9sbFgoKCklM0QlM0Vtb3VzZS5wb3N4KS5zY3JvbGxZKCgpJTNEJTNFbW91c2UucG9zeSkpJTBBJTA5Lm91dCgp)\r\n\r\n---\r\n\r\n### hydra-outputs\r\n\r\nChange the properties of Hydra's outputs' framebuffers. Most importantly: try linear interpolation.\r\n\r\n[docs](./doc/hydra-outputs.md) / [url](https://hyper-hydra.glitch.me/hydra-outputs.js)\r\n\r\n```js\r\no1.setLinear()\r\n\r\nsrc(o1)\r\n    .layer(osc(30,.2,1).mask(shape(4,.1,0)))\r\n    .scale(1.01).rotate(.01)\r\n    .out(o1)\r\n```\r\n[open in hydra](https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlwZXItaHlkcmEuZ2xpdGNoLm1lJTJGaHlkcmEtb3V0cHV0cy5qcyUyMiklMEElMEFvMC5zZXROZWFyZXN0KCklMEFvMS5zZXRMaW5lYXIoKSUwQSUwQXNyYyhvMCklMEElMjAubGF5ZXIob3NjKDMwJTJDLjIlMkMxKS5tYXNrKHNoYXBlKDQlMkMuMSUyQzApKSklMEElMjAuc2NhbGUoMS4wMSkucm90YXRlKC4wMSklMEElMjAub3V0KG8wKSUwQSUwQXNyYyhvMSklMEElMjAubGF5ZXIob3NjKDMwJTJDLjIlMkMxKS5tYXNrKHNoYXBlKDQlMkMuMSUyQzApKSklMEElMjAuc2NhbGUoMS4wMSkucm90YXRlKC4wMSklMEElMjAub3V0KG8xKSUwQSUwQXJlbmRlcigp)\r\n\r\n---\r\n\r\n### hydra-pip\r\n\r\nAdds a function to toggle picture-in-picture. Note that colors might look a bit washed out since this extension uses hydra's canvas' MediaStream.\r\n\r\n[url](https://hyper-hydra.glitch.me/hydra-pip.js)\r\n\r\n```js\r\nosc().out()\r\n\r\nhydraPictureInPicture() // alias: hydraPip()\r\n```\r\n[open in hydra](https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlwZXItaHlkcmEuZ2xpdGNoLm1lJTJGaHlkcmEtcGlwLmpzJTIyKSUwQSUwQW9zYyg0MCUyQy4wOSUyQzEuNSklMEElMjAlMjAlMjAuZGlmZihvc2MoMjApLmx1bWEoKSklMEEub3V0KCklMEElMEElMkYlMkYlMjBoeWRyYVBpcCgpJTNC)\r\n\r\n---\r\n\r\n### hydra-pixels\r\n\r\nRetrieve pixel values from Hydra's outputs.\r\n\r\n[docs](./doc/hydra-pixels.md) / [url](https://hyper-hydra.glitch.me/hydra-pixels.js)\r\n\r\n```js\r\nosc(40,.09,1.5)\r\n   .diff(osc(20).luma())\r\n   .color(1,1,()=\u003e1+pixel[0]/255)\r\n.out()\r\n\r\nupdate = ()=\u003e {\r\n  pixel = o0.read(width/2,height/2) // center of the screen\r\n}\r\n```\r\n[open in hydra](https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlwZXItaHlkcmEuZ2xpdGNoLm1lJTJGaHlkcmEtcGl4ZWxzLmpzJTIyKSUwQSUwQW9zYyg0MCUyQy4wOSUyQzEuNSklMEElMjAlMjAlMjAuZGlmZihvc2MoMjApLmx1bWEoKSklMEElMjAlMjAlMjAuY29sb3IoMSUyQzElMkMoKSUzRCUzRTElMkJwaXhlbCU1QjAlNUQlMkYyNTUpJTBBLm91dCgpJTBBJTBBdXBkYXRlJTIwJTNEJTIwKCklM0QlM0UlMjAlN0IlMEElMjAlMjBwaXhlbCUyMCUzRCUyMG8wLnJlYWQod2lkdGglMkYyJTJDaGVpZ2h0JTJGMiklMjAlMkYlMkYlMjBjZW50ZXIlMjBvZiUyMHRoZSUyMHNjcmVlbiUwQSU3RA%3D%3D)\r\n\r\n---\r\n\r\n### hydra-src\r\n\r\nAdds `srcAbs` and `srcRel` functions. `srcAbs` will act as `src()` but will show the source with its original width and height on screen. `scrRel` will act as `src()` but will mantain the source's aspect ratio. Works great with [hydra-wrap](#hydra-wrap). There's also `srcMask`, `srcAbsMask` and `srcAbsMark` which will mask out the wrapping.\r\n\r\n[url](https://hyper-hydra.glitch.me/hydra-src.js)\r\n\r\n```js\r\nsrc(o0)\r\n\t.scale(1.01)\r\n  \t.colorama(-.02).brightness(-.2)\r\n  \t.blend(o0,.8)\r\n\t.layer(srcAbs(s0).luma(.4,.1))\r\n\t.out()\r\n```\r\n[open in hydra](https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlwZXItaHlkcmEuZ2xpdGNoLm1lJTJGaHlkcmEtc3JjLmpzJTIyKSUwQSUwQXMwLmluaXRJbWFnZSgnaHR0cHMlM0ElMkYlMkZ1cGxvYWQud2lraW1lZGlhLm9yZyUyRndpa2lwZWRpYSUyRmNvbW1vbnMlMkYyJTJGMjUlMkZIeWRyYS1Gb3RvLmpwZycpJTBBJTBBc3JjKG8wKSUwQSUwOS5zY2FsZSgxLjAxKSUwQSUyMCUyMCUwOS5jb2xvcmFtYSgtLjAyKS5icmlnaHRuZXNzKC0uMiklMEElMjAlMjAlMDkuYmxlbmQobzAlMkMuOCklMEElMDkubGF5ZXIoc3JjQWJzKHMwKS5sdW1hKC40JTJDLjEpKSUwQSUwOS5vdXQoKQ%3D%3D)\r\n\r\n---\r\n\r\n### hydra-swizzle\r\n\r\nReplicates the swizzling functionality from GLSL.\r\n\r\n[docs](./doc/hydra-swizzle.md) / [url](https://hyper-hydra.glitch.me/hydra-swizzle.js)\r\n\r\n```js\r\ngradient(1).gbg\r\n\t.layer(osc(30,.1,2).bggr)\r\n\t.layer(gradient().r.mask(shape(2)))\r\n\t.out()\r\n```\r\n[open in hydra](https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlwZXItaHlkcmEuZ2xpdGNoLm1lJTJGaHlkcmEtc3dpenpsZS5qcyUyMiklMEElMEFncmFkaWVudCgxKS5nYmclMEElMDkubGF5ZXIob3NjKDMwJTJDLjElMkMyKS5iZ2dyKSUwQSUwOS5sYXllcihncmFkaWVudCgpLnIubWFzayhzaGFwZSgyKSkpJTBBJTA5Lm91dCgp)\r\n\r\n---\r\n\r\n### hydra-tap\r\n\r\nAdds a tap control for bpm and basic envelopes. Inspired by Resolume.\r\n\r\n[docs](./doc/hydra-tap.md) / [url](https://hyper-hydra.glitch.me/hydra-tap.js)\r\n\r\n```js\r\nosc(30,.01,beats(1)).out()\r\n\r\nosc().rotate(beats_(2).curve(-3)).out()\r\n\r\nosc().scale(beats(1).curve(2).range(1,2)).out()\r\n\r\n// Ctrl + Space Bar for tapping\r\n// Ctrl + , (Comma) for re-sync\r\n```\r\n[open in hydra](https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlwZXItaHlkcmEuZ2xpdGNoLm1lJTJGaHlkcmEtdGFwLmpzJTIyKSUwQSUwQW9zYygzMCUyQy4wMSUyQ2JlYXRzKDEpKS5vdXQoKSUwQSUwQW9zYygpLnJvdGF0ZShiZWF0c18oMikuY3VydmUoLTMpKS5vdXQoKSUwQSUwQW9zYygpLnNjYWxlKGJlYXRzKDEpLmN1cnZlKDIpLnJhbmdlKDElMkMyKSkub3V0KCklMEElMEElMkYlMkYlMjBDdHJsJTIwJTJCJTIwU3BhY2UlMjBCYXIlMjBmb3IlMjB0YXBwaW5nJTBBJTJGJTJGJTIwQ3RybCUyMCUyQiUyMCUyQyUyMChDb21tYSklMjBmb3IlMjByZS1zeW5j)\r\n\r\n---\r\n\r\n### hydra-text\r\n\r\nAdds a text generator to Hydra\r\n\r\n[docs](./doc/hydra-text.md) / [url](https://hyper-hydra.glitch.me/hydra-text.js)\r\n\r\n```js\r\nhydraText.font = \"serif\"\r\nhydraText.lineWidth = \"2%\"\r\nstr = \" hydra_! \"\r\nsolid(1,.2)\r\n\t.blend(src(o0).scale(1.02).colorama(.02))\r\n\t.layer(text(str))\r\n\t.diff(strokeText(str).modulateScale(noise(1,1), .4))\r\n\t.out()\r\n```\r\n[open in hydra](https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlwZXItaHlkcmEuZ2xpdGNoLm1lJTJGaHlkcmEtdGV4dC5qcyUyMiklMEElMEFoeWRyYVRleHQuZm9udCUyMCUzRCUyMCUyMnNlcmlmJTIyJTBBaHlkcmFUZXh0LmxpbmVXaWR0aCUyMCUzRCUyMCUyMjIlMjUlMjIlMEFzdHIlMjAlM0QlMjAlMjIlMjBoeWRyYV8hJTIwJTIyJTBBc29saWQoMSUyQy4yKSUwQSUwOS5ibGVuZChzcmMobzApLnNjYWxlKDEuMDIpLmNvbG9yYW1hKC4wMikpJTBBJTA5LmxheWVyKHRleHQoc3RyKSklMEElMDkuZGlmZihzdHJva2VUZXh0KHN0cikubW9kdWxhdGVTY2FsZShub2lzZSgxJTJDMSklMkMlMjAuNCkpJTBBJTA5Lm91dCgp)\r\n\r\n---\r\n\r\n### hydra-vec4\r\n\r\nAdds wrapper functions that allow you to construct vec4's like you would in GLSL.\r\n\r\n[docs](./doc/hydra-vec4.md) / [url](https://hyper-hydra.glitch.me/hydra-vec4.js)\r\n\r\n```js\r\nnoise()\r\n\t.mult( vec4( vec3(0.5) , 1 ) )\r\n  \t.add( vec4( [0.5,0].smooth() ) )\r\n\t.layer(\r\n\t\tvec4( vec3( [0, 1, 0.5] , vec2( ()=\u003etime%1 ) ) , 1)\r\n  \t\t\t.mask(shape(4))\r\n\t)\r\n  \t.out()\r\n```\r\n[open in hydra](https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlwZXItaHlkcmEuZ2xpdGNoLm1lJTJGaHlkcmEtdmVjNC5qcyUyMiklMEElMEFub2lzZSgpJTBBJTA5Lm11bHQoJTIwdmVjNCglMjB2ZWMzKDAuNSklMjAlMkMlMjAxJTIwKSUyMCklMEElMjAlMjAlMDkuYWRkKCUyMHZlYzQoJTIwJTVCMC41JTJDMCU1RC5zbW9vdGgoKSUyMCklMjApJTBBJTA5LmxheWVyKCUwQSUwOSUwOXZlYzQoJTIwdmVjMyglMjAlNUIwJTJDJTIwMSUyQyUyMDAuNSU1RCUyMCUyQyUyMHZlYzIoJTIwKCklM0QlM0V0aW1lJTI1MSUyMCklMjApJTIwJTJDJTIwMSklMEElMjAlMjAlMDklMDklMDkubWFzayhzaGFwZSg0KSklMEElMDkpJTBBJTIwJTIwJTA5Lm91dCgp)\r\n\r\n---\r\n\r\n### hydra-wrap\r\n\r\nChange how Hydra wraps textures, and control the wrapping of generators.\r\n\r\n[docs](./doc/hydra-wrap.md) / [url](https://hyper-hydra.glitch.me/hydra-wrap.js)\r\n\r\n```js\r\nhydraWrap.setMirror()\r\n\r\nsrc(o0)\r\n\t.layer(osc().rotate().mask(shape(4,1,0)))\r\n\t.scale(.5)\r\n\t.blend(noise(),.2)\r\n\t.out()\r\n```\r\n[open in hydra](https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlwZXItaHlkcmEuZ2xpdGNoLm1lJTJGaHlkcmEtd3JhcC5qcyUyMiklMEElMEFoeWRyYVdyYXAuc2V0TWlycm9yKCklMEElMEFzcmMobzApJTBBJTA5LmxheWVyKG9zYygpLnJvdGF0ZSgpLm1hc2soc2hhcGUoNCUyQzElMkMwKSkpJTBBJTA5LnNjYWxlKC41KSUwQSUwOS5ibGVuZChub2lzZSgpJTJDLjIpJTBBJTA5Lm91dCgp)\r\n\r\n---\r\n\r\n## Also check:\r\n\r\n* [`extra-shaders-for-hydra`](https://gitlab.com/metagrowing/extra-shaders-for-hydra) : another really useful repo of hydra extensions made by Thomas Jourdan\r\n* [`hydra-midi`](https://github.com/arnoson/hydra-midi) : a super complete midi extension for hydra, made by Arnno Schlipf.\r\n* [`hydra-antlia`](https://github.com/geikha/hydra-antlia) : my extension of hydra for colors, geometry and interactivity.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeikha%2Fhyper-hydra","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeikha%2Fhyper-hydra","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeikha%2Fhyper-hydra/lists"}