Connecting sketch and app with $scope

[SciutoAlex]

Hi there-

Here's an idea for improving the plugin.

The usecase: I'm using p5.dom to add in a slider that controls the animation. I'd like to be able to get that slider value back to the Angular controller. If there was some way pass $scope between the sketch and the angular application, I think the plugin would more useful.

Maybe this is trivial, and just needs a short example, but I'm not sure how to do it.

EDIT: Here's a better way of saying what I'm thinking about:

 <p5 sketch="sketchOne" circleSize=45></p>

Could circleSize somehow be passed to the sketch?

Thanks!

[wxactly]

Hi, sorry for the delay. I'm not in an Angular headspace at the moment, so it's going to be hard for me to devote very much time to this project for the time being. I do have a suggestion for you though!

In the angular-p5.js script, change the binding on sketch from '@' to '=':

scope: {
  sketch: '='
},

This will allow you to set up your script like so, and give you full access to the scope like you would expect:

<p5 sketch="mySketch"></p5>

//...
.controller('MyController', function($scope, p5){
  $scope.mySketch = function(p) {
    p.setup = function() {
      p.createCanvas(500, 500);
    };
    //...
  };
});

I had written the library like this in an earlier version, and I wonder if I really should've just left it this way since it's much more idiomatic Angular. If you fancy yourself a fork, let me know how it works out :)

[karneaud]

@SciutoAlex wondering how this worked out? I am trying to do something similar and access the p5 so I can control the loop() noloop() methods through a getter/ setter function

[SciutoAlex]

@karneaud. I ended up writing my own directive with most of the code going in the link function. I had an element like <p5 controls=true sketch="{{painType}}"></p5>. In the scope object for the directive, I set sketch: '@' and controls: '@'. That allowed me to get those variables in the directive through the attrs object in link: function(scope, element, attrs) {}. I also had to add to the link function scope.$watchGroup(['sketch', 'controls'], updateFunction); with updateFunction() changing the p5 sketch.

I don't think this description is very helpful. I apologize about that.

[karneaud]

@SciutoAlex yes you are right not as helpful...in fact more confusing. Perhaps I can share my vision. I need to access the instantiated new p5 instance within the controller. there are variables that are being updated by the p5 and it would be nice to have access to them.

Thus in my service I have

var obj = { opened:0  };
return function(p)
{

   p.draw = function(){
       obj.opened++;
   }

 p.getOpened = function(){ ...
}

I also want to control the loop and noLoop.

this in my controller

function Controller($scope, p5, sketch)
{
    // some how get the p5 instance created from the wrapper,
    var p5 = wrapper.instance;
   p5.getOpened
}

maybe if the p5 instance could be exposed in someway rather than being this hidden instance in the wrapper. Though I this may be outside of the scope of this plugin.

Thanks for your help though

[wxactly]

@karneaud - If you simply want to access the p5 instance, that's exactly what this library is good for! Should work for you out of the box with no problems. Check out the example:

https://github.com/wxactly/angular-p5.js/blob/master/example/example.js

The variable p is the p5 instance, so if you wanted to modify that script to call loop or noLoop, you would just call p.loop() or p.noLoop(). Make sense?

[karneaud]

@wxactly actually I wanted to call it from controller like this

function Ctrller (exampleSketch , )
{
    exampleSketch.loop();

}

[wxactly]

Angular-p5.js exposes p5 sketches as a service bound directly to a directive, and has very little to do with controllers. If you really need to use a p5 instance in a controller, this library isn't going to help you very much. The good news is, if your use case really requires you to use a controller, you don't need this library at all - you can simply instantiate a p5 object yourself and use it however you like:

function Ctrller($scope, $element) {
  var sketch = function(p) {
    p.setup = function() {
      p.createCanvas(400, 300);
      p.fill(100, 50, 150);
    };

    p.draw = function() {
      p.rect(50, 50, 100, 100);
    };
  };
  $scope.exampleSketch = new p5(sketch, $element[0]);
}

[karneaud]

Yeah... way ahead of you...though would have been nice if the plugin made it available this way as well. [enhancement]