Кодинг
★ Рубрика: Кодинг

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

На сайте математической направленности безусловно может понадобиться визуализировать двумерную поверхность, построенную для некоторой функции. Пример такой визуализации можно посмотреть вверху. Впечатляет?
Рисунок адаптивный - его размеры подстраиваются под контейнер. Более того, поверхность можно вращать. Попробуйте курсором покрутить в разных направлениях. А еще поверхность можно приближать и удалять (крутите колесико мышки). Есть еще один, очень приятный бонус - картинку можно сохранить. Для этого на изображении нажмите правую кнопку мышки укажите куда сохранить изображение. А теперь детали того, как это все реализовано. Для начала подключаем библиотеку:
Скачать ее вы можете по ссылке здесь. Затем в нужном месте страницы размещаем контейнер для отображения графика:
А дальше скрипт, управляющий настройками отображения и вычисляющий функцию для построения поверхности:
Сделаем некоторые комментарии по настройкам. В нашем примере построена функция, которая определена в строке:
 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
 };
 Похожие публикации: JavaScript, математика

Войти и комментировать [ Вход | Регистрация ]