Повышение квалификации

2023

2021

2020

2017

2016

2014

Курс "Информационные системы"

Лекции:

Лекция 1. Введение в информационные системы (ИС) и базы данных (БД)

Лекция 2. Классификации информационных систем

Материал для практики:

Треноровочная база доступна здесь.

Введение в язык SQL

Руководство по применению оператора SELECT

HMI

GUI

0.1 Пару слов о языке

p5.js - это язык программирования, предназначенный для отрисовки графики в веб-среде.

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

---

0.2 Установка и первые шаги для работы с языком p5.js 

Для установки и работы в среде языка p5.js нет необходимости устанавливать платное программное обеспечение. Проект является открытым, распространяется бесплатно и приветсвует отзывы о функционале языка.

Для работы с языком желательно иметь следующее программное обеспечение: 

1. Браузер (все примеры в пособии будут описаны с помощью браузера Google Chrome)

Сайт о языке p5.js находится по адресу: p5js.org

Для установки и работы с языком необходимо выполнить следующие шаги:

1. Зайти на страницу загрузки языка: https://p5js.org/download/
2. Загрузить пакет p5.js Complete
3. На Ваш компьютер загрузится архив, который необходимо разархивировать на отдельное место на диске (рекомендую на рабочий стол)

Минимальный "плацдарм" для работы с языком p5.js готов (серьезно).

---

0.2.1 Расширенная подготовка к работе.

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

Сперва, необходимо установить редактор кода. Редактор кода - специальный текстовый редактор, имеющий расширенные возможности для облегчения процесса написания кода для программ. Существует множество различных редакторов кода, большинство из них бесплатны. Мы будем использовать популярный редактор кода Atom.

Для установки редактора кода Atom необходимо:

1. Зайти на страницу atom.io
2. Нажать на кнопку 'Download'. Убедитесь, что сайт правильно определил разрядность вашей ОС.
3. Загрузится файл-установщик, который необходимо запустить после загрузки.
4. Установщик установит программу и автоматически запустит Atom.

Редактор кода готов к работе.

Теперь надо указать Атому, чтобы он работал с кодом p5.js. Для этого надо вспомнить, куда вы разархивировали пакет p5.js. 

Допустим, я разархировал пакет на рабочем столе. В таком случае у меня на рабочем столе должна появится папка с названием p5. Внутри папки есть несколько файлов и папок, о предназначении которых поговорим позже.

Итак, я знаю где у меня пакет с языком p5.js. В Атоме мне необходимо выбрать меню File-Open Folder, после чего указать папку с языком p5.js.

1. В окне выбора нахожу Рабочий стол
2. Выбираю папку p5
3. Дальше выбираю еще раз вложенную папку p5
4. Дальше выбираю вложенную папку empty-example
5. В окне выбора нажимаю "Выбрать"

Если Вы все сделали правильно по представленному примеру, то слева, в окне появится окно, где отображается папка empty-example, и два файла, находящихся внутри папки: index.html и sketch.js.

Если все именно так, Вы готовы приступать к написанию Вашей Первой Программы.

 

Здесь будут размещаться материалы по языку программирования p5.js.

 

Лаб. работы по Windows

Лаб.работа №1

Лаб.работа №2

Лаб.работа №3

Лаб. работы по MS Word:

Лаб. работа №1. Форматирование текста

дополнительно: ссылка на текст

Лаб. работа №2. Таблицы

Лаб. работа №3. Форматирование многостраничного документа

Примечание: предалагаемый файл необходимо загрузить и непосредственно работать с ним же

DOC-файл первой лаб.работы

DOC-файл второй лаб.работы

Лаб. работа по Excel

Лаб. работа №1. Таблицы

 

Графические редакторы. Adobe Photoshop

Установщик

Лаб. работа по Photoshop

Ссылка на книгу

Лекции:

Лекция 2. Основные понятия билингвального образования и обучения

Практическое занятие №1. Таксономия Блума

Практическое занятие №1. Таксономия Андерсона-Кратволя

• Задание смотреть здесь
• Справочный материал на английском языке

Лекция 3. Ретроспективный анализ опыта билингвального обучения в России (1947-1977 гг.)

1.0 Введение  p5.js

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

Но сейчас не об этом. Я предлагаю Вам на собственном опыте почувствовать, как пишутся программы на p5.js, и как можно увидеть результат.

