Язык программирования:
Javascript
Среда программирования:
JetBrains WebStorm 2016.1.1
<html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <script type="text/javascript" src="paper-full.js"></script> <script type="text/paperscript" canvas="canvas"> // общее количество кругов var count = 150; // создаём экземпляр класса Path.Circle, объекты которого будем использовать дальше var path = new Path.Circle({ center: [0, 0], radius: 10, fillColor: 'blue', strokeColor: 'black' }); // конструкция Symbol(path) позволяет нам создавать объекты path var symbol = new Symbol(path); // размещаем экземпляры символа for (var i = 0; i < count; i++) { var center = Point.random() * view.size; // вычисление начальной позиции var placedSymbol = symbol.place(center); // размещение уже созданного объекта-символа placedSymbol.scale(i / count); // вычисление масштаба относительно номера объекта } // функция onFrame вызывается 60 раз в секунду function onFrame(event) { // идём по списку элементов активного слоя // меняем позиции расположенных символов for (var i = 0; i < count; i++) { var item = project.activeLayer.children[i]; // двигаем круги на 1/20 их ширины, что позволяет // большим кругам двигаться быстрее item.position.x += item.bounds.width / 20; // если объект дошёл до правой границы, смещаем его на левую if (item.bounds.left > view.size.width) { item.position.x = -item.bounds.width; } } for (var i = 0; i <= amount; i++) { // сегменты волн (обращение к массивам точек) var segment = path.segments[i]; var segment1 = path1.segments[i]; var segment2 = path2.segments[i]; // циклическое значение (-1;1) var sinus = Math.sin(event.time*3 + i); // меняем игриковую координату точки сегмента в каждом массиве // меняется по синусоиде segment.point.y = sinus * height + 100; segment1.point.y = sinus * height1 + 200; segment2.point.y = sinus * height2 + 300; } } // общее количество точек var amount = 8; // максимальная высота каждой волны var height = 80; var height1 = 170; var height2 = 260; // создаём новые экземпляры класса Path и задаём свойства var path = new Path({ strokeColor: [0.7], strokeWidth: 30, strokeCap: 'square' }); var path1 = new Path({ strokeColor: [0.7], strokeWidth: 40, strokeCap: 'square' }); var path2 = new Path({ strokeColor: [0.7], strokeWidth: 40, strokeCap: 'square' }); // добавляем те самые точки для сегментирования волны for (var i = 0; i <= amount; i++) { path.add(new Point(i / amount, 1) * view.size); path1.add(new Point(i / amount, 1) * view.size); path2.add(new Point(i / amount, 1) * view.size); } // выбираем наши экземпляры класса path для отрисовки path.selected = true; path1.selected = true; path2.selected = true; </script> </head> <body> <canvas id="canvas" resize stats hidpi="off"></canvas> </body> </html>
| Прикрепленный файл | Размер |
|---|---|
| Sokolova_Waves.zip | 95.43 кб |