nidza
2d canvas engine - Scene Object oriented engine with option smart update system. Events works on indentity level(canvas dom element).
Nidza
is exclusively for draws staff. Objective is CPU low price of usage. You can move object or start any animation but on finish there is no any draw calls. This is main objective task to make autoupdater with releasing on target/object reach. Project object is also adding all of kind composition video/webcam/images/text in same time and place.
Nidza will be texture generator
for matrix-engine
but still this project is indipendent
because can be used for any other project.
- Create canvas2D apps
- Create shaders
GLSL
- You can generate images
- Use like texture in 3d space
- Use it like web site features
- Draw logo animation
- Create web site's
All other aspcet will be optimised. I will use css for canvas background becouse lot of
features already exist in web (browser) platform.
It doesn't matter what the code looks like, the length of the code doesn't matter, the only thing that matters is the runtime app flow. To explane my methodology for example take a look on overriding update or draw functions. If i dont'n want to use rotation at all
i don't need function drawRotatedText
i will override it and use drawSimpleText
.
You can look this functions in ./src/lib/operations.js , you will see that drawSimpleText
is much simpler. Why to ask/do something on every draw calls if it not necessary. Thats the point of this project.
In the name of proof
- Every example will run without loading time.
- Run 100 nidza example applications on same page.
About running Examples
Run examples with url parameter ?u=text-example.js
:
http://localhost/nidza/examples/example.html?u=text-example.js
import { Utility } from "nidza";
Utility.importAsync(Utility.QueryUrl().u, () => {
console.info('Application runned.')
});
Dev vs Prodc - How to build examples folder for prodc
For production or public stage server looks like:
Utility.loadAsync("builds/" + Utility.QueryUrl().u, () => {
console.info('Application runned.')
});
First install depens:
cd examples/
npm i
Same roles like in matrix-engine
.
-
For dev use http
for prod use https
.
-
For dev use module
for prod use text/plain
javascript (builded)
-
For dev not need to build at all , no need watchers.
-
use example.html
-
For prodc build with:
npm run build.all
Live demos
How it works
Create object of instance Nidza.
var testNidza = new Nidza();
This object containe all necessary staff, everything related to the nidza engine.
Now we create generic new objects with:
let myFirstNidzaObjectOptions = {
id: "welcomeText",
size: {
width: 250,
height: 250
}
};
testNidza.createNidzaIndentity(myFirstNidzaObjectOptions);
This func createNidzaIndentity
created one new canvas element (with width and height from options) in base.
I called NidzaIndentity
. Every indentity use own canvas element and represent independent app part.
Now to draw really something we use:
testNidza.access.welcomeText.addTextComponent({
text: "Generate images from code",
position: {
x: 20,
y: 40
},
dimension: {
width: 100,
height: 100
}
});
Example text-example.js
=> TextComponent
import { Nidza } from "../src/nidza";
let nidza = new Nidza();
let myFirstNidzaObjectOptions = {
id: "RottationProgram",
size: {
width: 300,
height: 600
},
parentDom: document.getElementById('testHolder')
};
nidza.createNidzaIndentity(myFirstNidzaObjectOptions);
let myScene = nidza.access.RottationProgram;
window.myScene = myScene;
let zlatnaspiralaTxt = myScene.addTextComponent({
id: "zlatna",
text: "Simple rotate 360*",
color: "yellow",
position: {
x: 50,
y: 10
},
dimension: {
width: 45,
height: 10
},
border: {
fillColor: "black",
strokeColor: "yellow"
},
font: {
fontSize: "20px",
fontStyle: "underline",
fontName: "helvetica"
}
});
let rotationOption = new nidza.Osc(0, 360, 0.5);
rotationOption.onRepeat = function(osc) {
dispatchEvent(new CustomEvent("deactivate-updater",
{ detail: { id: osc.elementIdentity } }));
}
zlatnaspiralaTxt.rotation.setRotation(rotationOption)
let zlatnaspiralaTxt2 = myScene.addTextComponent({
id: "zlatna2",
text: "cik cak",
color: "yellow",
position: {
x: 50,
y: 50
},
dimension: {
width: 45,
height: 18
},
border: {
fillColor: "black",
strokeColor: "yellow"
},
font: {
fontSize: "20px",
fontStyle: "",
fontName: "helvetica"
}
});
let rotationOption2 = new nidza.Osc(0, 90, 0.5, "oscMax");
rotationOption2.onReachMin = (osc) => {
zlatnaspiralaTxt2.rotation.clearUpdate();
dispatchEvent(new CustomEvent("deactivate-updater",
{ detail: { id: osc.elementIdentity } }));
};
rotationOption2.onReachMax = (osc) => {
console.info("Values reached max targets osc: ", osc)
};
zlatnaspiralaTxt2.rotation.setRotation(rotationOption2)
Create Multi indentity with and without injectCanvas
To make website its much easiest to create multi instancing.
You can create single nidza instance single website component.
You can mix to component with injectCanvas arg options but only
same context. You cant mix '2d' with 'webgl' context!
Take a look examples/js/multi-nidza-instance.js
Create Nidza 3D Indentity [wip]
Take a look shader-component-default
for basic usage.
import { Nidza, Utility } from "../node_modules/nidza/index";
window.addEventListener("load", function (e) {
loader.innerText = "NIDZA READY";
setTimeout(function () {
loader.style.display = "none";
}, 200);
});
// This component depens on glmatrix engine
Utility.loadSync(
"https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js",
() => {
var nidza = new Nidza();
let myShader = {
id: "myShader",
size: {
width: window.innerWidth,
height: window.innerHeight,
},
parentDom: document.getElementById("testHolder"),
};
var indentityMyShader = nidza.createNidza3dIndentity(myShader);
let myShaderElement = indentityMyShader.addShaderComponent({
id: "vertex-color-comp",
});
dispatchEvent(
new CustomEvent(indentityMyShader.getKey("activate-updater"), {
detail: {
id: "vertex-color-comp",
},
})
);
// Meka it global just for dev propose
window.myShaderElement = myShaderElement;
window.indentityMyShader = indentityMyShader;
}
);
Read more about full custom shader program at =>
https://github.com/zlatnaspirala/nidza/blob/main/README-MORE.md
Use Oscillator -> Osc
Oscillator is extreme simple program.
I use Osc function for any operation i want in animation scene for rotation, translation etc.
Explanation for Osc:
let colorB = new nidza.Osc(0, 255, 21);
colorB.setDelay(0);
colorG.getValue()
With different combination of Osc i made any animation i want.
Also you can combine full custom any 2d canvas code with addCustom2dComponent
.
Screenshots examples
Mix all-in-one.html
example:
Basic shader program
Links:
Credits and inspiration