kevin/r2c
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

blob ok

Browse Source
This commit is contained in:
figureslibres
2018-09-29 02:36:25 +02:00
parent f1176a3546
commit 42bdf94f64
4 changed files with 224 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
user/pages/01._recits/01._preambule/text.md
+1 -1
View File
@@ -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
+120 -26
View File
@@ -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
path.strokeColor = 'black';
path.fillColor = 'grey';
path.fullySelected = true;
// The amount of segment points we want to create:
var amount = [1, 2, 3, 4, 5];
var height = 200;
var width = 500;
// Create a new path and style it:
var x = Math.floor((Math.random() * (100 + 200)));
var y= Math.floor((Math.random() * (100 + 500)));
var start = new paper.Point(x, y);
// Move to start and draw a line from there
path.moveTo(start);
var path = new paper.Path({
fillColor: 'grey',
});
path.blendMode = 'multiply';
path.closed = true;
path.fullySelected = false;
path._reseaux = "facebook";
for (var b = 0; b < 2; b++) {
// origine
var x1 = Math.floor((Math.random() * (200 + 300)));
var y1= Math.floor((Math.random() * (200 + 300)) );
path.lineTo(start.add([ x1, y1 ]));
console.log('path',path);
var path2 = new paper.Path({
fillColor: 'grey',
});
path2.blendMode = 'multiply';
path2.closed = true;
path2.fullySelected = false;
path._reseaux = "twitter";
path.smooth();
path.closed = true;
}
// Draw the view now:
paper.view.draw();
var path3 = new paper.Path({
fillColor: 'grey',
});
path3.blendMode = 'multiply';
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
+99 -38
View File
@@ -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({
// source: 'user/themes/r2c/images/trame.svg',
position: view.center
});
var path = new Path({
fillColor: 'grey',
});
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;
// path.selected = true;
path.closed = true;
path.fullySelected = false;
path.fillColor = 'grey';
// Add 5 segment points to the path spread out
// over the width of the view:
var path3 = new Path({
fillColor: 'grey',
});
path3.blendMode = 'multiply';
path3.closed = true;
path3.fullySelected = false;
path._reseaux = "email";
for (var i = 0; i <= amount.length; i++) {
var maxPoint = new Point(300, 100);
var point = maxPoint * Point.random(view.size);
path.add(point);
var maxPoint = new Point(100, 100);
var point = maxPoint;
path.add(point);
}
// 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.length; i++) {
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;
path2.add(point);
}
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
+3 -2
View File
@@ -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>