JavaScript | Soft & Ware

Наша взаимовыгодная связь 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