1.0 Структура программы  p5.js

Результат выполнения кода p5.js программой можно назвать с большой натяжкой, т.к.у Вас в итоге не будет отдельной программы, которую Вы могли бы запустить в два клика. Важно понимать, p5.js - это язык веб-программирования, то есть вся работа делается и видится исключительно на веб-страницах.

Если вы внимательно прочитали вводный раздел по языку p5.js, то Вам должна быть знакома папка empty-example. В ней находятся два файла, давайте их опишем:

• Файл index.html - веб страница, на которой выполняется код, написанный на языке p5.js. На этапе обученияне рекомендуется изменять данный файл без нужды .
• Файл sketch.js - код программы. Это и есть файл, с которым мы проведем большую часть курса.

Самая простая программа уже записана и даже можно просмотреть результаты выполнения работы данной программы. Для этого откройте файл index.html с помощью браузера.

Вы увидете пустую веб-страницу. Не волнуйтесь, все работает правильно. Просто сейчас выполняется программа, которая ничего не делает.

Чтобы посмотреть код данной программы, вернитесь в редактор Атом, и в меню слева откройте файл sketch.js. 

Вы увидете следующий код:

function setup() {
  // put setup code here
}

function draw() {
  // put drawing code here
}

Именно здесь необходимо вносить изменения в код.

---

2. Моя Первая Программа

Напишем собственный код и посмотрим на результат.

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

Приступим.

Обращаем внимание на первую часть конструкции:

function setup() {
  // put setup code here
}

