1.1: Введение - p5.js Tutorial

В этом видео я рассказываю о p5.js. Что это такое? Что с этим можно делать? Откуда это взялось? Как это связано с Processing? p5.js это библиотека JavaScript и простой редактор, в котором можно разрабатывать креативные вычислительные проекты для браузера. Его можно использовать в искусстве, визуализации данных и создании веб-сайтов вместе с HTML5, CSS и JavaScript.

Следующее видео: https://youtu.be/D1ELEeIs0j8?list=PLR...

Поддержите канал на Patreon: https://patreon.com/codingtrain

Связь: https://twitter.com/shiffman

Присылайте мне вопросы и задачи для написания кода!: https://github.com/CodingTrain/Rainbo...

Ссылка на код на Github: https://github.com/CodingTrain/Rainbo...

p5.js: http://p5js.org
Processing: http://processing.org
Processing Foundation: https://processingfoundation.org/

Больше видео об основах p5.js: https://www.youtube.com/playlist?list...

Вы можете помочь нам перевести это видео!

http://amara.org/v/HCxe/

Привет! Я делаю видео!

Вы смотрите видео... наверное...

Цель этого видео - рассказать о
такой штуке как p5.js

Что такое p5.js?

Следует ли или может
вы думаете об изучении

этой "p5.js" с самого,
самого начального уровня

без какого-бы то ни было
опыта с чем-либо ещё,

для чего вы можете её
использовать и что произойдёт?

Сделаю ли я больше видео?
Меньше? Как-то так.

Итак, для начала давайте я
введу вас в курс дела.

Существует такая вещь как Processing.

Это проект, основанный в 2001

Casey Reas и Benjamin Fry

Они оба были студентами
в MIT Media Lab -

дизайнеры, художники, программисты, -
пытались создать инструмент,

который помог бы при работе.

С тех пор, с 2001, эта идея о "креативном
кодинге" - многозначный термин, -

"программирование креативных приложений"..
Мне нравится смотреть на это

как на "творческое самовыражение с
помощью программирования", -

способ передачи и выражения идей,

в то же время создавая
вычислительные инструменты, -

это похоже на - если вы знаете как
научиться программировать, -

Вокруг много "Учись кодить,
учись кодить, все должны

научиться кодить! Ааа!" всякого такого -

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

Вокруг много классных вещей -

можете научиться играть на скрипке,
это прекрасно, -

но существует такая мощная сторона
обучения программированию в том смысле

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

И если вы не хотите застрять,
используя какое-угодно ПО

другие люди - огромные корпорации -

если вы хотите выразить себя
новым, иным способом -

научиться программировать - отличная
возможность это сделать.

К тому же, и здесь мы совершили полный
оборот, -

учиться программировать и видеть
результаты своей работы в браузере,

в сети, таким образом другие тоже
могут посмотреть на это, -

чем-то делиться и запросто
распространять, - это очень важно.

И что интересно, когда Processing только
создали, он был основан на

языке "Java", а это было еще в
далёком 2001-ом,

и Java был использован в основном потому,

что можно делать такие штуки как апплеты
и их можно запускать в браузере!

Таким образом можно было написать
программу в Processing, выложить ее в сеть,

распространить, весь мир
пользовался бы ею, вы бы разбогатели

или, еще лучше, вы бы не разбогатели,

но могли бы сделать что-то хорошее для
мира - а, может, и то, и другое!

В то время, это имело смысл.

Промотаем на 14 лет вперед, 2015-ый,

когда вы в последний раз видели
java-апплет в сети?

Если и видели, то вероятно вас не ожидало
ничего более чем огромное сообщение

о том, что ваш браузер завис и
ничего не работало.

Сейчас же в браузерах используется нечто
именуемое JavaScript.

Сейчас расскажу об этом поподробнее, -

JavaScript позволяет программировать и
создавать кучу клевых штук

для браузера. Если вы хотите создать
какой-нибудь неповторимый

и анимированный и креативный сетевой
контент, то JavaScript и p5.js

это то, что вам может быть интересно.

Теперь, [...] пару лет назад, мы говорили
об этом

и задали такой вопрос:

"Какой язык вы бы использовали, если бы
Processing изобрели только сейчас?"

И кое-кто дал очень любопытный ответ на это,

- этим кем-то была Lauren McCarthy, -

и Lauren McCarthy основала проект
совместно с Processing...

- Processing же некоммерческая организация,
я хотел сказать организация Processing, -

[...]

И Lauren сказала: "Что ж, что если бы
Processing изобрели сегодня,

а языком был не Java, а JavaScript?"

Как раз это и есть проект p5.js.

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

под названием processing.js.

Знаю, все ужасно путанно, но я хочу
рассказать об этом.

processing.js это проект, основанный
John Resig, и куча других людей

с тех пор работали над ним.

processing.js это как бы попытка решить
другую проблему:

ваш java код больше нельзя открыть
в браузере как апплет,

что если бы "за кулисами" его можно было
бы перевести в JavaScript

и только потом запустить его?

Но этот проект, p5.js, отличается тем, что
это совершенно новый проект.

