bachir/edlp_d8
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pre rendering each node in owne virtual canvas, then just move this canvas into the main scene

Browse Source
This commit is contained in:
bachir
2018-04-19 21:12:53 +02:00
parent 86dcf68f62
commit fcb7677cfc
4 changed files with 160 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js
Vendored
+71 -21
View File
@@ -229,6 +229,12 @@
this.e_color = 'e_col_'+this.entrees[Math.floor(Math.random(this.entrees.length))];
this.wall_bouncing_elasticity = 0.75;
this.canvas = document.createElement('canvas');
this.canvas_ctx = this.canvas.getContext('2d');
// node states
this.hover = false;
this.opened = false;
this.faded = false;
@@ -236,7 +242,6 @@
this.aside = false;
this.scrambling = false;
this.wall_bouncing_elasticity = 0.75;
// this.n_repulses = {};
// prototypes
@@ -251,10 +256,48 @@
this.ori_pos = {x:this.x,y:this.y};
// TODO: don't forget to move ori_pos on window resize
this.draw();
this.initPhysics();
};
Node.prototype.draw = function(){
this.canvas.width = this.r*2;
this.canvas.height = this.r*2;
_ctx.clearRect(0, 0, this.r*2, this.r*2);
// carre plein
// clouleur aléatoire ds les entrees
// 3 tailles :
// - 1 entree : petit carre 5px
// - 2-3 entrees : moyen 7.5px
// - >3 entrees : grand 10px
// actif entouré de rouge
this.canvas_ctx.beginPath();
this.canvas_ctx.globalAlpha = this.faded ? 0.15 : 1;
// carre plein
// this.canvas_ctx.fillStyle = _ecolors[this.e_color];
// this.canvas_ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
// ou carre contour
this.canvas_ctx.lineWidth = 1.5;
this.canvas_ctx.fillStyle = 'rgb(255,255,255)';
this.canvas_ctx.fillRect(0,0,this.r*2,this.r*2);
this.canvas_ctx.strokeStyle = _ecolors[this.e_color];
this.canvas_ctx.strokeRect(0,0,this.r*2,this.r*2);
if(this.opened){
// carre plein
// this.canvas_ctx.lineWidth = '1px';
// this.canvas_ctx.strokeStyle = 'rgb(255,0,0)';
// this.canvas_ctx.strokeRect(this.x - this.r-3,this.y - this.r-3,this.r*2+6,this.r*2+6);
// ou carre contour
this.canvas_ctx.fillStyle = _ecolors[this.e_color];
this.canvas_ctx.fillRect(0,0,this.r*2,this.r*2);
}
// this.canvas_ctx.globalAlpha = 1;
this.canvas_ctx.closePath();
};
Node.prototype.initPhysics = function(){
// particule
this.p = _physics.makeParticle(this.mass, this.x, this.y);
@@ -317,7 +360,7 @@
// if(this.debug)
// console.log("Node pos: ", {x:this.x, y:this.y});
this.draw();
this.move();
};
Node.prototype.checkVelocityThreshold = function(){
@@ -395,16 +438,20 @@
Node.prototype.open = function(){
this.opened = true;
_node_opened_id = this.id;
this.draw();
};
Node.prototype.close = function(){
this.opened = false;
this.draw();
};
Node.prototype.fade = function(){
this.faded = true;
this.draw();
};
Node.prototype.unFade = function(){
this.faded = false;
this.draw();
};
Node.prototype.setCenteredOnEntree = function(tid){
@@ -417,6 +464,7 @@
this.stopScrambling();
this.unsetAside();
this.attract.on = true;
this.draw();
}
Node.prototype.unsetCentered = function(){
this.center = false;
@@ -483,7 +531,7 @@
// this.scramble_CL.on = false;
}
Node.prototype.draw = function(){
Node.prototype.move = function(){
// carre plein
// clouleur aléatoire ds les entrees
// 3 tailles :
@@ -492,29 +540,31 @@
// - >3 entrees : grand 10px
// actif entouré de rouge
_ctx.beginPath();
_ctx.globalAlpha = this.faded ? 0.15 : 1;
// _ctx.beginPath();
// _ctx.globalAlpha = this.faded ? 0.15 : 1;
// carre plein
// _ctx.fillStyle = _ecolors[this.e_color];
// _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
// ou carre contour
_ctx.lineWidth = 1.5;
_ctx.fillStyle = 'rgb(255,255,255)';
_ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
_ctx.strokeStyle = _ecolors[this.e_color];
_ctx.strokeRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
// _ctx.lineWidth = 1.5;
// _ctx.fillStyle = 'rgb(255,255,255)';
// _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
// _ctx.strokeStyle = _ecolors[this.e_color];
// _ctx.strokeRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
//
// if(this.opened){
// // carre plein
// // _ctx.lineWidth = '1px';
// // _ctx.strokeStyle = 'rgb(255,0,0)';
// // _ctx.strokeRect(this.x - this.r-3,this.y - this.r-3,this.r*2+6,this.r*2+6);
// // ou carre contour
// _ctx.fillStyle = _ecolors[this.e_color];
// _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
// }
// _ctx.globalAlpha = 1;
// _ctx.closePath();
if(this.opened){
// carre plein
// _ctx.lineWidth = '1px';
// _ctx.strokeStyle = 'rgb(255,0,0)';
// _ctx.strokeRect(this.x - this.r-3,this.y - this.r-3,this.r*2+6,this.r*2+6);
// ou carre contour
_ctx.fillStyle = _ecolors[this.e_color];
_ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
}
_ctx.globalAlpha = 1;
_ctx.closePath();
_ctx.drawImage(this.canvas, this.x-this.r, this.y-this.r);
};
Node.initialized = true;
sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js
+71 -21
View File
@@ -229,6 +229,12 @@
this.e_color = 'e_col_'+this.entrees[Math.floor(Math.random(this.entrees.length))];
this.wall_bouncing_elasticity = 0.75;
this.canvas = document.createElement('canvas');
this.canvas_ctx = this.canvas.getContext('2d');
// node states
this.hover = false;
this.opened = false;
this.faded = false;
@@ -236,7 +242,6 @@
this.aside = false;
this.scrambling = false;
this.wall_bouncing_elasticity = 0.75;
// this.n_repulses = {};
// prototypes
@@ -251,10 +256,48 @@
this.ori_pos = {x:this.x,y:this.y};
// TODO: don't forget to move ori_pos on window resize
this.draw();
this.initPhysics();
};
Node.prototype.draw = function(){
this.canvas.width = this.r*2;
this.canvas.height = this.r*2;
_ctx.clearRect(0, 0, this.r*2, this.r*2);
// carre plein
// clouleur aléatoire ds les entrees
// 3 tailles :
// - 1 entree : petit carre 5px
// - 2-3 entrees : moyen 7.5px
// - >3 entrees : grand 10px
// actif entouré de rouge
this.canvas_ctx.beginPath();
this.canvas_ctx.globalAlpha = this.faded ? 0.15 : 1;
// carre plein
// this.canvas_ctx.fillStyle = _ecolors[this.e_color];
// this.canvas_ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
// ou carre contour
this.canvas_ctx.lineWidth = 1.5;
this.canvas_ctx.fillStyle = 'rgb(255,255,255)';
this.canvas_ctx.fillRect(0,0,this.r*2,this.r*2);
this.canvas_ctx.strokeStyle = _ecolors[this.e_color];
this.canvas_ctx.strokeRect(0,0,this.r*2,this.r*2);
if(this.opened){
// carre plein
// this.canvas_ctx.lineWidth = '1px';
// this.canvas_ctx.strokeStyle = 'rgb(255,0,0)';
// this.canvas_ctx.strokeRect(this.x - this.r-3,this.y - this.r-3,this.r*2+6,this.r*2+6);
// ou carre contour
this.canvas_ctx.fillStyle = _ecolors[this.e_color];
this.canvas_ctx.fillRect(0,0,this.r*2,this.r*2);
}
// this.canvas_ctx.globalAlpha = 1;
this.canvas_ctx.closePath();
};
Node.prototype.initPhysics = function(){
// particule
this.p = _physics.makeParticle(this.mass, this.x, this.y);
@@ -317,7 +360,7 @@
// if(this.debug)
// console.log("Node pos: ", {x:this.x, y:this.y});
this.draw();
this.move();
};
Node.prototype.checkVelocityThreshold = function(){
@@ -395,16 +438,20 @@
Node.prototype.open = function(){
this.opened = true;
_node_opened_id = this.id;
this.draw();
};
Node.prototype.close = function(){
this.opened = false;
this.draw();
};
Node.prototype.fade = function(){
this.faded = true;
this.draw();
};
Node.prototype.unFade = function(){
this.faded = false;
this.draw();
};
Node.prototype.setCenteredOnEntree = function(tid){
@@ -417,6 +464,7 @@
this.stopScrambling();
this.unsetAside();
this.attract.on = true;
this.draw();
}
Node.prototype.unsetCentered = function(){
this.center = false;
@@ -483,7 +531,7 @@
// this.scramble_CL.on = false;
}
Node.prototype.draw = function(){
Node.prototype.move = function(){
// carre plein
// clouleur aléatoire ds les entrees
// 3 tailles :
@@ -492,29 +540,31 @@
// - >3 entrees : grand 10px
// actif entouré de rouge
_ctx.beginPath();
_ctx.globalAlpha = this.faded ? 0.15 : 1;
// _ctx.beginPath();
// _ctx.globalAlpha = this.faded ? 0.15 : 1;
// carre plein
// _ctx.fillStyle = _ecolors[this.e_color];
// _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
// ou carre contour
_ctx.lineWidth = 1.5;
_ctx.fillStyle = 'rgb(255,255,255)';
_ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
_ctx.strokeStyle = _ecolors[this.e_color];
_ctx.strokeRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
// _ctx.lineWidth = 1.5;
// _ctx.fillStyle = 'rgb(255,255,255)';
// _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
// _ctx.strokeStyle = _ecolors[this.e_color];
// _ctx.strokeRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
//
// if(this.opened){
// // carre plein
// // _ctx.lineWidth = '1px';
// // _ctx.strokeStyle = 'rgb(255,0,0)';
// // _ctx.strokeRect(this.x - this.r-3,this.y - this.r-3,this.r*2+6,this.r*2+6);
// // ou carre contour
// _ctx.fillStyle = _ecolors[this.e_color];
// _ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
// }
// _ctx.globalAlpha = 1;
// _ctx.closePath();
if(this.opened){
// carre plein
// _ctx.lineWidth = '1px';
// _ctx.strokeStyle = 'rgb(255,0,0)';
// _ctx.strokeRect(this.x - this.r-3,this.y - this.r-3,this.r*2+6,this.r*2+6);
// ou carre contour
_ctx.fillStyle = _ecolors[this.e_color];
_ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
}
_ctx.globalAlpha = 1;
_ctx.closePath();
_ctx.drawImage(this.canvas, this.x-this.r, this.y-this.r);
};
Node.initialized = true;
sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js
Vendored
+9 -3
View File
@@ -753,7 +753,8 @@
// console.log('AudioPlayer openDocument', node);
if(typeof node == 'undefined'
|| typeof node.nid == 'undefined'
|| typeof node.audio_url == 'undfined'){
|| typeof node.audio_url == 'undfined'
|| typeof node.document_url == 'undfined'){
console.warn('AudioPlayer openDocument() node is malformed', node);
return false;
}
@@ -766,9 +767,14 @@
// add the document opening to history to be able to share and play audio from any where
if(caller != "history_first_load"){
state = {
var state = {
audio:true,
node:node,
node:{
nid:node.nid,
audio_url:node.audio_url,
document_url:node.document_url,
title:node.title || null,
},
historic_index : this.currentHistoricIndex,
};
sites/all/themes/custom/edlptheme/assets/scripts/main.js
+9 -3
View File
@@ -753,7 +753,8 @@
// console.log('AudioPlayer openDocument', node);
if(typeof node == 'undefined'
|| typeof node.nid == 'undefined'
|| typeof node.audio_url == 'undfined'){
|| typeof node.audio_url == 'undfined'
|| typeof node.document_url == 'undfined'){
console.warn('AudioPlayer openDocument() node is malformed', node);
return false;
}
@@ -766,9 +767,14 @@
// add the document opening to history to be able to share and play audio from any where
if(caller != "history_first_load"){
state = {
var state = {
audio:true,
node:node,
node:{
nid:node.nid,
audio_url:node.audio_url,
document_url:node.document_url,
title:node.title || null,
},
historic_index : this.currentHistoricIndex,
};