javascript - How to access processing.js 'width' and 'height' outside processing.js functions -

i've made leap using khan academy's processing.js environment real deal , getting little confused.

i have simple processing.js program draws circle, , want size of circle determined width of canvas.

if print width within processing.js function, setup, i'm shown correct 500px width. unfortunately, whenever try access width property outside of processing.js function, shows default 100px size, though canvas 500px wide.

i think might using ugly mix of processing , javascript, root of problems. appreciated!

processing.js

///* processing.js setup */// void setup() {     size(500, 500);     println(width); // works! :) }  println(width); // doesn't work... :(  ///* global variables */// var moleculequantity = 1;  ///* object constuctors */// var molecule = function(x, y) {     this.x = x;     this.y = y;     this.width = width;     this.height = height; };  molecule.prototype.draw = function() {     nostroke();     fill(88, 91, 183);     ellipse(this.x, this.y, 70, 70);      fill(225, 227, 228);     ellipse(this.x, this.y, 40, 40); };  // fill array molecule objects var molecules = []; (var = 0; < moleculequantity; i++) {     molecules[i] = new molecule(200, 100); }  ///* draw function */// void draw() {     background(225, 227, 228);     molecules[0].draw(); } 

your problem has nothing mixing processing , javascript, , has nothing asynchronous execution. it's simpler that.

think of order code executes in. outside of method execute before setup() function called. in case, means you're accessing width variable before you've changed calling size() function.

you have change code code triggered after setup() called. simplest way move code end of setup() function, or function that's called after setup(), such draw() or event methods.

you might think because function call below setup() function in code setup() call happens first, doesn't. you've defined setup() function- hasn't been called (by processing) yet! try moving code that's outside of function top of sketch make more obvious:

println(width); // happens first, width still 100  void setup() {     size(500, 500);     println(width); //now size() has been called, width 500 } 

edit: i'll try explain order of events. here happens when load page contains processing.js sketch:

1. the page loaded.
2. processing.js loaded.
3. processing.js compiles processing code javascript code.
4. your code (which javascript code) loaded. functions setup() , draw() defined @ step, not called yet. code outside of functions called. when see 100 being printed out.
5. processing.js calls setup() function defined in step 4. when width set.
6. processing.js starts calling draw() function 60 times per second.

as should place variables , functions, depends on want them. might place variable's declaration @ top of sketch , initialization inside setup() function. way can access value anywhere, know won't set until setup() has run. this:

float middlex;  void setup(){    size(500, 500);    middlex = width/2; }  void draw(){    background(0);    ellipse(middlex, mousey, 10, 10); }