|
@@ -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 = 300;
|
|
|
+var height = 200;
|
|
|
+var width = 100;
|
|
|
|
|
|
// Create a new path and style it:
|
|
|
var path = new Path({
|
|
|
// 80% black:
|
|
|
- strokeColor: [0.8],
|
|
|
- strokeWidth: 30,
|
|
|
- strokeCap: 'square'
|
|
|
+ // strokeColor: 'black',
|
|
|
+ // strokeWidth: 0,
|
|
|
+ // 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++) {
|
|
|
- var maxPoint = new Point(300, 300);
|
|
|
-
|
|
|
- var point = maxPoint * Point.random(view.size) + 70;
|
|
|
- path.add(point);
|
|
|
-
|
|
|
- // path.add(new Point(500 / 700) * view.size);
|
|
|
+for (var i = 0; i <= amount.length; i++) {
|
|
|
+ var maxPoint = new Point(300, 100);
|
|
|
+ var point = maxPoint * Point.random(view.size);
|
|
|
+ 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; i++) {
|
|
|
+ for (var i = 0; i <= amount.length; i++) {
|
|
|
var segment = path.segments[i];
|
|
|
- // A cylic value between -1 and 1
|
|
|
-
|
|
|
- var sinus = Math.sin(event.time * 0.05+ i);
|
|
|
-
|
|
|
- // Change the y position of the segment point:
|
|
|
- segment.point.y = sinus * height + 100;
|
|
|
+ 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;
|
|
|
}
|
|
|
- // Uncomment the following line and run the script again
|
|
|
- // to smooth the path:
|
|
|
+
|
|
|
+ path.rotate(30);
|
|
|
path.smooth();
|
|
|
}
|
|
|
|
|
|
-// var copy = path.clone();
|
|
|
-// copy.fullySelected = true;
|
|
|
-// copy.position.x += 500;
|
|
|
-// copy.smooth();
|
|
|
+function onMouseDown(event) {
|
|
|
+ path.fillColor = 'blue';
|
|
|
+}
|