|
@@ -395,49 +395,143 @@ function clicklinkmap() {
|
|
|
}
|
|
|
|
|
|
function paperjs() {
|
|
|
+ paper.install(window);
|
|
|
window.onload = function() {
|
|
|
|
|
|
var canvas = document.getElementById('canvas');
|
|
|
|
|
|
paper.setup(canvas);
|
|
|
|
|
|
- for (var a = 0; a < dyn_data.reseauxsociaux.length; a++) {
|
|
|
- var path = new paper.Path();
|
|
|
-
|
|
|
-
|
|
|
- path.strokeColor = 'black';
|
|
|
- path.fillColor = 'grey';
|
|
|
- path.fullySelected = true;
|
|
|
-
|
|
|
- var x = Math.floor((Math.random() * (100 + 200)));
|
|
|
- var y= Math.floor((Math.random() * (100 + 500)));
|
|
|
- var start = new paper.Point(x, y);
|
|
|
-
|
|
|
- path.moveTo(start);
|
|
|
-
|
|
|
- for (var b = 0; b < 2; b++) {
|
|
|
-
|
|
|
- var x1 = Math.floor((Math.random() * (200 + 300)));
|
|
|
- var y1= Math.floor((Math.random() * (200 + 300)) );
|
|
|
- path.lineTo(start.add([ x1, y1 ]));
|
|
|
-
|
|
|
- path.smooth();
|
|
|
- path.closed = true;
|
|
|
- }
|
|
|
-
|
|
|
- paper.view.draw();
|
|
|
|
|
|
+
|
|
|
+ var amount = [1, 2, 3, 4, 5];
|
|
|
+ var height = 200;
|
|
|
+ var width = 500;
|
|
|
+
|
|
|
+
|
|
|
+ var path = new paper.Path({
|
|
|
+ fillColor: 'grey',
|
|
|
+ });
|
|
|
+ path.blendMode = 'multiply';
|
|
|
+ path.closed = true;
|
|
|
+ path.fullySelected = false;
|
|
|
+ path._reseaux = "facebook";
|
|
|
+
|
|
|
+ console.log('path',path);
|
|
|
+ var path2 = new paper.Path({
|
|
|
+ fillColor: 'grey',
|
|
|
+ });
|
|
|
+ path2.blendMode = 'multiply';
|
|
|
+ path2.closed = true;
|
|
|
+ path2.fullySelected = false;
|
|
|
+ path._reseaux = "twitter";
|
|
|
+
|
|
|
+ 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);
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ 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');
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
$(document).ready(function() {
|
|
|
+ paperjs();
|
|
|
+
|
|
|
clicklinkmap();
|
|
|
mCustomScrollbar();
|
|
|
clickhand();
|
|
@@ -445,6 +539,6 @@ $(document).ready(function() {
|
|
|
dragcanvas();
|
|
|
map();
|
|
|
clicklinkmap();
|
|
|
- paperjs();
|
|
|
+
|
|
|
|
|
|
});
|