Рисование пиксельного круга заданной области

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

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

Я знаю о круге Брезенхэма, но он используется для рисования круга определенного радиуса, а не площади.

Я создал анимацию всех процентов заполнения для сетки 10 на 10 пикселей. Поскольку полная площадь составляет 10x10 = 100 пикселей, каждый кадр составляет ровно 1% вкл.

Рисование пиксельного круга заданной области

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

Toady 28.05.2019 15:45

Нужно ли начинать с центра? Можете ли вы показать, что вы считаете самым круглым заполнением, если, скажем, X = 3Y, а площадь заполнена на 25%, 50% и 90%, пожалуйста?

Mark Setchell 28.05.2019 15:52

Что уже пробовал ТЫ? Где ты застрял?

MrSmith42 28.05.2019 17:14

Вероятно, самый простой способ — использовать алгоритм Дейкстры для поиска пикселей в порядке увеличения расстояния от центра.

Matt Timmermans 28.05.2019 17:35

Я не вижу, какое это имеет отношение к дизерингу.

Yves Daoust 28.05.2019 17:48
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
6
488
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Заполненный диск имеет уравнение

(X - Xc)² + (Y - Yc)² ≤ C.

Когда вы увеличиваете C, количество точек, удовлетворяющих уравнению, увеличивается, но из-за симметрии оно увеличивается скачками.

Чтобы получить желаемый эффект заполнения, вы можете вычислить (X - Xc)² + (Y - Yc)² для каждого пикселя, отсортировать по этому значению и позволить пикселям появляться один за другим (или за один раз, если вы знаете желаемое количество пикселей).

Разорвать связи можно разными способами:

  • сохраните исходный порядок, как при вычислении пикселей, используя стабильную сортировку;

  • перетасовывать ряды с одинаковыми значениями;

  • немного изменить координаты центра, чтобы не было связей.


Заполнение трюком с децентрированием.

Значения:

Заказ:

Большое спасибо, это именно то, что я искал.

Alexii 29.05.2019 10:09

Другие вопросы по теме