Радиальное изменение изображения

@Shuma_256 · Регистрация: 08.02.2016

Студворк — интернет-сервис помощи студентам

Доброго времени суток, форумчане, появился такой вопрос, можно ли как-то сделать радиальную загрузку изображения поверх другого?

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

@northener · 12.01.2017, 03:02

Какого изображения?

@krapotkin · 12.01.2017, 06:44

можно конечно
нужно решить две проблемы
1. перевод исходной картинки в серую
2. обрезание картинки по маске
алгоритм
имеем 3 битмапа
исходный, исходный переведенный в серый, пустой черный
в цикле, от начала до конца перехода
увеличивать радиус R от 0 до макс
рисуем на пустом белый круг радиусом R
накладываем на исходную картинку, обрезая исходник по маске-белому кругу,получаем 4-й битмап
далее на целевую поверхность рисуем полностью серый, потом поверх нее полученный 4-й

повторяя процесс в цикле, получим расширяющийся цветной круг

обрезание по маске, думаю, вам самостоятельно выполнить будет проблематично.
поэтому воспользуйтесь к-нить графической библиотекой
типа vamypre
http://galfar.vevb.net/imaging/doc/imaging.html

но работы все-равно много. а результата мало ))

@Shuma_256 · 12.01.2017, 15:14 **[ТС]**

А можно код посмотреть, а то я не очень в теме графики разбираюсь, от слова совсем

@snake32 · 12.01.2017, 19:30

glSlang
1
2
3
4
5
6
7
8
9
10
11
12
13
#version 330 core
uniform sampler2D tex0; // текстура картинки
uniform vec3 param;   // параметры центра и радиуса
 
in vec2 texcrd;
out vec4 fragcolor;
 
void main(void){
  vec4 color = texture( tex0, texcrd );// считываем пиксель 
  if( distance( param.xy, texcrd ) < param.z )// если расстояние от центра(param.xy) до текущего пикселя(texcrd) меньше радиуса(param.z) то
    color.rgb = vec3(dot( color.rgb, vec3(0.299,0.587,0.114))); // вычисляем серый цвет
  fragcolor = color;
}

Осталось подключить OpenGL и вывести квадрат с текстурой используя выше написанный фрагментный/пиксельный шейдер

@krapotkin · 12.01.2017, 21:06

Сообщение от Shuma_256

не очень в теме графики разбираюсь

значит, это задание пока не для вас

Добавлено через 1 минуту
snake32, я бы с удовольствием прочел какие-нибудь базовые знания про шейдеры
чтобы знать, что и как там вообще устроено
а то никогда не приходилось углубляться в эту тему
то, что попадалось, было довольно проблематичным по объему

@Lirrk · 13.01.2017, 01:58

При чём тут шейдеры? Вы хоть знаете что это такое? К вашей задаче они совсем отношения не имеют. Да и решается она довольно просто, если иметь хотя бы базовые знания по программированию графики. Одно плохо. В GDI всё это может очень медленно работать, зависит от компа. Да. Нужен или Open GL или Direct X. Хотя...
По сути вам нужны две картинки. Изменённая и исходная. Их загружают в свои битмапы. Готовое изображение выводится на третий. Ну и нужен ещё битмап-маска. Нужно сначала рассчитать движение маски по картинке. И по мере движения накладывать на третий битмап изображение или из первого или из второго битмапа. Это в принципе всё. А вообще вы бы лучше сказали зачем вам это всё. Легче было бы посоветовать что-то конкретное.

Добавлено через 5 минут
По поводу Direct X. Есть книга Краснова "Программирование графики в Direct X". Как то-так вроде называется.
Там есть пример проявления одного изображения из другого. То есть маска движется по верхнему изображению и стирает его, а внизу другая картинка которая появляется. Правда нужен и диск к этой книге. Там есть и библиотека Direct X и заголовочные файлы и исходники примеров. По сути это совсем не сложно, если "въехать"

@krapotkin · 13.01.2017, 09:18

Сообщение от Lirrk

GDI всё это может очень медленно работать, зависит от компа

не зависит)
иначе бы я тоже предложил алгоритм попиксельного переноса одной картинки на другую)

@snake32 · 13.01.2017, 13:00

Сообщение от krapotkin

но, что попадалось, было довольно проблематичным по объему

К сожалению, да - с наскока за пару вечеров в ряд ли это возможно. Много подготовительных работ нужно сделать чтобы просто начать экспериментировать с шейдерами. Хотя уже давно есть готовые программы, где остаётся писать только шейдеры(для экспериментов). Всё остальное настраивается в несколько щелчков мыши. Например, RenderMonkey. Она хоть уже устаревшая (OpenGL 2.1), но базовые принципы остались там такими же как и в OpenGL 4.5. Тут я немного описал актуальность версий.

