P5: Updating variables from outside sketch instance.

Hi guys,

If I have a sketch instance bound to a div element, how do I update variables via functions/events outside the sketch instance?

I have created a simple case: Form input values that are sent via a button press:

http://codeply.com/go/KBF2ITLLGX

Answers

  • edited December 2015 Answer ✓

    If I have a sketch instance bound to a div element,

    Sketches aren't bound to anything. It's just a nickname for a JS script which is controlled by the the p5.js framework. What is actually bound is the HTMLCanvasElement created by createCanvas().

    How do I update variables via functions/events outside the sketch instance?

    If they're in the global scope, anything can access them.
    If you wanna control some elements in DOM, it's advisable to use select() inside your sketch in order to grab them wrapped up as a p5.Element:

    1. http://p5js.org/reference/#/p5/select
    2. http://p5js.org/reference/#/p5.Element

    Then you can attach triggers to them if you wish. A complete list in this link:
    http://p5js.org/reference/#/libraries/p5.dom

    Or you may decide to access its underlying HTMLElement via elt:
    http://p5js.org/reference/#/p5.Element/elt

    Either way, you're gonna find some way to be notified when the status of those elements change.

  • edited December 2015

    Thanks GoToLoop, in particular for clarifying my misunderstandings.

  • edited January 2016

    Hi GoToLoop, can you use jQuery function calls inside select()? Edit: I guess you just assign the result to a variable, and use that variable inside select.

  • edited January 2016 Answer ✓

    Since p5.Element is an exclusive p5.js datatype, we can't directly use that to any functions that would expect a raw native JS HTMLElement.
    https://developer.Mozilla.org/en-US/docs/Web/API/HTMLElement

    As I had mentioned in my 1st reply above, in order to access the underlying HTMLElement outta some p5.Element object, we need to do so via the latter's elt property:
    http://p5js.org/reference/#/p5.Element/elt

  • edited January 2016 Answer ✓

    ... can you use jQuery function calls inside select()?

    Well, select() expects a string object: http://p5js.org/reference/#/p5/select

    For other cases, the opposite is also true from a jQuery object to some function which demands a native DOM object. In this case we may use its method get() passing an index value. Often just 0:

    1. https://learn.jQuery.com/using-jquery-core/faq/how-do-i-pull-a-native-dom-element-from-a-jquery-object/
    2. https://api.jQuery.com/get/
  • Okay, let me just give you the context so you can check my approach:

    I have my sketch as an instance living in a div element (I know that's not how it works but you know what I mean) in a Bootstrap layout. When the window size changes (or the user switches to a different layout), I need the canvas to dynamically resize within that div as it current defined at any given moment. So, I use windowResized as a callback, but the parameters I pass inside the that to resizeCanvas have to be from the HTMLElement.offsetWidth/height (or by using jQuery to grab the same property in a prettier fashion which is more consistent with how the rest of the DOM management is done in my page).

  • edited January 2016 Answer ✓

    ... have to be from the HTMLElement.offsetWidth/height ...

    Again, if you need to access the underlying HTMLElement from any p5.Element, just grab it via elt.

    const elem = myP5Elem.elt;
    const w = elem.offsetWidth, h = elem.offsetHeight;
    

    Since I dunno jQuery, dunno how to do the same there, sorry. 8-|

    Just remembered, for jQuery objects, just use its get() method like I said before: :(|)

    const elem = myJQuery.get(0); // alt.: myJQuery[0]
    const w = elem.offsetWidth, h = elem.offsetHeight;
    
  • edited January 2016

    And btW, I've tweaked some windowResized() example I had from this old forum thread:
    http://forum.Processing.org/two/discussion/13368/why-are-my-p5-graphics-dimensions-scaled-up

    It's a little erratic. But I believe it can be to some help to ya: ~:>
    http://CodePen.io/anon/pen/MKEBXB?editors=101

    <script src=http://p5js.org/js/p5.min.js defer></script>
    <!--<script src=http://p5js.org/js/p5.dom.js defer></script>-->
    
    <script>
    
    /**
    * WindowResized Workaround (v2.0)
    * GoToLoop (2016-Jan-16
    *
    * https://forum.Processing.org/two/discussion/14153/
    * p5-updating-variables-from-outside-sketch-instance
    *
    * https://forum.Processing.org/two/discussion/13368/
    * why-are-my-p5-graphics-dimensions-scaled-up
    */
    
    var pg;
    
    function setup() {
      pixelDensity(1);
      createCanvas(windowWidth, windowHeight);
      noLoop();
    
      reconfigureCanvas();
      reconfigureGraphics(pg = createGraphics(width>>1, height));
    }
    
    function draw() {
      background(0350);
      ellipse(width>>2, height>>1, width>>1, height>>1);
      image(pg, width>>1, 0);
    }
    
    function reconfigureCanvas() {
      ellipseMode(CENTER).imageMode(CORNER);
      smooth().fill('blue').strokeWeight(3).stroke(0);
    }
    
    function reconfigureGraphics(pg) {
      pg.ellipseMode(CENTER).smooth().fill('red').strokeWeight(3).stroke(0);
      pg.ellipse(pg.width>>1, pg.height>>1, pg.width, pg.height>>1);
    }
    
    function windowResized() {
      resizeCanvas(windowWidth, windowHeight);
      pg._renderer.resize(width>>1, height);
    
      reconfigureCanvas();
      reconfigureGraphics(pg);
    
      redraw();
    
      console.log(windowWidth, windowHeight, width, height);
    }
    
    </script>
    
Sign In or Register to comment.