P5: Updating variables from outside sketch instance.

bisr

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

GoToLoop

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.

bisr

Thanks GoToLoop, in particular for clarifying my misunderstandings.

bisr

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.

GoToLoop

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

GoToLoop

... 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/

bisr

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).

GoToLoop

... 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;

GoToLoop

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>