search

brianchirls / Seriously.js

A real-time, node-based video effects compositor for the web built with HTML5, Javascript and WebGL
MIT License
3.88k stars 354 forks source link

Polymer components for Seriously.js #83

Closed positlabs closed 9 years ago

positlabs commented 9 years ago

I've been learning Polymer this week, and thought it would be fun to make some components for Seriously. It's a fairly simple wrapper so far, and I'd like to keep it as minimalistic as possible.

If you have time, would you mind taking a look at it? I would like to hear your thoughts, and I'm open to suggestions. I'm not 100% familiar with Seriously, so I'm sure there is some work to be done.

Repo: https://github.com/positlabs/seriously.polymer Demo: http://positlabs.github.io/seriously.polymer/

brianchirls commented 9 years ago

This is a very cool idea, but I'm seeing some errors in the console:

http://positlabs.github.io/seriously.polymer/bower_components/seriously.polymer/bower_components/Seriously.js/effects/seriously.blur.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://positlabs.github.io/seriously.polymer/bower_components/seriously.polymer/bower_components/Seriously.js/effects/seriously.pixelate.js Failed to load resource: the server responded with a status of 404 (Not Found)

And when I try re-ordering the effects:

polymer.js:10107 Uncaught NotFoundError: Failed to execute 'observe' on 'MutationObserver': The provided node was null.
polymer.js:4915 Exception caught during observer callback: Error: Attempt to make cyclical connection.
    at Seriously.EffectNode.setInput (http://positlabs.github.io/seriously.polymer/bower_components/Seriously.js/seriously.js:2444:15)
    at setInput (http://positlabs.github.io/seriously.polymer/bower_components/Seriously.js/seriously.js:1901:8)
    at null.source (http://positlabs.github.io/seriously.polymer/bower_components/Seriously.js/seriously.js:1907:16)
    at seriously-effect.Polymer._sourceChanged (http://positlabs.github.io/seriously.polymer/bower_components/seriously.polymer/seriously-effect.html:52:22)
    at seriously-effect.properties.invokeMethod (http://positlabs.github.io/seriously.polymer/bower_components/polymer/polymer.js:9383:12)
    at seriously-effect.properties.notifyPropertyChanges (http://positlabs.github.io/seriously.polymer/bower_components/polymer/polymer.js:9372:20)
    at Object.Observer.report_ (http://positlabs.github.io/seriously.polymer/bower_components/polymer/polymer.js:4912:24)
    at Object.createObject.check_ (http://positlabs.github.io/seriously.polymer/bower_components/polymer/polymer.js:5318:12)
    at callback (http://positlabs.github.io/seriously.polymer/bower_components/polymer/polymer.js:4810:20)
positlabs commented 9 years ago

The 404s are just something I need to clean up.

I've only tested in Chrome so far. What browser are you using?

brianchirls commented 9 years ago

That's in Chrome. Firefox has its own problems.

On Thu, Jan 29, 2015 at 4:37 PM, Josh Beckwith notifications@github.com wrote:

The 404s are just something I need to clean up.

I've only tested in Chrome so far. What browser are you using?

— Reply to this email directly or view it on GitHub https://github.com/brianchirls/Seriously.js/issues/83#issuecomment-72109167 .

positlabs commented 9 years ago

Ah! I recreated that error. The nodes are only meant to be re-ordered inside of the seriously-graph component. Understandably, dragging them out of the graph makes it bug out.

brianchirls commented 9 years ago

I was only moving them inside of that component though. I moved the blur effect before the pixelate effect.

On Thu, Jan 29, 2015 at 4:41 PM, Josh Beckwith notifications@github.com wrote:

Ah! I recreated that error. The nodes are only meant to be re-ordered inside of the seriously-graph component. Understandably, dragging them out of the graph makes it bug out.

— Reply to this email directly or view it on GitHub https://github.com/brianchirls/Seriously.js/issues/83#issuecomment-72109991 .

positlabs commented 9 years ago

Oh hmm. I'll look into that bug. I suppose I didn't notice it before because the rendered image is still correct. Thanks for trying it out, at least. I'll keep working on it as I find time.

darkyen commented 9 years ago

Whoa this is super cool :)

positlabs commented 9 years ago

I've done some more work on this. Still very fragile, but I'm making progress.

I'm having an issue when I re-connect the node graph. It gives me an error that says, "Attempt to make cyclical connection." It's seemingly harmless, but still not ideal.

Strangely, the issue only happens in linear graphs. The code is in the link below. https://github.com/positlabs/seriously.polymer/blob/master/seriously-graph.html#L93

Do you have any idea how I might get around this error?

positlabs commented 9 years ago

Cyclical ref error is fixed! I'm not totally sure why it works, but setTimeout for 1ms does the trick

setTimeout(function(){ // prevents cyclical ref error from Seriously, but seems hacky
  activeNodes[i].source = activeNodes[i-1];
}, 1);
positlabs commented 9 years ago

Closing.

BTW, I'm planning on making an example page out of the generative map thing I posted on twitter a while ago.