blob ok

user/pages/01._recits/01._preambule/text.md

@@ -6,8 +6,8 @@ id: rct_preambule
 
 En Janvier 2017, [Bachir Soussi-Chiadmi](http://bachirsoussichiadmi.net/?target=_blank&classes=linkext) m’invitait à le rejoindre sur une période de la [résidence](http://www.synesthesie.com/residences/bachir_soussi_chiadmi/convivialite.html?classes=linkext&target=_blank) qu’il menait à [Synesthésie](#mp_syn), centre de recherche et de création artistique alors basé [place du Caquet](#mp_syn) à Saint-Denis.
 Depuis quelques années, Bachir travaille autour de l’alternative que sont les outils libres et open-sources dans le champ de la création. Avec Synesthésie, il a conduit une recherche qui questionne la convivialité des outils numériques que nous utilisons quotidiennement et la manière dont nous habitons les espaces de vie qu’ils composent.
-
+[facebook](#facebook)
 Pour ce projet, "Réseau de convivialité", il s’agissait de penser une approche qui permettrait de répertorier les activités « invisbles ou informelles » - les espaces discrets de convivialité - des habitants du quartier centre de Saint Denis, autour de Synesthésie. L’un des enjeux de cette enquête était de questionner l’outil numérique comme vecteur de convivialité.  C’est à partir de ces premières pistes que le projet a pu évoluer par la suite.
 
 Cette interface est la restitution de cette expérience :
-On y trouve, sous forme de journal de bord, le récit restituant les étapes du projets, de rencontres en rencontres, ainsi que des éléments visuels, des interviews et des cartographies. Les modules proposés par l’interface permettent de croiser ces différents éléments pour une lecture globale de l’expérience.
+On y trouve, sous forme de journal de bord, le récit restituant les étapes du projets, de rencontres en rencontres, ainsi que des éléments visuels, des interviews et des cartographies. Les modules proposés par l’interface permettent de croiser ces différents éléments pour une lecture globale de l’expérience.

user/themes/r2c/js/script.js

@@ -395,49 +395,143 @@ function clicklinkmap() {
 }
 
 function paperjs() {
+  paper.install(window);
   window.onload = function() {
 		// Get a reference to the canvas object
 		var canvas = document.getElementById('canvas');
 		// Create an empty project and a view for the canvas:
 		paper.setup(canvas);
 		// Create a Paper.js Path to draw a line into it:
-    for (var a = 0; a < dyn_data.reseauxsociaux.length; a++) {
-      var path = new paper.Path();
 
-      // Give the stroke a color
+    // The amount of segment points we want to create:
-      path.strokeColor = 'black';
+    var amount = [1, 2, 3, 4, 5];
-      path.fillColor = 'grey';
+    var height = 200;
-      path.fullySelected = true;
+    var width = 500;
+    // Create a new path and style it:
 
-      var x = Math.floor((Math.random() * (100 + 200)));
+      var path = new paper.Path({
-      var y= Math.floor((Math.random() * (100 + 500)));
+        fillColor: 'grey',
-      var start = new paper.Point(x, y);
+      });
-      // Move to start and draw a line from there
+      path.blendMode = 'multiply';
-      path.moveTo(start);
+      path.closed = true;
+      path.fullySelected = false;
+      path._reseaux = "facebook";
 
-      for (var b = 0; b < 2; b++) {
+      console.log('path',path);
-        // origine
+      var path2 = new paper.Path({
-        var x1 = Math.floor((Math.random() * (200 + 300)));
+        fillColor: 'grey',
-        var y1= Math.floor((Math.random() * (200 + 300)) );
+      });
-        path.lineTo(start.add([ x1, y1 ]));
+      path2.blendMode = 'multiply';
+      path2.closed = true;
+      path2.fullySelected = false;
+      path._reseaux = "twitter";
 
-        path.smooth();
+      var path3 = new paper.Path({
-        path.closed = true;
+        fillColor: 'grey',
-      }
+      });
-    // Draw the view now:
+      path3.blendMode = 'multiply';
-    paper.view.draw();
+      path3.closed = true;
+      path3.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 pulse = 0.7;
-  // var sinus = Math.sin(event.time * pulse + i);
-  // var cos = Math.cos(event.time *  pulse + i);
-  // var destination = paper.Point.random(x, y) * paper.view.size;
 
+    for (var i = 0; i <= amount.length; i++) {
+      var maxPoint = new paper.Point(100, 100);
+      var point = maxPoint;
+        path2.add(point);
+    }
+
+    for (var i = 0; i <= amount.length; i++) {
+      var maxPoint = new paper.Point(100, 100);
+      var point = maxPoint;
+        path3.add(point);
+    }
+
+    // dimension blob
+    // position blog
+      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;
+          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 rotatex3 = Math.sin(event.time * Math.PI/360) + i;
+
+          segment.point.x = cos * width3 + left + 400;
+          segment.point.y = sinus * height3 + top + 300;
+          path3.rotate(rotatex3);
+          path3.smooth();
+        }
+      }
+      $("a[href^='#facebook']").click(function(){
+        path.fillColor =  'blue';
+        console.log('true');
+      });
+      $("a[href^='#twitter']").click(function(){
+        path2.fillColor =  'red';
+        console.log('true');
+      });
+      $("a[href^='#instagram']").click(function(){
+        path.fillColor =  'pink';
+        console.log('true');
+      });
 	}
 
 }
 
+//
+// function clickcanvena() {
+//   console.log('path_reseaux',path._reseaux);
+// }
+
 $(document).ready(function() {
+  paperjs();
+  // clickcanvena();
   clicklinkmap();
   mCustomScrollbar();
   clickhand();
@@ -445,6 +539,6 @@ $(document).ready(function() {
   dragcanvas();
   map();
   clicklinkmap();
-  paperjs();
+  // paperjs();
   // D3js();
 });

user/themes/r2c/js/script_paperjs.js

@@ -1,52 +1,113 @@
 // The amount of segment points we want to create:
 var amount = [1, 2, 3, 4, 5];
 var height = 200;
-var width = 100;
+var width = 500;
-
 // Create a new path and style it:
-var path = new Path({
-	// 80% black:
-	// strokeColor: 'black',
-	// strokeWidth: 0,
-	// strokeCap: 'square'
-});
 
-var raster = new Raster({
+  var path = new Path({
-    // source: 'user/themes/r2c/images/trame.svg',
+    fillColor: 'grey',
-    position: view.center
+  });
-});
+  path.blendMode = 'multiply';
+  path.closed = true;
+  path.fullySelected = false;
+  path._reseaux = "facebook";
+  console.log('path',path);
+  var path2 = new Path({
+    fillColor: 'grey',
+  });
+  path2.blendMode = 'multiply';
+  path2.closed = true;
+  path2.fullySelected = false;
+  path._reseaux = "twitter";
 
-// path.clipMask = true;
+  var path3 = new Path({
-// path.selected = true;
+    fillColor: 'grey',
-path.closed = true;
+  });
-path.fullySelected = false;
+  path3.blendMode = 'multiply';
-path.fillColor = 'grey';
+  path3.closed = true;
-
+  path3.fullySelected = false;
-// Add 5 segment points to the path spread out
+  path._reseaux = "email";
-// over the width of the view:
 
 for (var i = 0; i <= amount.length; i++) {
-  var maxPoint = new Point(300, 100);
+  var maxPoint = new Point(100, 100);
-	var point = maxPoint * Point.random(view.size);
+  var point = maxPoint;
-  path.add(point);
+    path.add(point);
 }
 
-// Select the path, so we can see how it is constructed:
+for (var i = 0; i <= amount.length; i++) {
-function onFrame(event) {
+  var maxPoint = new Point(100, 100);
-	// Loop through the segments of the path:
+  var point = maxPoint;
-	for (var i = 0; i <= amount.length; i++) {
+    path2.add(point);
-		var segment = path.segments[i];
-		var pulse = 0.7;
-		var sinus = Math.sin(event.time * pulse + i);
-		var cos = Math.cos(event.time *  pulse + i);
-		segment.point.y = sinus * height + 300;
-		segment.point.x = cos * width + 300;
-	}
-
-	path.rotate(25);
-  path.smooth();
 }
 
+for (var i = 0; i <= amount.length; i++) {
+  var maxPoint = new Point(100, 100);
+  var point = maxPoint;
+    path3.add(point);
+}
+
+// dimension blob
+// position blog
+  function onFrame(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;
+      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 rotatex3 = Math.sin(event.time * Math.PI/360) + i;
+
+      segment.point.x = cos * width3 + left + 400;
+      segment.point.y = sinus * height3 + top + 300;
+      path3.rotate(rotatex3);
+      path3.smooth();
+    }
+  }
+
 function onMouseDown(event) {
-	path.fillColor = 'blue';
+  path.fillColor = 'blue';
+  path2.fillColor = 'blue';
+
+    path.fillColor = 'black';
+    console.log('cc')
+
 }

user/themes/r2c/templates/partials/base.html.twig

@@ -76,7 +76,6 @@
         {% do assets.addJs('theme://js/jquery-ui.js', {group:'bottom'}) %}
         {% do assets.addJs('theme://js/d3.js', {group:'bottom'}) %}
         {% do assets.addJs('theme://js/script_d3js.js', {group:'bottom'}) %}
-        {% do assets.addJs('theme://js/paper_full.js', {group:'bottom'}) %}
         {% do assets.addJs('theme://js/jquery.mCustomScrollbar.concat.min.js', {group:'bottom'}) %}
         {% do assets.addJs('theme://js/jquery.ui.touch-punch.min.js', {group:'bottom'}) %}
         {% do assets.addJs('theme://js/jquery.malihu.PageScroll2id.js', {group:'bottom'}) %}
@@ -85,10 +84,10 @@
         {# % do assets.addJs('theme://js/leaflet.js', {group:'bottom'}) % #}
         {# do assets.addJs('theme://js/script_paperjs.js', {type:'text/paperscript', canvas:'canvas', group:'bottom'}) #}
 
-        <!-- <script type="text/paperscript" src="user/themes/r2c/js/script_paperjs.js" canvas="canvas"></script> -->
         <script src="user/themes/r2c/js/leaflet.js" crossorigin=""></script>
 
         {% do assets.addJs('theme://js/script.js', {group:'bottom'}) %}
+        {% do assets.addJs('theme://js/paper_full.js', {group:'bottom'}) %}
 
     {% endblock %}
 
@@ -154,6 +153,8 @@
 
 {% block bottom %}
     {{ assets.js('bottom') }}
+    <!-- <script type="text/paperscript" src="user/themes/r2c/js/script_paperjs.js" canvas="canvas"></script> -->
+
 {% endblock %}
 
 </body>