matrix-engine-plugins
Version:
Matrix-engine support repo.
1,588 lines (1,529 loc) • 72.9 kB
JavaScript
(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
"use strict";
var _nidza = require("nidza");
// Originally from
// https://www.shadertoy.com/view/lcfXD8
_nidza.Utility.loadAsync("https://webgl2fundamentals.org/webgl/resources/webgl-utils.js", () => {
window.addEventListener("load", function (e) {
loader.style.display = "none";
});
var nidza = new _nidza.Nidza();
let myShader = {
id: "myShader",
size: {
width: window.innerWidth,
height: window.innerHeight
},
parentDom: document.getElementById("testHolder")
};
var indentityMyShader = nidza.createNidza3dIndentity2(myShader);
let myShaderElement = indentityMyShader.addShaderComponentCustom({
id: "vertex-color-comp"
});
// Make it global
window.myShaderElement = myShaderElement;
window.indentityMyShader = indentityMyShader;
console.info('Application runned 2.');
// Get A WebGL context Inline style
/** @type {HTMLCanvasElement} */
var gl = indentityMyShader.canvasDom.getContext("webgl2");
if (!gl) return;
myShaderElement.initDefaultFSShader = () => {
return `#version 300 es
precision highp float;
uniform vec2 iResolution;
uniform vec2 iMouse;
uniform float iTime;
// we need to declare an output for the fragment shader
out vec4 outColor;
#define SS(a,b,c) smoothstep(a-b,a+b,c)
#define gyr(p) dot(sin(p.xyz),cos(p.zxy))
#define T iTime
#define R iResolution
float map(in vec3 p) {
return (1. + .2*sin(p.y*600.)) *
gyr(( p*(10.) + .8*gyr(( p*8. )) )) *
(1.+sin(T+length(p.xy)*10.)) +
.3 * sin(T*.15 + p.z * 5. + p.y) *
(2.+gyr(( p*(sin(T*.2+p.z*3.)*350.+250.) )));
}
vec3 norm(in vec3 p) {
float m = map(p);
vec2 d = vec2(.06+.06*sin(p.z),0.);
return map(p)-vec3(
map(p-d.xyy),map(p-d.yxy),map(p-d.yyx)
);
}
void mainImage( out vec4 color, in vec2 coord ) {
vec2 uv = coord/R.xy;
vec2 uvc = (coord-R.xy/2.)/R.y;
float d = 0.;
float dd = 1.;
vec3 p = vec3(0.,0.,T/4.);
vec3 rd = normalize(vec3(uvc.xy,1.));
for (float i=0.;i<90. && dd>.001 && d < 2.;i++) {
d += dd;
p += rd*d;
dd = map(p)*.02;
}
vec3 n = norm(p);
float bw = n.x+n.y;
bw *= SS(.9,.15,1./d);
color = vec4(vec3(bw),1.0);
}
void main() {
mainImage(outColor, gl_FragCoord.xy);
}
`;
};
myShaderElement.initDefaultVSShader = () => {
return `#version 300 es
in vec4 a_position;
void main() {
gl_Position = a_position;
}
`;
};
// setup GLSL program
const program = webglUtils.createProgramFromSources(gl, [myShaderElement.initDefaultVSShader(), myShaderElement.initDefaultFSShader()]);
// look up where the vertex data needs to go.
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
// look up uniform locations
const resolutionLocation = gl.getUniformLocation(program, "iResolution");
const mouseLocation = gl.getUniformLocation(program, "iMouse");
const timeLocation = gl.getUniformLocation(program, "iTime");
// uniform vec3 iResolution; // viewport resolution (in pixels)
// uniform float iTime; // shader playback time (in seconds)
// uniform float iTimeDelta; // render time (in seconds)
// uniform float iFrameRate; // shader frame rate
// uniform int iFrame; // shader playback frame
// uniform float iChannelTime[4]; // channel playback time (in seconds)
// uniform vec3 iChannelResolution[4]; // channel resolution (in pixels)
// uniform vec4 iMouse; // mouse pixel coords. xy: current (if MLB down), zw: click
// uniform samplerXX iChannel0..3; // input channel. XX = 2D/Cube
// uniform vec4 iDate; // (year, month, day, time in seconds)
// const TimeDelta = gl.getUniformLocation(program, "iTimeDelta");
// const FrameRate = gl.getUniformLocation(program, "iFrameRate");
// const ChannelTime = gl.getUniformLocation(program, "iChannelTime");
// const ChannelResolution = gl.getUniformLocation(program, "iChannelResolution");
// const Mouselocation = gl.getUniformLocation(program, "iMouse");
// const DateLocation = gl.getUniformLocation(program, "iDate");
// Create a vertex array object (attribute state)
const vao = gl.createVertexArray();
// and make it the one we're currently working with
gl.bindVertexArray(vao);
// Create a buffer to put three 2d clip space points in
const positionBuffer = gl.createBuffer();
// Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
// fill it with a 2 triangles that cover clip space
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW);
// Turn on the attribute
gl.enableVertexAttribArray(positionAttributeLocation);
// Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
gl.vertexAttribPointer(positionAttributeLocation, 2,
// 2 components per iteration
gl.FLOAT,
// the data is 32bit floats
false,
// don't normalize the data
0,
// 0 = move forward size * sizeof(type) each iteration to get the next position
0 // start at the beginning of the buffer
);
// const playpauseElem = document.querySelector('.playpause');
const inputElem = document.querySelector('#myShader');
inputElem.addEventListener('mouseover', requestFrame);
// inputElem.addEventListener('mouseout', cancelFrame);
let mouseX = 0;
let mouseY = 0;
function setMousePosition(e) {
const rect = inputElem.getBoundingClientRect();
mouseX = e.clientX - rect.left;
mouseY = rect.height - (e.clientY - rect.top) - 1; // bottom is 0 in WebGL
}
inputElem.addEventListener('mousemove', setMousePosition);
inputElem.addEventListener('touchstart', e => {
e.preventDefault();
playpauseElem.classList.add('playpausehide');
requestFrame();
}, {
passive: false
});
inputElem.addEventListener('touchmove', e => {
e.preventDefault();
setMousePosition(e.touches[0]);
}, {
passive: false
});
inputElem.addEventListener('touchend', e => {
e.preventDefault();
// playpauseElem.classList.remove('playpausehide');
// cancelFrame();
}, {
passive: false
});
let requestId;
function requestFrame() {
if (!requestId) {
requestId = requestAnimationFrame(render);
}
}
function cancelFrame() {
if (requestId) {
cancelAnimationFrame(requestId);
requestId = undefined;
}
}
let then = 0;
let time = 0;
function render(now) {
requestId = undefined;
now *= 0.001; // convert to seconds
const elapsedTime = Math.min(now - then, 0.1);
time += elapsedTime;
then = now;
webglUtils.resizeCanvasToDisplaySize(gl.canvas);
// Tell WebGL how to convert from clip space to pixels
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
// Tell it to use our program (pair of shaders)
gl.useProgram(program);
// Bind the attribute/buffer set we want.
gl.bindVertexArray(vao);
gl.uniform2f(resolutionLocation, gl.canvas.width, gl.canvas.height);
// gl.uniform1f(TimeDelta, mouseY);
gl.uniform1f(timeLocation, time);
gl.drawArrays(gl.TRIANGLES, 0, 6);
requestFrame();
}
requestFrame();
requestAnimationFrame(requestFrame);
});
},{"nidza":2}],2:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Nidza", {
enumerable: true,
get: function () {
return _nidza.Nidza;
}
});
exports.Utility = void 0;
var _nidza = require("./src/nidza.js");
var Utility = _interopRequireWildcard(require("./src/lib/utility.js"));
exports.Utility = Utility;
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
},{"./src/lib/utility.js":18,"./src/nidza.js":19}],3:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.NidzaElement = void 0;
var _position = require("./position.js");
var _dimension = require("./dimension.js");
class NidzaElement {
constructor(arg) {
this.position = new _position.Position(arg.position.x, arg.position.y);
this.dimension = new _dimension.Dimension(100, 100);
this.position.setReferent(arg.canvasDom);
this.position.elementIdentity = arg.id;
}
}
exports.NidzaElement = NidzaElement;
},{"./dimension.js":7,"./position.js":12}],4:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.setReferent = setReferent;
/**
* @description No need class for this.
* Use bind is easy in ECMA6.
*/
function setReferent(canvasDom) {
this.canvasDom = canvasDom;
// this.pIdentity = canvasDom.id;
this.referentCanvasWidth = () => {
return this.canvasDom.width;
};
this.referentCanvasHeight = () => {
return this.canvasDom.height;
};
}
},{}],5:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BaseShader = void 0;
class BaseShader {
constructor() {
console.log("SHADER BASE CLASS");
}
/**
* Creates and compiles a shader.
*
* @param {!WebGLRenderingContext} gl The WebGL Context.
* @param {string} shaderSource The GLSL source code for the shader.
* @param {number} shaderType The type of shader, VERTEX_SHADER or
* FRAGMENT_SHADER.
* @return {!WebGLShader} The shader.
*/
compileShader(gl, shaderType, shaderSource) {
// Create the shader object
var shader = gl.createShader(shaderType);
// Set the shader source code.
gl.shaderSource(shader, shaderSource);
// Compile the shader
gl.compileShader(shader);
// Check if it compiled
var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (!success) {
// Something went wrong during compilation; get the error
throw "could not compile shader:" + gl.getShaderInfoLog(shader);
}
return shader;
}
/**
* Creates a program from 2 shaders.
*
* @param {!WebGLRenderingContext) gl The WebGL context.
* @param {!WebGLShader} vertexShader A vertex shader.
* @param {!WebGLShader} fragmentShader A fragment shader.
* @return {!WebGLProgram} A program.
*/
createProgram(gl, vertexShader, fragmentShader) {
// create a program.
var program = gl.createProgram();
// attach the shaders.
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
// link the program.
gl.linkProgram(program);
// Check if it linked.
var success = gl.getProgramParameter(program, gl.LINK_STATUS);
if (!success) {
// something went wrong with the link
throw "program failed to link:" + gl.getProgramInfoLog(program);
}
return program;
}
/**
* Creates a shader from the content of a script tag.
*
* @param {!WebGLRenderingContext} gl The WebGL Context.
* @param {string} scriptId The id of the script tag.
* @param {string} opt_shaderType. The type of shader to create.
* If not passed in will use the type attribute from the
* script tag.
* @return {!WebGLShader} A shader.
*/
createShaderFromScript(gl, scriptId, opt_shaderType) {
// look up the script tag by id.
var shaderScript = document.getElementById(scriptId);
if (!shaderScript) {
throw "*** Error: unknown script element" + scriptId;
}
// extract the contents of the script tag.
var shaderSource = shaderScript.text;
// If we didn't pass in a type, use the 'type' from
// the script tag.
if (!opt_shaderType) {
if (shaderScript.type == "x-shader/x-vertex") {
opt_shaderType = gl.VERTEX_SHADER;
} else if (shaderScript.type == "x-shader/x-fragment") {
opt_shaderType = gl.FRAGMENT_SHADER;
} else if (!opt_shaderType) {
throw "*** Error: shader type not set";
}
}
return compileShader(gl, shaderSource, opt_shaderType);
}
// init Shader PRogram from inline
initShaderProgram(gl, vsSource, fsSource) {
const vertexShader = this.compileShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = this.compileShader(gl, gl.FRAGMENT_SHADER, fsSource);
// Create the shader program
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
// If creating the shader program failed, alert
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Unable to initialize the shader program: " + gl.getProgramInfoLog(shaderProgram));
return null;
}
return shaderProgram;
}
/**
* Creates a program from 2 script tags.
* @param {!WebGLRenderingContext} gl The WebGL Context.
* @param {string[]} shaderScriptIds Array of ids of the script
* tags for the shaders. The first is assumed to be the
* vertex shader, the second the fragment shader.
* @return {!WebGLProgram} A program
*/
createProgramFromScripts(gl, shaderScriptIds) {
var vertexShader = createShaderFromScript(gl, shaderScriptIds[0], gl.VERTEX_SHADER);
var fragmentShader = createShaderFromScript(gl, shaderScriptIds[1], gl.FRAGMENT_SHADER);
return createProgram(gl, vertexShader, fragmentShader);
}
}
exports.BaseShader = BaseShader;
},{}],6:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.NidzaCustom2dComponent = void 0;
var _baseComponent = require("./base-component.js");
var _operations = require("./operations.js");
var _rotation = require("./rotation.js");
class NidzaCustom2dComponent extends _baseComponent.NidzaElement {
constructor(arg) {
const eArg = {
position: arg.position,
id: arg.id,
canvasDom: arg.canvasDom
// draw: arg.draw
};
super(eArg);
this.id = arg.id;
this.draw = arg.draw;
this.ctx = arg.ctx;
this.canvasDom = arg.canvasDom;
var newW = 20,
newH = 20;
if (arg.dimension) {
newW = arg.dimension.width || 20;
newH = arg.dimension.height || 20;
}
this.dimension.setReferent(this.canvasDom);
this.dimension.elementIdentity = this.id;
this.dimension.setDimension(newW, newH);
dispatchEvent(new CustomEvent("activate-updater", {
detail: {
id: arg.id,
oneDraw: false
}
}));
}
getKey(action) {
return action + this.canvasDom.id;
}
activeDraw = () => {
dispatchEvent(new CustomEvent(this.getKey("activate-updater"), {
detail: {
id: this.elementIdentity,
oneDraw: false
}
}));
};
}
exports.NidzaCustom2dComponent = NidzaCustom2dComponent;
},{"./base-component.js":3,"./operations.js":11,"./rotation.js":13}],7:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Dimension = void 0;
var _baseReferent = require("./base-referent.js");
class Dimension {
constructor(curentWidth, curentHeight) {
this.width = curentWidth;
this.height = curentHeight;
this.targetX = curentWidth;
this.targetY = curentHeight;
this.velX = 0;
this.velY = 0;
this.thrust = 0.1;
this.IN_MOVE = false;
this.onTargetReached = function () {};
this.referentCanvasWidth = () => 250;
this.referentCanvasHeight = () => 250;
this.setReferent = _baseReferent.setReferent;
this.elementIdentity = null;
}
getKey(action) {
return action + this.canvasDom.id;
}
setSpeed(num_) {
if (typeof num_ === "number") {
this.thrust = num_;
} else {
console.warn("nidza raport : warning for method 'Position.setSpeed' Desciption : arguments (w , h ) must be type of number.");
}
}
smoothWidth(x) {
dispatchEvent(new CustomEvent("activate-updater", {
detail: {
id: this.elementIdentity
}
}));
this.IN_MOVE = true;
this.targetX = x;
}
smoothHeight(y) {
dispatchEvent(new CustomEvent("activate-updater", {
detail: {
id: this.elementIdentity
}
}));
this.IN_MOVE = true;
this.targetY = y;
}
smooth(x_, y_) {
dispatchEvent(new CustomEvent("activate-updater", {
detail: {
id: this.elementIdentity
}
}));
this.IN_MOVE = true;
this.targetX = x_;
this.targetY = y_;
}
setDimension(x_, y_, type_) {
this.targetX = x_;
this.targetY = y_;
this.width = x_;
this.height = y_;
this.IN_MOVE = false;
dispatchEvent(new CustomEvent("activate-updater", {
detail: {
id: this.elementIdentity,
oneDraw: true
}
}));
}
onDone() {
dispatchEvent(new CustomEvent("deactivate-updater", {
detail: {
id: this.elementIdentity
}
}));
}
update() {
var tx = this.targetX - this.width,
ty = this.targetY - this.height,
dist = Math.sqrt(tx * tx + ty * ty),
rad = Math.atan2(ty, tx),
angle = rad / Math.PI * 180;
this.velX = tx / dist * this.thrust;
this.velY = ty / dist * this.thrust;
if (this.IN_MOVE == true) {
if (dist > this.thrust) {
this.width += this.velX;
this.height += this.velY;
} else {
this.width = this.targetX;
this.height = this.targetY;
this.IN_MOVE = false;
this.onDone();
this.onTargetReached();
}
}
}
getWidth() {
return this.referentCanvasWidth() / 100 * this.width;
}
getHeight() {
return this.referentCanvasHeight() / 100 * this.height;
}
}
exports.Dimension = Dimension;
},{"./base-referent.js":4}],8:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Nidza3dIdentity = void 0;
var _utility = require("./utility.js");
var _shaderComponent = require("./shader-component.js");
var _shaderComponentCustom = require("./shader-component-custom.js");
class Nidza3dIdentity {
constructor(arg) {
this.canvasDom = arg.canvasDom;
this.gl = arg.ctx;
this.elements = [];
this.updater = null;
this.updaterInterval = 1;
this.uRegister = [];
console.info("Construct uniq acess key for nidza instance.");
addEventListener(this.getKey("activate-updater"), this.activateUpdater, {
passive: true
});
addEventListener(this.getKey("deactivate-updater"), this.deactivateUpdater, {
passive: true
});
console.info("Construct 3d webgl access key for nidza instance.");
}
attachClickEvent(callback) {
if ((0, _utility.isMobile)()) {
this.canvasDom.addEventListener("touchstart", callback, {
passive: true
});
} else {
this.canvasDom.addEventListener("click", callback, {
passive: true
});
}
}
attachMoveEvent(callback) {
if ((0, _utility.isMobile)()) {
this.canvasDom.addEventListener("touchmove", callback, {
passive: true
});
} else {
this.canvasDom.addEventListener("mousemove", callback, {
passive: true
});
}
}
onClick() {
console.info("default indentity-3d click event call.");
}
setBackground(arg) {
this.canvasDom.style.background = arg;
}
getKey(action) {
return action + this.canvasDom.id;
}
setCanvasBgColor(color) {
arg.canvasDom.style.background = color;
}
addShaderComponent(arg) {
arg.gl = this.gl;
arg.canvasDom = this.canvasDom;
let shaderComponent = new _shaderComponent.ShaderComponent(arg);
this.elements.push(shaderComponent);
shaderComponent.draw();
return shaderComponent;
}
addShaderComponentCustom(arg) {
arg.gl = this.gl;
arg.canvasDom = this.canvasDom;
let shaderComponent = new _shaderComponentCustom.ShaderComponentCustom(arg);
this.elements.push(shaderComponent);
shaderComponent.draw();
return shaderComponent;
}
activateUpdater = e => {
var data = e.detail;
if (data) {
if (this.uRegister.indexOf(data.id) == -1) {
if (data.oneDraw) {
this.updateScene();
return;
} else {
// resister
this.uRegister.push(data.id);
}
}
}
if (!this.isUpdaterActive()) {
this.updater = setInterval(() => {
this.updateScene();
}, this.updaterInterval);
}
};
deactivateUpdater = e => {
var data = e.detail;
if (data) {
var loc = this.uRegister.indexOf(data.id);
if (loc == -1) {
console.warn("remove event but not exist", data.id);
} else {
this.uRegister.splice(loc, 1);
if (this.uRegister.length == 0 && this.updater != null) {
clearInterval(this.updater);
this.updater = null;
// console.info("There is no registred active elements -> deactivate updater.");
}
}
}
};
isUpdaterActive() {
if (this.updater == null) {
return false;
} else {
return true;
}
}
updateScene() {
this.elements.forEach(e => {
e.reload();
});
}
}
exports.Nidza3dIdentity = Nidza3dIdentity;
},{"./shader-component-custom.js":14,"./shader-component.js":15,"./utility.js":18}],9:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.NidzaIdentity = void 0;
var _textComponent = require("./text-component.js");
var _starComponent = require("./star-component.js");
var _matrixComponent = require("./matrix-component.js");
var _custom2dComponent = require("./custom2d-component.js");
var _utility = require("./utility.js");
class NidzaIdentity {
constructor(arg) {
this.canvasDom = arg.canvasDom;
this.ctx = arg.ctx;
this.elements = arg.elements;
this.clearOnUpdate = true;
this.updaterIsLive = false;
this.updater = null;
this.updaterInterval = 1;
this.uRegister = [];
console.info("Construct uniq acess key for nidza instance.");
addEventListener(this.getKey('activate-updater'), this.activateUpdater, {
passive: true
});
addEventListener(this.getKey('deactivate-updater'), this.deactivateUpdater, {
passive: true
});
this.setupGlobalCtx();
}
attachClickEvent(callback) {
if ((0, _utility.isMobile)()) {
this.canvasDom.addEventListener("touchstart", callback, {
passive: true
});
} else {
this.canvasDom.addEventListener("click", callback, {
passive: true
});
}
}
attachMoveEvent(callback) {
if ((0, _utility.isMobile)()) {
this.canvasDom.addEventListener("touchmove", callback, {
passive: true
});
} else {
this.canvasDom.addEventListener("mousemove", callback, {
passive: true
});
}
}
onClick() {
console.info('default indentity click event call.');
}
setBackground(arg) {
this.canvasDom.style.background = arg;
}
getKey(action) {
return action + this.canvasDom.id;
}
setupGlobalCtx() {
this.ctx.textAlign = "center";
this.ctx.textBaseline = "middle";
}
setCanvasBgColor(color) {
arg.canvasDom.style.background = color;
}
addTextComponent(arg) {
arg.ctx = this.ctx;
arg.canvasDom = this.canvasDom;
let textComponent = new _textComponent.NidzaTextComponent(arg);
textComponent.draw();
this.elements.push(textComponent);
return textComponent;
}
addStarComponent(arg) {
arg.ctx = this.ctx;
arg.canvasDom = this.canvasDom;
let starComponent = new _starComponent.NidzaStarComponent(arg);
starComponent.draw();
this.elements.push(starComponent);
return starComponent;
}
addMatrixComponent(arg) {
arg.ctx = this.ctx;
arg.canvasDom = this.canvasDom;
let starComponent = new _matrixComponent.NidzaMatrixComponent(arg);
starComponent.draw();
this.elements.push(starComponent);
return starComponent;
}
addCustom2dComponent(arg) {
arg.ctx = this.ctx;
arg.canvasDom = this.canvasDom;
let cComponent = new _custom2dComponent.NidzaCustom2dComponent(arg);
cComponent.draw();
this.elements.push(cComponent);
return cComponent;
}
activateUpdater = e => {
var data = e.detail;
if (data) {
if (this.uRegister.indexOf(data.id) == -1) {
if (data.oneDraw) {
this.updateScene();
return;
} else {
// resister
this.uRegister.push(data.id);
}
}
}
if (!this.isUpdaterActive()) {
this.updater = setInterval(() => {
this.updateScene();
}, this.updaterInterval);
}
};
deactivateUpdater = e => {
var data = e.detail;
if (data) {
var loc = this.uRegister.indexOf(data.id);
if (loc == -1) {
console.warn("remove event but not exist", data.id);
} else {
this.uRegister.splice(loc, 1);
if (this.uRegister.length == 0) {
clearInterval(this.updater);
this.updater = null;
// console.info("There is no registred active elements -> deactivate updater.");
}
}
}
};
isUpdaterActive() {
if (this.updater == null) {
return false;
} else {
return true;
}
}
updateScene() {
if (this.clearOnUpdate) {
this.ctx.clearRect(0, 0, this.canvasDom.width, this.canvasDom.height);
}
this.elements.forEach(e => {
e.position.update();
if (e.dimension) e.dimension.update();
if (e.rotation) e.rotation.update();
e.draw(this.ctx);
});
}
print() {
console.log('I am big holder nothing else.');
}
getElementById(id) {
return this.elements.filter(element => element.id == id)[0];
}
setupMatrix1() {
this.canvasDom.style.background = "";
this.canvasDom.className = "matrix1";
}
}
exports.NidzaIdentity = NidzaIdentity;
},{"./custom2d-component.js":6,"./matrix-component.js":10,"./star-component.js":16,"./text-component.js":17,"./utility.js":18}],10:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.NidzaMatrixComponent = void 0;
var _baseComponent = require("./base-component.js");
var _operations = require("./operations.js");
var _utility = require("./utility.js");
var _rotation = require("./rotation.js");
class NidzaMatrixComponent extends _baseComponent.NidzaElement {
constructor(arg) {
const eArg = {
position: arg.position,
id: arg.id,
canvasDom: arg.canvasDom
};
super(eArg);
this.id = arg.id;
this.text = arg.text;
this.color = arg.color || 'black';
this.centralObjectS = new _operations.Osc(0, 360, 1);
this.centralObjectS.setDelay(110);
this.centralObjectE = new _operations.Osc(0, 360, 1.2);
this.centralObjectE.setDelay(110);
this.centralObjectRadius = new _operations.Osc(0, 22, 1);
this.centralObjectRadius.regimeType = "oscMin";
this.centralObjectRadius.setDelay(330);
this.centralObjectRadiusLocal = new _operations.Osc(10, 15, 1);
this.centralObjectRadiusLocal.regimeType = "oscMin";
this.centralObjectRadiusLocal.setDelay(22);
this.centralObjectLineW = new _operations.Osc(1, 44, 1);
this.centralObjectLineW.regimeType = "oscMin";
this.centralObjectLineW.setDelay(11);
this.objectLineW = new _operations.Osc(2, 4, 1);
this.objectLineW.setDelay(22);
this.objectGlobalAlpha = new _operations.Osc(0, 1, 0.01);
this.objectGlobalAlpha.regimeType = "oscMin";
this.objectGlobalAlpha.setDelay(11);
this.colorR = new _operations.Osc(0, 11, 1);
this.colorR.regimeType = "oscMin";
this.colorG = new _operations.Osc(77, 222, 1);
this.colorG.regimeType = "oscMin";
this.colorB = new _operations.Osc(0, 11, 1);
this.colorB.regimeType = "oscMin";
this.colorR.setDelay(0);
this.colorB.setDelay(0);
this.colorG.setDelay(0);
this.fontSizeInternal = 28;
this.columns = Math.floor(this.dimension.getWidth() / 2);
this.drops = [];
for (var i = 0; i < this.columns / 1.77; i++) {
this.drops.push(0);
}
// Must be optimized with new override draws who setup font
// for now i use flag `isActive`.
this.font = {
isActive: false,
fontSize: "30px",
fontStyle: "bold",
fontName: "serif"
};
if (arg.font) {
this.font = {
isActive: true,
fontSize: arg.font.fontSize,
fontStyle: arg.font.fontStyle,
fontName: arg.font.fontName
};
}
this.ctx = arg.ctx;
this.canvasDom = arg.canvasDom;
this.draw = this.drawSimpleMatrix;
this.drawRotatedText = this.drawRotatedMatrix;
// this.drawRotatedBorderText = drawRotatedBorderText;
// this.drawBorder = drawBorder;
// this.drawWithBorder = drawWithBorder;
this.border = {
typeOfDraw: 'fill-stroke',
isActive: true,
fillColor: 'gold',
strokeColor: 'red',
radius: 10
};
if (arg.border) {
this.border = {
typeOfDraw: arg.border.typeOfDraw || 'fill-stroke',
isActive: true,
fillColor: arg.border.fillColor || 'gold',
strokeColor: arg.border.strokeColor || 'red',
radius: arg.border.radius || 10
};
this.setBorder(this.border);
}
this.rotation = new _rotation.Rotator(this.id, this.canvasDom.id);
this.rotation.setId(this.id);
addEventListener(this.getKey("activate-rotator"), this.activateRotator, false);
var newW = 20,
newH = 20;
if (arg.dimension) {
newW = arg.dimension.width || 20;
newH = arg.dimension.height || 20;
}
this.dimension.setReferent(this.canvasDom);
this.dimension.elementIdentity = this.id;
this.dimension.setDimension(newW, newH);
}
getColor() {
return "rgb(" + this.colorR.getValue() + ", " + this.colorG.getValue() + ", " + this.colorB.getValue() + ")";
}
getKey(action) {
return action + this.canvasDom.id;
}
getFont() {
return this.font.fontStyle + " " + this.font.fontSize + " " + this.font.fontName;
}
setBorder(arg) {
if (arg) {
this.border = {
typeOfDraw: arg.typeOfDraw || 'fill-stroke',
isActive: true,
fillColor: arg.fillColor || 'gold',
strokeColor: arg.strokeColor || 'red',
radius: arg.radius || 10
};
}
this.border.isActive = true;
if (this.rotation && this.rotation.isActive) {
// this.draw = this.drawRotatedBorderText;
} else {
// this.draw = this.drawWithBorder;
}
}
// Important - overriding is here
// flag rotation.isActive indicate
activateRotator = () => {
if (this.rotation.isActive == false) {
this.rotation.isActive = true;
this.draw = this.drawRotatedText;
}
dispatchEvent(new CustomEvent(this.getKey("activate-updater"), {
detail: {
id: this.elementIdentity
// oneDraw: true
}
}));
};
/**
* @description Draw Matrix effect component:
* - Simple
*/
drawSimpleMatrix() {
this.ctx.save();
if (this.font.isActive) this.ctx.font = this.getFont();
this.ctx.fillStyle = this.getColor();
// this.ctx.fillRect(0, 0, this.canvasDom.width, this.canvasDom.height);
this.ctx.fontSize = "700 " + this.fontSizeInternal + "px";
// this.ctx.fillStyle = "#00cc33";
for (var i = 0; i < this.columns; i++) {
var index = Math.floor(Math.random() * this.text.length);
var x = i * this.fontSizeInternal;
var y = this.drops[i] * this.fontSizeInternal;
this.ctx.shadowBlur = 122;
this.ctx.fillText(this.text[index], x, y - 35, this.dimension.getWidth() * 10);
this.ctx.shadowBlur = 22;
this.ctx.shadowColor = 'lime';
this.ctx.fillText(this.text[index], x, y - 15, this.dimension.getWidth() * 10);
this.ctx.fillText(this.text[index], x, y + 10, this.dimension.getWidth());
this.ctx.shadowBlur = 15;
this.ctx.fillText(this.text[index], x, y + 30, this.dimension.getWidth());
this.ctx.fillStyle = this.getColor();
this.ctx.font = "bold " + (0, _utility.getRandomIntFromTo)(9, 30) + "px " + this.font.fontName;
this.ctx.strokeStyle = this.getColor();
this.ctx.shadowBlur = 25;
this.ctx.shadowColor = 'black';
this.ctx.fillText(this.text[index], y, x, this.dimension.getWidth());
this.ctx.strokeText(this.text[index], y + 5, x + 5, this.dimension.getWidth());
this.ctx.strokeText(this.text[index], y + 25, x + 25, this.dimension.getWidth());
this.ctx.beginPath();
this.ctx.arc(x, y, (0, _utility.getRandomArbitrary)(1, 50), 0, (0, _utility.getRandomArbitrary)(1, 2) * Math.PI);
this.ctx.stroke();
this.ctx.shadowBlur = 1;
this.ctx.globalAlpha = this.objectGlobalAlpha.getValue();
this.ctx.beginPath();
this.ctx.arc(x, y, this.centralObjectRadiusLocal.getValue(), this.centralObjectS.getValue() * Math.PI / 180, this.centralObjectE.getValue() * Math.PI / 180);
this.ctx.arc(x, y, this.centralObjectRadiusLocal.getValue(), this.centralObjectS.getValue() * Math.PI / 180, this.centralObjectE.getValue() * Math.PI / 180, true);
this.ctx.closePath();
this.ctx.lineWidth = this.centralObjectLineW.getValue();
this.ctx.stroke();
this.ctx.fillStyle = this.getColor();
this.ctx.fill();
this.ctx.shadowBlur = 0;
this.ctx.globalAlpha = 1;
this.ctx.fillStyle = this.getColor();
this.ctx.beginPath();
this.ctx.arc(this.position.getX(), this.position.getY(), this.centralObjectRadius.getValue(), this.centralObjectS.getValue() * Math.PI / 180, this.centralObjectE.getValue() * Math.PI / 180);
this.ctx.arc(this.position.getX(), this.position.getY(), this.centralObjectRadius.getValue(), this.centralObjectS.getValue() * Math.PI / 180, this.centralObjectE.getValue() * Math.PI / 180, true);
this.ctx.closePath();
this.ctx.lineWidth = this.centralObjectLineW.getValue();
this.ctx.stroke();
this.ctx.fillStyle = this.getColor();
this.ctx.fill();
this.ctx.lineWidth = this.objectLineW.getValue();
;
if (y >= this.canvasDom.height && Math.random() > 0.99) {
this.drops[i] = 0;
}
this.drops[i]++;
}
// this.ctx.fillText(this.text, this.position.getX(), this.position.getY(), this.dimension.getWidth(), this.dimension.getHeight());
this.ctx.restore();
}
drawRotatedMatrix() {
this.ctx.save();
this.ctx.translate(this.position.getX(), this.position.getY());
this.ctx.rotate(toRad(this.rotation.angle));
if (this.font.isActive) this.ctx.font = this.getFont();
// this.ctx.fillRect(0, 0, this.canvasDom.width, this.canvasDom.height);
this.ctx.fontSize = "700 " + this.fontSizeInternal + "px";
this.ctx.fillStyle = "#00cc33";
for (var i = 0; i < this.columns; i++) {
var index = Math.floor(Math.random() * this.text.length);
var x = i * this.fontSizeInternal;
var y = this.drops[i] * this.fontSizeInternal;
this.ctx.shadowBlur = 15;
this.ctx.shadowColor = '#fff';
this.ctx.fillText(this.text[index], x, y, this.dimension.getWidth() * 10);
this.ctx.shadowBlur = 15;
this.ctx.shadowColor = 'lime';
this.ctx.fillText(this.text[index], x + 2, y + 2, this.dimension.getWidth() * 10);
if (y >= this.canvasDom.height && Math.random() > 0.99) {
this.drops[i] = 0;
}
this.drops[i]++;
}
this.ctx.restore();
}
}
exports.NidzaMatrixComponent = NidzaMatrixComponent;
},{"./base-component.js":3,"./operations.js":11,"./rotation.js":13,"./utility.js":18}],11:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Osc = void 0;
exports.drawBorder = drawBorder;
exports.drawRotatedBorderText = drawRotatedBorderText;
exports.drawRotatedText = drawRotatedText;
exports.drawSimpleText = drawSimpleText;
exports.drawStar = drawStar;
exports.drawStarRotation = drawStarRotation;
exports.drawWithBorder = drawWithBorder;
exports.toRad = toRad;
var _utility = require("./utility.js");
/**
* @description Diffrent variant of math and
* draws calculation data.
*/
/**
* @description
* Osc is math Value Oscilator.
* Argument regimeType is optimal
*/
class Osc {
constructor(start, finish, step, regimeType) {
this.elementIdentity = null;
this.step = 1;
this.start = 0;
this.finish = 10;
this.value = 0;
this.delay = 2;
this.delayInitial = 2;
this.regimeType = "REPEAT";
this.value = start;
this.start = start;
this.finish = finish;
this.step = step;
if (regimeType) {
this.regimeType = regimeType;
}
this.ciklus = 0;
}
resetCiklus() {
this.ciklus = 0;
}
setNewSeqFrameRegimeType(newSeqType) {
this.regimeType = newSeqType;
}
setNewValue(newValue) {
this.value = newValue;
}
setDelay(newDelay) {
this.delay = newDelay;
this.delayInitial = newDelay;
}
getRawValue() {
return this.value;
}
getValue() {
if (this.regimeType === "CONST") {
return this.value;
}
if (this.delay > 0) {
this.delay--;
return this.value;
}
this.delay = this.delayInitial;
if (this.regimeType !== "oscMin" && this.regimeType !== "oscMax") {
if (this.value + this.step <= this.finish) {
this.value = this.value + this.step;
return this.value;
} else {
switch (this.regimeType) {
case "STOP":
{
this.ciklus++;
this.onStop(this);
return this.value;
}
case "REPEAT":
{
this.ciklus++;
this.value = this.start;
this.onRepeat(this);
return this.value;
}
default:
console.warn("NO CASE");
}
}
} else {
if (this.regimeType === "oscMin") {
if (this.value - this.step >= this.start) {
this.value = this.value - this.step;
return this.value;
} else {
this.regimeType = "oscMax";
if (this.ciklus > 0) this.onReachMin(this);
return this.value;
}
} else if (this.regimeType === "oscMax") {
if (this.value + this.step <= this.finish) {
this.value = this.value + this.step;
return this.value;
} else {
this.onReachMax(this);
this.regimeType = "oscMin";
this.ciklus++;
return this.value;
}
}
}
return 0;
}
onReachMax() {
// console.info( 'on reach max default log' )
}
onReachMin() {
// console.info( 'on reach min default log' )
}
onStop() {
console.info('on stop default log');
}
onRepeat() {
// console.info('on repeat default log');
}
}
/**
* @description Convert angle to radians
*/
exports.Osc = Osc;
function toRad(angle) {
if (typeof angle === "string" || typeof angle === "number") {
return angle * (Math.PI / 180);
} else {
console.warn("toRad, Input arg angle " + typeof angle + " << must be string or number.");
}
}
/**
* @description Draw Text with:
* - rotation procedure
*/
function drawRotatedText() {
this.ctx.save();
this.ctx.translate(this.position.getX(), this.position.getY());
this.ctx.rotate(toRad(this.rotation.angle));
if (this.font.isActive) this.ctx.font = this.getFont();
this.ctx.fillText(this.text, 0, 0, this.dimension.getWidth(), this.dimension.getHeight());
this.ctx.restore();
}
/**
* @description Draw Text with:
* - rotation procedure
* - Border procedure
*/
function drawRotatedBorderText() {
this.ctx.save();
this.ctx.translate(this.position.getX(), this.position.getY());
this.ctx.rotate(toRad(this.rotation.angle));
if (this.font.isActive) this.ctx.font = this.getFont();
this.drawBorder(0, 0, this.dimension.getWidth(), this.dimension.getHeight(), 10, this.border.fillColor, this.border.strokeColor, this.border.typeOfDraw);
this.ctx.fillStyle = this.color;
this.ctx.fillText(this.text, 0, 0, this.dimension.getWidth(), this.dimension.getHeight());
this.ctx.restore();
}
/**
* @description Draw Text vs Border with
* radius option for rounded corners
*/
function drawBorder(x, y, width, height, radius, fillColor, strokeColor, type) {
this.ctx.save();
this.ctx.strokeStyle = strokeColor;
this.ctx.fillStyle = fillColor;
x -= width / 2;
y -= height / 2;
this.ctx.beginPath();
this.ctx.moveTo(x, y + radius);
this.ctx.lineTo(x, y + height - radius);
this.ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
this.ctx.lineTo(x + width - radius, y + height);
this.ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
this.ctx.lineTo(x + width, y + radius);
this.ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
this.ctx.lineTo(x + radius, y);
this.ctx.quadraticCurveTo(x, y, x, y + radius);
if (type == "fill-stroke") {
this.ctx.fill();
this.ctx.stroke();
} else if (type == "stroke") {
this.ctx.stroke();
} else if (type == "fill") {
this.ctx.fill();
}
this.ctx.restore();
}
/**
* @description Draw Text:
* - Border procedure
*/
function drawWithBorder() {
this.ctx.save();
if (this.font.isActive) this.ctx.font = this.getFont();
this.drawBorder(this.position.getX(), this.position.getY(), this.dimension.getWidth(), this.dimension.getHeight(), 10, this.border.fillColor, this.border.strokeColor, this.border.typeOfDraw);
this.ctx.fillStyle = this.color;
this.ctx.fillText(this.text, this.position.getX(), this.position.getY(), this.dimension.getWidth(), this.dimension.getHeight());
this.ctx.restore();
}
/**
* @description Draw Text:
* - Simple
*/
function drawSimpleText() {
this.ctx.save();
if (this.font.isActive) this.ctx.font = this.getFont();
this.ctx.fillStyle = this.color;
this.ctx.fillText(this.text, this.position.getX(), this.position.getY(), this.dimension.getWidth(), this.dimension.getHeight());
this.ctx.restore();
}
function drawStar() {
this.ctx.beginPath();
this.ctx.save();
this.fillStyle = this.color;
this.ctx.translate(this.position.getX(), this.position.getY());
this.ctx.moveTo(0, 0 - this.radius);
for (let i = 0; i < this.n; i++) {
this.ctx.rotate(Math.PI / this.n);
this.ctx.lineTo(0, 0 - this.radius * this.inset);
this.ctx.rotate(Math.PI / this.n);
this.ctx.lineTo(0, 0 - this.radius);
}
this.ctx.closePath();
this.ctx.stroke();
this.ctx.fill();
this.ctx.restore();
}
function drawStarRotation() {
this.ctx.beginPath();
this.ctx.save();
this.ctx.fillStyle = this.color;
this.ctx.translate(0, 0);
this.ctx.moveTo(0, 0 - this.radius);
for (let i = 0; i < this.n; i++) {
this.ctx.rotate(Math.PI / this.n);
this.ctx.lineTo(0, 0 - this.radius * this.inset);
this.ctx.rotate(Math.PI / this.n);
this.ctx.lineTo(0, 0 - this.radius);
}
this.ctx.closePath();
this.ctx.stroke();
this.ctx.fill();
this.ctx.restore();
}
},{"./utility.js":18}],12:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Position = void 0;
var _baseReferent = require("./base-referent.js");
class Position {
constructor(curentX, curentY) {
this.x = curentX;
this.y = curentY;
this.targetX = curentX;
this.targetY = curentY;
this.velX = 0;
this.velY = 0;
this.thrust = 0.1;
this.IN_MOVE = false;
this.onTargetReached = function () {};
this.setReferent = _baseReferent.setReferent;
this.referentCanvasWidth = () => 250;
this.referentCanvasHeight = () => 250;
this.elementIdentity = null;
this.pIdentity = null;
}
getKey(action) {
return action + this.canvasDom.id;
}
onDone() {
dispatchEvent(new CustomEvent(this.getKey("deactivate-updater"), {
detail: {
id: this.elementIdentity
}
}));
}
setSpeed(num_) {
if (typeof num_ === "number") {
this.thrust = num_;
} else {
console.warn("Warning for method 'Position.setSpeed' : args (w, h) must be type of number.");
}
}
translateX(x) {
dispatchEvent(new CustomEvent(this.getKey("activate-updater"), {
detail: {
id: this.elementIdentity
}
}));
this.IN_MOVE = true;
this.targetX = x;
}
translateY(y) {
dispatchEvent(new CustomEvent(this.getKey("activate-updater"), {
detail: {
id: this.elementIdentity
}
}));
this.IN_MOVE = true;
this.targetY = y;
}
translate(x_, y_) {
dispatchEvent(new CustomEvent(this.getKey("activate-updater"), {
detail: {
id: this.elementIdentity
}
}));
this.IN_MOVE = true;
this.targetX = x_;
this.targetY = y_;
}
setPosition(x_, y_, type_) {
this.targetX = x_;
this.targetY = y_;
this.x = x_;
this.y = y_;
this.IN_MOVE = false;
dispatchEvent(new CustomEvent(this.getKey("activate-updater"), {
detail: {
id: this.elementIdentity,
oneDraw: true
}
}));
}
update() {
var tx = this.targetX - this.x,
ty = this.targetY - this.y,
dist = Math.sqrt(tx * tx + ty * ty),
rad = Math.atan2(ty, tx),
angle = rad / Math.PI * 180;
this.velX = tx / dist * this.thrust;
this.velY = ty / dist * this.thrust;
if (this.IN_MOVE == true) {
if (dist > this.thrust) {
this.x += this.velX;
this.y += this.velY;
} else {
this.x = this.targetX;
this.y = this.targetY;
this.IN_MOVE = false;
this.onDone();
this.onTargetReached();
}
}
}
getX() {
return this.referentCanvasWidth() / 100 * this.x;
}
getY() {
return this.referentCanvasHeight() / 100 * this.y;
}
}
exports.Position = Position;
},{"./base-referent.js":4}],13:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Rotator = void 0;
var _operations = require("./operations.js");
class Rotator {
constructor(eleId, identityId) {
this.isActive = false;
this.angle = 0;
this.osc = null;
this.elementIdentity = null;
this.updateOrigin = () => {};
this.update = () => {};
this.elementIdentity = eleId;
this.nIndentity = identityId;
}
getKey(action) {
return action + this.nIndentity;
}
clearUpdate() {
this.update = this.updateOrigin;
}
setId(id) {
if (this.osc != null) this.osc.elementIdentity = id;
}
setAngle(angle) {
this.clearUpdate();
if (!this.isActive) {
dispatchEvent(new CustomEvent(this.getKey("activate-rotator"), {
detail: {
id: this.elementIdentity
}
}));
}
this.angle = angle;
dispatchEvent(new CustomEvent(this.getKey("activate-updater"), {
detail: {
id: this.elementIdentity,
oneDraw: true
}
}));
}
setRotation(osc) {
if (osc instanceof _operations.Osc) {
this.osc = osc;
this.osc.elementIdentity = this.elementIdentity;
} else {
console.warn("Rotator use default rotation setup.");
this.osc = new _operations.Osc(0, 360, 0.5);
}
// can be handled more...
// no need always
this.update = this.updateOsc;
if (!this.isActive) {
dispatchEvent(new CustomEvent(this.getKey("activate-rotator"), {
detail: {
id: this.elementIdentity
}
}));
}
dispatchEvent(new CustomEvent(this.getKey("activate-updater"), {
detail: {
id: this.elementIdentity
}
}));
}
updateOsc() {
this.angle = this.osc.getValue();
}
}
exports.Rotator = Rotator;
},{"./operations.js":11}],14:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ShaderComponentCustom = void 0;
var _baseShaderComponent = require("./base-shader-component.js");
class ShaderComponentCustom extends _baseShaderComponent.BaseShader {
constructor(arg) {
super();
this.gl = arg.gl;
this.background = [0.0, 0.0, 0.0, 0.0];
this.position = [-0.0, 0.0, -2.0];
this.geometry = [1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, -1.0];
console.log('ShaderComponentCustom init', arg);
}
initDefaultFSShader() {
return `
varying lowp vec4 vColor;
void main(void) {
gl_FragColor = vColor;
}
`;
}
initDefaultVSShader() {
return `
attribute vec4 aVertexPosi