blob ok

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

@@ -6,7 +6,7 @@ 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 :

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>