blob+svg_startclone

script/script.js

@@ -1,37 +1,65 @@
+// The amount of segment points we want to create:
+var amount = 3;
+
+// The maximum height of the wave:
+var height = 300;
+
+// Create a new path and style it:
 var path = new Path({
-  fillColor: 'black'
+	// 80% black:
+	strokeColor: [0.8],
+	strokeWidth: 30,
+	strokeCap: 'square'
 });
-var url = 'trame.svg';
-var raster = new Raster(url);
 
-var amount = 3
+var raster = new Raster({
+    source: 'trame.svg',
+    position: view.center
+});
 
-for (var i = 0; i < amount; i++) {
-    raster.position = new Point(300,600) * Point.random(view.size);
-  // var point = new Point(600, 650) * Point.random(view.size);
-  path.add(raster.position);
-  var segment = path.segments[i];
+path.clipMask = true;
+// path.selected = true;
+path.closed = true;
+// path.fullySelected = true;
+
+// 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(700, 700);
+
+    var point = maxPoint * Point.random(view.size) + 70;
+    path.add(point);
+
+	// path.add(new Point(500 / 700) * view.size);
 }
 
-path.closed = true;
-path.fullySelected = true;
-path.clipMask = true;
+// 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++) {
+		var segment = path.segments[i];
+    // A cylic value between -1 and 1
 
-		// A cylic value between -1 and 1
-    for (var i = 0; i <= amount; i++) {
-		var sinus = Math.sin(event.time * 1 + i);
+		var sinus = Math.sin(event.time *  0.05+ i);
 
 		// Change the y position of the segment point:
-		segment.point.y = sinus * 100 + 100;
-    segment.point.x = sinus * 50 + 150;
-
-    path.smooth();
-  }
+		segment.point.y = sinus * height + 500;
+	}
+	// Uncomment the following line and run the script again
+	// to smooth the path:
+  path.smooth();
 }
 
+var copy = path.clone();
+copy.fullySelected = true;
+copy.position.x += 500;
+copy.smooth();
+
+
+
+
+