Строка, начинающаяся с двух слешей (//), называется комментарием. В комментариях пишут пояснения о тех или иных участках кода. На выполнение программы они не влияют. Удалим его.

Теперь, внутри двух фугурных скобок {} запишем команды:

createCanvas(200,300)

background(255,0,0)

Слегка опишем эти команды:

• createCanvas(200,300) создает рабочую область (т.н. холст), на котором будет производится отрисовка элементов. У команды указываются два обязательных параметра, записываемые в скобках  -  ширина и высота области (в пикселях). То есть, мы даем команду создать рабочую область площадью 200 на 300 пикселей.
• background(255,0,0) окрашивает фон в указанный цвет (аналог заливки). У команды разнообразный набор параметров. В данном случае мы указываем RGB-код цвета (каждая компонента пишется через запятую), которым мы хотим "залить" наш фон.

Сохраните написанный код, нажав комбинацию клавиш Ctrl-S. Теперь перейдите в браузер и обновите страницу index.html.

Если все правильно сделали, результат будет следующим:

Уже кое-что есть!

Добавим на рабочую область круг.

Для этого добавим еще одну команду:

ellipse(50,60,70)

Нетрудно понять, что команда добавит эллипс. Список параметров :

• первые два числа указывают координаты центральную точку эллипса, то есть в примере мы ставим эллипс, центром которого будет  50 пикселей по горизонтали и 60 по вертикали
• следующее число указывает на ширину эллипса. В нашем примере ширина эллипса равняется 70 пикселям.
• Четвертое число указывает на высоту эллипса. Если не указывать данный параметр (к в примере), высота будет равна ширине. Иначе говоря, без указания данного параметра мы получим круг.

Опять, сохраним код комбинацией Ctrl-S, перейдем в браузер и обновим страницу:

Если все заработало правильно, вы получите результат как на рисунке сверху.

Поздравляю - Вы написали Вашу Первую Программу на языке p5.js.

Есть ли в нашем Университете более творческий институт, чем Институт филологии? Вопрос риторический, однако смысл сообщения вполне понятен – тут учатся очень творческие умы. Этому способствует изучение творчества монументальных авторов вроде Пушкина, Чехова и Толстого.

Приятный бонус такой работы в том, что после каждодневного штудирования тысяч страниц различных романов, эпосов и поэм, появляется способность в ярких красках рассказать о прочитанном, заинтересовать таким образом своих друзей и «завербовать» их в клуб любителей русской/западной/любой-другой литературы. И ведь у наших студентов это очень хорошо получается – упомяни невзначай на паре о каком-то произведении, так они сразу выложат тонну фактов, нюансов и скрытых смыслов.

Мы на кафедре билингвального и цифрового образования поддерживаем такие порывы наших студентов и каждый год организуем специальный конкурс в рамках студенческой конференции. Стараясь шагать в ногу со временем, мы предлагаем студентам создать буктрейлеры – мини-фильмы, которые как раз и должны разбудить интерес зрителя к литературному произведению.

Свобода творчества во все поля – помимо традиционных филологических знаний, наши студенты проявляют себя как юные режиссеры (особо почитаем Уэс Андерсон), монтажеры, саунд- и эмбиент-дизайнеры. Актерская игра тянет на отдельную статью – в момент просмотра фильмов думаешь, а действительно ли эти молодые люди учатся у нас.

Итак, в этом году было заявлено более 50 (!) работ, посвященные творчеству Великого Льва Николаевича Толстого. Выбрать в финал 9 работ было особо трудно. 5 апреля 2019 года был публичный показ фильмов-номинантов, и надо сказать, что презентация вызвала большой интерес даже у соседних аудиторий, где проходила студенческая конференция. В результате победили две работы:

- фильм «Свет уснувшей личности» по мотивам романа «Война и мир», созданный группой 10.1-802. Режиссер – Краснова Варвара;

 

 

 - буктрейлер «Кавказсккий пленник» об одноимённой повести, созданный студентами группы 10.1-807. Режиссер – Мингазова Алина.

 

 

Надо сказать, что все работы были очень разнообразны, красивы, и очень качественно сделаны, и смотреть их было одно удовольствие. Ниже представлены эти самые работы, которыми теперь можете насладиться вы.

 

Приятного просмотра!

 

0. Введение

Итак, рисовать мы умеем. Но черно-белая палитра вряд ли выглядит привлекательной, из-за чего давайте изучим функции рисования в p5.js.

---

1. Его величество RGB

Для программирования цвета используется распрастраненная модель RGB. Вкратце, в данной модели любой цвет описывается с помощью комюинации трех основных цветов: 

• красный (Red)
• зеленый (Green)
• синий (Blue)

Каждый из основных цветов имеет 256 оттенков, от 0 (полное отсутсвие цвета) до 255 (полное присутсвие цвета). Сама комбинация записывается в виде последовательности трех чисел, например:

• (255, 128, 20)

Приведем примеры цветов и их RGB-коды:

• (0,0,0) - черный (т.е. полное отсутсвие каких либо оттенков)
• (255,255,255) - белый (присутсвие всех цветов. Чтобы вникнуть и понять такую магию, вспомните опыт с призмой и лучом света)
• (255,0,0) - красный
• (0,255,0) - зеленый
• (0,0,255) - синий

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

Важно заметить, что подобная модель представления цвета используется практически во всех языках программирования.

---

2. Три кита рисования цветом

Мы разобрались, как выбрать цвет. Теперь давайте расскрасим какой нибудь наш скетч.

Нарисуйте домик используя материалы предыдущего раздела, подобный этому:

Полный листинг программы:

function setup() {
  createCanvas(600,400)
}

function draw() {

rect(100,100,100,100)
triangle(80,100,220,100,150,50)
rect(0,200,500,150)
}

По коду понятно, что для отрисовки используются три объекта: прямоугольник (стена дома), треугольник (крыша) и еще один прямоугольник (земля).

Для того, чтобы раскрасить объекты, мы будем использовать (в разных ситуациях) три команды: background(), fill(), и stroke(). Описание для каждой из команд  следующее:

• команда background() устанавливает цвет фона. Фон будет раскрашен в тот цвет, который указан в скобках команды
• команда fill() устанавливает цвет заливки для фигур, которые будут описаны после команды fill() 
• команда stroke() устанавливает цвет границ для фигур, которые будут описаны после команды stroke()

Выделенные жирным утверждения звучат занудно, однако указанный нюанс необходимо запомнить.

Приступим к раскраске. Заранее договоримся со цветами - небо пускай будет голубым, стена желтая, крыша красная, а земля - зеленая, .

Раскрасим объекты в указанном порядке.

Для отрисовки неба мы не используем какие-либо фигуры - в данном случае задний фон рисунка выполняет роль неба. Из-за чего напишем команду, отвечающую за раскраску фона. Функция darw() будет выглядить следующим образом:

function draw() {

background(0,255,255)

rect(100,100,100,100)

triangle(80,100,220,100,150,50)
rect(0,200,500,150)
}

Круто! Теперь мы имеем чистое голубое небо над нашим домиком.

Перейдем к отрисоке объектов. Начнем со стены, которая у нас желтая. Вполне логично предположить, что мы можем поставить функцию fill() сразу после background(). Так оно и есть, но результат будет более интересным:

function draw() {
background(0,255,255)
fill(255,255,0)
rect(100,100,100,100)
triangle(80,100,220,100,150,50)
rect(0,200,500,150)
}

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

function draw() {
background(0,255,255)
fill(255,255,0)
rect(100,100,100,100)
fill(255,0,0)
triangle(80,100,220,100,150,50)
rect(0,200,500,150)
}

 

Посмотрим на результат:

Получилось лучше: крыша и стена раскрашены правильно, но так как отрисовка земли идет после описания цвета крыши, цвет земли станивится аналогичным. Для исправления данного казуса надо добавить еще одну команду fill(). Догадайтесь, куда:

function draw() {
background(0,255,255)
fill(255,255,0)
rect(100,100,100,100)
fill(255,0,0)
triangle(80,100,220,100,150,50)
fill(0,255,0)
rect(0,200,500,150)
}

Наконец-то, наш домик теперь заиграл правильными красками и не походит на кадр из ремастера "Семнадцать мгновений весны":

Пойдем еще дальше: "удалим" черную границу травы. Для этого нам необходимо указать соответсвующий цвет границы для соответсвующей фигуры:

function draw() {
background(0,255,255)
fill(255,255,0)
rect(100,100,100,100)
fill(255,0,0)
triangle(80,100,220,100,150,50)
fill(0,255,0)
stroke(0,255,0)
rect(0,200,500,150)
}

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

Трава теперь выглядит как надо, однако зеленые границы имеет не только трава: теперь все фигуры имеют зеленые границы. В чем-дело?

Это не ошибка и не просчет программистов. Суть работы кроется в механике функции draw() - вы ведь помните, что она выполняется непрерывно, да?

Пошагово посмотрим порядок работы цветовых функций внутри функции draw():

• Круг №1:
  • Устанавливаем цвет фона (голубой)
  • Устанавливаем цвет заливки (красный)
  • Устанавливаем цвет границы для фигуры (не указан, по-умолчанию черный)
  • Устанавливаем цвет заливки (желтый)
  • Устанавливаем цвет заливки (зеленый)
  • Устанавливаем цвет границы (зеленый)
• Круг №2
  • Устанавливаем цвет фона (голубой)
  • Устанавливаем цвет заливки (красный)
  • Устанавливаем цвет границы для фигуры (указан на первом круге - зеленый!)
  • Устанавливаем цвет заливки (желтый)
  • Устанавливаем цвет заливки (зеленый)
  • Устанавливаем цвет границы (зеленый)
• Круг №3   и т.д.

То есть, если мы определим в функции draw() цвет границы один раз, то в последующих повтораху нас все границы фигур будут закрашены в указанный цвет.

Для исправления ситуации надо просто добавить еще одну установку цвета для границ:

function draw() {
background(0,255,255)
stroke(0,0,0)
fill(255,255,0)
rect(100,100,100,100)
fill(255,0,0)
triangle(80,100,220,100,150,50)
fill(0,255,0)
stroke(0,255,0)
rect(0,200,500,150)
}

Теперь все выполнено так, как нам и хотелось.

3. Альфа без омеги

Цветовая модель, помимо установки цвета, имеет еще один необязательный параметр - это прозрачность, или альфа канал. Для установки прозрачности какого-либо цвета необходимо лишь добавить еще одно число к RGB-коду, например:

fill(255,255,0,120)

Параметр прозрачности имеет 256 градаций, где 0 - полная прозрачность, а 255 - полная непрозрачность.

По традиции, в конце раздела посмотрим видео Дэниела:

 

0. Введение

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

1. Системные переменные

Зайдем издалека.

Допустим, мы нарисовали круг. и хотим, чтобы он двигался.

Здесь представлен код скетча, где нарисован статичный круг:

function setup() {
  createCanvas(600,400)
}

function draw() {
background(0,255,255)
fill (255,0,0)
ellipse(100,100,50)
}

Если вы читали предыдущие разделы, сюрпризов вы не найдете.

Такие статичные фоны хороши, однако они вряд ли кого удовлетворят, и создавать систему программирования ради рисования примитивных фигур не станут. Можно созданный скетч сделать поживее.

Поставим себе задачу - заставим этот круг двигаться по траектории курсора (т.е. где курсор - там и круг).

Анализ показывает, что за расположение круга отвечают две первые цифры в его параметрах. А функция draw() с определенной частотой и постоянно отрисовывает скетчи заново. Логично, что для движения надо просто правильно указать координаты курсора. 

Но как?

Язык программирования вещь строгая, и простой разговорный язык он не понимает. То есть код:

ellipse(там, где курсор,50)

система не поймет. Надо использовать определенные команды для объяснения того, чего мы хотим.

К тому же, если мы посмотрим на пример, то увидим, что координаты у нас указаны в фиксированных числах. "Жесткое" фиксирование настроек непозволительно при программировании того, что меняется по ходу времени. А так как положение курсора меняется согласно нашему желанию, надо думать, как изменить код.

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

Вспомните школьный курс алгебры с уравнениями, физику, графики, и вы сразу поймете смысл переменных.

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

Попробуем прописать необходимые переменные. Для начала заставим круг двигаться только по горизонтали.

Для этого в коде эллипса прописан первый параметр, равный 100:

ellipse(100,100,50)

Вместо фиксированного числа 100 введем переменную. Идея хорошая, но вызывает много вопросов. Какуб переменную? Как определять положение курсора? И так далее.

На самом деле, в данной задаче мы воспользуемся одной хитростью и вместо того, чтобы завидить собственные переменные, мы будем использовать внутренние (системные) переменные. Такие переменные отслеживают параметры компьютера и с ними не надо возиться. Для определения горизонтального положения курсора используется системная переменная mouseX. Вот эту переменную нам надо вписать вместо чисел, отвечающих за горизонтальное положение круга.

ellipse(mouseX,100,50)

Измените код и проверьте - теперь ваш круг будет двигаться в том же положении (по горизонтали), что и курсор.

Задание:

1. Измените код, чтобы он двигался с курсором не только по горизонтали, но и по вертикали. Догадайтесь, как будет называться переменная.
2. Допустим, я вписал переменную mouseX так:  ellipse(mouseX,mouseX, 50). Как вы думаете, что произойдет?

2. Пишем переменные сами

Круг теперь, словно волшебный, двигается по велению курсора. Это хорошо. Теперь предлагаю задать для круга траекторию движения и заставить его двигаться самостоятельно.

Возьмем самую простую траекторию - движение по прямой и создадим анимацию движения на нашем скетче.

Сперва необходимо сказать, что анимация является лишь иллюзией движения, когда кадры незначительно, но часто изменяются. Для проверки предлагаю включить какое нибудь видео и поставить его на слоу-мо.

Определение анимации удачно перекликается с конструкцией скетча, ведь у нас есть функция draw(). Частота повтора функции составляет 50 повторов в секунду, что позволяет нам отрисовывать кадры и незначительно их изменять.

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

Для этого еще раз возьмем код:

function setup() {
  createCanvas(600,400)
}

function draw() {
background(0,255,255)
fill (255,0,0)
ellipse(100,100,50)
}

Далее, обратим на нужный нам параметр - число 100. Оно фиксировано. И допустим, мы хотим его смещать вправо на один пиксель каждый раз, как будет выполнятся функция draw(). На первом круге будет 100, на втором - 101, на третьем - 102 и так далее. Но так как число фиксировано, мы не можем каждый раз писать 100,101,102 и так далее. Надо завести переменную, которая будет меняться каждый раз, как будет выполнятся функция draw().

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

ellipse(cx,100,50)

Но это еще не конец, надо все-таки познакомить компьютер с этой переменной. Для этого надо в самом начале кода записать следующее:

var cx=100

Рассмотрим по-порядку, что это такое:

• служебное слово var обозначает, что после него идет перечисление переменных
• конструкция cx=100 означает, что:
  • во-первых, мы объявляем о новой переменной cx
  • во-вторых, мы присваиваем переменной cx значение 100

Последний пункт особенно важен, ведь там мы впервые встречаем очень частую в программировании операцию - присваивание. Присваивание в p5.js обозначается одним знаком равенства ("="). Слева пишется переменная, которой мы хотим задать новое значение, а справа это значение вычисляется.

Не забывайте объявлять и сразу же определять значения ваших переменных, иначе в работе программ вероятны сбои.

Объявив переменную и присвоив ей начальное значение, можно убедиться в работоспособности написанной программы. На первый взгляд, ничего не изменилось, круг и ныне там. Однако совершенные изменения теперь нам помогут анимировать круг, чего в старом варианте программы мы бы никак не добились.

Проведем анализ. У нас есть переменная, равная 100. При каждом выполнении функции отрисовки draw() программа рисует круг и для определения его горизонтального положения обращается к переменной cx. Получается, надо каким-то образом указать, чтобы ее значение увеличивалось на единицу в каждом повторе функции.

Для этого, после функции ellipse() напишите слудующий код:

cx=cx+1

Это всё. Именно эта строчка позволяет нам двигать круг. В данном случае мы воспользовались операцией присваивания. Сама конструкция сложна для первого знакомства, на самом деле все просто.

Дело в том, что присваивание работает справа налево. То есть:

• Сначала вычисляем часть формулы, которая находится справа от знака присваивания - cx+1
• Значение cx равно 100, поэтому cx+1 будет равно 101
• Значение 101 присваивается переменной cx

Получается, когда функция отрисовки будет вновь обращаться к переменной, она будет работать с числом 101, а не 100, как это было в первый раз. Таким образом мы добъемся увеличения значения переменной, следовательно, и движения круга.

 

Полный исходный код:

var cx=100
function setup() {
  createCanvas(600,400)
}

function draw() {
background(0,255,255)
fill (255,0,0)
ellipse(cx,100,50)
cx=cx+1
}

И видео от Дэна про круг-курсор:

И двигающийся круг:

 

https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

Впервые в Институте филологии и межкультурной коммуникации имени Льва Толстого на кафедре образовательных технологий и информационных систем в филологии прошел конкурс буктрейлеров по произведениям великого русского писателя Льва Николаевича Толстого. Финал конкурса проводился 29 марта 2018 года на секции «Информационные технологии в филологии и образовании» итоговой научно-образовательной конференции студентов.

В 2017-2018 учебном году преподаватели кафедры объявили о проведении конкурса буктрейлеров по произведениям Л.Н. Толстого студентам 1 курса по направлениям подготовки: прикладная и зарубежная филология, педагогическое образование, профессиональное обучение, дизайн, осваивающим информатику и информационные технологии. Студентов заинтересовала идея конкурса, посвященная году Льва Толстого, объявленного в Республике Татарстан в 2018 году.  В нем приняли участие 85 человек из групп 10.1-701, 10.1-702, 10.1-703, 10.1-704, 10.1-706, 10.1-707,  10.1-708, 10.2-702, 10.2-712, которые представили 28 работ.

На заочном туре конкурса жюри выбрало 8 работ и выделило 2 номинации конкурса: буктрейлер и авторский фильм.  В финале конкурса перед началом показа роликов творческие коллективы авторов представили зрителям свои работы, которые отличались авторскими подходами, оригинальными творческими замыслами, различными способами и технологиями их создания. Студенты представили буктрейлеры и авторские фильмы на произведения Л.Н. Толстого «Война и мир», «Анна Каренина», «Кавказский пленник», «После бала», «За что?», «Рассказ аэронавта».  Авторский фильм «Читай Толстого!» представил современный взгляд молодежи на творчество великого писателя.

Победители в номинации «Буктрейлер»:

I место: Зиганшина Камила, Чуракова Дарья, Галлямова Разина из гр. 10.2-712 («Война и мир»);

II место: Константинова Наталия, Шакирова Элина, Вахрушева Александра, Кедрина Екатерина, Зайнутдинова Лилия из гр. 10.1-707 («За что?»);

III место: Гарипова Лейсан из гр. 10.1-706, Цахер Диана из гр. 10.1-707 («Кавказский пленник»); Дюпина Анастасия, Низамиева Илюза из гр. 10.1-708 («После бала»).

Победители в номинации «Авторский фильм»:

I место: коллектив авторов гр. 10.1-704, староста Набиуллина Алина («Читай Толстого!);

 

II место: Коркина Камилла, Адова Диана, Оглоблина Яна («Рассказ аэронавта»);

III место: коллектив авторов гр. 10.1-703, староста Ханнанова Альбина («Война и мир»); коллектив авторов гр. 10.1-704, староста Ласкина Юлия («Анна Каренина»).

 

Источник информации: Лукоянова М.А., Данилов А.В.

Фотографии: Хусаинова А.Х.

0. Введение

В данном разделе будет дана информация о условной конструкции в программировании, а также команды и операторы для p5.js, которые помогут реализовать условный переход.

1. Что такое "условие"?

Все ранее рассматриваемые программы имели линейную структуру: все инструкции выполнялись последовательно одна за одной, каждая записанная инструкция обязательно выполняется.

Однако, при программировании каких-либо процессов часто возникает ситуация, когда дальнейшие действия зависят от опеределенной ситуации, иначе говоря, условий. В таких случаях необходимо использовать условные конструкции.

Смысл условной конструкции заключается в следующем: в определенном участке кода указывается выражение, которое необходимо проверить на "правильность". Это и есть условие. Если выражение правильно (другими словами, условие выполняется), то выполняется одна ветка команд. Если же условие не выполняется - выполняется другая ветка. Вот и все.

Такая конструкция является основой для многих языков программирования является основой функциональности.

Рассмотрим рисунок и дадим комментарии.

• в блоке "Условие" указывается условие или список условий, необходимый для проверки и дальнейших действий. Как правило, условие составляется как логическое утверждение. Алгебра логики (особенно парадигма "ложь/истина") позволяет легко проверить правильность утверждения и принять правильную ветку выполнения.
  • примеры логического утверждения:
    • x==5 (именно два знака равно)
    • x>5
• Левый и правый блоки схожи по своему содержанию. В них пишутся команды, которые надо выполнять в зависимости от ситуации. Стоит отметить, что какая-либо из веток может быть пустой, если по условию задачи не требуется каких-либо действий. Необходимо внимательно читать задачи.

2. Условный оператор в p5.js

Для описания условной конструкции в языке p5.js применяется операторы if  ... else. Напишем код с этими операторами и объясним:

if (x>5)

{x=x+1

}

else

{x=x-1

}

Здесь:

1. Служебное слово if объявляет о начале условной конструкции.
2. В скобках пишется условие на проверку, в нашем случае, больше ли x чем 5
3. Далее, после условия, в фигурных скобках пишется список действий, который выполняется в случае правильности условия. Иначе говоря, если до этого в программе значение переменной x приняло значение 7, то выполнялись бы именно эти действия (т.к. выражение "семь больше пяти" является правильным )
4. Далее, после описания действий при выполнения условия, пишется слово else, а в фигурных скобках  пишется список действий, который выполняется в случае неверности условия. Иначе говоря, если до этого в программе значение переменной x приняло значение 4, то выполнялись бы именно эти действия (т.к. выражение "четыре больше пяти" является неверным). 

• NB! иногда, при отсутсвии необходимости, часть else {} не пишут.

2.1. Практическое применение

Для того, чтобы попробовать использовать условный оператор в полевых условиях, предлагаю решить одну задачу.

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

Предлагаю записать код данной задачи и модифицировать его.

 

Для этого просмотрите видео Дэниэла об условном операторе и составьте свою собственную программу.

Дополнительное задание - заставить шар двигаться по диагонали и "отскакивать" от всех четырех стен.

0. Введение

Итак, из прошлых разделов вы должны были научиться устанавливать систему программирования и азам работы в редакторе кода. В данном уроке мы начнем изучать т.н. синтаксис языка - иначе говоря, основы и правила описания команд в языке программирования p5.js.

Язык "заточен" для работы с графикой, из-за этого, множество команд и примеров будут связаны с построением фигур, рисунков на Интернет-страницах.

1. Минимальная программа.

Разные языки программирования имеют разное устройство команд и операторов. В некоторых можно прямо в пустой строке ввести команду, и она успешно выполнится.

Однако p5.js и его прямой предок - JavaScript - имеют несколько усложненную струкутру.

Дело в том, что любая команда в p5.js должна представляться как функция - то есть некая сущность, имеющая имя, и которая включает в себя набор других команд (которые тоже могут выступать в качестве функций). Звучит сложно, но на деле все легче.

Тут важно сказать, что самая распрастраненная программа будет состоять из двух функций:

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

Получается, даже программа, которая ничего не будет делать, будет содержать эти две функции. Выглядит это так:

function setup() {

}

function draw() {

}

Знакомые строки, не правда ли? Действительно, когда мы начинали знакомство с p5.js, мы работали с пустым примером, который содержал эти строки.

Функция setup() - это и есть функция инициализации. Внутри фигурных скобок пишутся все команды и настройки.

Соответсвенно, функция draw() - функция рисования, где желательно размещать команды, связанные с рисованием и движением. Как и в setup(), так и в draw(), так и в любой другой функции в p5.js: команды пишутся внутри фигурных скобок.

Начнем изучение команд рисования в p5.js.

2. Команды и функции p5.js

2.1 Функция createCanvas() 

Мы изучаем рисование, из-за этого первую функцию, которую необходимо изучить, это создание канвы.

Все объекты дли отрисовки должны размещаться в строго отведенной для этого области. Данная область называется канвой (синонимы: полотно, рабочая область). Поэтому, прежде чем рисовать, нам надо создать канву с помощью функции createCanvas() .

Для этого в функцию инициализации пропишем команду createCanvas() с некоторыми уточнениями:

function setup() {

createCanvas(400,600)

}

Все просто: внутри функции setup() мы ввели одну строку createCanvas(400,600). Данная строка "диктует" компьютеру создать прямоугольную канву. Цифры 400 и 600 будут отвечать за ширину и высоту канвы, которая измеряется в пикселях.

2.2 Первая геометрическая фигура и о системе координат в p5.js

Канва создана - пора приступать к рисованию.

Существует множество команд для отрисовки векторных графических примитовов. Всю отрисовку рекомендуется размещать внутри функции draw()

Начнем, пожалуй, с прямоугольника. Нарисуем прямоугольник. Для этого в p5.js существует функция rect():

rect(30,40,50,70)

Вы заметили, что команда имеет несколько чисел внутри скобок. Это параметры функции, которые определяют поведение в программе. Изучим их.

• первые два числа (в моем случае, это 30 и 40) отвечают за положение в системе координат верхнего левого угла прямоугольника (x,y).
• последующие два числа определяют ширину(w) и высоту(h) прямоугольника.

В общем виде этот набор параметров записывают следующим образом:

rect(x,y,w,h)

И вот тут возникает интересный момент с системой координат. С одной стороны, все логично и числа 30 и 40 отвечают за x и y-координаты соответсвенно. С другой стороны, есть нюансы:

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

Таким образом, если мы запишем и выполним код, и откроем браузер, мы увидим следующее:

Проанализируем и разметим получившуюся отрисовку:

Попробуйте сами разместить прямоугольник и укажите собственные параметры.

2.3 Отрисовка других геометрических фигур

Теперь мы умеем рисовать в p5.js. Изучим другие фигуры и прокомментируем набор параметров для каждой из фигур.

Начнем с точки:

point(x,y)

Наборы параметров, необходимых для описания точки, минимальны - это лишь ее координаты.

Так рисуется линия:

line(x1,y2,x2,y2)

В данном случае, линия представляет собой соединение двух точек, и в параметрах предсказуемо описаны координаты этих двух точек.

Отрисовка треугольника построена по этому же подходу, и треугольник представлен как набор трех точек и линий между ними:

triangle(x1,y2,x2,y2,x3,y3)

Нарисуем эллипс:

ellipse(x,y,w,[h])

Всё очень похоже на прямоугольник, но, в отличие от прямоугольника, координаты x и y служат для определения радиуса эллипса. Заметьте - параметр высоты (h) указан в квадратных скобках. Это означает, что вводить его необязательно. Иначе говоря, если не указать высоту в параметрах, компьютер приравняет высоту к ширине эллипса. Таким образом, мы получим идеальный круг.

3. Где брать справочный материал?

Естественно, что все функции мы здесь описывать не будем. Все описание, более емкое и исчерпывающее, представлено на сайте языка p5.js в разделе References:

p5js.org/reference

Также рекомендуется к просмотру ролик Дэниела Шиффмана:

 

 

Лекция 1


Лекция 2


Лекция 3


Лекция 4


Лекция 5


Лекция 7 (Да, 7)


Лекция 8


Лекция 9

Презентация

Список лекций:

Вводная лекция

Лекция 1 Таксономия Блума

Лекция 2 Ментальные карты

Лекция 3 Дискуссия

Лекция 4 Сократоический диалог

Пример

Лекция 5 Мастер-класс

Лекция 6 Кейс-технология

Лекция 7 Ролевая игра