Is This A Bug? Working with p5.s

everythingability commented 4 years ago

tldr; No.

I am trying to do a VERY simple thing. I am out of my depth but loving Hydra.

I am trying to use an isolated p5 sketch as input for some Hydra code. All static on the page.

(Oh btw, did P5 get renamed as p5? Or am I missing something else?)

Here's my js file

let p1 = new p5(( sketch ) => {

  let x = 100;
  let y = 100;

  sketch.setup = () => {
    sketch.createCanvas(800, 800);
  };

  sketch.draw = () => {
    sketch.background(0);
    sketch.fill(255);
    sketch.rect(x,y,50,50);
  };
});

let p1 = new p5(s);

// To use p5 as an input to hydra, simply use the canvas as a source:
s0.init({src: p1.canvas})

// Then render the canvas
src(s0)
  .add(o0, 0.9)
  .modulate(o0, 0.01)
  .scale(1.01)
  .hue(0.04)
  .out()

My HTML is ...

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
    <!--script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script-->
    <script src="bundle.js"></script>

    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
  <canvas id="hydra-canvas">
    </canvas>

    <script src="6-p5.js"></script>
  </body>
</html>

I have added bundle.js to my index.html, but it is failing to require the Editor.js.

So my guess is that Hydra HAS to be running in Node, right?

Is there a way to do it the noddy way I am attempting?

Thanks

MichaelPaulukonis commented 4 years ago

@everythingability - why do you use p1 twice? The second time you either redefine/overwrite the original version of p1, or the JS engine should throw an error (since you can't redeclare a let-ted variable).

everythingability commented 4 years ago

Oh yeah... Took that out and got this...

bundle.js:495 Uncaught TypeError: Cannot read property 'style' of null at EditorClass.show (bundle.js:495) at new EditorClass (bundle.js:451) at init (bundle.js:33)

It expects the Editor to be there?

MichaelPaulukonis commented 4 years ago

UPDATE: Tom and I have gotten hydra working with p5 - https://github.com/MichaelPaulukonis/hydra-p5.git

However, there may be a bug with diff that only works if makeGlobal: true is set. AFAICT we are prefixing everything properly - and it works when diff is commented-out and global is false. But global false and diff and things are not happy.

Uncaught ReferenceError: src is not defined
    at hydra-synth:2340
    at Array.map (<anonymous>)
    at formatArguments (hydra-synth:2256)
    at hydra-synth:2166
    at Array.forEach (<anonymous>)
    at generateGlsl (hydra-synth:2165)
    at generateGlsl (hydra-synth:2151)
    at Object.GlslSource.compile (hydra-synth:2079)
    at Object.GlslSource.glsl (hydra-synth:2072)
    at Object.GlslSource.out (hydra-synth:2035)

We will open a separate issue when we know more.

ojack commented 4 years ago

BTW, p5.js is included by default in the hydra web editor. Here is an example:

https://hydra.ojack.xyz/?code=JTBBJTIwJTBBJTIwJTJGJTJGJTIwVHlwZSUyMHNvbWUlMjBjb2RlJTIwb24lMjBhJTIwbmV3JTIwbGluZSUyMChzdWNoJTIwYXMlMjAlMjJvc2MoKS5vdXQoKSUyMiklMkMlMjBhbmQlMjBwcmVzcyUyMENUUkwlMkJzaGlmdCUyQmVudGVyJTBBJTBBcDElMjAlM0QlMjBuZXclMjBQNSgpJTBBJTBBeCUyMCUzRCUyMDEwMCUzQiUwQXklMjAlM0QlMjAxMDAlM0IlMEElMEFwMS5kcmF3JTIwJTNEJTIwKCklMjAlM0QlM0UlMjAlN0IlMEElMjAlMjBwMS5jbGVhcigpJTNCJTBBJTIwJTIwcDEuZmlsbCgyNTUpJTNCJTBBJTIwJTIwcDEucmVjdCh4JTJDeSUyQzUwJTJDNTApJTNCJTBBJTdEJTBBJTBBcDEuaGlkZSgpJTBBJTBBczAuaW5pdCglN0JzcmMlM0ElMjBwMS5jYW52YXMlN0QpJTBBJTJGJTJGJTIwVGhlbiUyMHJlbmRlciUyMHRoZSUyMGNhbnZhcyUwQSUwQXNyYyhzMCklMEElMjAlMjAuYWRkKG8wJTJDJTIwMC45KSUwQSUyMCUyMC5tb2R1bGF0ZShvMCUyQyUyMDAuMDEpJTBBJTIwJTIwLnNjYWxlKDEuMDEpJTBBJTIwJTIwLmh1ZSgwLjA0KSUwQSUyMCUyMC5vdXQoKQ==

p1 = new P5()

x = 100;
y = 100;

p1.draw = () => {
  p1.clear();
  p1.fill(255);
  p1.rect(x,y,50,50);
}

p1.hide()

s0.init({src: p1.canvas})

src(s0)
  .add(o0, 0.9)
  .modulate(o0, 0.01)
  .scale(1.01)
  .hue(0.04)
  .out()

The above code is using p5 in non-global mode, and hydra in global mode. p1 in this case is an instance of p5.

RE: using p5 with hydra-synth (not the web editor) There are some issues right now with non-global mode in hydra-synth that I am working on. In the meantime, you can try using an earlier version and it might work better.

ojack commented 4 years ago

I am going to close this issue but feel free to keep discussing! :)

everythingability commented 4 years ago

Yeah.

Here's my attempt. https://hydra.ojack.xyz/?sketch_id=3dtNpzuYBAGdIz0J

The point though is maybe counter to Hydra's goals. I would like to craft "something" in p5js and then, say from the p5js Editor, add Hydra and have it run on my sketch. Is that possible? It's sort of the other way round...

hydra-synth / hydra

Is This A Bug? Working with p5.s #106