canvas shader processor + recordere

by Konstantin Cryman

HTML

<canvas id='testCanvas' width="640" height="480" ></canvas><br>
<button id="record"> record </button> 
<input id="recordName" type="text" value="test_record">
<!-- 
  <input id="recordExt" type="text" value="webm">
-->

JavaScript

class DependencyConnector {
  constructor( dependencyLinks, expression ){
    this.bundle = '';
  	this.dependencyLinks = dependencyLinks || {};
  	this.expressionCallback = expression;
  	this.toloadDependencyKeys = Object.keys( this.dependencyLinks );
    this.nextDependencyLoad();
  }
  
  initBundle(){
  	return new Promise( ( resolveBundle, rejectBundle ) => {
    	try {
        const nextScriptText = this.bundle;
        const nextScriptElement = document.createElement( 'script' );
        nextScriptElement.type = 'text/javascript';
        nextScriptElement.id = 'customScriptBundle';
        nextScriptElement.text = nextScriptText;
        document.head.appendChild( nextScriptElement );
        resolveBundle();
      } catch( err ){
      		rejectBundle( err );
      }
    } );
  }
  
  nextDependencyLoad(){
  	if( this.toloadDependencyKeys.length ){
    	const nextLinkKey = this.toloadDependencyKeys.shift();
      const nextLink = this.dependencyLinks[ nextLinkKey ];
      fetch( nextLink ).then( ( data ) => {
        	data.text().then( ( resultText ) => {
          		this.bundle += '\n\n\n';
          		this.bundle += resultText;
              this.nextDependencyLoad()
          }, () => {} );
      } );
    } else {
    	this.initBundle().then( () => {
    		this.expressionCallback();
      }, ( rejectReason ) => {
      	console.err( rejectReason );
      } );
    }
  }
  
};

new DependencyConnector( {
CanvasProcessor:'https://raw.githubusercontent.com/tnormandao/tools/master/utils/canvas.shader.processor.js',
jQuery: 'https://code.jquery.com/jquery-3.4.1.min.js', // for test
THREE: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/107/three.min.js'
} , () => {

console.log( { $ } );
console.log( { THREE } );

// demo scripts
const can = document.getElementById( 'testCanvas' );
can.width = 320;
can.height = 240;

const ctx = can.getContext( '2d' );
ctx.fillStyle = '#ff0000';
let nextYPosition = 0;
let testPosition = 0;
let lastPosition = 0;
let...