Уроки, алгоритмы, программы, примеры

Вход на сайт

Материалы по разделам

Построения
на плоскости (2D)
Графика
в пространстве (3D)
Вычислительная
геометрия
Физическое
моделирование
Фрактальная
графика

Новые комментарии

Спасибо за статью. Я не Ваш студент. Но мне она помогла написать функцию для Канторова множества на Python для черепашки: import turtle def kanter(x, y, d):     if d > 1:         turtle...
Как реализовать в данном примере границы расчёта?

Счетчики и рейтинг

Рейтинг@Mail.ru Яндекс.Метрика
Язык программирования: 
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.zip95.43 кб