Математик среди биологов: заметки с тегом векторная графика

Три вэ: векторные модели — визуализатор — веб-страница

Антон Лях — Wed, 24 Sep 2025 22:18:11 +0300

У меня накопилось несколько баз данных с векторными изображениями, Это векторные контуры створок диатомовых водорослей, крючков паразитических червей моногеней и векторные траектории движения динофлагеллят Oxyrrhis marina.

Базы лежат, пыляться и нет никакой нормальной возможности просмотреть их содержимое в онлайне. Отсюда и родилась идея о создании (универсального) веб-приложения для просмотра векторного содержимого баз.

Назвал это проект «Три вэ».

Быстро сформулировал задачу и требования к ней.

Дано: несколько баз данных, содержащих векторные модели форм микроорганизмов, их частей и траекторий движения.

Необходимо: создать веб-приложения для онлайн просмотра векторных моделей.

Требования: базовое приложение имеет унифицированный интерфейс, который позволяет подключать любую из баз данных и предоставляет средства для просмотра моделей.

Получилось очень куцо.

Потом прогнал текст через нейросеть с просьбой добавить деталей.

Оказалось, что за простыми формулировками скрывается несколько неотвеченных вопросов и функций, которые я подразумеваю, но не актуализирую в явном виде.

Ниже — ответ нейросети.

Чтобы сделать требования более четкими и полными, предлагаю структурировать их по следующим категориям:

1. Общие требования

Цель приложения: Разработать веб-приложение для онлайн-просмотра векторных моделей микроорганизмов, хранящихся в нескольких базах данных.
Целевая аудитория: Ученые, исследователи в области микробиологии, студенты (или уточнить).
Ключевые функции:
- Подключение к различным базам данных с векторными моделями.
- Просмотр моделей с минимальным набором функций (например, визуализация, масштабирование, вращение).
- Возможность расширения функциональности (например, добавление аннотаций, фильтров, экспорта).

2. Функциональные требования

Подключение к базам данных:
- Поддержка различных типов баз данных (например, SQL, NoSQL, файлы).
- Унифицированный API или адаптер для подключения новых баз данных без изменения кода приложения.
- Поддержка безопасного подключения (аутентификация, шифрование данных).

Просмотр моделей:
- Визуализация векторных моделей в 2D/3D (указать форматы, например, STL, OBJ, или другие).
- Интерактивные функции: вращение, масштабирование, панорамирование.
- Отображение метаданных моделей (например, название микроорганизма, источник, описание).

Расширяемость:
- Модульная архитектура, позволяющая добавлять новые функции (например, плагины для анализа моделей).
- Поддержка новых форматов данных через конфигурационные файлы или API.

Дополнительные функции (если применимо):
- Фильтрация/поиск моделей по параметрам (например, тип микроорганизма, дата создания).
- Экспорт моделей или их визуализаций (например, в PNG, PDF).

3. Нефункциональные требования

Производительность:
- Поддержка загрузки моделей объемом до [указать объем, например, 100 МБ] за разумное время (например, < 5 секунд).
- Оптимизация для работы с большими наборами данных.

Совместимость:
- Поддержка современных браузеров (например, Chrome, Firefox, Safari, Edge).
- Адаптивный дизайн для работы на десктопах и мобильных устройствах (или уточнить).

Безопасность:
- Защита данных при передаче (например, HTTPS).
- Контроль доступа к базам данных (например, через OAuth или токены).

Масштабируемость:
- Возможность обработки подключения новых баз данных без значительных изменений в архитектуре.

Доступность:
- Поддержка стандартов доступности (например, WCAG 2.1).

4. Технические требования

Технологический стек (рекомендации, если не указан):
- Фронтенд: JavaScript/TypeScript с использованием библиотек для 3D-визуализации (например, Three.js, Babylon.js).
- Бэкенд: Node.js, Python (FastAPI/Flask) или другой фреймворк для работы с базами данных.
- Базы данных: Поддержка SQL (PostgreSQL, MySQL) и/или NoSQL (MongoDB).

Форматы данных:

Указать поддерживаемые форматы векторных моделей (например, STL, OBJ, или специализированные биоинформатические форматы).

API:
- REST или GraphQL для взаимодействия с базами данных.
- Документация API (например, с использованием Swagger/OpenAPI).

5. Ограничения и предположения

Ограничения:
- Сроки разработки (например, 3 месяца).
- Бюджет (если есть).
- Ограничения по поддерживаемым устройствам/браузерам.

Предположения:
- Базы данных имеют стандартные API или доступ через SQL-запросы.
- Пользователи имеют базовые навыки работы с веб-приложениями.

Есть над чем подумать.

