eessppeelllloo/hydra
1
0
Fork 0
mirror of https://github.com/hydra-synth/hydra.git synced 2026-06-16 04:26:10 +02:00
Code Issues Packages Projects Releases Wiki Activity

add code

Browse Source
This commit is contained in:
ojack
2023-07-18 16:30:54 +02:00
parent 7413269ce7
commit 1ffbfe344a
15 changed files with 212 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.js
+1 -1
View File
@@ -12,7 +12,7 @@ app.use(store)
app.use(languageStore)
app.use(extensionStore)
app.route('/', mainView)
app.route('/hydra-backup', mainView)
app.route('/dev', mainView)
app.mount('body')
public/extensions/arithmetics.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 150 KiB

public/extensions/config.json
+16
View File
@@ -0,0 +1,16 @@
{
"categories": [
{
"title": "extensions",
"id": "extensions"
},
{
"title": "external libraries",
"id": "external-libraries"
},
{
"title": "examples",
"id": "examples"
}
]
}
public/extensions/examples.json
+14
View File
@@ -0,0 +1,14 @@
[
{
"name": "webcam",
"description": "use the camera as a source",
"documentation": "",
"author": "",
"thumbnail": "op-art.png",
"load": null,
"examples": [
"https://hydra.ojack.xyz/?code=czAuaW5pdENhbSgpJTIwJTJGJTJGaW5pdGlhbGl6ZSUyMHdlYmNhbSUyMGFzJTIwZXh0ZXJuYWwlMjBzb3VyY2UlMjAnczAnJTBBc3JjKHMwKS5vdXQoKSUyMCUyRiUyRiUyMHVzZSUyMGV4dGVybmFsJTIwc291cmNlJTIwJ3MwJyUyMGluc2lkZSUyMEh5ZHJh",
"https://hydra.ojack.xyz/?code=czAuaW5pdENhbSgpJTBBc3JjKHMwKS5jb2xvcigtMSUyQyUyMDEpLm91dCgp"
]
}
]
public/extensions/extensions.json
+59
View File
@@ -0,0 +1,59 @@
[
{
"name": "Op-art patterns",
"description": "Additional fragment shaders inspired by op-art patterns",
"documentation": "https://gitlab.com/metagrowing/extra-shaders-for-hydra#op-art-patterns",
"author": "Thomas Jourdan",
"thumbnail": "op-art.png",
"load": "await loadScript(\\\"https://cdn.statically.io/gl/metagrowing/extra-shaders-for-hydra/main/lib/lib-pattern.js\\\")",
"examples": [
"https://hydra.ojack.xyz/?code=JTJGJTJGJTIwbGljZW5zZWQlMjB3aXRoJTIwQ0MlMjBCWS1OQy1TQSUyMDQuMCUyMGh0dHBzJTNBJTJGJTJGY3JlYXRpdmVjb21tb25zLm9yZyUyRmxpY2Vuc2VzJTJGYnktbmMtc2ElMkY0LjAlMkYlMEFhd2FpdCUyMGxvYWRTY3JpcHQoJTIyaHR0cHMlM0ElMkYlMkZjZG4uc3RhdGljYWxseS5pbyUyRmdsJTJGbWV0YWdyb3dpbmclMkZleHRyYS1zaGFkZXJzLWZvci1oeWRyYSUyRm1haW4lMkZsaWIlMkZsaWItcGF0dGVybi5qcyUyMiklMEElMEFhJTIwJTNEJTIwKCklMjAlM0QlM0UlMjAwLjEzNyUyMColMjB0aW1lJTNCJTBBc3BpcmFsKDIuMCUyQyUyMDUuMCUyQyUyMDAuMykucm90YXRlKCgpJTIwJTNEJTNFJTIwLTIuMCUyMColMjBhKCkpLm91dChvMCklMEFzcGlyYWwoMi4wJTJDJTIwNS4wJTJDJTIwMC4zKS5yb3RhdGUoYSkuZGlmZihjb25jZW50cmljKDEwMC4wJTJDMC4yNSUyQzAuMjUpKS5vdXQobzEpJTBBc3BpcmFsKDIuMCUyQyUyMDUuMCUyQyUyMDAuMykucm90YXRlKGEpLm11bHQoc3BpcmFsKDEuMCUyQyUyMDMuMCUyQyUyMDAuMykpLm91dChvMiklMEFzcGlyYWwoMS4wJTJDJTIwNS4wJTJDJTIwMC4xKS5yb3RhdGUoYSkuZGlmZihicmljaygpKS5vdXQobzMpJTBBcmVuZGVyKCklMEElMEElMEE%3D"
]
},
{
"name": "hydra-arithmetics",
"description": "Adds many functions related to visual arithmetics.",
"documentation": "https://gitlab.com/metagrowing/extra-shaders-for-hydra/-/blob/main/gallery/pattern/README.md",
"author": "ritchse",
"thumbnail": "arithmetics.png",
"load": "await loadScript(\\\"https://hydra-extensions.glitch.me/hydra-arithmetics.js\\\")",
"examples": [
"https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlkcmEtZXh0ZW5zaW9ucy5nbGl0Y2gubWUlMkZoeWRyYS1hcml0aG1ldGljcy5qcyUyMiklMEElMEFvc2MoMTAlMkMuMSUyQzIpJTBBJTA5Lm1vZChncmFkaWVudCgpLmFzaW4oKS5jb3MoKSklMEElMDkuc3RlcChub2lzZSgyKS51bmlwb2xhcigpLmRpdihvMCkpJTBBJTA5LmJsZW5kKG8wJTJDLjIpJTBBJTA5Lm91dCgp"
]
},
{
"name": "hydrated-gradient",
"description": "make gradients with specified colors",
"documentation": "https://hydrated.savamala.top/",
"author": "Joan Queralt",
"thumbnail": "gradient.png",
"load": "await loadScript(\\\"https://hydrated.savamala.top/hydra-gradient.js\\\")",
"examples": [
"https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlkcmF0ZWQuc2F2YW1hbGEudG9wJTJGaHlkcmEtZ3JhZGllbnQuanMlMjIpJTBBJTBBJTJGJTJGJTIwVXNlJTIwZ3JhZGllbnQyJTIwdG8lMjBjcmVhdGUlMjBhJTIwZ3JhZGllbnQlMjBiZXR3ZWVuJTIwdHdvJTIwY29sb3JzJTNBJTBBJTJGJTJGJTIwZ3JhZGllbnQyKHIwJTNEMSUyQ2cwJTNEMCUyQ2IwJTNEJTJDcjElM0QwJTJDZzElM0QwJTJDYjElM0QxJTJDc3BlZWQlM0QwKSUwQSUwQWdyYWRpZW50MigxJTJDMCUyQzAlMkMwLjglMkMwJTJDMC44JTJDMC4yKS5vdXQoKSUwQSUwQXJlbmRlcihvMCk%3D"
]
},
{
"name": "hydra-shaderpark",
"description": "extension to use hydra with Shader Park - A JavaScript library for creating interactive procedural 2D and 3D shaders.",
"www": "https://shaderpark.com/",
"documentation": "https://shaderpark.com/",
"author": "emptyflash, Torin Blankensmith and Peter Whidden",
"thumbnail": "shader-park.png",
"load": "const { sculptToHydraRenderer } = await import(\\\"https://livecode.emptyfla.sh/hydra/all.js\\\")",
"examples": [
"https://hydra.ojack.xyz/?code=JTJGJTJGJTIwbGljZW5zZWQlMjB3aXRoJTIwQ0MlMjBCWS1OQy1TQSUyMDQuMCUyMGh0dHBzJTNBJTJGJTJGY3JlYXRpdmVjb21tb25zLm9yZyUyRmxpY2Vuc2VzJTJGYnktbmMtc2ElMkY0LjAlMkYlMEFjb25zdCUyMCU3QiUyMHNjdWxwdFRvSHlkcmFSZW5kZXJlciUyMCU3RCUyMCUzRCUyMGF3YWl0JTIwaW1wb3J0KCUyMmh0dHBzJTNBJTJGJTJGbGl2ZWNvZGUuZW1wdHlmbGEuc2glMkZoeWRyYSUyRmFsbC5qcyUyMiklMEElMEFzY3VscHRUb0h5ZHJhUmVuZGVyZXIoKCklMjAlM0QlM0UlMjAlN0IlMEElMDklMDlyb3RhdGVYKHRpbWUlMjAlMkYlMjA1KSUwQSUwOSUwOXJvdGF0ZVoodGltZSUyMCUyRiUyMDMpJTBBJTA5JTA5ZGlzcGxhY2Uoc2luKHRpbWUpJTJDJTIwMSUyQyUyMDApJTBBJTA5JTA5bWlycm9yTigzJTJDJTIwMyklMEElMDklMDl0b3J1cygwLjglMkMlMjAwLjM4JTIwJTJCJTIwMC4xJTIwKiUyMHNpbih0aW1lKSklMEElMDklN0QpJTBBJTA5Lm91dChvMCklMEElMEFyZW5kZXIobzApJTBB"
]
},
{
"name": "hydra-midi",
"description": "midi in hydra",
"www": "https://github.com/arnoson/hydra-midi",
"documentation": "https://github.com/arnoson/hydra-midi",
"author": "Arno Schlipf",
"thumbnail": "shader-park.png",
"load": "await loadScript(\\\"https://cdn.jsdelivr.net/npm/hydra-midi@latest/dist/index.js\\\")",
"examples": [
"https://hydra.ojack.xyz/?code=JTJGJTJGJTIwWW91JTIwY2FuJTIwZWl0aGVyJTIwdXNlJTIwJTYwJTQwbGF0ZXN0JTYwJTIwb3IlMjBsb2FkJTIwYSUyMHNwZWNpZmljJTIwdmVyc2lvbiUyMHdpdGglMkMlMjBmb3IlMjBleGFtcGxlJTJDJTIwJTYwJTQwMC40LjAlNjAuJTBBYXdhaXQlMjBsb2FkU2NyaXB0KCUwQSUyMCUyMCdodHRwcyUzQSUyRiUyRmNkbi5qc2RlbGl2ci5uZXQlMkZucG0lMkZoeWRyYS1taWRpJTQwbGF0ZXN0JTJGZGlzdCUyRmluZGV4LmpzJyUwQSklMEElMEElMkYlMkYlMjBVc2UlMjBtaWRpJTIwbWVzc2FnZXMlMjBmcm9tJTIwYWxsJTIwY2hhbm5lbHMlMjBvZiUyMGFsbCUyMGlucHV0cy4lMEFhd2FpdCUyMG1pZGkuc3RhcnQoJTdCJTIwY2hhbm5lbCUzQSUyMCcqJyUyQyUyMGlucHV0JTNBJTIwJyonJTIwJTdEKSUwQSUyRiUyRiUyMFNob3clMjBhJTIwc21hbGwlMjBtaWRpJTIwbW9uaXRvciUyMChzaW1pbGFyJTIwdG8lMjBoeWRyYSdzJTIwJTYwYS5zaG93KCklNjApLiUwQW1pZGkuc2hvdygpJTBBJTBBJTJGJTJGJTIwVXNlJTIwYW55JTIwbm90ZSUyMHRvJTIwY29udHJvbCUyMHRoZSUyMHJlZCUyMGFtb3VudCUyMG9mJTIwaHlkcmEncyUyMCU2MHNvbGlkKCklNjAlMjBmdW5jdGlvbi4lMEFzb2xpZChub3RlKCcqJyklMkMlMjAwJTJDJTIwMSkub3V0KCklMEElMEElMkYlMkYlMjBPciUyQyUyMGlmJTIweW91JTIwYXJlJTIwdXNpbmclMjBhJTIwbWlkaSUyMGNvbnRyb2xsZXIlMjBhbmQlMjBub3QlMjBhJTIwa2V5Ym9hcmQlM0ElMEElMkYlMkYlMjBVc2UlMjBhJTIwY29udHJvbCUyMGNoYW5nZSUyMHZhbHVlJTIwdG8lMjBjb250cm9sJTIwdGhlJTIwcmVkJTIwYW1vdW50LiUwQSUyRiUyRiUyMHNvbGlkKGNjKDc0KSUyQyUyMDAlMkMlMjAxKS5vdXQoKQ%3D%3D"
]
}
]
public/extensions/external-libraries.json
+38
View File
@@ -0,0 +1,38 @@
[
{
"name": "p5.js",
"description": "JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! (automatically loaded into hydra editor)",
"www": "https://p5js.org/",
"documentation": "https://github.com/hydra-synth/hydra#using-p5js-with-hydra",
"author": "Lauren Lee McCarthy + community",
"thumbnail": "op-art.png",
"load": "",
"examples": [
"https://hydra.ojack.xyz/?code=JTJGJTJGJTIwSW5pdGlhbGl6ZSUyMGElMjBuZXclMjBwNSUyMGluc3RhbmNlJTIwSXQlMjBpcyUyMG9ubHklMjBuZWNlc3NhcnklMjB0byUyMGNhbGwlMjB0aGlzJTIwb25jZSUwQXA1JTIwJTNEJTIwbmV3JTIwUDUoKSUyMCUyRiUyRiUyMCU3QndpZHRoJTNBJTIwd2luZG93LmlubmVyV2lkdGglMkMlMjBoZWlnaHQlM0F3aW5kb3cuaW5uZXJIZWlnaHQlMkMlMjBtb2RlJTNBJTIwJ1AyRCclN0QlMEElMEElMkYlMkYlMjBkcmF3JTIwYSUyMHJlY3RhbmdsZSUyMGF0JTIwcG9pbnQlMjAzMDAlMkMlMjAxMDAlMEFwNS5yZWN0KDMwMCUyQyUyMDEwMCUyQyUyMDEwMCUyQyUyMDEwMCklMEElMEElMkYlMkYlMjBOb3RlJTIwdGhhdCUyMFA1JTIwcnVucyUyMGluJTIwaW5zdGFuY2UlMjBtb2RlJTJDJTIwc28lMjBhbGwlMjBmdW5jdGlvbnMlMjBuZWVkJTIwdG8lMjBzdGFydCUyMHdpdGglMjB0aGUlMjB2YXJpYWJsZSUyMHdoZXJlJTIwUDUlMjB3YXMlMjBpbml0aWFsaXplZCUyMChpbiUyMHRoaXMlMjBjYXNlJTIwcDUpJTBBJTJGJTJGJTIwcmVmZXJlbmNlJTIwZm9yJTIwUDUlM0ElMjBodHRwcyUzQSUyRiUyRlA1anMub3JnJTJGcmVmZXJlbmNlJTJGJTBBJTJGJTJGJTIwZXhwbGFuYXRpb24lMjBvZiUyMGluc3RhbmNlJTIwbW9kZSUzQSUyMGh0dHBzJTNBJTJGJTJGZ2l0aHViLmNvbSUyRnByb2Nlc3NpbmclMkZQNS5qcyUyRndpa2klMkZHbG9iYWwtYW5kLWluc3RhbmNlLW1vZGUlMEElMEElMkYlMkYlMjBXaGVuJTIwbGl2ZSUyMGNvZGluZyUyQyUyMHRoZSUyMCUyMnNldHVwKCklMjIlMjBmdW5jdGlvbiUyMG9mJTIwUDUuanMlMjBoYXMlMjBiYXNpY2FsbHklMjBubyUyMHVzZSUzQiUyMGFueXRoaW5nJTIwdGhhdCUyMHlvdSUyMHdvdWxkJTIwaGF2ZSUyMGNhbGxlZCUyMGluJTIwc2V0dXAlMjB5b3UlMjBjYW4lMjBqdXN0JTIwY2FsbCUyMG91dHNpZGUlMjBvZiUyMGFueSUyMGZ1bmN0aW9uLiUwQSUwQXA1LmNsZWFyKCklMEElMEFmb3IodmFyJTIwaSUyMCUzRCUyMDAlM0IlMjBpJTIwJTNDJTIwMTAwJTNCJTIwaSUyQiUyQiklN0IlMEElMjAlMjBwNS5maWxsKGkqMTAlMkMlMjBpJTI1MzAlMkMlMjAyNTUpJTBBJTIwJTIwcDUucmVjdChpKjIwJTJDJTIwMjAwJTJDJTIwMTAlMkMyMDApJTBBJTdEJTBBJTBBJTJGJTJGJTIwVG8lMjBsaXZlJTIwY29kZSUyMGFuaW1hdGlvbnMlMkMlMjB5b3UlMjBjYW4lMjByZWRlZmluZSUyMHRoZSUyMGRyYXclMjBmdW5jdGlvbiUyMG9mJTIwUDUlMjBhcyUyMGZvbGxvd3MlM0ElMEElMkYlMkYlMjAoYSUyMHJlY3RhbmdsZSUyMHRoYXQlMjBmb2xsb3dzJTIwdGhlJTIwbW91c2UpJTBBcDUuZHJhdyUyMCUzRCUyMCgpJTIwJTNEJTNFJTIwJTdCJTBBJTIwJTIwcDUuZmlsbChwNS5tb3VzZVglMkY1JTJDJTIwcDUubW91c2VZJTJGNSUyQyUyMDI1NSUyQyUyMDEwMCklMEElMjAlMjBwNS5yZWN0KHA1Lm1vdXNlWCUyQyUyMHA1Lm1vdXNlWSUyQyUyMDMwJTJDJTIwMTUwKSUwQSU3RCUwQSUwQSUyRiUyRiUyMFRvJTIwdXNlJTIwUDUlMjBhcyUyMGFuJTIwaW5wdXQlMjB0byUyMGh5ZHJhJTJDJTIwc2ltcGx5JTIwdXNlJTIwdGhlJTIwY2FudmFzJTIwYXMlMjBhJTIwc291cmNlJTNBJTBBczAuaW5pdCglN0JzcmMlM0ElMjBwNS5jYW52YXMlN0QpJTBBJTBBJTJGJTJGJTIwVGhlbiUyMHJlbmRlciUyMHRoZSUyMGNhbnZhcyUwQXNyYyhzMCkucmVwZWF0KCkub3V0KCk%3D"
]
},
{
"name": "Tone.js",
"description": "Web Audio framework for creating interactive music in the browser",
"www": "https://tonejs.github.io/",
"documentation": "https://tonejs.github.io/docs/14.7.77/index.html",
"author": "Yotam Mann",
"thumbnail": "arithmetics.png",
"load": "await loadScript(\\\"https://unpkg.com/tone\\\")",
"examples": [
"https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGdW5wa2cuY29tJTJGdG9uZSUyMiklMEElMEFzeW50aCUyMCUzRCUyMG5ldyUyMFRvbmUuU3ludGgoKS50b0Rlc3RpbmF0aW9uKCklM0IlMEFzeW50aC50cmlnZ2VyQXR0YWNrUmVsZWFzZSglMjJDNCUyMiUyQyUyMCUyMjhuJTIyKSUzQg%3D%3D"
]
},
{
"name": "Three.js",
"description": "JavaScript 3D library",
"documentation": "https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene",
"www": "",
"author": "mr.doob",
"thumbnail": "gradient.png",
"load": "await loadScript(\\\"https://threejs.org/build/three.js\\\")",
"examples": [
"https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGdGhyZWVqcy5vcmclMkZidWlsZCUyRnRocmVlLmpzJTIyKSUwQSUwQXNjZW5lJTIwJTNEJTIwbmV3JTIwVEhSRUUuU2NlbmUoKSUwQWNhbWVyYSUyMCUzRCUyMG5ldyUyMFRIUkVFLlBlcnNwZWN0aXZlQ2FtZXJhKDc1JTJDJTIwd2luZG93LmlubmVyV2lkdGglMjAlMkYlMjB3aW5kb3cuaW5uZXJIZWlnaHQlMkMlMjAwLjElMkMlMjAxMDAwKSUwQSUwQXJlbmRlcmVyJTIwJTNEJTIwbmV3JTIwVEhSRUUuV2ViR0xSZW5kZXJlcigpJTBBcmVuZGVyZXIuc2V0U2l6ZSh3aWR0aCUyQyUyMGhlaWdodCklMEFnZW9tZXRyeSUyMCUzRCUyMG5ldyUyMFRIUkVFLkJveEdlb21ldHJ5KCklMEFtYXRlcmlhbCUyMCUzRCUyMG5ldyUyMFRIUkVFLk1lc2hCYXNpY01hdGVyaWFsKCU3QmNvbG9yJTNBJTIwMHgwMGZmMDAlN0QpJTBBY3ViZSUyMCUzRCUyMG5ldyUyMFRIUkVFLk1lc2goZ2VvbWV0cnklMkMlMjBtYXRlcmlhbCklM0IlMEFzY2VuZS5hZGQoY3ViZSklMEFjYW1lcmEucG9zaXRpb24ueiUyMCUzRCUyMDEuNSUwQSUwQSUyRiUyRiUyMCd1cGRhdGUnJTIwaXMlMjBhJTIwcmVzZXJ2ZWQlMjBmdW5jdGlvbiUyMHRoYXQlMjB3aWxsJTIwYmUlMjBydW4lMjBldmVyeSUyMHRpbWUlMjB0aGUlMjBtYWluJTIwaHlkcmElMjByZW5kZXJpbmclMjBjb250ZXh0JTIwaXMlMjB1cGRhdGVkJTBBdXBkYXRlJTIwJTNEJTIwKCklMjAlM0QlM0UlMjAlN0IlMEElMjAlMjBjdWJlLnJvdGF0aW9uLnglMjAlMkIlM0QlMjAwLjAxJTNCJTBBJTIwJTIwY3ViZS5yb3RhdGlvbi55JTIwJTJCJTNEJTIwMC4wMSUzQiUwQSUyMCUyMHJlbmRlcmVyLnJlbmRlciglMjBzY2VuZSUyQyUyMGNhbWVyYSUyMCklM0IlMEElN0QlMEElMEFzMC5pbml0KCU3QiUyMHNyYyUzQSUyMHJlbmRlcmVyLmRvbUVsZW1lbnQlMjAlN0QpJTBBJTBBc3JjKHMwKS5yZXBlYXQoKS5vdXQoKSUwQSUwQQ%3D%3D"
]
}
]
public/extensions/gradient.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 274 KiB

