Искусство рисовать кодом

STEM-образование – термин, расшифровывая каждую букву которого
получаем:

– Science (наука),

– Technology (технологии),

– Engineering (инженерия),

– Math (математика).

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

Существуют вариации направления STEM, расширенные и углубленные
– STREM (добавили в комплекс “R” – robotics/робототехника) или STEAM
(добавили “А”- art/искусство –
это нам особенно близко). Именно в направлении STEAM мы и начали
свою работу.

Какие же учебные предметы вовлекаются  в данный комплекс?

Прежде всего - математика, курс “Человек и мир”, изобразительное искусство,
информатика и программирование.

Как мы учимся? Здесь используется метод проектов, перевернутое обучение,
онлайн-поддержка, использование сервисов web 2.0.

Чему мы учимся? Ответом является формирование критического мышления,
умения наблюдать, работать с данными, экспериментировать, создавать
интерактивные модели и собственные проекты.

Многие думают, что между программированием и живописью существует
огромная пропасть. Но это не так. И если первый вид деятельности
считается холодным, точным и методичным, то в живописи обычно видят
просто экспрессивное самовыражение. Но мы считаем заблуждением,
когда говорят, что эти процессы непохожи. Профессионалов обеих сфер
объединяет то, что и те и другие — творцы. Наряду с композиторами,
архитекторами и писателями, программисты и художники пытаются создать
что-то стоящее.

Как ни странно, живопись может научить нас программировать.
Художники обретают навыки рисования, создавая картины, — так же и
программисты обретают необходимые навыки когда разрабатывают свои
первые программы, начиная с начальных классов школы. Вы учитесь
программировать, только когда пишете код. Если посмотреть на прогресс
художника по хронологии его работ, то становится понятно, что его новые
навыки накладываются на обретённые ранее.

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

Уже третий год мы, Воронина Л.А. и Тихоновецкая И.П. являемся
участниками глобального проекта "Твой курс: ИТ для молодёжи"
http://www.it4youth.ru при поддержке корпорации Microsoft в рамках
глобальной инициативы Microsoft YouthSpark, призванной помочь молодым
людям реализовать свой потенциал. Нас заинтересовала миссия проекта
— повышение интереса молодежи к сфере высоких технологий и
мотивации учащихся к приобретению технических знаний и навыков,
необходимых каждому человеку для успеха и самореализации в жизни в
XXI веке.

В рамках данного проекта нами созданы код-классы из состава наших
учащихся.

В этом учебном году наши код-классы присоединились к
 Всероссийской акция “Час Кода”.

Для того, чтобы принять участие в акции “Час кода” нами был пройден
интересный курс по карандашному программированию (Pencil Code).
Тренером  курса-мастерской выступила Людмила Рождественская,
учитель информатики и образовательный технологи TKVG, Эстония.
Она подробно рассказала, что такое Pencil Code, представила особенности
среды. В течение двух недель мы  приняли участие в активности,
выполняя задания по освоению и изучению возможностей Pencil Code.

Pencil Code — это совместный программный сайт для рисования,
игры и создания игр. Это также место для экспериментов с геометрией
и графикой.  Программы открыты для всеобщего просмотра и копирования.
Основной язык — Coffeescript. Pencil Code – это среда блочного
программирования, имеющая свои особенности и преимущества.  
Обучение построено на графических блоках с кодом.

Pencil Code  позволяет программисту  использовать “блочный режим”,
чтобы  перетаскивать мышкой блоки для создания программы.  
Блоки в Pencil Code — это прямое представление основного  текстового
языка: CoffeeScript, JavaScript, или HTML. Блоки по виду отличаются  от
текстового кода, они являются только визуальным способом
представления и редактирования команд на языке программирования.

Основными преимуществами использования в классе данной среды
программирования, считаем:

• привлекательность среды для учащихся, т.к.  дети начинают программировать
• с первой минуты занятия, не тратя время на теорию;
• простота освоения и красочность конечного цифрового продукта;
• возможность делать короткие проекты в рамках одного урока;
• возможность обмена проектами прямо в среде, а также возможность
• интеграции других школьных предметов: английского языка, математики,
• географии, музыки;

Так возникло у нас желание “творить” в данной среде.
“Сами программисты считают свое занятие искусством. Такую
интерпретацию связывают с утверждением предпринимателя Пола Грэма,
который говорил, что программисты — это творцы.”  И на самом деле,
работы, созданные в данной среде красочные, необычные, притягивающие
взгляд. Рencil Code имеет дословный перевод “карандашное
программирование”, как вы понимаете основным инструментом является
именно карандаш.

Разработан вводный урок для знакомства с новой средой программирования
по теме: “Радуга в коде”. Данная разработка была отмечена организаторами
проекта  “Твой курс: ИТ для молодёжи”, что стало приятным сюрпризом!
“Сегодня получила электронное письмо. Которое начинается со слов:
“Уважаемые руководители клубов программирования “Код-Класс”,
приветствуем вас!

Мы рады начать 2017 год с подведения итогов и выражения нашей
признательности участникам кампании “Больше, чем урок!”, которая прошла в
поддержку Всероссийской образовательной акции “Час кода 2016”. В течение
месяца Кампания охватила более 120 Код-классов и 40000 учащихся по всей
стране, вдохновляя молодое поколение на изучение программирования и
компьютерных наук.”  

