Comments (8)
you can pass functions as parameters
example:
osc(
8,
() => {
if( mouse.x > 400 ){
return -0.5;
} else {
return 0.5;
}
},
1
)
.out(o0)
and for brevity, you could use a ternary operator to change those values
example:
osc(
8,
() => mouse.x > 400 ? -0.5 : 0.5,
1
)
.out(o0)
from hydra.
Yes, exactly what @zachkrall says. You need to continuously call the function (i.e. what is happening in Processing's draw function) in order to continue to evaluate it. For example:
s0.initCam()
update = () => {
if(mouse.x > 90) osc(8,-0.5, 1).out(o0)
if(mouse.x < 400) src(s0).out(o0)
requestAnimationFrame(update)
}
update()
(In this example, make sure you only call update() once, otherwise you will be adding more and more continuously-called functions)
from hydra.
Actually I should add a caveat to the above! It can be slower because the shader is re-compiled each time each chain of hydra functions is called. So I still would recommend finding a way to do things more idiomatically "hydra" because it will be better in terms of performance.
All of your examples can be recreated using multiple outputs and .blend(). For example,
s0.initCam()
osc(8,-0.5, 1)
.blend(s0, () => mouse.x > 400 ? 0 : 1)
.out(o0)
from hydra.
Thanks for this, all. If I'm understanding the gist, it is:
- For control flow that executes once on eval of the editor code, use any normal JavaScript (if, else, etc.)
- However, this is outside the hydra render loop -- it is not continuously evaluated
- To continuously evaluate, create a function, e.g. with arrow function syntax, then call it
- However, this can be slower because the shader is re-compiled each time each chain of hydra functions
- To continuously evaluate with high performance, parameterize each chain, e.g. with .blend() using conditional arguments (e.g. time conditions or mouse conditions).
- This way chain shaders are not recompiled.
- In general, don't wrap hydra chains in control flow for reactivity or performance. Instead, make all chains top-level and pass conditional functions as parameters into those chains.
from hydra.
Hydra does support these because it is just javascript..... or am I missing something?
from hydra.
Ah, I see. I was thrown off by reading the documentation list of commands and not finding any such keywords in there -- I thought those were the only keywords that would work in the web editor window. I see now the "Written in javascript and compatible with other javascript libraries" on the page https://hydra-editor.glitch.me/.
Perhaps I am being confused by an unrelated issue with the hydra web editor, specifically.
For context, here is a simple sketch in the p5.js web editor (https://editor.p5js.org/). Move mouse left for blue, right for red.
function setup() {
createCanvas(400, 400);
}
function draw() {
if(mouseX < 200) {
background(0,0,255);
} else {
background(255,0,0);
}
}
By comparison, I now tried putting this into the hydra editor (https://hydra-editor.glitch.me/):
if(mouse.x > 400) osc(8,-0.5, 1).out(o0)
if(mouse.x < 400) osc(8, 0.5, 1).out(o0)
Moving the mouse left and right does nothing. The screen does update based on the current mouse location each time I evaluate with Option-Enter, but it isn't reactive. Is this a specific limitation of the web editor, and would you recommend the Atom plugin or Electron app for this instead? Or am I not doing this in the right way?
from hydra.
Thanks, @zachkrall -- these are great examples of using if
on embedded parameters with hydra.
Is it possible to use if
for control flow?
For example, this does not work.
s0.initCam()
if(() => mouse.x > 400) osc(8,-0.5, 1).out(o0)
if(() => mouse.x < 400) src(s0).out(o0)
Although this does, just not with live updating:
s0.initCam()
if(mouse.x > 400) osc(8,-0.5, 1).out(o0)
if(mouse.x < 400) src(s0).out(o0)
from hydra.
I think that when you are evaluating those if statements it falls outside of the render loop that hydra uses so it only returns a value once.
https://github.com/ojack/hydra-synth/blob/5519e14198f9b367fcd09f15bbf54f851f5cc543/example/index.js#L59
https://github.com/ojack/hydra-synth/blob/5519e14198f9b367fcd09f15bbf54f851f5cc543/index.js#L300
from hydra.
Related Issues (20)
- Link to interactive docs broken HOT 1
- p5 fails to init after reload
- dev branch double space triggers period
- set initStream quality
- a.onBeat() not working? HOT 1
- Add yourself to the contribution list 💓 HOT 28
- exclude dist folder from dev branch HOT 7
- landing modal suggestions
- Dynamic canvas to pass into hydra-synth HOT 1
- WebRTC Deprecated? HOT 1
- WebRTC issue on local server
- Hydra three.js integration needs updating (+workaround)
- Hide code via urlParameter doesn't work anymore HOT 5
- needed to --ignore-engines to build
- Show documentation from within editor
- Make it easier to use local videos from within hydra editor
- Icons not visible if .brightness is set to 1
- simplify readme HOT 5
- add .github repo for the "landing" page on GH
- Use extensión libraries "inside a web page" HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hydra.