|
@@ -1,86 +1,289 @@
|
|
|
+/**
|
|
|
+ * @Author: Bachir Soussi Chiadmi <bach>
|
|
|
+ * @Date: 18-12-2017
|
|
|
+ * @Email: bachir@figureslibres.io
|
|
|
+ * @Filename: corpus.js
|
|
|
+ * @Last modified by: bach
|
|
|
+ * @Last modified time: 20-12-2017
|
|
|
+ * @License: GPL-V3
|
|
|
+ */
|
|
|
+
|
|
|
+/**
|
|
|
+ * depends on :
|
|
|
+ *
|
|
|
+ * physics.js : http://jonobr1.com/Physics/#
|
|
|
+ * EaselJS : https://createjs.com/docs/easeljs/modules/EaselJS.html
|
|
|
+ *
|
|
|
+ */
|
|
|
+
|
|
|
(function($) {
|
|
|
|
|
|
EdlpCorpus = function(){
|
|
|
- var $container = $('body');
|
|
|
- var $canvas = $('<canvas>').addClass('edlp-map').appendTo($container);
|
|
|
- var canvas = $canvas[0];
|
|
|
- var ctx = canvas.getContext('2d');
|
|
|
- var physics = new Physics();
|
|
|
- var particules = [];
|
|
|
+ var _$container = $('body');
|
|
|
+ var _$canvas = $('<canvas id="edlp-map">').appendTo(_$container);
|
|
|
+ var _canvas = _$canvas[0];
|
|
|
+ var _ctx = _canvas.getContext('2d');
|
|
|
+ var _canvas_props = {
|
|
|
+ 'margin-top':100,
|
|
|
+ 'margin-bottom':100
|
|
|
+ };
|
|
|
+ var _physics = new Physics();
|
|
|
+ // var _stage = new createjs.Stage('edlp-map');
|
|
|
+ var _nodes = [];
|
|
|
+ // var _particules = [];
|
|
|
+ var _p_radius = 6;
|
|
|
+ var _p_velocity_factor = 0.5;
|
|
|
+ var _m_pos = {x:0, y:0};
|
|
|
+ var _node_hover_id = -1;
|
|
|
+ var _entrees_colors = {
|
|
|
+ "130":"rgb(75, 143, 126)",
|
|
|
+ "121":"rgb(134, 142, 36)",
|
|
|
+ "134":"rgb(43, 143, 47)",
|
|
|
+ "121":"rgb(58, 51, 182)",
|
|
|
+ "125":"rgb(44, 159, 87)",
|
|
|
+ "119":"rgb(196, 137, 120)",
|
|
|
+ "132":"rgb(82, 112, 187)",
|
|
|
+ "122":"rgb(251, 84, 211)",
|
|
|
+ "129":"rgb(224, 116, 131)",
|
|
|
+ "120":"rgb(101, 88, 69)",
|
|
|
+ "130":"rgb(126, 8, 104)",
|
|
|
+ "118":"rgb(14, 113, 33)",
|
|
|
+ "127":"rgb(218, 189, 66)",
|
|
|
+ "133":"rgb(3, 153, 187)",
|
|
|
+ "128":"rgb(57, 154, 28)",
|
|
|
+ "124":"rgb(112, 133, 64)",
|
|
|
+ "116":"rgb(25, 27, 255)",
|
|
|
+ "117":"rgb(39, 157, 132)",
|
|
|
+ "131":"rgb(82, 25, 171)",
|
|
|
+ "126":"rgb(212, 156, 182)",
|
|
|
+ "123":"rgb(73, 119, 21)"
|
|
|
+ };
|
|
|
|
|
|
+
|
|
|
+ // ____ _ __
|
|
|
+ // / _/___ (_) /______
|
|
|
+ // / // __ \/ / __/ ___/
|
|
|
+ // _/ // / / / / /_(__ )
|
|
|
+ // /___/_/ /_/_/\__/____/
|
|
|
function init(){
|
|
|
console.log("EdlpCorpus init()");
|
|
|
+ // console.log("document", document);
|
|
|
initMap();
|
|
|
};
|
|
|
|
|
|
function initMap(){
|
|
|
console.log("EdlpCorpus initMap()");
|
|
|
- // console.log('physics',physics);
|
|
|
+ // console.log('_physics',_physics);
|
|
|
initCanvas();
|
|
|
+ initEvents();
|
|
|
loadCorpus();
|
|
|
+
|
|
|
};
|
|
|
|
|
|
+ // ______
|
|
|
+ // / ____/___ _____ _ ______ ______
|
|
|
+ // / / / __ `/ __ \ | / / __ `/ ___/
|
|
|
+ // / /___/ /_/ / / / / |/ / /_/ (__ )
|
|
|
+ // \____/\__,_/_/ /_/|___/\__,_/____/
|
|
|
function initCanvas(){
|
|
|
// resize the canvas to fill browser window dynamically
|
|
|
- window.addEventListener('resize', resizeCanvas, false);
|
|
|
- resizeCanvas();
|
|
|
+ window.addEventListener('resize', onResizeCanvas, false);
|
|
|
+ onResizeCanvas();
|
|
|
};
|
|
|
|
|
|
- function resizeCanvas() {
|
|
|
- canvas.width = window.innerWidth;
|
|
|
- canvas.height = window.innerHeight;
|
|
|
+ function onResizeCanvas() {
|
|
|
+ _canvas.width = window.innerWidth;
|
|
|
+ _canvas.height = window.innerHeight - _canvas_props['margin-top'] - _canvas_props['margin-bottom'];
|
|
|
+ _canvas.style['margin-top'] = _canvas_props['margin-top']+"px";
|
|
|
+ _canvas.style['margin-bottom'] = _canvas_props['margin-bottom']+"px";
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ // ______ __
|
|
|
+ // / ____/ _____ ____ / /______
|
|
|
+ // / __/ | | / / _ \/ __ \/ __/ ___/
|
|
|
+ // / /___ | |/ / __/ / / / /_(__ )
|
|
|
+ // /_____/ |___/\___/_/ /_/\__/____/
|
|
|
+ function initEvents(){
|
|
|
+ _$container
|
|
|
+ .on('mousemove', function(event) {
|
|
|
+ event.preventDefault();
|
|
|
+ // console.log("onMouseMove", event);
|
|
|
+ _m_pos.x = event.originalEvent.clientX;
|
|
|
+ _m_pos.y = event.originalEvent.clientY;
|
|
|
+ // console.log("Node pos: ", {x:_nodes[0].x, y:_nodes[0].y});
|
|
|
+ // console.log("Mouse pos: ", {x:_m_pos.x, y:_m_pos.y});
|
|
|
+ })
|
|
|
+ .on('click', function(event) {
|
|
|
+ event.preventDefault();
|
|
|
+ if(_node_hover_id != -1){
|
|
|
+ console.log("click on node", _nodes[_node_hover_id]);
|
|
|
+ }
|
|
|
+ });
|
|
|
};
|
|
|
|
|
|
+ // ___ _
|
|
|
+ // / | (_)___ __ __
|
|
|
+ // / /| | / / __ `/ |/_/
|
|
|
+ // / ___ | / / /_/ /> <
|
|
|
+ // /_/ |_|_/ /\__,_/_/|_|
|
|
|
+ // /___/
|
|
|
function loadCorpus(){
|
|
|
// console.log('drupalSettings',drupalSettings);
|
|
|
- console.log('window.location', window.location);
|
|
|
+ // console.log('window.location', window.location);
|
|
|
var path = window.location.origin + drupalSettings.basepath + "edlp/corpus";
|
|
|
$.getJSON(path, {}, function(data){
|
|
|
console.log('corpus loaded : data', data);
|
|
|
// console.log('first node', data.nodes[0]);
|
|
|
- buildMap(data.nodes);
|
|
|
+ // buildParticles(data.nodes);
|
|
|
+ buildNodes(data.nodes);
|
|
|
startAnime();
|
|
|
});
|
|
|
};
|
|
|
|
|
|
- function buildMap(nodes){
|
|
|
- var x,y,p;
|
|
|
- var mass = 8;
|
|
|
- console.log("physics", physics);
|
|
|
+ // _ __ __
|
|
|
+ // / | / /___ ____/ /__ _____
|
|
|
+ // / |/ / __ \/ __ / _ \/ ___/
|
|
|
+ // / /| / /_/ / /_/ / __(__ )
|
|
|
+ // /_/ |_/\____/\__,_/\___/____/
|
|
|
+
|
|
|
+ function buildNodes(nodes){
|
|
|
+ console.log("buildNodes", nodes);
|
|
|
+ var x,y,d;
|
|
|
for (var i in nodes) {
|
|
|
- // console.log(nodes[i]);
|
|
|
- x = Math.random()*canvas.width;
|
|
|
- y = Math.random()*canvas.height;
|
|
|
- p = physics.makeParticle(mass, x, y);
|
|
|
- p.velocity = new Physics.Vector((Math.random()-0.5)*0.10, (Math.random()-0.5)*0.10);
|
|
|
- // if(particules.length){
|
|
|
- // for (var i = 0; i < particules.length; i++) {
|
|
|
- // physics.makeAttraction(p, particules[i], strength, minDistance);
|
|
|
- // }
|
|
|
- // }
|
|
|
- particules.push(p);
|
|
|
+ // console.log('i',i);
|
|
|
+ x = _p_radius*2 + Math.random()*(_canvas.width - _p_radius*4);
|
|
|
+ y = _p_radius*2 + Math.random()*(_canvas.height - _p_radius*4);
|
|
|
+ d = i < 1 ? true : false;
|
|
|
+ _nodes.push(new Node(i,nodes[i],x,y,d));
|
|
|
+ // if(i==4)
|
|
|
+ // break;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
- function render(){
|
|
|
- ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
- var radius = 5;
|
|
|
+ function Node(i,n,x,y,d){
|
|
|
+ this.id = i;
|
|
|
+ for(key in n)
|
|
|
+ this[key] = n[key];
|
|
|
+
|
|
|
+ this.debug = d;
|
|
|
+ this.radius = _p_radius;
|
|
|
+ this.mass = 8;
|
|
|
+ this.g = {
|
|
|
+ l : 1, // drawing line width
|
|
|
+ s : 1 // drawing space between squares
|
|
|
+ }
|
|
|
+ this.x = x;
|
|
|
+ this.y = y;
|
|
|
+ this.hover = false;
|
|
|
+ // physics
|
|
|
+ this.p = _physics.makeParticle(this.mass, this.x, this.y);
|
|
|
+ this.p.velocity = new Physics.Vector((Math.random()-0.5)*_p_velocity_factor, (Math.random()-0.5)*_p_velocity_factor);
|
|
|
+
|
|
|
+
|
|
|
+ // prototypes
|
|
|
+ if (typeof Node.initialized == "undefined") {
|
|
|
+
|
|
|
+ // Node.prototype.init = function(){
|
|
|
+ // // console.log("Node : init()", this);
|
|
|
+ // // this.draw();
|
|
|
+ // };
|
|
|
+
|
|
|
+ Node.prototype.onUpdate = function(){
|
|
|
+ this.checkWallBouncing();
|
|
|
+ this.updatePos();
|
|
|
+ this.checkMouse();
|
|
|
+ // if(this.debug)
|
|
|
+ // console.log("Node pos: ", {x:this.x, y:this.y});
|
|
|
+ this.draw();
|
|
|
+ };
|
|
|
+
|
|
|
+ Node.prototype.checkWallBouncing = function(){
|
|
|
+ // TODO: correct waal bouncing with centered squares
|
|
|
+ if(
|
|
|
+ (this.x < 0 && this.p.velocity.x < 0)
|
|
|
+ || (this.x > _canvas.width-this.radius && this.p.velocity.x > 0)
|
|
|
+ ){
|
|
|
+ // console.log("bounce x");
|
|
|
+ this.p.velocity.multiplyScalarXY(-1, 1).multiplyScalar(0.75);
|
|
|
+ }
|
|
|
+ if(
|
|
|
+ (this.y < 0 && this.p.velocity.y < 0)
|
|
|
+ || (this.y > _canvas.height-this.radius && this.p.velocity.y > 0)
|
|
|
+ ){
|
|
|
+ // console.log("bounce y");
|
|
|
+ this.p.velocity.multiplyScalarXY(1,-1).multiplyScalar(0.75);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ Node.prototype.updatePos = function(){
|
|
|
+ this.x = this.p.position.x;
|
|
|
+ this.y = this.p.position.y;
|
|
|
+ };
|
|
|
+
|
|
|
+ Node.prototype.checkMouse = function(){
|
|
|
+ // TODO: get the real w and h of node (with entrees squares)
|
|
|
+ if( _m_pos.x > this.x
|
|
|
+ && _m_pos.x < this.x+this.radius
|
|
|
+ && _m_pos.y > this.y
|
|
|
+ && _m_pos.y < this.y+this.radius){
|
|
|
+ if(_node_hover_id == -1 || _node_hover_id == this.id){
|
|
|
+ console.log("Node hover", this.id);
|
|
|
+ this.hover = true;
|
|
|
+ _node_hover_id = this.id;
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ this.hover = false;
|
|
|
+ if (_node_hover_id == this.id) {
|
|
|
+ _node_hover_id = -1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ Node.prototype.draw = function(){
|
|
|
+ // TODO: center the squares around the pos
|
|
|
+ _ctx.beginPath();
|
|
|
+ _ctx.lineWidth = this.g.l;
|
|
|
+ for (var i = 0; i < this.entrees.length; i++) {
|
|
|
+ _ctx.strokeStyle = this.hover ? "red" : _entrees_colors[this.entrees[i]];
|
|
|
+ _ctx.strokeRect(this.x-4*i, this.y-4*i, this.radius+8*i, this.radius+8*i);
|
|
|
+ }
|
|
|
+ _ctx.closePath();
|
|
|
+ // _ctx.beginPath();
|
|
|
+ // _ctx.fillStyle = this.hover ? "red" : this.debug ? "blue" : "black";
|
|
|
+ // _ctx.fillRect(this.x, this.y, this.radius, this.radius);
|
|
|
+ // _ctx.closePath();
|
|
|
+ };
|
|
|
+
|
|
|
+ Node.initialized = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ // this.init();
|
|
|
+ };
|
|
|
|
|
|
- // colisions between particules
|
|
|
- for (var p = 0, l = particules.length; p < l; p++) {
|
|
|
- var particule = particules[p];
|
|
|
- // var theta = 360 / (Math.PI * radius);
|
|
|
+ // ____ __ _
|
|
|
+ // / __ \/ /_ __ _______(_)_________
|
|
|
+ // / /_/ / __ \/ / / / ___/ / ___/ ___/
|
|
|
+ // / ____/ / / / /_/ (__ ) / /__(__ )
|
|
|
+ // /_/ /_/ /_/\__, /____/_/\___/____/
|
|
|
+ // /____/
|
|
|
+ // TODO: how to use particule collision in new OOP Node() contexte
|
|
|
+ function checkParticulesCollisions(){
|
|
|
+ // colisions between _particules
|
|
|
+ for (var p = 0, l = _particules.length; p < l; p++) {
|
|
|
+ var particule = _particules[p];
|
|
|
+ // var theta = 360 / (Math.PI * _p_radius);
|
|
|
if(!particule.attracted) continue;
|
|
|
for (var q = 0; q < p; q++) {
|
|
|
if(q==p) continue;
|
|
|
|
|
|
var a = particule;
|
|
|
- var b = particules[q];
|
|
|
+ var b = _particules[q];
|
|
|
if(!b.attracted) continue;
|
|
|
var d = a.distanceTo(b);
|
|
|
|
|
|
// apply new forces if colliding
|
|
|
- if(d <= radius*2){
|
|
|
+ if(d <= _p_radius*2){
|
|
|
|
|
|
var newVelX1 = (a.velocity.x * (a.mass - b.mass) + (2 * b.mass * b.velocity.x)) / (a.mass + b.mass);
|
|
|
var newVelY1 = (a.velocity.y * (a.mass - b.mass) + (2 * b.mass * b.velocity.y)) / (a.mass + b.mass);
|
|
@@ -97,8 +300,8 @@
|
|
|
|
|
|
|
|
|
// move particles if they overlap
|
|
|
- if (d < radius*2) {
|
|
|
- var makeup = radius - d/2;
|
|
|
+ if (d < _p_radius*2) {
|
|
|
+ var makeup = _p_radius - d/2;
|
|
|
var angle = Math.atan2(b.position.y - a.position.y, b.position.x - a.position.x);
|
|
|
|
|
|
b.position.x += makeup * Math.cos(angle);
|
|
@@ -113,44 +316,26 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ };
|
|
|
|
|
|
- for (var i = 0; i < particules.length; i++) {
|
|
|
- var p = particules[i];
|
|
|
- // wall boucing
|
|
|
- if(p.position.x < 0+radius || p.position.x > canvas.width-radius){
|
|
|
- // console.log("bounce x");
|
|
|
- p.velocity.multiplyScalarXY(-1, 1).multiplyScalar(0.75);
|
|
|
- }
|
|
|
- if(p.position.y < 0+radius || p.position.y > canvas.height-radius){
|
|
|
- // console.log("bounce y");
|
|
|
- p.velocity.multiplyScalarXY(1,-1).multiplyScalar(0.75);
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
+ // ____ __
|
|
|
+ // / __ \___ ____ ____/ /__ _____
|
|
|
+ // / /_/ / _ \/ __ \/ __ / _ \/ ___/
|
|
|
+ // / _, _/ __/ / / / /_/ / __/ /
|
|
|
+ // /_/ |_|\___/_/ /_/\__,_/\___/_/
|
|
|
+ function render(){
|
|
|
+ _ctx.clearRect(0, 0, _canvas.width, _canvas.height);
|
|
|
|
|
|
- // draw the ball
|
|
|
- ctx.beginPath();
|
|
|
- ctx.fillRect(p.position.x, p.position.y, 8, 8);
|
|
|
- if(p.attracted){
|
|
|
- ctx.fillStyle = "red";
|
|
|
- }else{
|
|
|
- ctx.fillStyle = "black";
|
|
|
- }
|
|
|
- ctx.fill();
|
|
|
+ for (var i = 0; i < _nodes.length; i++) {
|
|
|
+ _nodes[i].onUpdate();
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
};
|
|
|
|
|
|
function startAnime(){
|
|
|
- physics.onUpdate(render);
|
|
|
- // render();
|
|
|
-
|
|
|
- physics.play()
|
|
|
+ _physics.onUpdate(render);
|
|
|
+ _physics.play()
|
|
|
};
|
|
|
|
|
|
-
|
|
|
-
|
|
|
init();
|
|
|
}
|
|
|
|