Сообщение от krapotkin

я бы с удовольствием прочел какие-нибудь базовые знания

Пока есть желание, имхо, лучше им воспользоваться. Приглашаю в раздел OpenGL. Не стесняйтесь.

Сообщение от Lirrk

При чём тут шейдеры?

Конечно, вычисления цвета пикселя и фрагментный шейдер вообще никак не связаны

Сообщение от Lirrk

Вы хоть знаете что это такое?

Твой уровень компетентности и одновременно неуважения поражают. Хотя это уже не в первой. И характеризует особую группу лиц...

@snake32 · 21.01.2017, 23:50

Накатал демку с шейдерами

@Fulcrum_013 · 22.01.2017, 00:03

Сообщение от krapotkin

я бы с удовольствием прочел какие-нибудь базовые знания про шейдеры
чтобы знать, что и как там вообще устроено
а то никогда не приходилось углубляться в эту тему
то, что попадалось, было довольно проблематичным по объему

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

@Lirrk · 21.02.2017, 00:08

snake32 То что вы там накатали никакого отношения к шейдерам не имеет.
Не надо путать шейдеры с спецэффектами.
Шейдер, изначально это весьма специфическое модули на графических платах.
И отвечают они за то, как будет выглядеть изображение на экране, а не что на нём будет отображено. Например, чтоб стекло выглядело как стекло, а кирпич, как кирпич. Вначале, на заре развития графических акселераторов, шейдерные модули были пресетами, то есть их нельзя было изменить. А сейчас они программные. И для графических визуализаторах пишут шейдеры, программные модули, которые сами по себе ничего не делают, а содержат список свойств, которые передаются в графический акселератор, или специальный модуль, если визуализация программная.
В текстовых процессорах, тоже есть свои шейдеры, но называются они стили. Есть стили и в вебстраницах. Это тоже шейдеры. Стили есть в Фотошопе. Это тоже шейдеры. Но само название шейдер относится только к 3D графике и программируемым модулям графических процессоров на видиокарте, отвечающих за прорисовку изображения. А рисование замысловатых кривых и всякие игры с цветом это спецэффект.

@snake32 · 21.02.2017, 11:52

Не по теме:

Lirrk, если бы за 6 лет прибывания на этом форуме ты всё-таки научился открывать исходники, то смог заметить, что используется плеяда ф-ий gl*Shader* - прозрачно намекая что твои фантазии не имеют ничего общего с реальностью.

@Matan! · 23.02.2017, 10:00

Сообщение от Lirrk

Не надо путать шейдеры с спецэффектами.
Шейдер, изначально это весьма специфическое модули на графических платах.
И отвечают они за то, как будет выглядеть изображение на экране, а не что на нём будет отображено. Например, чтоб стекло выглядело как стекло, а кирпич, как кирпич. Вначале, на заре развития графических акселераторов, шейдерные модули были пресетами, то есть их нельзя было изменить. А сейчас они программные. И для графических визуализаторах пишут шейдеры, программные модули, которые сами по себе ничего не делают, а содержат список
свойств, которые передаются в графический акселератор, или специальный модуль, если визуализация программная.
В текстовых процессорах, тоже есть свои шейдеры, но называются они стили. Есть стили и в вебстраницах. Это тоже шейдеры. Стили есть в Фотошопе. Это тоже шейдеры. Но само название шейдер относится только к 3D графике и программируемым модулям графических процессоров на видиокарте, отвечающих за прорисовку изображения. А рисование замысловатых кривых и всякие игры с цветом это спецэффект.

Звучит убедительно.. Но как быть с названиями функций и процедур в исходниках компонентов и классов?

Сообщение от Lirrk

зависит от компа

Разве не от версии спецификаций типа OpenGL? Новая версия на старую видеокарту не станет. А вот новая карта со старой спецификацией будут как "новое вино в старой бочке".

@BOGG ART · 17.03.2017, 01:50

Я не понял что требуется.
Анимация? Было ч/б, стало нормальное, так? А что за "радиальную", "поверх другого", "изменение", "по кругу от центра"..?
Хоть нарисовать сможете приблизительно что как куда?

@BOGG ART · 28.03.2017, 15:33

Всё ещё жду...

Новые блоги и статьи Все статьи Все блоги /
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .

@Shuma_256 11 / 9 / 5 Регистрация: 08.02.2016 Сообщений: 189

	Радиальное изменение изображения 12.01.2017, 01:22. Показов 1088. Ответов 15 Метки нет (Все метки) Доброго времени суток, форумчане, появился такой вопрос, можно ли как-то сделать радиальную загрузку изображения поверх другого? Добавлено через 6 минут Вернее сделать радиальное изменение изображения, имею ввиду что бы по кругу от центра происходило изменение, тип картинка была серой, потом начала по кругу становится яркой, как изначально и была 0

