add blobs

user/themes/r2c/js/script.js

@@ -15,6 +15,7 @@ function map() {
     options: {
       iconSize:     [15, 49],
       iconAnchor:   [7.5, 5],
+      alt: 'cc',
     }
   });
 
@@ -23,16 +24,11 @@ function map() {
 
   for (var i = 0; i < dyn_data.mappoints.length; i++) {
     var id = dyn_data.mappoints[i].id;
+
     markers[id] = L.marker([dyn_data.mappoints[i].lat, dyn_data.mappoints[i].long], {icon: greenIcon}).bindPopup(dyn_data.mappoints[i].title).addTo(mymap);
-    // console.log("dyn_datad2", dyn_data.mappoints[i].title);
     markers[id]._icon.id = id;
-  }
 
-  var mappoints = $('#streetmap img');
-  for (var i = 0; i < dyn_data.mappoints.length; i++) {
-    var target = dyn_data.mappoints[i].target;
-    console.log('target',target);
-    mappoints.attr('href', target );
+    var cible = dyn_data.mappoints[i].target;
   }
 };
 
@@ -263,7 +259,7 @@ function drag() {
 // draggable
 function dragcanvas() {
   var $reseau = $('#reseaux-sociaux canvas');
-  var $links = $('#links svg')
+  var $links = $('#links svg g')
 
   $links.draggable({
     scroll: false
@@ -424,7 +420,7 @@ function paperjs() {
       path2.blendMode = 'multiply';
       path2.closed = true;
       path2.fullySelected = false;
-      path._reseaux = "twitter";
+      path._reseaux = "instagram";
 
       var path3 = new paper.Path({
         fillColor: 'grey',
@@ -432,80 +428,162 @@ function paperjs() {
       path3.blendMode = 'multiply';
       path3.closed = true;
       path3.fullySelected = false;
+      path._reseaux = "Whatsapp";
+
+      var path4 = new paper.Path({
+        fillColor: 'grey',
+      });
+      path4.blendMode = 'multiply';
+      path4.closed = true;
+      path4.fullySelected = false;
+      path._reseaux = "framasoft";
+
+      var path5 = new paper.Path({
+        fillColor: 'grey',
+      });
+      path5.blendMode = 'multiply';
+      path5.closed = true;
+      path5.fullySelected = false;
+      path._reseaux = "skype";
+
+      var path6 = new paper.Path({
+        fillColor: 'grey',
+      });
+      path6.blendMode = 'multiply';
+      path6.closed = true;
+      path6.fullySelected = false;
       path._reseaux = "email";
 
-    for (var i = 0; i <= amount.length; i++) {
-      var maxPoint = new paper.Point(100, 100);
-      var point = maxPoint;
-        path.add(point);
-    }
+      var path7 = new paper.Path({
+        fillColor: 'grey',
+      });
+      path7.blendMode = 'multiply';
+      path7.closed = true;
+      path7.fullySelected = false;
+      path._reseaux = "siteweb";
 
-    for (var i = 0; i <= amount.length; i++) {
-      var maxPoint = new paper.Point(100, 100);
-      var point = maxPoint;
-        path2.add(point);
-    }
+      var path8 = new paper.Path({
+        fillColor: 'grey',
+      });
+      path8.blendMode = 'multiply';
+      path8.closed = true;
+      path8.fullySelected = false;
+      path._reseaux = "outilsgoogle";
 
     for (var i = 0; i <= amount.length; i++) {
       var maxPoint = new paper.Point(100, 100);
       var point = maxPoint;
+        path.add(point);
+        path2.add(point);
         path3.add(point);
+        path4.add(point);
+        path5.add(point);
+        path6.add(point);
+        path7.add(point);
+        path8.add(point);
+        // path3.add(point);
     }
-
     // dimension blob
     // position blog
+    // for (var i = 0; i < amount.length; i++) {
+    //   var RSin = Math.random();
+    //   console.log('RSin',RSin);
+    // }
+
       view.onFrame = function(event) {
 
         for (var i = 0; i <= amount.length; i++) {
-          var width = 350;
-          var height = 200;
-          movx = Math.cos(event.time * (0.02)) * 400;
-          movy = Math.sin(event.time * (0.05)) * 200;
-          var left = width + movx + 200;
-          var top = height + movy;
+          // all
           var segment = path.segments[i];
-          var sinus = Math.sin(event.time * ( - 0.05) + i);
-          var cos = Math.cos(event.time *  ( - 0.05) + i);
-          var rotatex = Math.sin(event.time * Math.PI/180) + i;
-          segment.point.x = cos * width + left + 100;
-          segment.point.y = sinus * height + top + 100;
-          path.rotate(rotatex);
-          path.smooth();
-        }
-
-        for (var i = 0; i <= amount.length; i++) {
-          var width2 = 50;
-          var height2 = 60;
-          movx = Math.sin(event.time * (-0.025)) * 400;
-          movy = Math.sin(event.time * (0.06)) * 300;
-          var left = width2 - movx + 200;
-          var top = height2 - movy;
           var segment2 = path2.segments[i];
-          var sinus = Math.sin(event.time * (0.5) + i);
-          var cos = Math.cos(event.time *  (0.5) + i);
-          var rotatex2 = Math.sin(event.time * Math.PI/270) + i;
-          segment2.point.x = cos * width2 + left + 400;
-          segment2.point.y = sinus * height2 + top + 300;
-          path2.rotate(rotatex2);
-          path2.smooth();
-        }
-
-        for (var i = 0; i <= amount.length; i++) {
-          var width3 = 150;
-          var height3 = 60;
-          movx = Math.sin(event.time * (0.025)) * 400;
-          movy = Math.sin(event.time * (-0.1)) * 300;
-          var left = width3 - movx + 100;
-          var top = height3 - movy;
-          var segment = path3.segments[i];
-          var sinus = Math.sin(event.time * (0.3) + i);
-          var cos = Math.cos(event.time *  (0.3) + i);
+          var segment3 = path3.segments[i];
+          var segment4 = path4.segments[i];
+          var segment5 = path5.segments[i];
+          var segment6 = path6.segments[i];
+          var segment7 = path7.segments[i];
+          var segment8 = path8.segments[i];
+
+          // Size blob
+            // Facebook
+            var width = 350; var height = 200;
+            // instagram
+            var width2 = 50; var height2 = 60;
+            // Whatsapp
+            var width3 = 150; var height3 = 90;
+            var width4 = 100; var height4 = 160;
+            var width6 = 100; var height6 = 80;
+            var width5 = 40; var height5 = 100;
+            var width7 = 150; var height7 = 200;
+            var width8 = 30; var height8 = 10;
+
+            // vistesse de deplacement
+            var v = 0.01;
+
+          var movx = Math.sin(event.time * (v + 0.05)) * 400; var movy = Math.cos(event.time * (v + 0.02)) * 200;
+          var movx2 = Math.sin(event.time * (v + 0.02)) * 380; var movy2 = Math.cos(event.time * (v + 0.08)) * 210;
+          var movx3 = Math.sin(event.time * (v + 0.01)) * 360; var movy3 = Math.cos(event.time * (v + 0.01)) * 220;
+          var movx4 = Math.sin(event.time * (v + 0.04)) * 420; var movy4 = Math.cos(event.time * (v + 0.06)) * 180;
+          var movx5 = Math.sin(event.time * (v + 0.05)) * 440; var movy5 = Math.cos(event.time * (v + 0.05)) * 190;
+          var movx6 = Math.sin(event.time * (v + 0.02)) * 390; var movy6 = Math.cos(event.time * (v + 0.04)) * 230;
+          var movx8 = Math.sin(event.time * (v + 0.03)) * 410; var movy7 = Math.cos(event.time * (v + 0.03)) * 170;
+          var movx7 = Math.sin(event.time * (v + 0.04)) * 400; var movy8 = Math.cos(event.time * (v + 0.02)) * 200;
+
+          // contour blob
+          var sinus = Math.sin(event.time * ( - 0.05) + i); var cos = Math.cos(event.time *  ( - 0.05) + i);
+          var sinus2 = Math.sin(event.time * ( 0.1) + i); var cos2 = Math.cos(event.time *  ( 0.1) + i);
+          var sinus3 = Math.sin(event.time * (0.15) + i); var cos3 = Math.cos(event.time *  (0.15) + i);
+          var sinus4 = Math.sin(event.time * (0.08) + i); var cos4 = Math.cos(event.time *  (0.08) + i);
+          var sinus5 = Math.sin(event.time * ( - 0.2) + i); var cos5 = Math.cos(event.time *  ( - 0.2) + i);
+          var sinus6 = Math.sin(event.time * (0.12) + i); var cos6 = Math.cos(event.time *  (0.12) + i);
+          var sinus7 = Math.sin(event.time * ( - 0.25) + i); var cos7 = Math.cos(event.time *  ( - 0.25) + i);
+          var sinus8 = Math.sin(event.time * (0.18) + i); var cos8 = Math.cos(event.time *  (0.18) + i);
+
+          var rotatex = Math.sin(event.time * Math.PI/360) + i;
+          var rotatex2 = Math.sin(event.time * Math.PI/21) + i;
           var rotatex3 = Math.sin(event.time * Math.PI/360) + i;
-
-          segment.point.x = cos * width3 + left + 400;
-          segment.point.y = sinus * height3 + top + 300;
+          var rotatex4 = Math.sin(event.time * Math.PI/75) + i;
+          var rotatex5 = Math.sin(event.time * Math.PI/123) + i;
+          var rotatex6 = Math.sin(event.time * Math.PI/354) + i;
+          var rotatex7 = Math.sin(event.time * Math.PI/76) + i;
+          var rotatex8 = Math.sin(event.time * Math.PI/10) + i;
+
+          var left = width - movx + 200; var top = height - movy + 200;
+          var left2 = width2 - movx2 + 200; var top2 = height2 - movy2 + 50;
+          var left3 = width3 - movx3 + 190; var top3 = height3 - movy3 + 30;
+          var left4 = width4 - movx4 + 50; var top4 = height4 - movy4 + 90;
+          var left5 = width5 - movx5 + 220; var top5 = height5 - movy5 + 25;
+          var left6 = width6 - movx6 + 160; var top6 = height6 - movy6 + 150;
+          var left7 = width7 - movx7 + 180; var top7 = height7 - movy7 + 160;
+          var left8 = width8 - movx8 + 220; var top8 = height8 - movy8 + 200;
+
+          segment.point.x = cos * width + left + 400; segment.point.y = sinus * height + top + 150;
+          segment2.point.x = cos2 * width2 + left2 + 400; segment2.point.y = sinus2 * height2 + top2 + 150;
+          segment3.point.x = cos3 * width3 + left3 + 400; segment3.point.y = sinus3 * height3 + top3 + 150;
+          segment4.point.x = cos4 * width4 + left4 + 400; segment4.point.y = sinus4 * height4 + top4 + 150;
+          segment5.point.x = cos5 * width5 + left5 + 400; segment5.point.y = sinus5 * height5 + top5 + 150;
+          segment6.point.x = cos6 * width6 + left6 + 400; segment6.point.y = sinus6 * height6 + top6 + 150;
+          segment7.point.x = cos7 * width7 + left7 + 400; segment7.point.y = sinus7 * height7 + top7 + 150;
+          segment8.point.x = cos8 * width8 + left8 + 400; segment8.point.y = sinus8 * height8 + top8 + 150;
+
+          // Rotate blob
+          path.rotate(rotatex);
+          path2.rotate(rotatex2);
           path3.rotate(rotatex3);
+          path4.rotate(rotatex4);
+          path5.rotate(rotatex5);
+          path6.rotate(rotatex6);
+          path7.rotate(rotatex7);
+          path8.rotate(rotatex8);
+
+          // Smooth
+          path.smooth();
+          path2.smooth();
           path3.smooth();
+          path4.smooth();
+          path5.smooth();
+          path6.smooth();
+          path7.smooth();
+          path8.smooth();
         }
       }
       $("a[href^='#facebook']").click(function(){
@@ -524,19 +602,14 @@ function paperjs() {
 
 }
 
-//
-// function clickcanvena() {
-//   console.log('path_reseaux',path._reseaux);
-// }
-
 $(document).ready(function() {
-  paperjs();
+  // paperjs();
   // clickcanvena();
   clicklinkmap();
   mCustomScrollbar();
   clickhand();
   drag();
-  dragcanvas();
+  // dragcanvas();
   map();
   clicklinkmap();
   // paperjs();

user/themes/r2c/js/script_d3js.js

@@ -1,19 +1,25 @@
-  var svg = d3.select("#links svg"),
-    width = +svg.attr("width"),
-    height = +svg.attr("height");
+    var $container = $('#links');
+    
+
+      var width = $container.outerWidth(true);
+      var height = $container.outerHeight(true);
+      var svg = d3.select("#links svg");
+      Addwidth = svg.attr("width", '100%'),
+      Addheight = svg.attr("height", '100%');
 
   var color = d3.scaleOrdinal(d3.schemeCategory20);
 
   var simulation = d3.forceSimulation()
-      .force("link", d3.forceLink(10).distance(50).id(function(d) { return d.id; }))
+      .force("link", d3.forceLink().distance(20).id(function(d) { return d.id; }))
       .force("charge", d3.forceManyBody())
-      .force("center", d3.forceCenter(width / 2, height / 2));
+      .force("center", d3.forceCenter(width + (width /2)- 20, height + (height/2) - 30));
 
   d3.json("user/themes/r2c/json/miserables.json", function(error, graph) {
     if (error) throw error;
 
     var link = svg.append("g")
       .attr("class", "links")
+      // .attr("left", "auto")
       .selectAll("line")
       .data(graph.links)
       .enter().append("line")

user/themes/r2c/scss/template/_section.scss

@@ -5,6 +5,7 @@ body{
 
 #page{
   height: 100%;
+  margin: 0 20px;
   .navbar{
     width: 100%;
     height: 50px;
@@ -102,20 +103,18 @@ body{
         width: 100%;
         #mCSB_5_container{
           width: 100%;
-          width: 100%;
+          height: 100%;
+          position: fixed!important;
+          top: 50px!important;
         }
       }
-      .cadre{
-        position: absolute;
-        overflow: hidden;
-        width: 100%;
-        height: 100%;
         svg{
-          position: fixed;
-          top: -33%;
-          left: -55%;
+          position: absolute;
+          top: 50px;
+          left: 0;
+
         }
-      }
+
     }
     #streetmap{
       #mCSB_4_container{

user/themes/r2c/templates/modular/links.html.twig

@@ -5,7 +5,5 @@
 {% block body %}
     {% for module in page.collection %}
     {% endfor %}
-    <div class="cadre">
-      <svg width="3960" height="2160" resize hidpi="on"></svg>
-    </div>
+      <svg resize="on" hidpi="on"></svg>
   {% endblock %}