114 lines
3.1 KiB
JavaScript
114 lines
3.1 KiB
JavaScript
// 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 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";
|
|
|
|
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(100, 100);
|
|
var point = maxPoint;
|
|
path.add(point);
|
|
}
|
|
|
|
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';
|
|
path2.fillColor = 'blue';
|
|
|
|
path.fillColor = 'black';
|
|
console.log('cc')
|
|
|
|
}
|