<canvas width = "600" height = "600" style = "border: 1px solid white"></canvas> <div class = "inputs"> <b>Размер:</b><input onmouseup = "correct()" oninput = "chooseSize()" id = "size" step = "0.1" min = "1" max = "40" value = "3" type = "range"><br> <b>Пушистость:</b><input oninput = "chooseFurry()" id = "furry" min = "0" max = "40" value = "2" type = "range"><br> <b>Количество:</b><input oninput = "chooseCount()" id = "count" min = "0" max = "100" value = "20" type = "range"><br>
Любые два многоугольника с одинаковой площадью равносоставлены. Это значит, что разрезав на части одни многоугольник, из этих частей можно составить другой.
Данный код представляет визуализацию теоремы Бояйи-Гервина, то есть получение из одного многоугольника другого. А именно: из четырёхугольника треугольник.
Данная программа реализует такие операции преобразования фигуры на плоскости как: параллельный перенос, поворот, масштабирование. Дополнительно реализована смена цвета фигуры на случайный.
Файл Demo.html содержит как визуальную часть, так и всё логику программы
Программа реализует операции преобразования фигуры на плоскости, описанные в статье: параллельный перенос, поворот, масштабирование.
1. Файл grapher.html содержит HTML скелет программы: подключение необходимых библиотек, создание canvas'а для рисования и элементов управления графиком.
<!DOCTYPE html5> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="grapher.css"> <script type="text/javascript" src="lib/jquery.min.js"></script> <script type="text/javascript" src="lib/jcanvas.min.js"></script>
Для определённого количества точек, заданных своими координатами, построить кривую, называемую β-сплайном, которая является аппроксимацией неизвестной функции, содержащей исходные точки.
Алгоритм закраски с затравкой
С помощью этого алгоритма можно закрашивать любые замкнутые области.
Суть метода заключается в следующем: мы берём затравочную точку и закрашиваем её. Для каждого незакрашенного соседа мы выполняем аналогичную процедуру. Продолжаем делать это пока не дойдем до границы области.
Алгоритм использует механизмы сглаживания при растеризации линии. При этом ступенчатые выступы на линии становятся менее заметны. Этот эффект достигается следующим образом. На первом шаге для точки, лежащей на линии, вычисляются две ближайшие точки растра. Далее между этими двумя точками распределяется прозрачность(альфа-канал) цвета пиксела пропорционально близости пиксела к линии таким образом, чтобы суммарная яркость была равна единице.
В этом примере используется анимация из компьютерной игры, которая для более плавной анимации использует 7 меняющихся изображений, которые я склеил в одно изображение для удобства, и получилось широкое покадровое изображение.
Используем функцию ,которая анимирует наши спрайты
Провести прямую линию между двумя точками, заданными своими координатами. Использовать растровый алгоритм Брезенхэма.
Задача - нарисовать фрактал "Папоротник Барнсли".
1.Создаем файл fern.html (fern - папоротник), к которому подключаем файл fern.js, содержащий основную часть программы. Также подключаем библиотеки jquery.js и d3.js, содержащие весь необходимый инструментарий.