Двойная дуга в СВГ пути

Антон Лях — Sat, 05 Aug 2023 16:42:57 +0300

Это короткая техническая заметка о декодировании СВГ тега path.

Я — ретроград и у меня есть Дельфи-библиотека для загрузки СВГ графики. Она хорошо работала до тех пор, пока в теге path не встретился такой набор команд:

... a25.35,25.35,0,0,0-.32,8.58,32.42,32.42,0,0,0,1.53,6.3 ...

По спецификации a — рисует дугу и содержит семь параметров (семь чисел). А здесь их четырнадцать.

Немного подумав, понял, что вторая семерка чисел определяет следующую дугу. То есть без сокращений будет так:

... a25.35,25.35,0,0,0-.32,8.58 a32.42,32.42,0,0,0,1.53,6.3 ...

Учту это правило в библиотеке.

Контуры иконок Чикина

Антон Лях — Fri, 20 Mar 2020 22:19:08 +0300

Сергей Чикин каждый день рисует одну иконку. Еще он делится своими секретами, ведет курс и работает в Бюро, но я сейчас не об этом.

Когда смотришь на иконки Чикина, кажется, что контур — это отдельная линия. Если изменить ее толщину, контур потолстеет или похудеет.

На самом деле контур возникает за счет наложения фигур. Даже снежинка и спираль — это многоугольники без контура.

Для меня это прям открытием стало.

Как построить эллипс по пяти точкам. Плагин для Инкскейпа

Антон Лях — Wed, 28 Jun 2017 19:00:07 +0300

Диатомовые водоросли иногда ложатся полубоком на предметный столик электронного микроскопа.

Thalassiosira proschkinae — крошечная диатомовая из Азовского моря. СЭМ. Наружняя и внутреняя поверхность створки; правая створка деформирована. Фото Е.Д. Бедошвили, А.М. Лях

Такой полуанфас бывает удобен. Он помогает понять геометрию и морфологию кремниевого панциря. Но в данном случае мне надо вернуть створке первоначальную круглую форму, так как сейчас, из-за поворота, она стала эллиптической. Для этого надо найти главные оси эллипса, чтобы понять, как он повернут.

Из аналитической геометрии известно, что любые пять точек плоскости однозначно задают коническое сечение, если никакие три их них не лежат на одной прямой. На Мат.-стакэксченже описан алгоритм построения эллипса по пяти точкам.

Все данные есть. И я уже было собрался писать программу, но нашел плагин для Инкскейпа.

После установки, он доступен в разделе Extensions → Generate from Path → Ellipse by 5 Points.

Плагин преобразует ломаную из пяти точек в эллипс. Если эллипс не получается, плагин ничего не строит. Плагин правильно решает задачу, но эллипс иногда не проходит по границе створки.

Плагин преобразует пятивершинную ломаную линию в эллипс

Допускаю, что при подготовке к микроскопированию створка диатомовых деформируется. Поэтому эллипс не совпадает.

А есть ли такой плагин для Иллюстратора?

Схема расположения фотофор на теле светящихся анчоусов (миктофид)

Антон Лях — Mon, 14 Mar 2016 19:57:03 +0300

Скачать схему расположения фотофор миктофид (АИ, 160 КБ)

Светящиеся анчоусы относятся к семейству Myctophidae. Их еще называют миктофовыми рыбами или миктофидами.

Светящаяся миктофида. © Солвин Занкл

Миктофиды глубоководные рыбы. Они встречаются от поверхности до глубины более 2 км. Рыбы мелкие: от 2 до 25 см длиной, но большинство экземпляров не превышают 15 см. Однако в глубинах океана их так много, что их считают потенциальным объектом промысла. Мясо миктофид вполне съедобно.

После формалина миктофиды похожи на консервированный шпрот, по этой причине из обозвали анчоусами. Фото Вормса

Примечательная особенность миктофид — разбросанные по телу многочисленные светящиеся органы — фотофоры. Это крошечные фонарики. Они светятся за счет химических реакций биолюминесценции и испускают синий, зеленый или желтый свет. Фотофоры помогают миктофидам подсвечивать окружающее пространство и находить вкусных планктонных рачков, узнавать друг друга, общаться и маскироваться.

Подглазничные фотофоры освещают пространство перед рылом рыбы, примерно как на рисунке АннаРхиста

Расположение фотофор уникально у каждого вида. Поэтому ихтиологи используют фотофоры для идентификации миктофид.

Так как фотофор много, исследователи обозначили каждую фотофору и нарисовали схемы-подсказки. Я нашел шесть таких схем.

Определители по фауне СССР. Том 84. Рыбы Японского моря и сопредельных областей Охотского и Желтого морей. Часть 2. Ascipenseriformes-Polynemiformes

