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