StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Yeah, this is asynchronous image loading vs. processing's synchronous image loading in loadImage. You need to either use a Processing.Sketch object and preload your image using js, or skip frames in draw(), bailing early until @img.loaded is true.</p> <p>What I'd do here is create a Processing.Sketch object, passing your code as a function. This Sketch object can then be used to set various options, add images to the image cache, etc. I don't know CoffeeScript, so here's the js way:</p> <pre> canvas1_proc = function(ps) { ps.setup = function() { ps.noLoop(); ps.size(550, 400); return this.img = ps.loadImage('1.png'); }; return ps.draw = function() { return ps.image(this.img, 0, 0); }; }; var sketch = new Processing.Sketch(canvas1_proc); sketch.imageCache.add('1.png'); // will kick off a load in the background var p = new Processing(canvas, sketch); // will wait for imageCache to be ready </pre> <p>We wait to start sketches until the imageCache is empty, and then when you call loadImage() and the like, we first try to pull things out of that cache (keyed by the URL, 1.png in this case).</p> <p>I'll file a bug to get this better documented. In the mean time, here's the code for a Processing.Sketch object, which also includes access to all @pjs directives:</p> <p><a href="https://github.com/humphd/processing-js/blob/1.2/processing.js#L19328" rel="nofollow">https://github.com/humphd/processing-js/blob/1.2/processing.js#L19328</a></p> <p>Come chat with me on irc if you need more help (humph on irc.mozilla.org/processing.js), or on twitter @humphd. Maybe you can help me write something specifically about using Processing.js with CoffeeScript, since so many people are doing it these days :)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload