diff --git a/script/script.js b/script/script.js index b915f02..f7b1e01 100644 --- a/script/script.js +++ b/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(); + + + + +