blob

user/pages/06._reseaux-sociaux/_reseaux-2/reseau.md

@@ -1,4 +1,5 @@
 ---
-title: 
 image_align: left
+id: ''
 ---
+

user/pages/06._reseaux-sociaux/_reseaux/reseau.md

@@ -0,0 +1,5 @@
+---
+image_align: left
+id: ''
+---
+

user/themes/r2c/js/script_d3js.js

@@ -5,7 +5,7 @@
   var color = d3.scaleOrdinal(d3.schemeCategory20);
 
   var simulation = d3.forceSimulation()
-      .force("link", d3.forceLink().distance(200).id(function(d) { return d.id; }))
+      .force("link", d3.forceLink().id(function(d) { return d.id; }))
       .force("charge", d3.forceManyBody())
       .force("center", d3.forceCenter(width / 2, height / 2));
 
@@ -54,7 +54,7 @@
   });
 
   function dragstarted(d) {
-    if (!d3.event.active) simulation.alphaTarget(0.1).restart();
+    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
     d.fx = d.x;
     d.fy = d.y;
   }

user/themes/r2c/js/script_paperjs.js

@@ -1,58 +1,52 @@
-
 // The amount of segment points we want to create:
-var amount = 3;
+var amount = [1, 2, 3, 4, 5];
 
-// The maximum height of the wave:
+var height = 200;
-var height = 300;
+var width = 100;
 
 // Create a new path and style it:
 var path = new Path({
 	// 80% black:
-	strokeColor: [0.8],
+	// strokeColor: 'black',
-	strokeWidth: 30,
+	// strokeWidth: 0,
-	strokeCap: 'square'
+	// strokeCap: 'square'
 });
 
 var raster = new Raster({
-    source: 'user/themes/r2c/images/trame.svg',
+    // source: 'user/themes/r2c/images/trame.svg',
     position: view.center
 });
 
-path.clipMask = true;
+// path.clipMask = true;
 // path.selected = true;
 path.closed = true;
-// path.fullySelected = true;
+path.fullySelected = false;
+path.fillColor = 'grey';
 
 // Add 5 segment points to the path spread out
 // over the width of the view:
-for (var i = 0; i <= amount; i++) {
+for (var i = 0; i <= amount.length; i++) {
-  var maxPoint = new Point(300, 300);
+  var maxPoint = new Point(300, 100);
-
+	var point = maxPoint * Point.random(view.size);
-    var point = maxPoint * Point.random(view.size) + 70;
   path.add(point);
-
-	// path.add(new Point(500 / 700) * view.size);
 }
 
 // Select the path, so we can see how it is constructed:
-
 function onFrame(event) {
 	// Loop through the segments of the path:
-	for (var i = 0; i <= amount; i++) {
+	for (var i = 0; i <= amount.length; i++) {
 		var segment = path.segments[i];
-    // A cylic value between -1 and 1
+		var pulse = 0.7;
-
+		var sinus = Math.sin(event.time * pulse + i);
-		var sinus = Math.sin(event.time *  0.05+ i);
+		var cos = Math.cos(event.time *  pulse + i);
-
+		segment.point.y = sinus * height + 300;
-		// Change the y position of the segment point:
+		segment.point.x = cos * width + 300;
-		segment.point.y = sinus * height + 100;
 	}
-	// Uncomment the following line and run the script again
+
-	// to smooth the path:
+	path.rotate(30);
   path.smooth();
 }
 
-// var copy = path.clone();
+function onMouseDown(event) {
-// copy.fullySelected = true;
+	path.fillColor = 'blue';
-// copy.position.x += 500;
+}
-// copy.smooth();

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

@@ -10,7 +10,6 @@ body{
     height: 50px;
   }
 
-
   #start{
     width: 100%;
     height: calc(100% - 50px);
@@ -113,9 +112,11 @@ body{
         width: 100vw;
         height: 100vh;
         .leaflet-marker-pane{
+          img{ 
             transform: translate(-25px, -25px);
           }
         }
       }
     }
+  }
 }

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

@@ -0,0 +1,5 @@
+{% set grid_size = theme_var('grid-size') %}
+{% set image = page.media.images|first %}
+
+<h2>{{ header.title }}</h2>
+{{ content }}

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

@@ -3,8 +3,8 @@
 {% macro pageLinkName(text) %}{{ text|lower|replace({' ':'_'}) }}{% endmacro %}
 
 {% block body %}
+  <canvas id="canvas" resize hidpi="on" style="background:white"></canvas>
     {% for module in page.collection %}
           {{ module.content }}
-          <canvas id="canvas" resize hidpi="on" style="background:white"></canvas>
     {% endfor %}
   {% endblock %}