3D визуализация двумерной функциии

На сайте математической направленности безусловно может понадобиться визуализировать двумерную поверхность, построенную для некоторой функции. Пример такой визуализации можно посмотреть вверху. Впечатляет? Рисунок адаптивный - его размеры подстраиваются под контейнер. Более того, поверхность можно вращать. Попробуйте курсором покрутить в разных направлениях. А еще поверхность можно приближать и удалять (крутите колесико мышки). Есть еще один, очень приятный бонус - картинку можно сохранить. Для этого на изображении нажмите правую кнопку мышки укажите куда сохранить изображение. А теперь детали того, как это все реализовано. Для начала подключаем библиотеку:
<script type="text/javascript" src="vis.min.js"><⁄script> Скачать ее вы можете по ссылке здесь. Затем в нужном месте страницы размещаем контейнер для отображения графика:
<div id="visualization" style="margin-bottom:10px;"><⁄div> А дальше скрипт, управляющий настройками отображения и вычисляющий функцию для построения поверхности:
<script type="text/javascript"> // Create and populate a data table. var data = new vis.DataSet(); // create some nice looking data with sin/cos var counter = 0; var steps = 50; // number of datapoints will be steps*steps var axisMax = 314; var axisStep = axisMax / steps; for (var x = 0; x < axisMax; x+=axisStep) { for (var y = 0; y < axisMax; y+=axisStep) { var value = (Math.sin(x/50) * Math.cos(y/50) * 50 + 50); data.add({id:counter++,x:x,y:y,z:value,style:value}); } } // specify options var options = { width: '100%', height: '552px', style: 'surface', showPerspective: true, showGrid: true, showShadow: false, keepAspectRatio: true, verticalRatio: 0.5 }; // Instantiate our graph object. var container = document.getElementById('visualization'); var graph3d = new vis.Graph3d(container, data, options); <⁄script> Сделаем некоторые комментарии по настройкам. В нашем примере построена функция, которая определена в строке:

 var value = (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);

Число точек для построения поверхности определено здесь:

 var steps = 50; // number of datapoints will be steps*steps
 var axisMax = 314;
 var axisStep = axisMax / steps;

Настройка визуализации:

 var options = {
 width: '100%',
 height: '552px',
 style: 'surface',
 showPerspective: true,
 showGrid: true,
 showShadow: false,
 keepAspectRatio: true,
 verticalRatio: 0.5
 };