FAO fishes identification sheets for fishery purposes. Myctophidae (ПДФ, 0,5 МБ)

Подарок знакомого ихтиолога

Миктофида с Древа жизни

Hygophum hygomii из Википедии

Рисунок из статьи Татсуты с соавторами, 2014

Ни одна мне не подошла и я нарисовал свою.

Скачать схему расположения фотофор миктофид (АИ, 160 КБ)

Схема сделана в Иллюстраторе. В основе изображение самки Benthosema pterotum. Тело, плавники, жаберные крышки, боковая линия и челюсти рыбы — отдельные контуры. Значит на основе рисунка вы сможете изобразить строение любой костной рыбы. Расположение фотофор абстрактно, основано на вышеприведенных изображениях.

Я разрешаю использовать схему для любых целей. Разрешаю вносить правки и приветствую правки, улучшающие восприятие схемы. Я буду рад, если кто-то сделает схему лучше и поделится работой в комментариях.

Готовую схему я сделаю интерактивной и использую в определителе миктофид Мирового океана.

Дополнительное чтение

«Подводная феерия». Ирина Травина рассказала о морской биолюминесценции

Координаты кривых из СВГ файла

Антон Лях — Wed, 30 Dec 2015 19:29:28 +0300

Скачать конвертер

Для работы мне необходимы контуры микроорганизмов, которые я использую для сравнения форм. Я получаю контуры из фотографий, очерчивая объект в векторном редакторе. Программа сохраняет результат в СВГ файле, а мне нужны живые координаты точек. Чтобы получить координаты, я анализирую СВГ файл.

СВГ файл состоит из тегов. Я разберу только один — path, — остальные мне не нужны. Он хранит описание криволинейных и замкнутых траекторий. Траектория — это и есть тот самый контур микроорганизма.

Учим синтаксис тега path

Описание траектории вложено в тег svg. Примерно так:

Заголовок подтверждающий, что это СВГ
<svg>
  <path ... />
</svg>

Тег path содержит один атрибут d с алгоритмом рисования траектории.

<path d="алгоритм рисования" />

Алгоритм состоит из букв-команд и цифр-координат, которые разделенны пробелом, запятой или знаком минус. Траекторию рисует перо, буквы-команды управляют, цифры-координаты показывают куда или как сместить перо, а разделители отделяют одно от другого.

Разделители разделяют

Пробел — это стандартный разделитель. Его можно ставить везде между командами и координатами. Спецификация СВГ разрешает не писать пробел, когда из контекста понятно, что здесь две разные сущности. Это сокращает объем СВГ-файла.

Запомним:

пробел не нужен между командой и числом;
пробел не нужен после запятой;
пробел не нужен перед знаком минус.

Запятая тоже разделяет два числа, но вместо нее можно написать пробел. Что именно написать — дело вкуса.

Следующие три записи эквивалентны, но последняя компактнее.

<path d="M 15 17 L 18 -23 Z" />
<path d="M 15, 17 L 18, -23 Z" />
<path d="M15,17L18-23Z" />

Теперь о цифрах.

Цифры хранят координаты

СВГ предназначен для хранения двумерной графики. Поэтому цифры задают координаты точек на плоскости. Для каждой точки используется два числа — первое для x, второе для y.

Координаты бывают абсолютными и относительными. Абсолютные координаты отсчитываются от нуля, относительные — от конечной точки предыдущей команды. Относительные — это шаг, на который надо сдвинуть перо относительно последней позиции.

Тип координат определяет регистр буквы-команды: большая буква обозначает абсолютную позицию, маленькая — относительную.

Заглавная буква-команда — для абсолютных координат, прописная — для относительных

Точка является десятичным разделителем вещественных чисел. Запись 12,75 — это два числа: 12 и 75, тогда как 12.75 — это одно вещественное число.

Точка — десятичный разделитель, запятая отделяет два числа.

Цифры еще описывают дополнительные параметры команды A, которая рисует дуги.

Буквы управляют пером

Буквы — это команды, которые управляют пером. За каждой командой следуют пары координат, которые показывают, куда сместить перо или как закруглить линию. Тег path использует следующие команды:

M — начать новую траекторию: переместить перо в заданную точку без рисования.
Z — замкнуть траекторию: переместить перо в начальную точку и нарисовать линию.
С, S — нарисовать кубическую кривую Безье.
Q, T — нарисовать квадратную кривую Безье.
L, Н и V — нарисовать произвольную, вертикальную или горизонтальную прямую.
A — нарисовать дугу окружности или эллипса.

Команду A я пропущу, но рассмотрю остальные.

M x y

