46 lines
1.1 KiB
JavaScript
46 lines
1.1 KiB
JavaScript
|
|
import {noop} from './utils.js';
|
|
|
|
export default class Sketch {
|
|
constructor(settings) {
|
|
this.lastNow = null;
|
|
|
|
['getContext', 'onResize', 'render'].map(method => this[method] = this[method].bind(this));
|
|
|
|
this.drawDelay = settings.drawDelay || 50;
|
|
this.draw = settings.draw || noop;
|
|
this.container = settings.element || document.body;
|
|
|
|
window.addEventListener('optimizedResize', this.onResize);
|
|
|
|
this.canvas = document.createElement('canvas');
|
|
this.canvas.width = this.container.offsetWidth;
|
|
this.canvas.height = this.container.offsetHeight;
|
|
|
|
this.context = this.canvas.getContext('2d');
|
|
|
|
this.container.appendChild(this.canvas);
|
|
|
|
requestAnimationFrame(this.render);
|
|
}
|
|
|
|
getContext() { return this.context; }
|
|
|
|
onResize(event) {
|
|
console.log('sketch - onResize', arguments);
|
|
}
|
|
|
|
render(now) {
|
|
this.context.now = now;
|
|
this.context.lastNow = this.lastNow;
|
|
|
|
this.draw(this.context);
|
|
|
|
this.lastNow = now;
|
|
|
|
if (this.drawDelay) setTimeout(() => requestAnimationFrame(this.render), this.drawDelay);
|
|
else requestAnimationFrame(this.render);
|
|
}
|
|
}
|
|
|