@northener пофигист широкого профиля 4769 / 3204 / 862 Регистрация: 15.07.2013 Сообщений: 18,612
	12.01.2017, 03:02
	Какого изображения? 0

@krapotkin 6849 / 4676 / 1464 Регистрация: 14.04.2014 Сообщений: 20,670 Записей в блоге: 21
	12.01.2017, 06:44
	можно конечно нужно решить две проблемы 1. перевод исходной картинки в серую 2. обрезание картинки по маске алгоритм имеем 3 битмапа исходный, исходный переведенный в серый, пустой черный в цикле, от начала до конца перехода увеличивать радиус R от 0 до макс рисуем на пустом белый круг радиусом R накладываем на исходную картинку, обрезая исходник по маске-белому кругу,получаем 4-й битмап далее на целевую поверхность рисуем полностью серый, потом поверх нее полученный 4-й повторяя процесс в цикле, получим расширяющийся цветной круг обрезание по маске, думаю, вам самостоятельно выполнить будет проблематично. поэтому воспользуйтесь к-нить графической библиотекой типа vamypre http://galfar.vevb.net/imaging/doc/imaging.html но работы все-равно много. а результата мало )) 1

@Shuma_256 11 / 9 / 5 Регистрация: 08.02.2016 Сообщений: 189
	12.01.2017, 15:14 [ТС]
	А можно код посмотреть, а то я не очень в теме графики разбираюсь, от слова совсем 0

@Lirrk Заблокирован
	13.01.2017, 01:58
	При чём тут шейдеры? Вы хоть знаете что это такое? К вашей задаче они совсем отношения не имеют. Да и решается она довольно просто, если иметь хотя бы базовые знания по программированию графики. Одно плохо. В GDI всё это может очень медленно работать, зависит от компа. Да. Нужен или Open GL или Direct X. Хотя... По сути вам нужны две картинки. Изменённая и исходная. Их загружают в свои битмапы. Готовое изображение выводится на третий. Ну и нужен ещё битмап-маска. Нужно сначала рассчитать движение маски по картинке. И по мере движения накладывать на третий битмап изображение или из первого или из второго битмапа. Это в принципе всё. А вообще вы бы лучше сказали зачем вам это всё. Легче было бы посоветовать что-то конкретное. Добавлено через 5 минут По поводу Direct X. Есть книга Краснова "Программирование графики в Direct X". Как то-так вроде называется. Там есть пример проявления одного изображения из другого. То есть маска движется по верхнему изображению и стирает его, а внизу другая картинка которая появляется. Правда нужен и диск к этой книге. Там есть и библиотека Direct X и заголовочные файлы и исходники примеров. По сути это совсем не сложно, если "въехать" 1

@Lirrk Заблокирован
	21.02.2017, 00:08
	snake32 То что вы там накатали никакого отношения к шейдерам не имеет. Не надо путать шейдеры с спецэффектами. Шейдер, изначально это весьма специфическое модули на графических платах. И отвечают они за то, как будет выглядеть изображение на экране, а не что на нём будет отображено. Например, чтоб стекло выглядело как стекло, а кирпич, как кирпич. Вначале, на заре развития графических акселераторов, шейдерные модули были пресетами, то есть их нельзя было изменить. А сейчас они программные. И для графических визуализаторах пишут шейдеры, программные модули, которые сами по себе ничего не делают, а содержат список свойств, которые передаются в графический акселератор, или специальный модуль, если визуализация программная. В текстовых процессорах, тоже есть свои шейдеры, но называются они стили. Есть стили и в вебстраницах. Это тоже шейдеры. Стили есть в Фотошопе. Это тоже шейдеры. Но само название шейдер относится только к 3D графике и программируемым модулям графических процессоров на видиокарте, отвечающих за прорисовку изображения. А рисование замысловатых кривых и всякие игры с цветом это спецэффект. 0

@snake32
	21.02.2017, 11:52
	Не по теме: Lirrk, если бы за 6 лет прибывания на этом форуме ты всё-таки научился открывать исходники, то смог заметить, что используется плеяда ф-ий gl*Shader* - прозрачно намекая что твои фантазии не имеют ничего общего с реальностью. 0

@BOGG ART 592 / 459 / 147 Регистрация: 09.12.2013 Сообщений: 2,385 Записей в блоге: 2
	17.03.2017, 01:50
	Я не понял что требуется. Анимация? Было ч/б, стало нормальное, так? А что за "радиальную", "поверх другого", "изменение", "по кругу от центра"..? Хоть нарисовать сможете приблизительно что как куда? 0

@BOGG ART 592 / 459 / 147 Регистрация: 09.12.2013 Сообщений: 2,385 Записей в блоге: 2
	28.03.2017, 15:33
	Всё ещё жду... 0