М или m начинает новую траекторию. Команда перемещает перо в заданную точку и ничего не рисует. Большое М — первая обязательная команда тега path.

<path d="M20 50..." />

Z

Z или z замыкает траекторию — проводит прямую линию от последней позиции пера к первой точке траектории. Регистр буквы не важен. Обычно это последняя команда тега. Если нет, тогда после z опять стоит большое M, которое начинает новую траекторию. Если z не написано, траектория незамкнута.

<path d="M20 50 L 10 10, 140 10, 110 50z" />

<path d="M20 50 L 10 10, 140 10, 110 50z" />

<path d="M20 50 L 10 10, 140 10z M110 50, 80 60, 95 90z" />

L x y

L или l рисует прямую линию от последней позиции пера до заданной точки. Несколько следующих друг за другом команд описывают ломаную. В такой записи, для краткости, все L, кроме первой, не пишут. Если L стоит после M, ее тоже не пишут. Вот так:

<path d="M 70,12 L 24,30 L 60,70 L 120,50" />
<path d="M 70,12 L 24,30 60,70 120,50" />
<path d="M 70,12 24,30 60,70 120,50" />

H x

H или h рисует горизонтальную линию от последней позиции пера до указанной точки. Координата у не меняется.

V x

V или v рисует вертикальную линию от последней позиции пера до указанной точки. Координата x не меняется.

C cx₁ cy₁ cx₂ cy₂ x₂ y₂

С или с строит кубическую кривую Безье. Она состоит из четырех точек: первая и последняя задают начало и конец кривой, две промежуточные управляют формой. Так как первая точка совпадает с текущим положением пера, то после команды C указывают только три точки: две управляющие вершины (cx₁ cy₁), (cx₂ cy₂) и последнюю точку кривой (x₂ y₂).

<path d="M40 50 C 60 10, 90 90, 110 50" />

Поликривая Безье — это несколько соприкасающихся кривых Безье, где конец одной кривой становится началом следующей. Последовательные команды C описывают поликривую. Для экономии байтов все команды, кроме первой C, не пишут.

<path d="M30 100C50 50,70 20,100 100,110 130,45 150,65 100" />

Обычно в месте соприкосновения кривых Безье гладкость поликривой нарушается. Чтобы поликривая оставалась гладкой, используют команду S.

S cx₂ cy₂ x₂ y₂

S или s строит гладкую кубическую кривую Безье так, что ее первая управляющая вершина является зеркальным отражением второй управляющей вершины предыдущей кривой Безье. Отражение относительно начальной точки данной кривой.

Q cx₁ cy₁ x₂ y₂

Q или q строит квадратную кривую Безье. Синтаксис команды аналогичен C, только здесь используется одна управляющая вершина.

Несколько команд Q описывают квадратную поликривую Безье. Для краткости все команды, кроме первой Q, не пишут. Чтобы квадратная поликривая получилась гладкой, используют команду T.

T x₂ y₂

T или t строит гладкую квадратную кривую Безье так, что ее единственная управляющая вершина является зеркальным отражением управляющей вершины предыдущей кривой Безье.

Со структурой файла разобрались.

Пишем конвертер СВГ в текст

Конвертер готов. Это экзешник. Инсталировать не нужно. Сохраните на диск и запустите.

Скачать конвертер

Для описания любого контура достаточно трех команд: M, C и Z. Конвертер понимает еще и четвертую: L, остальные — нет.

Конвертер выбирает из СВГ-файла теги path, вычисляет координаты точек траектории и сохраняет их в текстовом файле.

Конвертер не проверяет валидность СВГ-файла. Ему все равно, какая информация находится вокруг тега path. На вход конвертера можно подать любой мусор с корректными данными только в теге path.

Конвертер поддерживает пропорциональное и произвольное масштабирование координат: перед сохранением он спрашивает размер области, в которую надо вписать траекторию.

Конвертер позволяет задать позицию начала координат: в одном из углов, на середине стороны или в центре прямоугольника, ограничивающего контур.

Конвертер сохраняет в текстовом файле пары чисел — двумерные координаты точек контура. Десятичный разделитель — точка. Числа разделены пробелом.

12.3 15.6 78.4 24.1 15 123

Детали

Конвертер написан на Дельфи 7.

Пары чисел вырезаю из СВГ-файла с помощью регулярного выражения. Понимает числа разделенные пробелом, запятой или минусом.

/(-?\d+(\.\d+)?)[,|\s]?(-?\d+(\.\d+)?)\s?/

Для построения кубической кривой Безье применяю адаптивное разбиение.

Полученные данные анализирую методами геометрической морфометрии. Но это уже другая история.

С Новым годом!