public/extensions/op-art.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

public/extensions/shader-park.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 212 KiB

src/stores/extension-store.js
+74 -9
View File
@@ -1,21 +1,85 @@
import extensions from './hydra-extensions.json'
// import extensions from './÷extensions/hydra-extensions.json'
// const CATEGORIES = ['extensions', 'external libraries', 'examples']
const CONFIG_PATH = '/extensions/config.json'
export default function store(state, emitter) {
export default async function store(state, emitter) {
// old / deprecated
// state.extensions = {
// categories: ['extensions', 'external libraries', 'examples'],
// selectedCategoryIndex: 0,
// //extensions: extensions,
// extensions: [],
// selectedExtension: null,
// baseURL: '/extensions/'
// }
// new
state.extensions = {
categories: ['extensions', 'external libraries', 'examples'],
baseURL: '/extensions/',
selectedCategoryIndex: 0,
extensions: extensions,
selectedExtension: null
categories: [
{
name: 'extensions',
slug: 'extensions',
entries: [],
hasLoaded: false
},
{
name: 'external libraries',
slug: 'external-libraries',
entries: [],
hasLoaded: false
},
{
name: 'examples',
slug: 'examples',
entries: [],
hasLoaded: false
}
]
}
emitter.on('extensions: select category', (index) => {
// const config = await import('./extensions/config.json', {
// assert: {
// type: 'json'
// }
// });
// fetch(CONFIG_PATH)
// .then((response => response.json())).then( d => {
// console.log('loaded d', d)
// })
// config.then( d => {
// console.log('loaded d', d)
// })
// state.extensions.extensions.forEach((ext) => { ext.thumbnail = state.extensions.baseURL + ext.thumbnail })
emitter.on('extensions: select category', (index = state.extensions.selectedCategoryIndex) => {
state.extensions.selectedCategoryIndex = index
emitter.emit('render')
const currCategory = state.extensions.categories[index]
if(!currCategory.hasLoaded) {
const extensionPath = state.extensions.baseURL + currCategory.slug + '.json'
fetch(extensionPath)
.then((response => response.json())).then( d => {
console.log('loaded d', d)
d.forEach((ext) => { ext.thumbnail = state.extensions.baseURL + ext.thumbnail })
currCategory.entries = d
emitter.emit('render')
})
}
})
emitter.on('extensions: add to editor', (index) => {
const code = extensions[index].load
emitter.on('extensions: add to editor', (extensionIndex) => {
const {categories, selectedCategoryIndex } = state.extensions
const code = categories[selectedCategoryIndex].entries[extensionIndex].load
emitter.emit('editor: add code to top', code)
})
@@ -28,7 +92,8 @@ export default function store(state, emitter) {
// })
emitter.on('extensions: load example', (extensionIndex, exampleIndex) => {
const path = state.extensions.extensions[extensionIndex].examples[exampleIndex]
const {categories, selectedCategoryIndex } = state.extensions
const path = categories[selectedCategoryIndex].entries[extensionIndex].examples[exampleIndex]
const url = new URL(path);
console.log(url)
src/stores/hydra-extensions.json
-35
View File
@@ -1,35 +0,0 @@
[
{
"name": "Op-art patterns",
"description": "Additional fragment shaders inspired by op-art patterns",
"documentation": "https://gitlab.com/metagrowing/extra-shaders-for-hydra#op-art-patterns",
"author": "Thomas Jourdan",
"thumbnail": "",
"load": "await loadScript(\\\"https://cdn.statically.io/gl/metagrowing/extra-shaders-for-hydra/main/lib/lib-pattern.js\\\")",
"examples": [
"https://hydra.ojack.xyz/?code=JTJGJTJGJTIwbGljZW5zZWQlMjB3aXRoJTIwQ0MlMjBCWS1OQy1TQSUyMDQuMCUyMGh0dHBzJTNBJTJGJTJGY3JlYXRpdmVjb21tb25zLm9yZyUyRmxpY2Vuc2VzJTJGYnktbmMtc2ElMkY0LjAlMkYlMEFhd2FpdCUyMGxvYWRTY3JpcHQoJTIyaHR0cHMlM0ElMkYlMkZjZG4uc3RhdGljYWxseS5pbyUyRmdsJTJGbWV0YWdyb3dpbmclMkZleHRyYS1zaGFkZXJzLWZvci1oeWRyYSUyRm1haW4lMkZsaWIlMkZsaWItcGF0dGVybi5qcyUyMiklMEElMEFhJTIwJTNEJTIwKCklMjAlM0QlM0UlMjAwLjEzNyUyMColMjB0aW1lJTNCJTBBc3BpcmFsKDIuMCUyQyUyMDUuMCUyQyUyMDAuMykucm90YXRlKCgpJTIwJTNEJTNFJTIwLTIuMCUyMColMjBhKCkpLm91dChvMCklMEFzcGlyYWwoMi4wJTJDJTIwNS4wJTJDJTIwMC4zKS5yb3RhdGUoYSkuZGlmZihjb25jZW50cmljKDEwMC4wJTJDMC4yNSUyQzAuMjUpKS5vdXQobzEpJTBBc3BpcmFsKDIuMCUyQyUyMDUuMCUyQyUyMDAuMykucm90YXRlKGEpLm11bHQoc3BpcmFsKDEuMCUyQyUyMDMuMCUyQyUyMDAuMykpLm91dChvMiklMEFzcGlyYWwoMS4wJTJDJTIwNS4wJTJDJTIwMC4xKS5yb3RhdGUoYSkuZGlmZihicmljaygpKS5vdXQobzMpJTBBcmVuZGVyKCklMEElMEElMEE%3D"
]
},
{
"name": "hydra-arithmetics",
"description": "Adds many functions related to visual arithmetics.",
"documentation": "https://gitlab.com/metagrowing/extra-shaders-for-hydra/-/blob/main/gallery/pattern/README.md",
"author": "ritchse",
"thumbnail": "",
"load": "await loadScript(\\\"https://hydra-extensions.glitch.me/hydra-arithmetics.js\\\")",
"examples": [
"https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlkcmEtZXh0ZW5zaW9ucy5nbGl0Y2gubWUlMkZoeWRyYS1hcml0aG1ldGljcy5qcyUyMiklMEElMEFvc2MoMTAlMkMuMSUyQzIpJTBBJTA5Lm1vZChncmFkaWVudCgpLmFzaW4oKS5jb3MoKSklMEElMDkuc3RlcChub2lzZSgyKS51bmlwb2xhcigpLmRpdihvMCkpJTBBJTA5LmJsZW5kKG8wJTJDLjIpJTBBJTA5Lm91dCgp"
]
},
{
"name": "hydrated-gradient",
"description": "make gradients with specified colors",
"documentation": "https://hydrated.savamala.top/",
"author": "Joan Queralt",
"thumbnail": "",
"load": "await loadScript(\\\"https://hydrated.savamala.top/hydra-gradient.js\\\")",
"examples": [
"https://hydra.ojack.xyz/?code=YXdhaXQlMjBsb2FkU2NyaXB0KCUyMmh0dHBzJTNBJTJGJTJGaHlkcmF0ZWQuc2F2YW1hbGEudG9wJTJGaHlkcmEtZ3JhZGllbnQuanMlMjIpJTBBJTBBJTJGJTJGJTIwVXNlJTIwZ3JhZGllbnQyJTIwdG8lMjBjcmVhdGUlMjBhJTIwZ3JhZGllbnQlMjBiZXR3ZWVuJTIwdHdvJTIwY29sb3JzJTNBJTBBJTJGJTJGJTIwZ3JhZGllbnQyKHIwJTNEMSUyQ2cwJTNEMCUyQ2IwJTNEJTJDcjElM0QwJTJDZzElM0QwJTJDYjElM0QxJTJDc3BlZWQlM0QwKSUwQSUwQWdyYWRpZW50MigxJTJDMCUyQzAlMkMwLjglMkMwJTJDMC44JTJDMC4yKS5vdXQoKSUwQSUwQXJlbmRlcihvMCk%3D"
]
}
]
src/stores/store.js
+1
View File
@@ -158,6 +158,7 @@ export default function store(state, emitter) {
emitter.on('show extensions', () => {
state.showExtensions = true
state.showInfo = true
emitter.emit('extensions: select category')
emitter.emit('render')
})
src/stores/text-elements.js
+1 -1
View File
@@ -39,7 +39,7 @@ export default {
'support': 'If you enjoy using Hydra, please consider <a {{open-collective}} >supporting continued development <3 </a>.'
},
extensions: {
about: 'Extensions and external libraries written in javascript can be loaded into the hydra editor. Click `add to project` to add a library or extension to your existing project. Click `load example` to show an example sketch into the editor.'
'about-extensions': 'Load community extensions to hydra-synth.'
}
}
}
src/views/EditorComponent.js
+1
View File
@@ -21,6 +21,7 @@ export default class Editor extends Component {
})
// hacky, maybe not necessary
this.innerText = document.getElementsByClassName('CodeMirror')[0]
this.innerText.style.transition = 'opacity 0.5s'
}
hide() {
src/views/extension-info.js
+7 -4
View File
@@ -10,7 +10,9 @@ const icon = (id, className, title, event) => html`
const detailedInfo = (ext, index, emit) => {
return html`<div
class="extension-list-item selected" style="display:flex;justify-content:space-between">
<div >
<img src="${ext.thumbnail}" width="40px" height="40px"/>
<div style="flex:1;padding-left:8px">
<div><span style="font-weight:900">${ext.name} - </span> <span style="text-overflow:ellipses;overflow:hidden"> ${ext.author} </span></div>
<div> <span style="">${ext.description}</span></div>
</div>
@@ -27,11 +29,12 @@ const detailedInfo = (ext, index, emit) => {
const listInfo = (ext, index, emit) => html`<div onclick="${() => emit('extensions: select extension', index)}" class="extension-list-item"><span style="font-weight:900">${ext.name} - </span> <span style="text-overflow:ellipses;overflow:hidden"> ${ext.description} </span> <span style="float:right">${ext.author}</span></div>`
export default (state, emit) => {
const { categories, selectedCategoryIndex, extensions, selectedExtension} = state.extensions
const { categories, selectedCategoryIndex } = state.extensions
const extensions = categories[selectedCategoryIndex].entries
const { t } = state.translation
// ${i=== selectedExtension? detailedInfo(ext, i, emit) : listInfo(ext, i, emit)}
const content = html`<div class="modal-content extensions">
${raw(t('extensions.about'))}
${raw(t('extensions.about-extensions'))}
<div class="extension-list">
${extensions.map((ext, i) => detailedInfo(ext, i, emit))}
</div>
@@ -41,7 +44,7 @@ ${extensions.map((ext, i) => detailedInfo(ext, i, emit))}
${categories.map((ex, i) => html`<div
class="language-select ${i===selectedCategoryIndex ? 'selected' : ''}"
onclick=${() => emit('extensions: select category', i)}
>${ex}</div>`)}
>${ex.name}</div>`)}
</div>`
return { content, header }