About Pencil Code
Pencil Code is a collaborative programming site for drawing art, playing music, and creating games. It is also a place to experiment with mathematical functions, geometry, graphing, webpages, simulations, and algorithms. Programs are open for all to see and copy.
The main language is Coffeescript. Professional software engineers use Coffeescript to build complex websites, but Coffeescript code can also be very simple.
Pencil Code can also be used to explore and learn Javascript, HTML, and CSS: when you are ready, just find the «gear» button to adjust languages.
Programs preload the pencilcode library to use turtle graphics functions. Pencil Code is all open source. Hang out on the Pencil Code discussion forum or check out the quick reference or the online guide to find out more. There is also an illustrated Pencil Code book with more than 100 small projects.
Anybody can save programs and web pages, but read the Terms of Service and the Privacy Policy first. Two rules:
Be Nice. Do not mess up other peoples’ work. Do not post content that detracts from education on the site. This a learning space that is not locked down (for example, passwords are optional). So feel free to explore, create, and link, but also please be considerate.
Be Careful. Do not depend on Pencil Code to keep your data safe. Data posted here is public, and data is not secured from loss. Do not post private or personally identifiable information. Passwords on Pencil Code do not prevent malicious interference.
Архив Галактики
Карандашное программирование. Начало
Блог тренера / 13.06.2016
Недавно нашла новую для себя визуальную среду блочного программирования для младших школьников http://pencilcode.net/ Хотя, судя по дате проморолика (2013г.), ее многие уже должны знать. Посмотрела, сколько создано англоязычных обучающих материалов, в том числе в виде доступных youtube-роликов и подумала, что нужно сделать несколько шагов по ее популяризации среди русскоязычной аудитории. Причем, эта аудитория не ограничена исключительно информатиками. Организовать работу в среде «карандашного программирования» могут и учителя начальной школы, и учителя математики.
pencilcode позволяет изучать начала программирования с помощью графических блоков, подписи к которым содержат команды. Интерфейс переключается — можно работать в любом из двух форматов: визуальных блоков или текстового кода. Переход между ними совершается в pencilcode нажатием одной кнопки.
А исполнитель-черепашка поможет визуализировать код, записанный любым из этих двух способов, точнее сказать, мы будем управлять ее действиями с помощью команд. Действие, как и во многих других подобных программах-средах, происходит на клетчатой доске — в системе координат. Черепашка изначально находится в центре доски — в точке отсчета (начале) системы координат. Масштаб измерения — черепашьи шаги. На стороне одной клетки помещается 25 черепашьих шагов.
Система координат устроена достаточно удобно: начало системы координат расположено в центре листа, ось X направлена слева направо, ось Y – снизу вверх. Оси
координат, правда, не видны, они – воображаемые.
Среда, очень похожая и на Scratch и на Blockly, позволяет начать работу с учениками самых разных возрастов. Самый младший, пожалуй, это 4-ый, 5-ий класс. Но здесь есть простор и для более старших школьников.
Регистрация проста!
Только имя пользователя (никаких реальных имен) и пароль!
Как начать? Что рисовать? Вначале почти всегда есть страх пустого листа. Кроме того, нет привычных инструментов для рисования — карандашей, кисточек, заливок и т.д. А есть совсем новые и необычные инструменты — команды в виде блоков, и детям нужно показать, как их использовать.
С какими из команд можно знакомиться в самом начале?
ART-блоки
Начать работу в среде можно с небольших задачек-вызовов, больше напоминающих игру, игру в рисование. Для этого нам понадобится, например, карандаш: он оставляет след и может быть разной толщины.
В ART-блоках на первых порах хватит карандаша (pen), точки (dot) и квадратика (box), размеры которых определяются числом в окошке внутри блока. Для карандаша могут пригодиться два его положения (PU) — поднять карандаш, (PD) — опустить карандаш.
Команды движения
Для первых рисунков с самыми младшими школьниками будет достаточно трех-четырех первых из всего списка команд: вперед-назад, направо-налево. А числом в окошке внутри блока можно задать длину пути и угол поворота
Дорисуй/нарисуй фигуру
Ученику бывает трудно сразу создать свой собственный рисунок, даже придумать его. Используя те же самые команды, черепашка рисует простые фигуры, которые можно заготовить на клетчатой бумаге и предложить ученикам. Можно дать и незавершенные рисунки: к уже записанным блокам ученик просто добавит свои.
Еще два упражнения, которые помогут начинающим придумать свой сценарий рисунка.т
Мишень Здесь радиусы для кругов мишени задаются не числом, а переменной. Для вычисления радиусов используются операторы для записи арифметических операций и выражений.
Маяк Этот пример с использованием текстового блока.
Ну и, конечно, с помощью черепашки всегда можно нарисовать что-то свое!
Такие проекты (домики, светофоры, отрезки и их комбинации,, различные геометрические фигуры. ) могут рисовать с помощью блоков кода ученики, начиная с самых младших классов:
Прочерти маршрут для черепашки!
Играть можно по-разному. Например, сделать файл-заготовку, в котором будут два объекта: зеленый круг и желтый квадрат. Черепашке нужно, двигаясь по ступенькам, пройти путь от квадратика к кругу. Вариантов этой задачи можно придумать массу: достаточно задать разные начальные координаты объектов, а также предложить в условии разное количество и разные длины ступенек.
После того, как задача будет решена простым линейным алгоритмом, ученик,кстати, может и не знать еще этого понятия (см. код слева), можно показать, как оптимизировать (укоротить запись, уменьшить количество блоков), введя блок цикла. При этом можно провести параллель с переходом от сложения одинаковых слагаемых к умножению: N раз по четыре повторяющихся команды (см. правый код)
Что с помощью dot и box можно рисовать-программировать с учениками постарше?
Уроки для 7-8ых классов по этой теме (они знают координаты) можно провести сразу в модели «создаем картину».
Искать образцы можно у Виктора Вазарели, у которого особенно много подходях картин, Френка Стеллы, Эльсуорта Келли, Сола Левитта.
Как сохранить проект? Как поделиться?
Проекты сохраняются с помощью кнопки Save, а поделиться ими с другими можно с помощью кнопки Share
И хранятся они под такими иконками в вашем личном хранилище:
В заключение.
Для первого знакомства со средой карандашного программирования достаточно лишь некоторых блоков из наборов: АРТ и ДВИЖЕНИЕ. Освоив первые инструменты на практике для создания своих рисунков, ученики начинают более смело использовать и другие, новые. Но лучше, если их освоение будет спонтанным: учеником задуман некий образ, сценарий, а для его исполнения нужны эти самые, еще не опробованные инструменты. Задача нарисовать что-то по конкретной теме также может быть предложена учителем. Необходимо лишь постепенно поднимать уровень сложности задач-вызовов и создавать каждый раз новые проблемные ситуации.
Карандашное программирование
Карандаш код может свободно использовать как дома так и для уроков. Тренажерный зал Карандаш код предоставляет большой выбор онлайн действий без регистрации и распечатки.
Pincle Code был разработан инженером Google Дэвидом Бо вместе с его сыном Энтони Бо и дополнен многими другими.
Два способа смотреть на Программу.
Языки и библиотеки в Pencil Code
Pencil Code поддерживает код в виде блоков и текста, используя основные языки веб-программирования и полезные библиотеки, включая:
С Pencil Code ученики могут использовать эти технологии, чтобы создавать веб-приложения с повсеместным доступом, при этом исследуя фундаментальные понятия и концепции программирования.
Движение курсора над объектом без нажатия (ховер) над иконкой «output» на синей полоске сверху-справа покажет ссылку, которая открывает новую закладку, показывающую только результат программы так, как это выглядело бы для пользователя, посещающего данную веб страницу, и не показывает код. Эта ссылка доступна только после авторизации и сохранения программы. Это полезно для просмотра вашей программы на полном экране. Отсюда уже можно использовать Ctrl-U, чтобы посмотреть код вашей собственной веб страницы.
В Pencil Code в URL для полного экрана есть слово “/home/”. Такие адреса могут быть использваны как ссылка, посланы по электронной почте, и вставлены где угодно. Если изменить в URL “/home/” на “/edit/”, то выводится интерфейс Pencil Code (режим редактирования), показывающий исходный код для любой программы в Pencil Code.
Что такое язык программирования?
Pencil Code позволяет программисту использовать «блочный режим», чтобы перетаскивать мышкой блоки для создания программы. Блоки в Pencil Code – это прямое представление основного текстового языка: CoffeeScript, JavaScript, или HTML. Блоки по виду отличаются от текстового кода, они являются только визуальным способом представления и редактирования команд на языке программирования.
Переключение между блоками и текстом
В Pencil Code блочный и текстовый режим совершенно эквивалентны по мощности и выразительности. Блоки – это просто визуальное представление синтаксиса JavaScript, CoffeeScript или HTML и ученики могут свободно переключаться между блоками и текстом. Кнопка на желтой закладке в нижней-левой части области редактирования позволяет программисту переключаться от блока к тексту и от текста к блочному режиму. Наведите мышку на закладку, чтобы увидеть подсказку “click for blocks” или “click for text”.
Комментарии
Примечание по комментариям: чтобы создать комментарий в коде в виде блока, сначала создайте пустой блок, нажимая «Enter», а затем напечатайте в блоке текст начинающийся со знака #. Блок комментария теперь выглядит примерно так:
Настройка.
Уроки в Pencil Code
Урок 1. Рисуем линии. Пример
Урок 2. Рисуем пятнами.
Урок 3. Рисуем свое имя. Пример
Урок 4. Рисуем фигуры.
Урок 5. Рисуем цветок.
Урок 6. Рисуем автомобиль.
Урок 7. Изменяем автомобиль, цветок, дерево, дом.
Урок 8. Рисуем Малевича.
Урок 9. Циклы.
Урок 10. Рисуем Малевича
Урок 11. Создаем тест
Создаем тест проверки усвоения материала. Пример теста (черновик)
Тест для начальной школы
Дополнительно: проекты в Pencilcode
Архив Галактики
Программирование для воссоздания картин: математика и искусство вместе
Блог тренера / 24.11.2016
Кто бы что ни говорил, но дети, «кодирующие» Малевича после второго занятия карандашным программированием, начинают и про геометрические фигуры лучше понимать, и про координаты, и. про искусство. А как приятно-то работы cмотреть! Круче, чем в музее! Теперь подробнее.
Уже на втором уроке, когда мы познакомились с инструментом перо и заливка (pen и fill), можно поставить перед учениками задачу выбора какой-то из супрематических композиций Малевича и воссоздания ее средствами pencilcode.
Малевич Автор Васильева Евгения Владимировна (здесь использована черепашья система координат)
Малевич Автор Девятова Анастасия Юрьевна (здесь использована и черепашья система координат, и декартова)
Малевич/ Крестьянин Автор Горнбергер Ирина Ринатовна
Если внимательно рассматривать картину, то можно заметить, что формы фигур четвертого ряда копируют первый, а формы фигур третьего ряда копируют второй ряд. Это позволит скопировать код для рисования первого ряда, нужно будет лишь поменять координату по Y. Аналогично сделаем с кодом для четвертого (скопируем третий, не забыв уменьшить координату по y на 100 единиц.
Когда с формой будет покончено, можно будет поменять цвета, подобрав их из этой таблицы цветов.
Результат получится такой:
Вазарели. Квадраты и круги. Автор Валерия Ланд. Первая стратегия.
Вазарели. Квадраты и круги 2. Автор Анна Осипенко. Первая стратегия.
Вазарели. Квадраты и круги 2 Автор Наталья Эрте. Вторая стратегия.
Поскольку картин с квадратными формами и прямыми линиями у Пита Мондриана немало, среди них всегда найдется такая, которую было бы удобно воспроизводить, обладая даже малым набором инструментов.
Теперь, когда мы научились задавать случайные координаты на холсте, мы можем использовать инструмент box и задать для него три любимых цвета Мондриана: красный, желтый, синий. Ну и добавить черные полоски: вертикальные и горизонтальные.
Архив Галактики
Геометрия и карандашное программирование
Блог тренера / 05.07.2016
Как учителю математики мне интересны те возможности, которые позволят опираться на геометрические понятия и использовать фигуры геометрии в качестве объектов для карандашного программирования, для рисования кодом в pencilcode. Только здесь привычные инструменты, такие, как линейка и циркуль, заменяются блочными операторами.
Кроме того, поскольку некоторое время назад увлеклась темой “переплетения” учебных предметов математики и искусства, нашла в этом новом для меня инструменте новые возможности для таких проектов. Таким образом получится “переплести” уже три разных школьных предмета, добавив к двум первым еще и информатику.
1. Рисование правильных многоугольников
Хорошо начать изучение “карандашной” программы с линейных алгоритмов и построить с помощью простых команд вперед-назад, влево-вправо геометрические фигуры с заданными линейными размерами и углами: квадрат, ромб, трапецию и т.д.. Отдельным комплексным заданием может быть практикум по созданию правильных многоугольников.
При создании пятиугольника понадобится вычислить угол поворота черепашки влево (или вправо). Для этого пригодится знание формулы суммы углов в правильном N-угольнике, расчет величины угла и понятие смежных углов.
Для закрепления темы хорошо также создать с помощью черепашки другие правильные многоугольники с целыми внутренними углами, по дороге выяснив, какие из них вы сможете построить таким “карандашом”.
2. Правильные многоугольники. Переход к циклам.
Затем учащиеся оптимизируют с использованием блока “цикл” прежние свои построения правильных многоугольников, изменяя в них количество шагов и угол поворота черепашки.
Что нарисовать?
Или такие фигуры из правильных шестиугольников.
3. Квадратный узор. Вложенные циклы.
Все описанные в этом блоке образцы создаются на основе квадратной сетки и простых команд движения черепашки. Из понятий информатики используются циклы и вложенные циклы.
Еще несколько задач-узоров для записи кода учениками. Можно предложить ученикам по этому принципу придумать и свои узоры.
4. Решетки на основе правильных многоугольников.
Здесь используются вложенные циклы и это хорошее упражнение на построение разных типов решеток: на основе правильного треугольника, квадрата, пяти- и шестиугольника. В качестве базового можно дать решетку на основе квадрата и предложить ученикам изменить ее в другие типы решеток.
6. Рисование дугами
Эту тему тоже хорошо дать в виде индивидуальных проектов. Причем, можно не тратить время на теоретическое изучение команд, а предложить ученикам разобраться с этим простым шаблоном и на его основе создать свой узор дугами. Выкладываю с кодом
Может, кто-то из читателей попробует что-то создать?
Что рисовать? Вот примеры шаблонов:
Шаблоны для индивидуальных проектов можно найти, рассматривая витражи готических соборов. Для готики характерны многоцветные витражные окна:
В заключение немного современных принтов:
Flower Extract Art Print by Akamundo Рисунок в посте STEAM-проект: задачи на картинах
Результат в pencilcode: Akamundo
Честно говоря, за решение подобной задачи можно смело ставить пятерку по геометрии (в тему углы и окружности).
Идей для «рисования» геометрических фигур с помощью «карандаша» может быть очень много. Они находятся, в том числе, и по этому списку ссылок:
Ссылки по теме:
Оригинальный материал: Geometric Design: The Basics
Перевод на русский язык:
Геометрия как искусство (инструменты)
Геометрия как искусство (часть вторая)
Геометрия как искусство: 4 и 8 (часть третья)