in sketch.p5.js [78:162]
function draw() {
if (loadingResources) return;
//console.log('draw');
showLoaderAt(0, 'Rendering');
BLEND_TO_P5 = {
N: 'NORMAL',
B: 'BLEND',
A: 'ADD',
K: 'DARKEST',
L: 'LIGHTEST',
D: 'DIFFERENCE',
X: 'EXCLUSION',
M: 'MULTIPLY',
S: 'SCREEN',
R: 'REPLACE',
O: 'OVERLAY',
H: 'HARD_LIGHT',
F: 'SOFT_LIGHT',
G: 'DODGE',
U: 'BURN'
};
var p5 = this;
// ==========
// faster version, just ensures loading bar is shown, usually it stays at 0% until the end,
// since GPU is busy with drawing layers
// setTimeout(function() {
// clear();
// var layers = sketchConfig.layers;
// for (var i = 0; i < layers.length; i++) {
// if (layers[i] && layers[i] != 'dark') {
// showLoaderAt((i + 1) / layers.length, 'Rendering');
// console.time(layers[i].name || 'layer-' + i);
// layers[i].func(p5, layers[i].conf, ctx);
// console.timeEnd(layers[i].name || 'layer-' + i);
// }
// if (i == (layers.length - 1)) hideLoader();
// }
// hideLoader();
// }, 10);
// ==========
// a tiny bit slower version, ensures to show loading bar for every step by waiting 10msec
// between calls to free up GPU
var layersToRender = sketchConfig.layers.values;
var bgcolor = sketchConfig.layers.background || sketchConfig.bgcolor;
var drawLayer = Kefir.emitter();
var p5 = this;
clear();
background(color(bgcolor.r, bgcolor.g, bgcolor.b));
drawLayer.delay(10).onValue(function(v) {
showLoaderAt((v.index + 1) / layersToRender.length, 'Rendering');
var layer = v.layer;
//console.time(layer.name || 'layer-' + v.index);
applyRenderOptions(p5, v.renderOptions, v.index);
layer.func(p5, layer.conf, ctx, v.renderOptions);
resetRenderOptions(p5);
//console.timeEnd(layer.name || 'layer-' + v.index);
if (v.index == (layersToRender.length - 1)) {
hideLoader();
}
});
for (var i = 0; i < layersToRender.length; i++) {
drawLayer.emit({
index: i,
layer: layersToRender[i][0],
renderOptions: layersToRender[i][1]
});
}
// hideLoader();
}