Моя фамилия в списке 30-ти участников, поощряемых подарочными
сертификатами интернет-магазина оzon.ru по результатам кампании
“Больше, чем урок” 2016  
https://gallery.mailchimp.com/…/%D0%A1%D0%BF%D0%B8%D1%81%D0…

Фрагмент конспекта код-урока по  тема: “Радуга в коде”

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

Задачи:

• Рассказать о таком природном явлении как “круглая радуга”, “гало”
• Показать на практике инструмент Art:  pen, dot,box
• Создать свою круглую радугу в карандашном программировании

Основополагающие вопросы занятия:

Что такое радуга? А бывает ли радуга круглой? Что такое “гало” и чем
отличается от радуги? А можно ли с помощью кода создать радугу?

Вводная беседа

• Люди с незапамятных времён пытались объяснить природу радуги.
• Жители Древней Руси верили, что разноцветные полосы в небе — это
• сияющее коромысло, с помощью которого Лада Перуница черпает воду
• из моря-океана, чтобы потом оросить ею поля и нивы. Другой версии
• придерживались американские индейцы, которые были уверены,
• что радуга — это лестница, ведущая в мир иной. Ну а суровые скандинавы
• отождествляли небесную дугу с мостом, на котором днем и ночью несёт
• дозор страж богов Хеймдалль
• Почему появляется радуга?
• Чтобы разобраться, почему появляется радуга, необходимо вспомнить о том,
• что представляет собой луч света. Из курса школьной физики известно,
• что он состоит из летящих с огромной скоростью частиц — отрезков
• электромагнитной волны. Короткие и длинные волны различаются по цвету,
• но все вместе в едином потоке они воспринимаются человеческим глазом
• как белый свет.
• И только когда луч света «натыкается» на прозрачную преграду — каплю
• воды или стекло — он распадается на различные цвета.
• Человеческий глаз различает семь цветов — красный, оранжевый, жёлтый,
• зелёный, голубой, синий и фиолетовый. Но следует иметь в виду, что на
• самом деле цвета плавно переходят друг в друга через множество
• промежуточных оттенков.
• Радуга на самом деле окружность, а не дуга?
• Да, радуга — это замкнутый круг, нижняя часть которого скрыта под линией
• горизонта. Увидеть радужное кольцо можно из окна самолёта.
• Как и где появляется огненная радуга?
• Огненную радугу принято считать одной из разновидностей галό —
• оптического эффекта в виде светящегося кольца вокруг солнца.
• Гало возникает обычно вокруг мощных источников света благодаря ледяным
• кристаллам, содержащимся в облаках.

Знакомство с РencilСode

• А как вы считаете, можно ли нарисовать радугу с помощью кода?
• Да. В этом нам поможет РencilСode
• PENCIL — это по-английски карандаш, CODE — код, кодинг —
• программирование. Здесь можно учиться, общаясь и обмениваясь идеями,
• интересными находками и фрагментами кода. Недаром на первой же
• странице сайта вы можете прочитать самые главные правила общения в среде:

Изучай -> Создавай/ Изобретай -> Играй -> Делись -> Изменяй!

• Сегодня мы познакомимся с инструментами для рисования:

1. Знакомство с блоком команд рисования (ART)
2. Основные команды рисования: перо, пятно, квадратик: (pen, dot, box)
3. Важно! Чтобы ускорить исполнение программы, в ее начало можно
4. поставить команды скорости speed 5.  Цифра указывает на величину скорости,
5. ее можно менять. Не делайте скорость слишком большой, иначе неудобно
6. следить за исполнением программы.

Карандаш (pen) точка (dot) квадратика (box). Размеры определяются числом в окошке внутри блока. Для карандаша могут пригодиться два его положения (PU) — поднять перо, (PD) — опустить перо.

Разработаны тестовые задания для контроля уровня усвоения принципов
работы с программой.  Приводим пример тестовых заданий:

За правильный ответ начисляется (1 б)

Pencil Сode - это по-английски…

1. умная черепашка;
2. карандашное программирование;
3. пиксельная техника.

Какой инструмент делает линию (1б)

• 

•  
• 

Дан порядок команд (1б)

Какой результат будет после его выполнения?

Поставь в соответствие набору команд фигуру, которая получится после
выполнения этих команд (3б)

Впиши недостающие слова. (2б)

________________ будет нарисована ____ раз, после выполнения набора
команд

Где будет находиться Черепашка после выполнения программы (1б)

Как нужно расположить команды в программе, чтобы получилась фигура.
Расставь цифры у команд в порядке их выполнения(3 б)

(1) (4) (6) (2,5) (3)

Какая фигура получится после выполнения следующей программы (3 б)?

квадрат

прямоугольник

ромб

За правильный ответ начисляется (3 б)

Блок движения bk задает команду:

1. двигаться вперед;
2. двигаться назад;
3. поворот вправо.

Соотнеси код и рисунок  (1 б)

                           

Продолжи код и рисунок, соблюдая последовательность (3 б)

Таким образом, начав постигать азы программирования с помощью
редактора Pencil Сode, мы с учащимися создаем искусство, музыку, игры и
рассказы, а может со временем и изобретем программу, которая изменит мир!