1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 |
- // The amount of segment points we want to create:
- var amount = [1, 2, 3, 4, 5];
- var height = 200;
- var width = 100;
- // Create a new path and style it:
- var path = new Path({
- // 80% black:
- // strokeColor: 'black',
- // strokeWidth: 0,
- // strokeCap: 'square'
- });
- var raster = new Raster({
- // source: 'user/themes/r2c/images/trame.svg',
- position: view.center
- });
- // path.clipMask = true;
- // path.selected = true;
- path.closed = 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.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.length; i++) {
- var segment = path.segments[i];
- 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;
- }
- path.rotate(30);
- path.smooth();
- }
- function onMouseDown(event) {
- path.fillColor = 'blue';
- }
|