Наша взаимовыгодная связь https://banwar.org/
Бібліотека SVGTree, про яку йшла мова в попередньому пості, дозволяє малювати красиві дерева, проте для зручності застосування їй бракує інтерактивності. Не завадила б функціональність, що дозволяє користувачам звертатися з створеними деревами відповідно до таких сценарії використання:
- створення і видалення вершин дерева за допомогою більш зручних засобів, ніж кнопки Insert і Delete (в мобільних пристроях цих кнопок просто немає);
- настройка зовнішнього вигляду дерева (наприклад, форми вершин і ребер);
- перегляд «вихідного коду» дерева в Newick-форматі і, можливо, його безпосереднє редагування (за аналогією з тим, як HTML-редактори начебто TinyMCE надають можливість редагувати вихідний код HTML);
- відкат / повторення вироблених змін (undo / redo).
Оскільки в неінтерактивних випадках використання базової функціональності бібліотеки SVGTree цілком достатньо, нову функціональність логічно виділити в окремий компонент - SVGTreeViewer, що залежить від базової бібліотеки. Компонент являє собою JavaScript-файл і таблицю стилів , Які в стислому вигляді займають близько 15 кілобайт.
Базові приклади використання компонента наведені на цієї веб-сторінці , Ще пара є під катом.
Continue reading
при описі алгоритмів на деревах у мене виникла невелика проблема візуалізації дерев, записаних в Newick-форматі . Для малювання дерев можна використовувати різні десктопні інструменти (наприклад, в LaTeX для цієї мети підходить чудовий пакет TikZ). Виникає питання, чи можна для малювання використовувати веб-технології; результатом моїх тижневих зусиль в цьому напрямку стала невелика JavaScript-бібліотека SVGTree.
Як видно з назви, для малювання в SVGTree використовується один з аспектів HTML5 - масштабована векторна графіка (scalable vector graphics, SVG ). SVG - мова розмітки на основі XML, призначений для відображення векторної графіки; SVG-зображення можна вбудовувати в звичайні HTML-сторінки і динамічно змінювати за допомогою JavaScript. На нинішній час SVG підтримується в достатній мірі всіма основними веб-браузерами: Firefox, Chrome і навіть Internet Explorer 11+. У порівнянні з альтернативними методами, які можна застосувати для відображення дерев, у SVG є кілька переваг:
- Оскільки SVG - стандарт векторної графіки, зображення легко масштабуються; SVG, на відміну від скалярної графіки, яка відображається елементом HTML5 <canvas>, походить для величезних малюнків (близько 10000 × 10000).
- Зовнішній вигляд SVG можна міняти за допомогою таблиць стилів CSS, абсолютно аналогічних таблиць для звичайних HTML-сторінок. Це дозволяє розділити логіку створення базових елементів малюнка і їх відображення.
- До елементів SVG можна звернутися за допомогою JavaScript DOM API майже так само, як до елементів HTML-сторінки. При цьому елементи SVG підтримують базові події (наприклад, click), що спрощує реалізацію інтерактивності.
Бібліотека доступна у вигляді Github-сховища .
Кілька прикладів використання бібліотеки є на цій сторінці , Ще кілька приведено під катом.
Continue reading
Загальний опис сайту і математична теорія тут .
Після того, як визначено спосіб обчислення функції f (за рахунок синтаксичного розбору ), Залишається обчислити «швидкість тікання» P (z, f) для комплексних чисел z, відповідних окремим пікселям зображення. Найбільш простий спосіб обчислень - цикл по всіх пикселям. Фатальний недолік цього методу полягає в тому, що підрахунки займають чимало часу (порядку декількох секунд або десятків секунд), і під час виконання циклу браузер перестає відповідати на зовнішні подразники, що, зрозуміло, неприйнятно. На щастя, для цієї проблеми є рішення - сучасні браузери (Firefox, Chrome, IE 10+) підтримують виконання JavaScript-коду в фонових потоках виконання .
Continue reading
Загальний опис сайту і математична теорія створення фрактальних зображень тут .
Одна з основних завдань, які довелося вирішити в ході створення сайту «Fun with Fractals» , полягає в наступному:
Завдання. На основі зрозумілого для людини опису функції комплексної змінної скласти її уявлення, що дозволяє обчислювати її значення за допомогою JavaScript або WebGL.
Continue reading
сайт Fun with Fractals - невеликий проект, наочно демонструє можливості HTML5 на прикладі фракталів:
- елемент HTML5 <canvas> для малювання ( <Canvas> , HTMLCanvasElement );
- фонові потоки виконання JavaScript для прискорення процесу малювання і позбавлення від «підвисання» браузера;
- WebGL для малювання за допомогою графічного прискорювача замість JavaScript (значно швидше).
В результаті виходять досить гарні картинки:
посилання на сайт 
посилання на сайт 
посилання на сайт
Continue reading
