Сходи.  Вхідна група.  Матеріали.  Двері.  Замки.  Дизайн

Сходи. Вхідна група. Матеріали. Двері. Замки. Дизайн

» Практична робота обробка графічної інформації

Практична робота обробка графічної інформації

Які складнощі у вас виникли? Як їх можна подолати?

2. Побудуйте чорно-білий малюнок шириною 8 пікселів, закодований шістнадцятковою послідовністю 2466FF6624 16 .

3. Побудуйте чорно-білий малюнок шириною 5 пікселів, закодований шістнадцятковою послідовністю 3A53F88 16 .

4. Малюнок розміром 10×15 см кодується з роздільною здатністю 300 ppi. Оцініть кількість пікселів у цьому малюнку. (Відповідь: близько 2 мегапікселів)

5. Побудуйте шістнадцятковий код для кольорів, що мають RGB-коди (100,200,200), (30,50,200), (60,180, 20), (220, 150, 30). (Відповідь: #64C8C8, #1E32C8, #3CB414, #DC961E)

6. Як би ви назвали колір, заданий на веб-сторінці як код: #CCCCCC, #FFCCCC, #CCCCFF, #000066, #FF66FF, #CCFFFF, #992299, #999900, #99FF99? Знайдіть десяткові значення складових RGB-коду. (Ответ: (204,204,204), (255,204,204), (204,204,255), (0,0,102), (255.255,102), (104,255,255), (153,34,153), (153,153,0), (153,255,153))

7. Що таке глибина кольору? Як пов'язані глибина кольору та обсяг файлу?

8. Якою є глибина кольору, якщо в малюнку використовується 65536 кольорів? 256 кольорів? 16 кольорів? (Відповідь: 16 біт; 8 біт; 4 біти)

9. Для жовтого кольору знайдіть червону, зелену та синю складові при 12-бітному кодуванні. (Відповідь: R=G=15, B=0)

10. Скільки місця займає палітра у файлі, де використовуються 64 кольори? 128 кольорів?

11. Скільки байт займатиме код малюнка розміром 40×50 пікселів у справжньому кольорі? при кодуванні з палітрою 256 кольорів? при кодуванні з палітрою 16 кольорів? у чорно-білому варіанті (два кольори)? (Відповідь: 6000, 2000, 1000, 250)

12. Скільки байт займатиме код малюнка розміром 80×100 пікселів у кодуванні із глибиною кольору 12 біт на піксель? (Відповідь: 12000)

13. Для зберігання растрового зображення розміром 32х32 пікселя відвели 512 байтів пам'яті. Якою є максимально можлива кількість кольорів на панелі зображення? (Відповідь: 16)

14. Для зберігання растрового зображення розміром 128 x 128 пікселів відвели 4 кілобайти пам'яті. Якою є максимально можлива кількість кольорів на панелі зображення? (Відповідь: 4)

15. У процесі перетворення растрового графічного файлу кількість кольорів зменшилася з 1024 до 32. У скільки разів зменшився інформаційний обсяг файлу? (Відповідь: у 2 рази)

16. У процесі перетворення растрового графічного файлу кількість кольорів зменшилася з 512 до 8. У скільки разів зменшився інформаційний обсяг файлу? (Відповідь: у 3 рази)

17. Роздільна здатність екрана монітора – 1024 х 768 пікселів, глибина кольору – 16 біт. Який необхідний обсяг відеопам'яті для цього графічного режиму? (Відповідь: 1,5 Мбайт)

18. Після перетворення растрового 256-колірного графічного файлу на чорно-білий формат (2 кольори) його розмір зменшився на 70 байт. Який розмір вихідного файлу? (Відповідь: 80 байт)

19. Скільки пам'яті потрібно для зберігання 64-колірного растрового графічного зображення розміром 32 на 128 пікселів? (Відповідь: 3 Кбайти)

20. Яка ширина (у пікселях) прямокутного 64-колірного невпакованого растрового зображення, що займає на диску 1,5 Мбайт, якщо його висота вдвічі менша за ширину? (Відповідь: 2048)

21. Яка ширина (у пікселях) прямокутного 16-колірного невпакованого растрового зображення, що займає на диску 1 Мбайт, якщо його висота вдвічі більша за ширину? (Відповідь: 1024)

  • Обробка зображень

  • Для початку давайте поміркуємо логічно. Якщо ви робите ресайз зображення, напевно ви хочете, щоб результат хоча б віддалено нагадував оригінал. Для цього потрібно врахувати якнайбільше інформації з вихідного зображення. Ви чули про метод «найближчого сусіда»? У цьому методі кожної точки кінцевого зображення просто береться якась одна точка з вихідного зображення у незмінному вигляді.


    Зменшення зображення 4928×3280 до 256×170 найближчим сусідом.


    Рекомендую дивитися приклади зі статті у браузері в масштабі 100% і без ретини. Тобто максимально виключити ресайз при перегляді.

    Результат не уявляє нічого хорошого. Зображення смикане, зернисте, навіть важко зрозуміти, що на ньому зображено. Особливо якщо на вихідному зображенні було багато дрібних деталей або воно було зернистим. Чому так виходить? Тому що в кінцевому зображенні було враховано мало інформації з вихідного. Якщо умовно відзначити на вихідному зображенні ті точки, які потрапляють у кінцеве, вийде така сіточка:




    Крапки, які потраплять до кінцевого зображення розміром 20×13.

    Тепер візуально можна оцінити, наскільки мало інформації про вихідне зображення потрапляє до кінцевого. Погодьтеся, малоймовірно, що саме по цій сіточці розташовуватимуться пікселі, які дадуть гарне уявлення про зображення на вихідній картинці.


    Зовсім інший результат дає, наприклад, ресайз за допомогою пакунків. У ньому кожен піксель вихідного зображення робить внесок у кінцеве, та ще й не раз. Тому зображення виходить плавним, а при виборі хорошого фільтра чітким.



    Зменшення з 4928 3280 до 256 170 згортками з бікубічним фільтром.


    Проте метод «найближчого сусіда» має одну незаперечну перевагу: він працює за константний час щодо розміру вихідного зображення. Це означає, що байдуже, яке велике чи маленьке було вихідне зображення, час зменшення до певного розміру буде однаковим. Я наводитиму приклади на Пітоні з бібліотекою Pillow, але ви можете отримати майже такий же результат за допомогою будь-якої мови та бібліотек.


    >>> з PIL import Image >>> im = Image.open("pineapple.jpeg"); im.load(); im.size (2560, 1600) >>> %time im.resize((256, 170), Image.NEAREST) ​​Wall time: 0.35 ms >>> im = Image.open("space.jpeg"); im.load(); im.size (4928, 3280) >>> %time im.resize((256, 170), Image.NEAREST) ​​Wall time: 0.44 ms
    Насправді час не зовсім константний, оскільки втручаються різні фактори на кшталт кешів процесора і локальності даних, але навіть для в 4 рази більшого вихідного зображення ми отримали уповільнення лише на 23%.

    Швидкість згорток, навпаки, лінійно падає зі збільшенням вихідного зображення.


    >>> з PIL import Image >>> im = Image.open("pineapple.jpeg"); im.load(); im.size (2560, 1600) >>> %time im.resize((256, 170), Image.BICUBIC) Wall time: 33.2 ms >>> im = Image.open("space.jpeg"); im.load(); im.size (4928, 3280) >>> %time im.resize((256, 170), Image.BICUBIC) Wall time: 130 ms

    Для в 4 рази більшого вихідного зображення час також збільшився в 4 рази.

    Фіксоване ядро

    Деякі програми та бібліотеки для роботи з графікою користуються такою хитрістю: вони хіба що використовують для ресайзу ті ж фільтри, що і при ресайзі згортками (бувають, наприклад, білінійний, бікубічний та фільтр Ланцош), але при зменшенні зображення не збільшують ядро ​​фільтра адаптивно. В результаті для побудови будь-якої точки кінцевого зображення використовується лише 4 пікселі вихідного зображення при білінійному фільтрі, при бікубічному - 16, з 3-лобовим фільтром Ланцоша - 36. Тобто час роботи також виходить константним щодо вихідного розміру.


    Ось тільки такий підхід працює для зменшення приблизно до 2 разів, а далі результат мало чим відрізняється від найближчого сусіда.



    З 4928×3280 до 256×170 з білінійним фільтром з фіксованим ядром.


    І кажучи «мало чим відрізняється від „найближчого сусіда“» я маю на увазі не тільки те, що він такий самий рваний і зернистий, я маю на увазі, що він майже збігається з результатом «найближчого сусіда». Відкрийте обидві картинки в сусідніх вкладках браузера і перемикайте між ними, картинки майже збігаються. Може навіть здатися, що десь помилка, що так не повинно бути, тому що з фіксованим ядром інтерполується 4 пікселі, а не тупо береться перший-ліпший, і результат повинен бути ближче до оригіналу. Але помилки тут немає і ось чому:



    Точки, які інтерполюватимуться при зменшенні до 20×13.


    Це точки вихідного зображення, якими будується кінцеве. Їх побільшало в 4 рази, але вони розташовані все в тих же місцях, що й за методом найближчого сусіда. Тобто, швидше за все, ми не отримаємо нової інформації про зображення. Можна спробувати ще збільшити кількість точок вихідного зображення, що беруть участь у процесі, застосувавши бікубічний фільтр, але результат знову буде майже таким самим і навіть ще трохи більш рванимтому, що в бікубічному фільтрі крайні пікселі беруться з негативними коефіцієнтами.



    З 4928×3280 256×170 з бікубічним фільтром з фіксованим ядром.


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


    >>> im = Image.open("space.jpeg"); im.load(); im.size (4928, 3280) # Найближчий сусід >>> %time im.resize((256, 170), Image.NEAREST) ​​Wall time: 0.441 ms # Білінійне фіксоване ядро ​​>>> %time im.transform((256) , 170), Image.AFFINE, (im.width / 256, 0, 0, 0, im.height / 170, 0), Image.BILINEAR) Wall time: 3.62 ms # Бікубічне фіксоване ядро ​​>>> %time im. transform((256, 170), Image.AFFINE, (im.width / 256, 0, 0, 0, im.height / 170, 0), Image.BICUBIC) Wall time: 9.21 ms

    Тут я симулював ресайз із фіксованим ядром за допомогою афінних перетворень. Але деякі програми та бібліотеки правда роблять це: використовують для зменшення більш дорогі фільтри, результат яких майже дорівнює методу найближчого сусіда. Так робить OpenCV, так роблять, так роблять відеокарти при текстуруванні без mip-рівнів. Тому що хоч час і більший, але він константний щодо дозволу вихідного зображення. Ну а якість? Для якості є пакунки.

    Як виправити

    Ви напевно думаєте, для чого я взагалі вам це все розповідаю, все ж таки ясно: якщо потрібна швидкість - потрібно брати «сусіда» або фіксоване ядро, якщо якість - згортки. А річ у тому, що, виявляється, зменшення з фіксованим ядром можна виправити так, що його результат буде радикально кращим. Настільки краще, що можливо, для ваших завдань, цього виявиться достатньо і не знадобляться пакунки. Причому складність не просто буде константою щодо розміру вихідного зображення, це буде та сама константащо і при використанні фіксованого ядра.



    Результат ресайзу 4928×3280 у 256×170 за константний час.


    Як бачите, результат цього алгоритму не йде в жодне порівняння з різнобарвною розмазнею, що виходить після «найближчого сусіда» або фіксованого ядра. Для прикладів до цієї статті я навмисно взяв досить велику картинку з дрібною сіткою, з великою кількістю деталей (погляньте на відображення в шоломі астронавта) і дуже зменшую її. Я зробив усе можливе, щоб на результаті вилізло якнайбільше артефактів, але алгоритм все одно справляється! Коли я вперше дізнався про цей метод від , подумав, що метод швидше за все дає лише незначне покращення порівняно з фіксованим ядром, адже кількість задіяних пікселів така ж. Але результат сильно перевершив мої очікування.


    Секрет у тому, щоб брати для обробки не крапки, що нудьгували по 4 штуки, як при фіксованому ядрі, а використовувати рівномірну сітку в 2 рази більшого дозволу, ніж має вийти в результаті. І з неї вже інтерполювати кінцеве зображення.



    Точки, які використовуватимуться при зменшенні до 20×13.


    Як бачите, досі береться досить мало точок вихідного зображення. Але через те, що вони розподілені поступово, вони більш репрезентативні. А через те, що їх рівно в 4 рази більше, всі вони роблять однаковий внесок у кінцеве зображення.


    А тепер найцікавіше: для використання цього методу нічого не потрібно програмувати! Все, що потрібно у вас вже є. Першим кроком можна зробити рівномірну сітку пікселів у 2 рази більшого дозволу методом «найближчого сусіда», а на другому кроці стиснути її в 2 рази хоч фіксованим фільтром, хоч згортками, хоч бокс-фільтром (дивлячись що є у вашій бібліотеці). Єдине, для пакунків я б порадив брати фільтр Хеммінга або бікубічний, але не білінійний.


    >>> im = Image.open("space.jpeg"); im.load(); im.size (4928, 3280) # Приклад з не адаптивним ядром >>> %time im.resize((512, 340), Image.NEAREST)\ .transform((256, 170), Image.AFFINE, (2, 0, 0, 0, 2, 0), Image.BILINEAR) Wall time: 3.59 ms # Приклад з пакунками та фільтром Хеммінга >>> %time im.resize((512, 340), Image.NEAREST)\ .resize( (256, 170), Image.HAMMING) Wall time: 2.42 ms # Приклад з пакунками та бікубічним фільтром >>> %time im.resize((512, 340), Image.NEAREST)\ .resize((256, 170) , Image.BICUBIC) Wall time: 3.53 ms # Приклад з бокс-фільтром # Результат буде трохи відрізнятися, тому що в OpenCV # є помилка з точністю роботи INTER_NEAREST # див. https://github.com/opencv/opencv/issues/ 9096 >>> import cv2 >>> im = cv2.imread("space.jpeg") >>> %time cv2.resize(cv2.resize(im, (512, 340), interpolation=cv2.INTER_NEAREST), ( 256, 170), interpolation = cv2.INTER_AREA) Wall time: 0.81 ms

    Подальший розвиток ідеї

    Це покращення вражає, але можна не зупинятися на досягнутому. Хто сказав, що для побудови потрібно використовувати саме вдвічі більше зображення? Чому б не взяти в 3 рази чи 4 для кращої якості. Правда неможливо буде використовувати ресайз з фіксованим ядром для другого кроку, тому що вилізуть ті ж проблеми, яких ми намагаємося позбутися. А ось пакунки – будь ласка. При цьому час залишиться константним, просто константа буде більшою.



    Ресайз з 4928×3280 до 256×170 використовуючи 2x і 4x проміжні зображення.


    Можливо, на такому масштабі відмінності не дуже помітні, але вони досить сильні. Щоб їх помітити, подивіться гіфку із зумом:



    Ну і час:


    >>> im = Image.open("space.jpeg"); im.load(); im.size (4928, 3280) # Приклад з 2x проміжним зображенням >>> %time im.resize((512, 340), Image.NEAREST)\ .resize((256, 170), Image.BICUBIC) Wall time: 3.53 ms # Приклад з 3x проміжним зображенням >>> %time im.resize((768, 510), Image.NEAREST)\ .resize((256, 170), Image.BICUBIC) Wall time: 6.27 ms # Приклад з 4x проміжним зображенням >>> %time im.resize((1024, 680), Image.NEAREST)\ .resize((256, 170), Image.BICUBIC) Wall time: 9.23 ms

    Як видно, варіант з 2x проміжним зображенням працює за час, приблизно дорівнює білінійному фільтру з фіксованим ядром, а варіант з 4x проміжним зображенням за час бікубічного. Ну і взагалі кажучи, можна використовувати не цілу кількість точок.

    Як зробити правильний вибір

    Виникає питання: якщо цей метод дає настільки кращі результати та працює зі швидкістю фіксованого ядра, навіщо взагалі використовувати фіксоване ядро ​​для зменшення? У цього методу звичайно є область застосування - його краще не використовувати при зменшенні менше ніж у 2 рази. І це збігається з межею застосування фіксованого ядра, яке краще не використовувати при зменшенні більше ніж у 2 рази. Виходить, комбінуючи методи, можна отримати ресайз прийнятної якості за фіксований час за будь-якого масштабу.

    Важливе доповнення

    У коментарях правильно вказує, що цей спосіб правильно називати суперсемплінгом. Суперсемплінг часто використовується в іграх для усунення аліасингу. По суті, ігрова сцена - це зображення нескінченного дозволу, тому що ми могли б відмалювати її в будь-якій роздільній здатності. Для суперсемплінгу сцена малюється у більшій роздільній здатності ніж потрібно і кілька сусідніх пікселів усереднюються в один. Тобто аналогія повна. Але це не скасовує факту, що такий метод дуже рідко застосовується в ПЗ, незважаючи на його переваги.

    Приклади

    І насамкінець кілька прикладів з іншими зображеннями. Зліва направо:
    1) фіксоване ядро, білінійний фільтр (те, що багато хто використовують зараз)
    2) бікубічні згортки як зразок
    3) суперсемплінг з 2x збільшенням
    4) суперсемплінг із 4x збільшенням


    Головне при перегляді пам'ятати, що третє зображення генерується за такий самий час, що й перше, а четверте хоч і довше в ≈3 рази, але теж за константний час і часто до 20 разів швидше, ніж друге.

    Зменшене у 15,625 разів.


    Зображення 2448×3264 зменшене 9,5625 разів.


    Зображення 2000×2000 зменшене 7,8125 разів.

    Я за освітою програміст, але по роботі мені довелося мати справу з обробкою зображень. І тут для мене відкрився дивовижний і незвіданий світ колірних просторів. Не думаю, що дизайнери та фотографи дізнаються для себе щось нове, але, можливо, комусь це знання виявиться, як мінімум корисно, а в кращому разі цікаво.

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

    Найбільш популярними на сьогоднішній день є такі колірні моделі: RGB (використовується в основному в моніторах та камерах), CMY(K) (використовується в поліграфії), HSI (широко використовується в машинному зорі та дизайні). Існує багато інших моделей. Наприклад, CIE XYZ (стандартні моделі), YCbCr та ін. Далі подано короткий огляд цих колірних моделей.

    Колірний куб RGB

    Із закону Грассмана виникає ідея адитивної (тобто заснованої на змішуванні кольорів від безпосередньо випромінюючих об'єктів) моделі відтворення кольорів. Вперше подібна модель була запропонована Джеймсом Максвеллом у 1861 році, але найбільшого поширення вона набула значно пізніше.

    У моделі RGB (від англ. Red – червоний, green – зелений, blue – блакитний) усі кольори виходять шляхом змішування трьох базових (червоного, зеленого та синього) кольорів у різних пропорціях. Частка кожного базового кольору в підсумковому може сприйматися як координата у відповідному тривимірному просторі, тому цю модель часто називають колірним кубом. Рис. 1 представлена ​​модель колірного куба.

    Найчастіше модель будується так, щоб куб був поодиноким. Крапки, що відповідають базовим кольорам, розташовані у вершинах куба, що лежать на осях: червоний – (1; 0; 0), зелений – (0; 1; 0), синій – (0; 0; 1). При цьому вторинні кольори (отримані змішанням двох базових) розташовані в інших вершинах куба: блакитний - (0; 1; 1), пурпуровий - (1; 0; 1) і жовтий - (1; 1; 0). Чорний і білі кольори розташовані на початку координат (0; 0; 0) і найбільш віддаленої від початку координат точці (1; 1; 1). Мал. показує лише вершини куба.

    Кольорові зображення моделі RGB будуються з трьох окремих зображень-каналів. У Табл. показано розкладання вихідного зображення на колірні канали.

    У моделі RGB для кожної складової кольору приділяється певна кількість біт, наприклад, якщо для кодування кожної складової відводити 1 байт, то за допомогою цієї моделі можна закодувати 2^(3*8)≈16 млн. кольорів. Насправді таке кодування надмірно, т.к. більшість людей не здатна розрізнити таку кількість кольорів. Часто обмежуються т.зв. режимом «High Color» у якому кодування кожної компоненти відводиться 5 біт. У деяких додатках використовують 16-бітний режим у якому кодування R і B складових відводиться по 5 біт, а на кодування G складової 6 біт. Цей режим, по-перше, враховує вищу чутливість людини до зеленого кольору, а по-друге, дозволяє ефективніше використовувати особливості архітектури ЕОМ. Кількість біт, що відводяться на кодування одного пікселя, називається глибиною кольору. У Табл. наведено приклади кодування того самого зображення з різною глибиною кольору.

    Субтрактивні моделі CMY та CMYK

    Субтрактивна модель CMY (від англ. cyan – блакитний, magenta – пурпуровий, yellow – жовтий) використовується для отримання твердих копій (друку) зображень, і до певної міри є антиподом кольорового RGB-куба. Якщо RGB моделі базові кольори – це кольори джерел світла, то модель CMY – це модель поглинання кольорів.

    Наприклад, папір, покритий жовтим барвником не відбиває синє світло, тобто. можна сказати, що жовтий барвник віднімає з відбитого білого світла синій. Аналогічно блакитний барвник віднімає з відбитого світла червоний, а пурпуровий барвник віднімає зелений. Саме тому цю модель прийнято називати субтрактивною. Алгоритм перекладу з моделі RGB до моделі CMY дуже простий:

    При цьому передбачається, що RGB кольори знаходяться в інтервалі . Легко помітити, що для отримання чорного кольору моделі CMY необхідно змішати блакитний, пурпуровий і жовтий в рівних пропорціях. Цей метод має два серйозні недоліки: по-перше, отриманий в результаті змішування чорний колір виглядатиме світліше «справжнього» чорного, по-друге, це призводить до суттєвих витрат барвника. Тому на практиці модель СMY розширюють до моделі CMYK, додаючи до трьох кольорів чорний (black).

    Колір тон, насиченість, інтенсивність (HSI)

    Розглянуті раніше колірні моделі RGB і CMY(K) дуже прості щодо апаратної реалізації, але вони мають один істотний недолік. Людині дуже важко оперувати квітами, заданими цих моделях, т.к. людина, описуючи кольори, користується не змістом в описуваному кольорі базових складових, а іншими категоріями.

    Найчастіше люди оперують такими поняттями: колірний тон, насиченість та світло. При цьому, говорячи про колірний тон, зазвичай мають на увазі саме колір. Насиченість показує, наскільки описуваний колір розбавлений білим (рожевий, наприклад, це суміш червоного та білого). Поняття світло найбільш складно для опису, і з деякими припущеннями під світлом можна розуміти інтенсивність світла.

    Якщо розглянути проекцію RGB-куба у напрямку діагоналі білий-чорний, то вийде шестикутник:

    Усі сірі кольори (що лежать на діагоналі куба) при цьому проектуються у центральну точку. Щоб за допомогою цієї моделі можна було закодувати всі кольори, доступні в RGB-моделі, необхідно додати вертикальну вісь світла (або інтенсивності) (I). У результаті виходить шестигранний конус:

    При цьому тон (H) задається кутом щодо осі червоного кольору, насиченість (S) характеризує чистоту кольору (1 означає чистий колір, а 0 відповідає відтінку сірого). Важливо розуміти, що тон та насиченість не визначені за нульової інтенсивності.

    Алгоритм перекладу з RGB HSI можна виконати, скориставшись такими формулами:

    Колірна модель HSI дуже популярна серед дизайнерів та художників, т.к. у цій системі забезпечується безпосередній контроль тону, насиченості та яскравості. Ці властивості роблять цю модель дуже популярною в системах машинного зору. У Табл. показано зміну зображення при збільшенні та зменшенні інтенсивності, тону (виконується поворот на ±50°) та насиченості.

    Модель CIE XYZ

    З метою уніфікації було розроблено міжнародну стандартну колірну модель. В результаті серії експериментів міжнародна комісія з висвітлення (CIE) визначила криві додавання основних (червоного, зеленого та синього) кольорів. У цій системі кожному видимому кольору відповідає певне співвідношення основних кольорів. При цьому, для того, щоб розроблена модель могла відображати всі видимі людиною кольори, довелося ввести негативну кількість базових кольорів. Щоб уникнути негативних значень CIE, ввела т.зв. нереальні або уявні основні кольори: X (уявний червоний), Y (уявний зелений), Z (уявний синій).

    При описі кольору значення X, Y, Z називають стандартними основними збудженнями, а отримані на основі координати – стандартними колірними координатами. Стандартні криві додавання X(λ),Y(λ),Z(λ) (див. мал.) описують чутливість середньостатистичного спостерігача до стандартних збуджень:

    Крім стандартних колірних координат, часто використовують поняття відносних колірних координат, які можна обчислити за такими формулами:

    Легко помітити, що x+y+z=1, а це означає, що для однозначного завдання відносних координат достатньо будь-якої пари значень, а відповідний колірний простір може бути представлений у вигляді двовимірного графіка:

    Багато кольорів, що задається таким способом, називають трикутником CIE.
    Легко помітити, що трикутник CIE описує лише тон кольору, але ніяк не описує яскравість. Для опису яскравості вводять додаткову вісь, яка проходить через точку з координатами (1/3;1/3) (т.зв. точку білого). В результаті одержують колірне тіло CIE (див. Мал.):

    Це тіло містить усі кольори, видимі середньостатистичним спостерігачем. Основним недоліком цієї системи є те, що використовуючи її, ми можемо констатувати тільки збіг або відмінність двох кольорів, але відстань між двома точками цього кольору не відповідає зоровому сприйняттю відмінності кольорів.

    Модель CIELAB

    Основною метою розробки CIELAB було усунення нелінійності системи CIE XYZ з погляду людського сприйняття. Під абревіатурою LAB зазвичай розуміється колірний простір CIE L*a*b*, який є міжнародним стандартом.

    У системі CIE L*a*b координата L означає світлоту (в діапазоні від 0 до 100), а координати a,b – означають позицію між зеленим-пурпурним і синім-жовтим кольорами. Формули для перекладу координат з CIE XYZ до CIE L*a*b* наведені нижче:


    де (Xn, Yn, Zn) – координати точки білого у просторі CIE XYZ, а


    Рис. представлені зрізи колірного тіла CIE L*a*b* для двох значень світлоти:

    Порівняно з системою CIE XYZ Евклідова відстань (√((L1-L2)^2+(a1^*-a2^*)^2+(b1^*-b2^*)^2)) у системі CIE L*a *b* значно краще відповідає колірному відмінності, сприйманому людиною, проте стандартною формулою колірної відмінності є надзвичайно складна CIEDE2000.

    Телевізійні кольорові системи

    У колірних системах YIQ і YUV інформація про колір подається у вигляді сигналу яскравості (Y) і двох кольорових сигналів (IQ і UV відповідно).

    Популярність цих колірних систем обумовлена ​​насамперед появою кольорового телебачення. Т.к. компонента Y насправді містить вихідне зображення в градаціях сірого, сигнал у системі YIQ міг бути прийнятий і коректно відображений як на старих чорно-білих телевізорах, так і на нових кольорових.

    Другим, можливо важливішим плюсом, цих просторів є поділ інформації про колір та яскравість зображення. Справа в тому, що людське око дуже чутливе до зміни яскравості, і значно менш чутливе до зміни кольоровості. Це дозволяє передавати та зберігати інформацію про кольоровість зі зниженою глибиною. Саме на цій особливості людського ока побудовані найпопулярніші на сьогоднішній день алгоритми стиснення зображень (в т.ч. jpeg). Для перекладу з простору RGB YIQ можна скористатися такими формулами:

    Цілі уроку:

    Освітня:

    • відпрацювання навичок роботи з графічним редактором;
    • повторення та закріплення навичок уміння працювати з інструментами - "копіювання", "вставка";
    • навчити складати малюнок, використовуючи кілька однакових фрагментів малюнка;
    • познайомити учнів із новою командою Відобразити/Повернути.

    Розвиваюча:

    • розвивати пізнавальний інтерес, творчу активність учнів;
    • розвивати навички роботи на комп'ютері, розвивати дружнє та ділове спілкування учнів у спільній роботі.

    Виховна:

    • виховувати інтерес до предмета, акуратність, уважність, дисциплінованість.

    Завдання уроку:

    • продовжити роботу з вироблення умінь користуватися графічним редактором;
    • формувати навички роботи за ПК з програмним продуктом Paint;
    • формувати вміння правильно та грамотно висловлювати свої думки.

    Тип уроку: Вивчення нового матеріалу.

    Обладнання: ПК, програмне забезпечення – графічний редактор Paint, проектор, екран, картки з питаннями, картки з алгоритмом виконання практичної роботи, буклети.

    Форми: колективна, групова.

    Види роботи: бесіда, робота з матеріалом, робота за ПК.

    Етапи уроку:

    • Організаційний матеріал.
    • Постановка мети уроку.
    • Актуалізація знань:
      • фронтальне опитування
      • робота з роздавальним матеріалом
    • Вивчення нового матеріалу:
      • елементи, що повторюють (команда Правка – Копіювати)
      • Велики і карлики (Розтягування та стиск)
      • Нахил, відображення та поворот
      • Фізкультхвилинка
    • Первинне закріплення вивченого (практична робота)
      • робота за ПК, використовуючи картки з алгоритмом виконання роботи
    • Постановка домашнього завдання.
    • Підбиття підсумків уроку.
      • що нового сьогодні впізнали?
      • оцінки за урок.

    Хід уроку:

    I. Організаційний момент.

    ІІ. Постановка мети уроку

    – Здрастуйте, хлопці, сідайте. Отже, ми розпочинаємо урок. Скажіть чим ми з вами займалися на минулому уроці?

    Минулого уроку ми познайомилися з графічним редактором Paint. Малювали малюнки, використовуючи об'єкти на панелі інструментів.

    - Так правильно. Але виявляється, що над малюнком можна виконувати будь-які дії. Подумайте та скажіть, які дії можна виконувати над малюнком?

    Малюнок можна копіювати, вставляти, змінювати розміри малюнка, тобто. збільшувати чи зменшувати.

    - Правильно. Але ви назвали лише частину дій, які можна робити над малюнком. Ще малюнок можна повертати, нахиляти, відбивати. А яким словом можна назвати ці дії?

    Всі ці дії можна назвати словом перетворення.

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

    Тема нашого уроку "Перетворення малюнка".

    – Так, тема нашого уроку „Графічний редактор Paint: перетворення малюнка”. Сьогодні під час уроку ми з вами навчимося перетворювати малюнки, тобто. змінювати розміри малюнка, копіювати, повертати, нахиляти. Потім ви виконаєте невелику практичну роботу. Але спочатку ми з вами згадаємо матеріал, вивчений на минулому уроці.

    ІІІ. Актуалізація знань.

    1. Фронтальне опитування.

    • Зараз я вам показуватиму картки з зображеним інструментом, а ви називатимете його і говоритимете, для чого він призначений.
    • Чим відрізняється довільне виділення фрагмента прямокутного?
    • Чим відрізняється виділення з фоном від виділення без фону?
    • Як у графічному редакторі намалювати квадрат та коло?

    2. Робота з роздавальним матеріалом.

    Робота у парах на картках.

    1. Закінчіть пропозицію:

    Графічний редактор – це …

    А) пристрій для створення та редагування малюнків;

    Б) програма для створення та редагування малюнків;

    В) програма для створення та редагування текстових документів;

    Г) пристрій друку зображень на папері.

    2. Підпишіть кнопки панелі інструментів:

    3. Визначити, що вийде внаслідок виконання таких дій:

    • встановити основний колір жовтий;
    • Вибрати інструмент Овал та налаштувати його на 3-й режим заповнення;
    • Утримуючи Shift, намалювати коло;
    • Вибрати інструмент Лінія і налаштувати його на малювання жирних ліній;
    • Утримуючи клавішу Shift, зобразити відрізки, що виходять із центру жовтого кола.

    IV. Вивчення нового матеріалу.

    1. Повторюючі елементи (команда Правка – Копіювати)

    - Хлопці, подивіться, будь ласка, на екран. Що ви бачите?<Додаток 1 >

    Гілочки різних рослин: горобина, виноград і т.д..

    - Та правильно. На екрані зображені гілочки рослин. А тепер подумайте і скажіть, що є спільного у всіх цих гілочок?

    Кожна гілочка складається з якихось деталей, що повторюються: листя, ягід.

    - Правильно. А де ще можна зустріти повторювані елементи?

    Різні геометричні побудови, споруди.

    – Таким чином, можна зробити висновок, що повторювані елементи можна побачити не тільки в геометричних побудовах, а й у навколишньому світі. Подивіться довкола себе. Листя на деревах, ягоди, плоди – це все повторення, створені природою. Житлові будинки, автомобілі, створені людиною, при всьому їх різноманітті також мають елементи, що повторюються. (Демонстрація слайдів із зображеннями ягід, плодів, дерев тощо).А у творчості ми можемо зустріти повторювані об'єкти?

    У малюнках, зображеннях.

    - Правильно. Фрагмент, що повторюється, може стати основою художньої композиції. Давайте розглянемо гілочку горобини. (Демонстрація слайду із зображенням гілочки горобини).Щоб намалювати її, потрібно зробити заготівлю лише однієї ягоди, а потім скласти з копій гроно. Листя також отримане з одного маленького листка. Але як розмістити листя у різних напрямках? Вони мають бути однакові, але абсолютно однакові об'єкти намалювати неможливо. А в даному випадку вони повинні бути не тільки однаковими, але і їх потрібно розташувати симетрично щодо гілки. Виявляється, виділений фрагмент можна повернути або створити його дзеркальне відображення (Відобразити). Ці можливості забезпечуються спеціальною командою Відобразити – Повернутиз меню Малюнок. На малюнку показано листя, отримані з одного аркуша за допомогою команд відображення та повороту. Під час вибору цієї команди з'являється вікно діалогу. (Показати слайд із зображенням цього діалогового вікна).Подивіться, як виконуються ці команди малюнку. (Наступний слайд - "приклади виконання команд відображення та повороту").

    Давайте запишемо у зошитах тему уроку, яку ви самі сформулювали: “Графічний редактор Paint: перетворення рисунка”.

    Згадайте, де у повсякденному житті можна побачити відображення зліва направо, зверху донизу? Придумайте приклади використання команди Відобразити – Повернутиу малюнках. І запишіть за одним прикладом у свій зошит.

    Хлопці записують у зошит, потім перевіряємо.

    У графічному редакторі Paint можна відображати фрагмент малюнка щодо вертикальної або горизонтальної осі симетрії прямокутника, що виділяє. Для цього виділяємо малюнок та виконуємо команду Малюнок – Відображення та поворот. З'явиться вікно цього виду:<Малюнок 1 >

    У цьому вікні ми вибираємо дію, яку необхідно зробити над малюнком: відобразити зліва направо, відобразити зверху донизу або повернути на кут. Подивіться на екран і скажіть, які зміни сталися з кошенятами?<Малюнок 2 >, <Малюнок 3 >

    На першому малюнку над сніговиками виконали перетворення: відображення зліва направо. На другому – відбиття зверху донизу.

    - Так правильно. Ще одне перетворення – це поворот. Поворот фрагмента щодо центру симетрії прямокутника, що виділяє, можна виконати у вікні Відображення та поворот, яке викликається з меню Малюнок. Вибираємо команду: Повернути на кут. Далі із запропонованих кутів вибираємо потрібний нам кут.<Малюнок 4 >

    2. Велики і карлики (команди Розтягування та стиск)

    – Ми з вами познайомилися лише з одним перетворенням малюнка: відображенням та поворотом. Але є ще й інші. Як ви вважаєте, які?

    Малюнок можна нахиляти, збільшувати чи зменшувати, тобто. змінювати розміри малюнка.

    – Так, саме ці перетворення можна виконувати над малюнком. Я зараз вам прочитаю невеликий уривок, а ви мені скажіть, про яке перетворення йдеться. Отже, уважно слухаємо: "Над дахами літали мухи завбільшки зі слона. Коней тримали в будинках замість собачок. У лісі росли гігантські трави, а берези та осики зеленіли на підвіконнях. Діти в цій країні народжувалися великими, як велетні. З віком вони зменшувалися в розмірах, доки не зникали зовсім… Так фантазував один хлопчик”.

    Тут ідеться про зміни розмірів малюнка. Про збільшення та зменшення.

    – Звичайно, у цьому уривку одні об'єкти у нас мали дуже великі розміри, інші – маленькі. Виявляється, у графічному редакторі можна легко розтягнути чи стиснути виділений фрагмент, тобто. змінити розміри малюнка: збільшити чи зменшити.<Малюнок 5 >

    У цьому випадку ми зменшили сніговика вдвічі. Для цього спочатку потрібно виділити сніговик, потім виконати команду Малюнок – Розтяг та нахил.З'явилося вікно такого вигляду:<Малюнок 6 >

    Для зменшення малюнка у 2 рази вказуємо значення 50 по горизонталі та вертикалі.

    Змінювати розміри виділеного фрагмента можна лише з меню Малюнок. Можна робити це, потягуючи мишкою за маркери розмірів, які розташовуються на межі виділення. Іноді так буває зручніше, але зміна розмірів виконується "на око". Коли потрібна точність, без меню не обійтись.

    3. Нахил, відбиття, поворот.

    У віконці Розтягування та нахил, що викликається з меню Малюнок, можна задати в градусах нахили виділеного фрагмента:<Малюнок 7 >

    При виконанні цієї команди наше кошеня трохи нахилиться:<Малюнок 8 >

    4. Фізкультхвилинка.

    Щоб здоров'я нам набратися –
    Треба займатися спортом.
    Щоб сильними зростати –
    На зарядку – раз, два, три.
    Руки на пояс, ноги ширші.
    Нахили вперед - Раз, два, три, чотири.
    Ноги разом, руки вниз,
    Стригай на місці і сідай.

    V. Первинне закріплення вивченого (практична робота).

    – Зараз ви виконаєте невелику практичну роботу. На партах у вас лежать картки з алгоритмом виконання практичної роботи. Але перед тим, як ви сядете за комп'ютери, давайте повторимо з вами правила техніки безпеки.

    Діти перераховують правила техніки безпеки в комп'ютерному класі по ланцюжку.

    – Правила техніки безпеки ви пригадали. А тепер потихеньку сідаємо за комп'ютери і починаємо виконувати роботу. У кого виникають питання, піднімаємо руку і я підійду.

    Практична робота

    1. Використовуючи можливості графічного редактора, намалюйте робота.
    2. Виділіть робота. Виконавши команду Правка – Копіювати, скопіюйте його. Потім, виконавши команду Правка – Вставити, вставте робота 6 разів та розмістіть вставлених роботів на робочому полі.
    3. Виділіть першого робота. Збільште робота в 2 рази, виконавши команди Малюнок – Розтягнути – 200% – 200%.
    4. Виділіть другого робота. Зменшіть робота в 2 рази, виконавши команди Малюнок – Розтягнути – 50% – 50%.
    5. Виділіть третій робот. Нахиліть робота по горизонталі на 45 0 , виконавши команди Малюнок – Розтяг та нахил.
    6. Виділіть четвертого робота. Відобразіть робота зліва направо, виконавши команди Малюнок – Відображення та поворот.
    7. Виділіть п'ятого робота. Відобразіть робота зверху вниз, виконавши команди Малюнок – Відображення та поворот.
    8. Виділіть шостого робота. Поверніть робота на 270 0 , виконавши команди Малюнок – Відображення та поворот.
    9. Останнього робота залиште без змін.
    10. Покажіть роботу вчителю.

    VI. Постановка домашнього завдання.

    1. У графічному редакторі Paint намалюйте довільний рисунок. І виконайте над ним усі перетворення, які ми сьогодні вивчили.

    2*. Намалювати гроно винограду за допомогою команди Копіювати вставитиі Відобразити – Повернути. Написати в зошит алгоритм виконання цієї роботи.

    VII. Підбиття підсумків уроку.

    Наш урок добіг кінця. І мені дуже хотілося б дізнатися вашу думку про виконану роботу. Природно, що якщо я вислуховуватиму думку кожного, то нам не вистачить часу, адже до кінця уроку залишилося зовсім небагато. Але ми сьогодні виконували практичну роботу і тому оцінку має отримати кожен учень, адже всі ви старалися та працювали. Я пропоную оцінити себе самостійно і для цього використати смайлики.

    Смайлик – це картинка, складена з літер та спеціальних знаків, яка виражає якесь почуття чи настрій.

    На екрані слайд із зображенням смайликів: