+7 (3822) 609-826
Виртуальная лаборатория
«Пиксельная лаборатория:
как компьютер рисует картинку?»
как компьютер рисует картинку?»
Проект поддержан грантом Министерства науки и высшего образования РФ на проведение молодежного научного фестиваля “Гравитация будущего” в 2026 году.
наука в технологиях
серия научных популяризационных интерактивов
Инженер компьютерной графики
Специалист, который разрабатывает способы создания, представления, обработки и отображения цифровых изображений.
Он работает на стыке информатики, математики, программирования, визуализации и цифрового дизайна. Такой специалист может создавать алгоритмы отрисовки, инструменты для обработки изображений, графические интерфейсы, системы визуализации результатов моделирования, элементы игр и тренажёров, средства автоматизированного проектирования и другие цифровые продукты.
В профессиональной работе недостаточно «уметь красиво рисовать». Инженеру важно понимать, как изображение кодируется данными, как разрешение влияет на детализацию, как численно задаётся цвет, какие ограничения есть у устройства вывода и как проверить, что цифровой результат соответствует поставленной задаче.
В профессиональной работе недостаточно «уметь красиво рисовать». Инженеру важно понимать, как изображение кодируется данными, как разрешение влияет на детализацию, как численно задаётся цвет, какие ограничения есть у устройства вывода и как проверить, что цифровой результат соответствует поставленной задаче.
Научное направление профессии
Приоритетное направление: информатика и вычислительная техника.
Научные законы, инструменты и методы
Пиксель
Отдельный элемент растрового изображения, которому задаётся цвет.
Растровая модель изображения
Изображение представляется двумерной сеткой дискретных элементов.
Разрешение
Количество элементов по ширине и высоте изображения. Общее число пикселей равно ширина × высота.
Аддитивная модель RGB
Цвет светящейся точки экрана формируется сочетанием красного, зелёного и синего каналов.
Числовое кодирование цвета
В лаборатории каждый канал RGB задаётся числом от 0 до 255.
Контролируемый эксперимент
Чтобы понять влияние фактора, меняют один параметр, а остальные условия стараются сохранять.
Измерение и сравнение
Наблюдение переводится в измеримый показатель.
Гипотеза и вывод
До опыта формулируется предположение, после опыта оно проверяется по данным.
Развиваемые компетенции
Знания, умения, навыки, или типы мышления, характерные для научной деятельности
-
Предметные знания -
Исследовательские умения -
Аналитическое мышление -
Цифровая грамотность -
Проектирование -
Творческое мышление -
Коммуникация и командная работа.
7. О чём научный интерактив?
Информатика как фундаментальная наука изучает структуру, свойства, способы представления, хранения, передачи и обработки информации. Цифровое изображение рассматривается в ходе интерактива не только как рисунок, но и как информационный объект: оно имеет дискретную структуру, количественные характеристики и числовое описание цвета.
Проводя исследования в виртуальной лаборатории, участники познакомятся с такими базовыми понятиями в информатике, как пиксель, разрешение изображения и цветовая модель RGB.
Главный исследовательский вопрос: как из дискретных элементов и числовых значений формируется изображение, которое человек воспринимает как единый визуальный образ?
Участники не получают ответ в готовом виде: они формулируют гипотезу, изменяют параметры, проводят цифровые эксперименты, получают измеримые показатели и делают выводы.
Проводя исследования в виртуальной лаборатории, участники познакомятся с такими базовыми понятиями в информатике, как пиксель, разрешение изображения и цветовая модель RGB.
Главный исследовательский вопрос: как из дискретных элементов и числовых значений формируется изображение, которое человек воспринимает как единый визуальный образ?
Участники не получают ответ в готовом виде: они формулируют гипотезу, изменяют параметры, проводят цифровые эксперименты, получают измеримые показатели и делают выводы.
| Для кого научный интерактив? Интерактив будет интересен всем, кто хочет узнать, как именно устроено изображение в цифровом мире от фотографий до графики в компьютерных играх. Базовый сценарий рекомендуется для школьников 10–14 лет. Он не требует предварительных знаний программирования и подходит участникам, которым интересны рисование, компьютерные игры, цифровой дизайн, технологии и устройство компьютера. Для группы 15–19 лет предлагается расширенная научная часть: обсуждение глубины цвета, двоичного кодирования, шестнадцатеричной запись RGB, примерный объём несжатого изображения и различие растровой и векторной графики. |
Состав научной команды
Интерактив можно проводить индивидуально, но для усиления профориентационного и командного компонента рекомендуется работа парами или мини-командами по 3–4 человека. Роли можно менять после каждого этапа.
Отвечает за то, как цифровое изображение устроено и каким должен быть итоговый продукт.
Инженер компьютерной графики
Отвечает за то, как цифровое изображение устроено и каким должен быть итоговый продукт.
Задачи: следить за техническими условиями, предлагать способ построения рисунка, помогать выбирать разрешение и структуру изображения.
Задачи: следить за техническими условиями, предлагать способ построения рисунка, помогать выбирать разрешение и структуру изображения.
Экспериментатор
Специалист, который проводит цифровые опыты и меняет параметры в лаборатории.
Задачи: работать с сеткой, запускать этапы, изменять RGB, добиваться требуемого результата, не меняя лишние параметры.
Задачи: работать с сеткой, запускать этапы, изменять RGB, добиваться требуемого результата, не меняя лишние параметры.
Аналитик-исследователь
Специалист, который сравнивает наблюдения с гипотезой и формулирует выводы.
Задачи: следить за счётчиками, процентом совпадения, результатами экспериментов; отвечать на вопросы и фиксировать итоговый вывод.
Задачи: следить за счётчиками, процентом совпадения, результатами экспериментов; отвечать на вопросы и фиксировать итоговый вывод.
Цифровой дизайнер
Специалист, который отвечает за визуальную идею и читаемость финального пиксель-арта.
Задачи: выбирать сюжет, палитру и композицию; вместе с командой создавать рисунок минимум из 50 цветных пикселей и 3 цветов.
Задачи: выбирать сюжет, палитру и композицию; вместе с командой создавать рисунок минимум из 50 цветных пикселей и 3 цветов.
Для работы вам понадобится
- ПК или ноутбук1 на участника или 1 на пару.
Современный браузер; рекомендуется экран от 1280×720. - Компьютерная лабораторияФайл
«01_Запустить_Пиксельную_лабораторию.html».
Работает локально, установка программ не требуется. - Мышь / тачпад1 на рабочее место.
Для рисования мышь обычно удобнее тачпада. - Проектор / большой экран1 на группу - желательно.
Для общего вступления, демонстрации и обсуждения результатов. - Карточка участникаПо желанию, 1 на участника/команду.
Используется как резерв для записи гипотезы и выводов. - Папка для результатов1 общая или персональные папки.
Участники сохраняют PNG и карточку эксперимента.
Полезные материалы
Для проведения внешние интернет-ресурсы не обязательны. Основные материалы входят в комплект лаборатории:
«00_ОТКРОЙТЕ_СНАЧАЛА.txt»
«01_Запустить_Пиксельную_лабораторию.html»
«02_Методическое_описание_интерактива.docx»
«03_Карточка_участника.docx»
«04_Инструкция_ведущему.txt»
«05_Краткое_описание_для_анонса.txt»
План работы команды
0–5 мин
0–5 мин
Вступление, профессия, гипотеза
Проблемный вопрос «Как компьютер рисует картинку?». Коротко о профессии инженера компьютерной графики. Участник вводит имя/название команды и записывает гипотезу.
Необходимы: ПК, проектор.
Результат: сформулирована исходная гипотеза.
Необходимы: ПК, проектор.
Результат: сформулирована исходная гипотеза.
5–12 мин
5–12 мин
Эксперимент 1. Пиксель
Создание значка на сетке 12×12, минимум 20 закрашенных ячеек; наблюдение счётчика.
Необходимы: Раздел «1. Пиксель».
Результат: понимание дискретной структуры.
Необходимы: Раздел «1. Пиксель».
Результат: понимание дискретной структуры.
12–20 мин
12–20 мин
Эксперимент 2. Разрешение
Выбор робота, ракеты или планеты; переключение 8×8, 16×16, 32×32 и 64×64; сравнение числа пикселей, узнаваемости, контуров и доступных деталей; формулирование вывода.
Необходимы: Раздел «2. Разрешение».
Результат: понимание разрешения как количественной характеристики и связи числа пикселей с потенциальной детализацией.
Необходимы: Раздел «2. Разрешение».
Результат: понимание разрешения как количественной характеристики и связи числа пикселей с потенциальной детализацией.
20–28 мин
20–28 мин
Эксперимент 3. RGB
Подбор цвета к мишени изменением R, G и B. Процент открывается после кнопки «Проверить цвет»; участник улучшает показатель «Лучший результат» и добивается совпадения ≥90%.
Необходимы: Раздел «3. RGB».
Результат: цвет как числовые данные; сравнение попыток по измеримому показателю.
Необходимы: Раздел «3. RGB».
Результат: цвет как числовые данные; сравнение попыток по измеримому показателю.
28–43 мин
28–43 мин
Финальная мастерская
Выбор идеи из примеров или создание своей; рисунок 24×24, минимум 50 цветных пикселей и 3 цвета.
Необходимы: Раздел «4. Мастерская».
Цифровой продукт.
Необходимы: Раздел «4. Мастерская».
Цифровой продукт.
43–47 мин
43–47 мин
Паспорт результата
Проверка показателей, сохранение PNG и карточки эксперимента.
Финальный экран.
Результат: два файла.
Финальный экран.
Результат: два файла.
47–50 мин
47–50 мин
Рефлексия и профессия
Сравнение гипотезы с выводами, 2–3 вопроса, связь с профессией и технологиями.
Общее обсуждение.
Общее обсуждение.
Этапы работы. Подробный алгоритм «бери и делай»
Подготовка до прихода участников
1. Распакуйте архив лаборатории в отдельную папку на каждом компьютере.
2. Дважды откройте файл «01_Запустить_Пиксельную_лабораторию.html» и убедитесь, что стартовый экран отображается на русском языке.
3. Проверьте работу мыши, переходы между разделами и возможность сохранения файлов из браузера.
4. Создайте папку «Результаты» или договоритесь, куда участники будут сохранять PNG и карточки эксперимента.
5. Если используется проектор, откройте лабораторию на компьютере ведущего и разверните браузер на весь экран.
Контроль перед стартом. Лаборатория должна открываться без интернета. Если браузер спрашивает, куда сохранять файл, заранее выберите удобную папку.
2. Дважды откройте файл «01_Запустить_Пиксельную_лабораторию.html» и убедитесь, что стартовый экран отображается на русском языке.
3. Проверьте работу мыши, переходы между разделами и возможность сохранения файлов из браузера.
4. Создайте папку «Результаты» или договоритесь, куда участники будут сохранять PNG и карточки эксперимента.
5. Если используется проектор, откройте лабораторию на компьютере ведущего и разверните браузер на весь экран.
Контроль перед стартом. Лаборатория должна открываться без интернета. Если браузер спрашивает, куда сохранять файл, заранее выберите удобную папку.
Шаг 1. Вступление и гипотеза - 5 минут
Действия ведущего | Действия участников | Что должно получиться |
Показывает стартовый экран. Задаёт вопрос: «Для человека это картинка. А что хранит компьютер?» Коротко представляет профессию инженера компьютерной графики. Просит не угадывать “правильный ответ”, а сформулировать предположение. | Вводят имя или название команды. В поле гипотезы записывают, что, по их мнению, сильнее всего влияет на качество цифрового изображения: число пикселей, цвет, размер, что-то другое. | Есть исходная гипотеза, которую можно проверить по ходу мастер-класса. |
Подсказка ведущему: гипотеза может быть неточной. Не исправляйте её сразу - ценность этапа в том, чтобы участник позже сравнил предположение с наблюдаемыми данными.
Шаг 2. Эксперимент «Пиксель» - 7 минут
Откройте раздел «1. Пиксель». Перед участником поле 12×12 - всего 144 ячейки.
1. Выберите цвет в палитре.
2. Закрашивайте отдельные ячейки и создайте простой узнаваемый значок.
3. Следите за счётчиком «закрашено пикселей».
4. Добейтитесь минимум 20 закрашенных пикселей.
5. Зафиксируйте результат и переходите дальше.
Вопросы в процессе. «Можно ли провести идеально гладкую диагональ, если разрешены только клетки? Что происходит с линией? Почему рисунок выглядит ступенчатым?»
Ожидаемый научный вывод: растровое изображение состоит из отдельных дискретных элементов. Чем грубее сетка, тем заметнее отдельные ячейки и ограничения формы.
1. Выберите цвет в палитре.
2. Закрашивайте отдельные ячейки и создайте простой узнаваемый значок.
3. Следите за счётчиком «закрашено пикселей».
4. Добейтитесь минимум 20 закрашенных пикселей.
5. Зафиксируйте результат и переходите дальше.
Вопросы в процессе. «Можно ли провести идеально гладкую диагональ, если разрешены только клетки? Что происходит с линией? Почему рисунок выглядит ступенчатым?»
Ожидаемый научный вывод: растровое изображение состоит из отдельных дискретных элементов. Чем грубее сетка, тем заметнее отдельные ячейки и ограничения формы.
Шаг 3. Эксперимент «Разрешение» - 8 минут
В обновлённой лаборатории участник выбирает одну из трёх картинок - робота, ракету или планету - и исследует её в четырёх учебных вариантах: 8×8, 16×16, 32×32 и 64×64. При переключении меняется не только видимость пиксельной сетки: на более плотных вариантах становятся различимы дополнительные, заранее закодированные детали.
1. Выберите первую картинку и рассмотрите её при исходном разрешении 16×16.
2. Последовательно переключите 8×8, 16×16, 32×32 и 64×64. Сопоставьте общее число пикселей: 64, 256, 1024 и 4096.
3. Для каждого варианта отметьте три наблюдения: насколько объект узнаваем, насколько ступенчаты его контуры и какие детали видны или исчезают.
4. Найдите момент, когда становится различима конкретная деталь: например, элемент лица робота, иллюминатор ракеты или небольшое пятно на планете.
5. Повторите эксперимент минимум для ещё одной картинки и сравните, одинаково ли проявляется влияние разрешения на разных объектах.
6. Выберите утверждение, которое лучше всего объясняет наблюдение. При неверном ответе прочитайте подсказку, снова сравните 8×8 и 64×64 и повторите попытку.
Правильный вывод. Чем выше разрешение, тем больше пикселей доступно для описания изображения и тем больше мелких деталей можно передать. Само по себе разрешение не делает сюжет “красивее” - оно увеличивает потенциальную детализацию.
Тип объекта и его видимый размер сохраняются, а разрешение показывает, сколько дискретных элементов доступно для кодирования формы и деталей. Дополнительные элементы не «придумываются» программой и не восстанавливаются автоматически - они заранее заложены в версии изображения. Поэтому корректный вывод звучит так: более высокое разрешение даёт возможность закодировать и показать больше деталей при сопоставимых условиях.
1. Выберите первую картинку и рассмотрите её при исходном разрешении 16×16.
2. Последовательно переключите 8×8, 16×16, 32×32 и 64×64. Сопоставьте общее число пикселей: 64, 256, 1024 и 4096.
3. Для каждого варианта отметьте три наблюдения: насколько объект узнаваем, насколько ступенчаты его контуры и какие детали видны или исчезают.
4. Найдите момент, когда становится различима конкретная деталь: например, элемент лица робота, иллюминатор ракеты или небольшое пятно на планете.
5. Повторите эксперимент минимум для ещё одной картинки и сравните, одинаково ли проявляется влияние разрешения на разных объектах.
6. Выберите утверждение, которое лучше всего объясняет наблюдение. При неверном ответе прочитайте подсказку, снова сравните 8×8 и 64×64 и повторите попытку.
Правильный вывод. Чем выше разрешение, тем больше пикселей доступно для описания изображения и тем больше мелких деталей можно передать. Само по себе разрешение не делает сюжет “красивее” - оно увеличивает потенциальную детализацию.
Тип объекта и его видимый размер сохраняются, а разрешение показывает, сколько дискретных элементов доступно для кодирования формы и деталей. Дополнительные элементы не «придумываются» программой и не восстанавливаются автоматически - они заранее заложены в версии изображения. Поэтому корректный вывод звучит так: более высокое разрешение даёт возможность закодировать и показать больше деталей при сопоставимых условиях.
Шаг 4. Эксперимент «RGB» - 8 минут
На экране есть цвет-мишень и три регулятора: R - красный, G - зелёный, B - синий. Каждый канал принимает значение от 0 до 255. В обновлённой версии процент совпадения скрыт во время настройки и появляется только после нажатия кнопки «Проверить цвет». Показатель «Лучший результат» сохраняет максимальный процент для текущей мишени и позволяет сравнивать последовательные попытки.
1. Посмотрите на цвет-мишень и текущий цвет. До проверки оцените различие визуально и сформулируйте предположение: какой канал нужно увеличить или уменьшить.
2. Меняйте сначала только один канал R, G или B. Наблюдайте, как изменение числового значения влияет на цвет, и только затем переходите к другому каналу.
3. Нажмите кнопку «Проверить цвет». После нажатия прочитайте процент совпадения - измеримый показатель близости выбранного цвета к мишени.
4. Сопоставьте процент с предыдущей попыткой и показателем «Лучший результат». На основании данных скорректируйте значения каналов и выполните следующую проверку.
5. Добейтесь совпадения не менее 90%. При наличии времени попробуйте превысить 95% или выбрать кнопку «Другая мишень» и повторить эксперимент с новым цветом.
6. После успешной проверки сформулируйте научный вывод: цвет на экране кодируется тремя числовыми каналами, а результат подбора можно сравнивать по количественному показателю, а не только «на глаз».
Важно. RGB описывает смешивание света на экране. Не сравнивайте его напрямую со смешиванием красок на бумаге - там действует другая модель.
Для более подготовленной группы можно дополнительно показать, что (255, 255, 255) соответствует белому, а (0, 0, 0) - чёрному; предложить добиться 97–99% за минимальное число проверок и объяснить, почему изменение одного канала делает эксперимент более контролируемым.
1. Посмотрите на цвет-мишень и текущий цвет. До проверки оцените различие визуально и сформулируйте предположение: какой канал нужно увеличить или уменьшить.
2. Меняйте сначала только один канал R, G или B. Наблюдайте, как изменение числового значения влияет на цвет, и только затем переходите к другому каналу.
3. Нажмите кнопку «Проверить цвет». После нажатия прочитайте процент совпадения - измеримый показатель близости выбранного цвета к мишени.
4. Сопоставьте процент с предыдущей попыткой и показателем «Лучший результат». На основании данных скорректируйте значения каналов и выполните следующую проверку.
5. Добейтесь совпадения не менее 90%. При наличии времени попробуйте превысить 95% или выбрать кнопку «Другая мишень» и повторить эксперимент с новым цветом.
6. После успешной проверки сформулируйте научный вывод: цвет на экране кодируется тремя числовыми каналами, а результат подбора можно сравнивать по количественному показателю, а не только «на глаз».
Важно. RGB описывает смешивание света на экране. Не сравнивайте его напрямую со смешиванием красок на бумаге - там действует другая модель.
Для более подготовленной группы можно дополнительно показать, что (255, 255, 255) соответствует белому, а (0, 0, 0) - чёрному; предложить добиться 97–99% за минимальное число проверок и объяснить, почему изменение одного канала делает эксперимент более контролируемым.
Шаг 5. «Мастерская» - 15 минут
Участник применяет полученные знания в собственной работе на сетке 24×24 (576 пикселей). В интерфейсе доступны пять примеров для старта: робот, ракета, дрон, планета и космонавт. Их можно использовать как идею или создать полностью свой объект.
1. Выберите пример или сформулируйте свою идею.
2. Сначала наметьте крупный силуэт, затем добавляйте детали.
3. Проверяйте два счётчика: сколько цветных пикселей и сколько цветов использовано.
4. Если изображение “не читается”, попробуйте упростить форму или увеличить контраст между соседними областями.
5. Когда условия выполнены, нажмите кнопку завершения работы.
Роль ведущего. Не рисуйте за участника. Помогайте вопросами: «Какую деталь можно сделать крупнее? Что произойдёт, если убрать один цвет? Где сетка ограничивает форму?».
Условие | Требование |
Холст | 24×24 пикселя |
Минимальная заполненность | Не менее 50 цветных пикселей |
Цвет | Не менее 3 разных цветов |
Сюжет | Технологический, научный или авторский объект/персонаж |
Инструменты | Палитра, собственный цвет, рисование/стирание/заливка - в зависимости от интерфейса |
1. Выберите пример или сформулируйте свою идею.
2. Сначала наметьте крупный силуэт, затем добавляйте детали.
3. Проверяйте два счётчика: сколько цветных пикселей и сколько цветов использовано.
4. Если изображение “не читается”, попробуйте упростить форму или увеличить контраст между соседними областями.
5. Когда условия выполнены, нажмите кнопку завершения работы.
Роль ведущего. Не рисуйте за участника. Помогайте вопросами: «Какую деталь можно сделать крупнее? Что произойдёт, если убрать один цвет? Где сетка ограничивает форму?».
Шаг 6. Фиксация результата - 4 минуты
На финальном экране лаборатория показывает показатели работы: число цветных пикселей, число использованных цветов и число завершённых исследовательских этапов.
1. Проверьте показатели финальной работы.
2. Скачайте рисунок в формате PNG.
3. Скачайте карточку эксперимента. В ней фиксируются имя/название команды, исходная гипотеза и основные результаты.
4. Попросите участника открыть или назвать свою исходную гипотезу и одним предложением сказать, подтвердилась ли она.
Ожидаемый результат: у участника есть сохранённый цифровой продукт и фиксированная запись результата исследования.
1. Проверьте показатели финальной работы.
2. Скачайте рисунок в формате PNG.
3. Скачайте карточку эксперимента. В ней фиксируются имя/название команды, исходная гипотеза и основные результаты.
4. Попросите участника открыть или назвать свою исходную гипотезу и одним предложением сказать, подтвердилась ли она.
Ожидаемый результат: у участника есть сохранённый цифровой продукт и фиксированная запись результата исследования.
Шаг 7. Итоговая рефлексия - 3 минуты
Проведите короткое общее обсуждение. Для 50-минутного сценария достаточно выбрать 3–4 вопроса из раздела 3.15. Завершите связью с профессией: инженер компьютерной графики также работает с параметрами изображения, проверяет результат, ищет ограничения и улучшает цифровой продукт.
ФИНАЛ
Продукт готов!
● Авторский пиксель-арт в формате PNG.
● Карточка эксперимента в формате TXT с исходной гипотезой и ключевыми результатами.
● Сформулированный участником вывод о пикселе, разрешении и RGB.
● Карточка эксперимента в формате TXT с исходной гипотезой и ключевыми результатами.
● Сформулированный участником вывод о пикселе, разрешении и RGB.
Вопросы для обсуждения
Ниже приведены примерные вопросы для рефлексии, которые помогут связать научную тему с технологией, практическими навыками и самореализацией
Разработчики
- Блохина ОлесяПедагог дополнительного образования
- Алина ЦвигунМетодист
- Люмила ЛаринаНаучный координатор