Мы могли бы сейчас чудесно и
совершенно счастливо думать о

такой штуке как Processing, которую я
немного упомянул

но сейчас, в этой серии видео,

мы не будем обращать на это внимание.

p5.js - это среда, простая (надеюсь)

и дружелюбная к новичку среда,

которая поможет вам изучить JavaScript,

создавать приложения, вычислительные,
творческие, интересные -

надеюсь, интересные - вещи,
происходящие в вашем браузере.

И постепенно, перед вами бы
открылось множество путей:

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

веб-сайты, в роли веб-дизайнера,

существует множество троп,
по которым вы можете пройти

начиная с этого набора простых видео,
которые я надеюсь создать.

Мне кажется, это даёт почти
полный порядок вещей.

Можно рассмотреть ещё несколько
вещей относительно

"как сделать что-то в веб-браузере",

мало одного JavaScript, вам потребуются
другие вещи, такие как

HTML, CSS и JavaScript,

но сейчас, думаю, очень кратко -

и продолжу на следующем занятии, -

мы посмотрим, откроем p5.js и сделаем
там несколько вещей,

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

Что было бы прекрасно, так это если бы
я показал вам видео на подобие

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

Не поймите меня неправильно, вокруг
множество отличных фреймворков JS.

Мне кажется, я здесь что-то упустил -

как и Processing, построенный на Java,

в этом случае немного не так:

p5.js не то чтобы построен на
JavaScript, это набор...

Уф, тяжко... А я так хорошо справлялся!

Как я считаю, будет полезным рассмотреть
p5.js как две составных части:

одна из этих вещей -
библиотека функций.

Лучше представить это так:

предположим, мы хотим выучить JS.
И вы заходите в Google и набираете

"JavaScipt" - бац!
Вах! Здесь столько всего!

Миллион постов на Stack Overflow,

где люди задают вопросы,

15 миллионов "что-то.js",
которые можно изучить,

и что-то называемое jQuery, -
слишком много всего.

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

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

библиотеку функций

"нарисовать круг", "нарисовать
прямоугольник", "задать цвет" -

вы можете использовать накоторые
простые отображающие функции, чтобы

пройти эти первые шаги в программировании.

Другая часть это... и мне кажется,
следует подойти к компьютеру, -

другая часть это вот эта штука, -

Sam Lavigne создал нечто, названное
"редактор p5.js".

Это значит приложение,
программа на вашем компьютере, которую

вы можете запустить и просто начать
печатать некоторый код,

начать экспериментировать и изучать
программирования, без беспокойств о

более крупных частях паззла которые
нужны чтобы сделать

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

Итак, давайте взглянем на секундочку.
Я запущу редактор.

Кстати, я только что скачал его.
Я не... я использовал его,

но не на этом компьютере. Итак:

"p5 - программа из интернета. Вы
действительно хотите открыть её?"

Настало время сказать "Э, я
лучше буду играть на скрипке."

Или, "Пойду лучше поиграю в фрисби
или футбол."

Но я все-таки открою. [...]

Доступна новая версия p5. Не хочу
скачивать ее сейчас, -

просто нажму "ок". Упс, все-таки хочу.
Ладно.

Итак, вот здесь вот...
[открывает все, что надо]

это и есть p5.js редактор.

И, смотрите, тут уже есть немного кода
для вас.

И вы сразу видите: "А, мне нужно учиться
программировать, нужно учить

какой-то непонятный язык и синтаксис."

function, draw, круглые скобки,
фигурная скобка, фигурная скобка.

Вот что вы наблюдаете, если впервые

смотрите это видео и видите
программирование.

Допишу сюда быстренько парочку вещей.

Первое, что я сделаю, это напишу
CreateCanvas и внизу под draw

напишу rectangle и парочку чисел,

затем я уменьшу и нажму play.

И вот мы видим,

смотрите, что произошло.

Я написал строку, говорящую
"создай-холст!" (createCanvas)

и что же оно сделало? Создало холст.

Это холст.

Теперь: там внизу я написал rect
- сокращение для прямоугольника.

И что же произошло? Нарисовался
прямоугольник.

Это первые штуки, первые примеры, которые
я вам покажу

в следующем видео.

С каких строк кода нужно начинать и что
они делают?

С p5.js, первое, что мы научимся делать,
это рисовать.

И, кстати, этот открывшийся холст
на самом деле небольшой мини браузер.

И с каждым новым видео мы разберем
все больше и больше

и посмотрим, как взять и разместить это
в сети,

поделиться, позволить людям делать
что-то с этим, и все такое.

Ну, видео ничего так. 4+

Думаю я все-таки оставлю и выложу его, и

когда-нибудь возможно сниму получше...
может и нет...

Вот и всё. Я запишу еще видео и выложу их

и вы сможете их посмотреть.

И у меня есть список - может быть, я
оставлю ссылку в описании -

список видео, которые я сниму.

Я сделаю много вступлений и что-то про
определенные проекты, типа

как взять Google Spreadsheet и
визуализировать его графиком в JavaScript

и объяснить это за коротенькие 10 минут.

Примерно такой у меня план
на этот семестр.