hydra-synth / hydra Goto Github PK

Like https://github.com/tidalcycles/atom-tidalcycles/blob/97dfbb4b228d2dd3588bc296ca6bd7c0f4cf4418/lib/repl.js#L231

Right now the code goes off the page and it becomes hard to reach the code at the end.

1 - Select the Number you wanna control via MIDI Controller and rightclick it
2 - In Contextmenu select Learn MIDI CC
3 - Click Find Button and move / use your MIDI Controller Fader / Knob / Button / TRS; Enter your Min and Max Values for this Field / Number; Click OK Button

Expected Result:
If one now use the Knob on the CSX MIDI Controller with CC Value 12 one now can control the second modulateRotate Parameter from -12 to 1.7 by moving / rotating / pressing / plugging the MIDI Controller Fader / Knob / Button / TRS.

Or you could implement it programatically:

hydra is incredibly fun!

When I went to share something I created on a forum, I was noticing an issue where the hyperlink wasn't loading always. If it didn't work, the folowing error would be present in the console:

gallery.js:75 Uncaught DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
    at Gallery.decodeBase64 (https://hydra-editor-v1.glitch.me/bundle.js:402:31)
    at Gallery.setSketchFromURL (https://hydra-editor-v1.glitch.me/bundle.js:384:24)
    at new Gallery (https://hydra-editor-v1.glitch.me/bundle.js:351:12)
    at init (https://hydra-editor-v1.glitch.me/bundle.js:31:18)

The hyperlink is in this post. CMD+clicking to open in a new tab seems to work, but just clicking to open in the current tab doesn't.

Here is the code:

// by John Mitchell
// https://johnmitchell.tech

osc(() => 1 * Math.sin(time * .23) + 2, .004, 100)
  .rotate(.2)
  .blend(o1, .01)
  .diff(o2)
  .contrast(() => .2 * Math.sin(time * .6) + 1)
  .out(o0)

osc(3, -.04, 100)
  .rotate(() => 4 * Math.sin(time * .001))
  .out(o1)

osc(5, -.02, 70)
  .rotate(() => Math.sin(time * .05) + 80 * Math.sin(100 * Math.sin(time * .0001)) * .3)
  .out(o2)

or option to configure number of input and output buffers

Hi!

When I try to run the webcam example on the latest build at: https://hydra-editor-v1.glitch.me

ie
s0.initCam()
src(s0).out()

The output loads for a few seconds and crashes to a black screen a few moments later. The console then starts loading the following error over & over.

regl.js:47 Uncaught Error: (regl) context lost
at Function.raise (regl.js:47)
at Object.REGLCommand [as draw] (regl.js:9396)
at passes.forEach (output.js:196)
at Array.forEach ()
at Output.tick (output.js:196)
at HydraSynth.tick (index.js:293)
at Engine. (index.js:52)
at emitOne (events.js:106)
at Engine.emit (events.js:184)
at Engine.tick (index.js:42)

Initial Test - Reproduced on Win10 desktop, Chrome 68, GTX1070, dual 2560x1440 144Hz resolution monitors (one rotated to portrait) and this model of webcam https://www.amazon.com/ELP-2-8-12mm-Varifocal-1-3megapixel-Android/dp/B01N8YH5VY

The error can be cleared by refreshing but fails again a few seconds after initCam()

Test 2 - cannot repro with same webcam attached to older MBP with Nvidia card. also on Chrome 68. This should rule out the camera as cause.

Test 3 - 144Hz is only supported over displayport, & one of my screens is connected via HDMI and runs instead at 60Hz. Unable to repro on the screen that runs at 60Hz. So it appears that it is the increased frequency at 144Hz that is the culprit.

I think the cam only support 24 or 30 fps, so I suspect some sort of timing discrepancy as the root cause.

--Rough controls of playback speed
--Maybe even use chrome filesytem API to save locally: https://www.html5rocks.com/en/tutorials/file/filesystem/ ?

hi !

i get this error:
Failed to execute 'shaderSource' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLShader'.
when trying to use the screen sharing extension to pull a Chrome tab into hydra using
s0.initScreen()
src(s0).out()
locally or using the remote hydra URL.

update: this also happens immediately when trying to use screen sharing extension with VLC (application window).

here is what the console says when it crashes:
[.WebGL-000000C82EF494A0]GL ERROR :GL_INVALID_VALUE : glCopySubTextureCHROMIUM: source texture bad dimensions.
WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost
Error: (regl) context lost

also i've been on the WebRTC examples, particularly for testing getUserMedia, and it comes back with a NotFoundError. could this be the problem ? how can it be fixed ?

i'm on Chrome 69, windows 8.1. thx !

There's something about this sine function freezing Hydra and not showing any error. Hydra web needs to be reloaded in the browser.

This chain works well

osc(10,0.1)
  .thresh(0.1).scale(3)
.out()

This one freezes Hydra. No error messages

osc(10,0.1)
  .thresh(0.1).scale(()=>math.sin(time))
.out()

OS:Mac OSX - High Sierra
Browser: Chrome Version 75.0.3770.100 (Official Build) (64-bit)
Hydra: Web

On the lattest version (2020-01-23) Control Shift H is not hiding the executed code at the bottom of the screen (Chrome Browser on Windows).

For each individual buffer, option to edit using other platforms. For example, directly edit fragment or vertex shader, edit using p5.js, etc

hi, wouldn't be nice to have the generated fragment shader from the hydra code sent via websockets to another pc on the network?

It would be very nice to view function docs in a running hydra window like how Sonic-Pi has a documentation viewer built in.

Hello Olivia!

I think this bug was introduced on the new version from last week.

This code runs ok:
osc( ()=>Math.sin(time),.1,0 ).out

But if an error is made inside the function, like:
osc( ()=>Math.sin(**timeeee**),.1,0 ).out

It freezes the editor. Fixing the typo and running again does not unfreeze it, the page needs to be reloaded for Hydra to work again.

Hi,
I'm trying to enter the site, but the server isn't reachable. The equivalent error is DNS_PROBE_FINISHED_NXDOMAIN.
I tried with Linux mint, with Windows and with several browsers but the error is the same. I know that sometimes Windows have some problems with firewalls and block the access to hydra, but I I'm not sure what to to.
It's the second time I enter the site and the first one was from a different wi-fi connection (now I'm trying with a home connection). Do you have problems with accessing hydra, too? Is it a server problem?

Robust and flexible way to handle all types of parameters

1. javascript functions that compile to glsl functions, i.e:
   osc().add(osc())

2. javascript functions that are passed in at every render pass:
   osc((t)=>(3*t))
   How can this syntax be improved? should certain functions be provided by default? can this be used for passing osc parameters and/or beat detection, etc?

3. Static values:
   osc(2.0)

Ideally, the user should not have to think too much about types, and each function should accept all three kinds of inputs and adapt accordingly

There's mention of adding image textures, but no explicit definition of how to use it. Some further detail would be cool for new users.

Hi,

First, thanks for developing such an awesome tool!

I'm having problems connecting to remote streams in Hydra. Changing the tab name in the first window seems to work fine, but when I then try to connect using s0.initStream() in the second window, I don't see the remote stream and get the following error in the console (see attached screenshot). Any ideas what's going on here?

Hello! Hello hello!

Is there any way to make Hydra look like a webcam on a computer? Hydra is such cool tech, & it's such a great tool to be able to play with media over. It'd be wonderful if it could be "fed" back in to other programs running on the computer, such that I could use Hydra to output to my video conferencing system, or to my streaming system.

This would probably be operating system dependent. I happen to be on Linux. I feel like there's probably some gstreamer pipeline I could launch from the command line that could make this happen, but it's not my domain. I'll try to report back to this thread with what I find. It'd be lovely if others had resources or ideas or knew how to make Hydra "loopback" like this.

When clicking the "upload"-button on https://hydra-editor.glitch.me, the canvas temporarily halts, displaying the current state of the visualization, which suggests to the user that this is the screenshot which is going to be saved.

However, I think the visualization keeps running in the background and when clicking "OK" in the prompt, the (non-displayed) status of the canvas gets tweeted.

I would suggest to temporarily render the output of the canvas once one clicks the "upload"-button and publishing this render, such that one has control over which picture gets published.

could be nice if mipmaps were generated for output textures (maybe they are already?), and to expose a way to set the bias parameter of texture2d() for blur effects (a small bias could be used for reaction-diffusion stuff, a very large bias could be used to get the average colour of the whole image for things like equalisation).

I tried implementing a blur by adding scrolled copies, but failed miserably.

generating mipmaps is an expensive operation, so it should probably be optional...

https://webglfundamentals.org/webgl/lessons/webgl-3d-textures.html (about 2/5 of the way down the page)
http://docs.gl/es2/glGenerateMipmap
http://docs.gl/el3/texture

Negative blend values work for some time, but then show a black screen, seems to indicate an error that crashes rendering

Try the following pattern in Hydra editor. After a few seconds, comment in the negative blend value. The colors should bleach (in a cool effect!) and then the entire render goes black. If you comment it back in, the image comes back and is complex, which makes me suspect that there was a rendering error

osc(100, 0.01, 1.4)
	.rotate(0, 0.1)
	.mult(osc(10, 0.2)
          .modulateKaleid(
             voronoi(3))
         )          
	.color(2.83,0.91,0.39)
  .out(o0)


src(o1)
    .blend(o0, () => 0.01)
  //.blend(o0, () => -0.02)


  .out(o1)

render(o1)

osc(10).kaleid(6).luma(0.9).out(o2)```

I am getting this error while trying to install the Hydra package:
I am running
OSX: High Sierra
Atom: 1.38.2
nom: 6.9.0

See attached log file.

Installing “[email protected]” failed.Hide output…

npm WARN deprecated [email protected]: npm is holding this package for security reasons. As it's a core Node module, we will not transfer it over to other users. You may safely remove the package from your dependencies.
npm ERR! Unexpected end of JSON input while parsing near '...rqWWxyrVrhx6zq2Ze4v1i'

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/performance/.atom/.apm/_logs/2019-07-16T15_34_25_414Z-debug.log

2019-07-16T15_34_25_414Z-debug.log

Would be possible/useful/interesting to add text as source? i.e

text('wave').modulate(osc(10)).out()

Not sure how painful is to implement text/fonts in a shader, or if regl provides a simple way to achieve that. Anyhow, super project

If working with functions it might be easy to forget a function call, which will fatally crash Hydra and will require a restart.

e.g.

var myfunc = () => 5
osc(() => myfunc).out()

Although this example is very simple, it is easy to forget a call when a function is curried.

var timeMod= mod => ({time}) =>  time%mod

osc(timeMod(60)).out() // all good

osc(params => timeMod(60)).out() //ups, forgot to pass params, will crash

It would be nice if hydra supported one or more control-flow primitives.

Just the single primitive if() (even without else) could be very powerful. Pseudocode example:

interactive multi-sketch selection:

if(mouse.x > 0.5) { render(o0) }
if({mouse.x < 0.5) { render(o1) }

or a cycling timed sketch sequence:

if(120 < time%360) { render(o0) }
if(240 < time%360) { render(o1) }
if(360 < time%360) { render(o2) }

Certain functions in hydra synth trigger user feedback, which right now is just logged to the console. Provide a way to pass in a log function so that this information can be relayed to the user in either atom-hydra or the online editor.

Hello!
How can I send a full sketch as a URL parameter for the Editor?
Thank you!

I was trying to install the screen-capture-extension following the Readme of the project, but there is not any of the folders mentioned:

To install, go to chrome://extensions Click "Load unpacked extension", and select the "extensions" folder in "screen-capture-extension" in this repo. Restart chrome. The extension should work from now on without needing to reinstall.

Where can I find it?

Thank you!

This actually already exists! but i hadnt mentioned it because i wasn't sure about the api/possibly has some bugs.

// run this line to start recording
vidRecorder.start()

// stop recording
vidRecorder.stop()

// set the output video as a source
s0.init({src: vidRecorder.output})

// display the source
src(s0).out()

Originally posted by @ojack in https://github.com/ojack/hydra/issues/26#issuecomment-417385237

Is there a way of taking the video file currently stored in the buffer and simply writing it out to a file? It feels like this would be much more controlled and smoother than taking a screen recording etc. If not, how are you able to produce such smooth and accurate output videos?

Either this, or is there a way to pass some parameters to the screencap(); function something like the saveFrame(); function in Processing for compiling into a video file afterwards? By parameters, I mean something that can suppress the dialog box for path and attribute a file name so that it can be placed in a loop?

I am loving Hydra, thank you for all your work on it!

After seeing https://webrtc.github.io/samples/src/content/getusermedia/record/
I think this could be interesting to capture short loops into one of the source buffer (s0, s1, s2, s3) for further manipulation

IE I could record a short clip from the webcam and loop it, as opposed to taking the live webcam feed constantly.

This could also be used to 'bounce down' heavy processing which could help keep framerates up

Similar to #10 but more oriented toward live capture.

show at bottom of screen like in gibber?

Although Hydra works in mobile browsers, the lack of the cmd/ctrl key makes it imposible to execute the code. An alternative could be displaying a [RUN CODE] button that shows up only in mobile browsers.

The FFT object a seems to be using my laptop's microphone by default. Is there a way to make it use an internal audio source, e.g. "DirectSound Speakers"?

Some downsampling / aliasing seems to occur when passing a video or canvas into Hydra, e.g.:

https://github.com/ojack/hydra-examples/blob/master/5-video.js#L9

https://github.com/ojack/hydra-examples/blob/master/6-p5.js#L52

It would be very handy to type hydra code in a browser window and make it affect the video feedback in another window in either my machine or a remote connection. This would be very useful for getting video only and also making remote live coding without getting the video compression artifact.

2 Ideas for cool functions to add to this. I may try to add them if I can figure out how.

• a 3d Shape function - so you could render a sphere or a cube or other legible 3d shape, in addition to the existing 2d shapes. I think if it was rendered in greyscale then you could mix effects on top of it pretty easy to make cool effects.

• A 'datamoshing' effect, which you can get from compression artifacts where you have missing frames. It looks like the image is frozen but then later movement modulates the position of the frozen image. It's used in this music video. It's a really cool effect
  https://vimeo.com/4578366
  This one seems more difficult

In the latest version of hydra for Atom, the active tab always remains the background color of the theme. Could it also be part of the animation?

Thanks

like https://atom.io/packages/veda

After seeing the blending modes @samarthgulati implemented in hydra-blockly * I've realized they would be really nice to have and to experiment with. + i think a lot of people coming from image compositing (more specifically s.w. like gimp, photoshop, after effects, etc) would find it delightful to see more of what they know learning hydra.

• I think the exact code is on this file

Hello-

Would anyone have a script for hydra that would allow me to retrieve csound and ableton OSC messages. I understand that csound can transmit OSC events.

Best
Zach

Description of the issue

In particular, with sketches that add some output to itself, when made into a link and opened, it would seem that the feedback starts before Hydra can load, so a blank white screen shows. When this happens, it can be fixed via using the hush() function and re-evaluating the code for the sketch. I've tried writing a hush() statement before the rest of the code and it still happens.

Example

The last time I encountered this problem was in this sketch I made

Quick solution I found

I found as a momentary solution putting a hush() statement before the code, and then surrounding the image generating code in a setTimeout() function. Making Hydra wait a bit before executing the image generating code. Here's an example of that

So...

I assume this is Hydra trying to process the feedback before it could process the images themselves. Maybe there could be a way to make Hydra wait a bit more, from the inside.

It'd be useful to have a coded statement that hides the code. Sometimes I want to share some mouse-interactive sketch I made to my non-coder friends and I always have to ask them to do Ctrl+Shift+H to experience it. Adding a hideCode() statement after what I made could make Hydra hide the code at opening. Maybe some sort of Code is hidden, Ctrl+Shift+H to show message should be shown for a couple of seconds so people know that they can read the code if they want to.

When I saw you present this, you showed that you could tweet a finished product and save it to a gallery and link other people too it from hydra-editor. However I forgot the keyboard command and I can't find it documented anywhere.