JavaScript:Библиотеки/p5.js/С чего начать - История изменений

EducationBot в 09:10, 18 июня 2023

2023-06-18T09:10:54Z

← Предыдущая версия		Версия от 13:10, 18 июня 2023
Строка 4:		Строка 4:
	{{Myagkij-редактор}}		{{Myagkij-редактор}}

	~~{{Черновик}}~~

	=С чего начать<ref>[https://p5js.org/get-started/ p5js.org - Get Started]</ref>=		=С чего начать<ref>[https://p5js.org/get-started/ p5js.org - Get Started]</ref>=

EducationBot в 14:14, 14 мая 2023

2023-05-14T14:14:47Z

← Предыдущая версия		Версия от 18:14, 14 мая 2023
Строка 16:		Строка 16:
	Если взглянуть в файл «index.html», можно обнаружить ссылки на файл «p5.js». Если вы предпочитаете использовать минимизированную версию (т.е. сжатую версию, в которой страницы загружаются быстрее) библиотеки, поменяйте ссылку на «p5.min.js».		Если взглянуть в файл «index.html», можно обнаружить ссылки на файл «p5.js». Если вы предпочитаете использовать минимизированную версию (т.е. сжатую версию, в которой страницы загружаются быстрее) библиотеки, поменяйте ссылку на «p5.min.js».

	<syntaxhighlight lang="javascript~~" enclose="div~~">		<syntaxhighlight lang="javascript">
	<script src="../p5.min.js"></script>		<script src="../p5.min.js"></script>
	</syntaxhighlight>		</syntaxhighlight>
Строка 22:		Строка 22:
	Кроме того, вы можете сделать ссылку на файл «p5.js», расположенный онлайн. Все версии p5.js хранятся в CDN (сокр. от «content delivery network», что можно перевести как «сеть доставки (и дистрибуции) контента»). Историю версий библиотеки можно посмотреть [https://cdnjs.com/libraries/p5.js тут]. В этом случае ссылку можно поменять на...		Кроме того, вы можете сделать ссылку на файл «p5.js», расположенный онлайн. Все версии p5.js хранятся в CDN (сокр. от «content delivery network», что можно перевести как «сеть доставки (и дистрибуции) контента»). Историю версий библиотеки можно посмотреть [https://cdnjs.com/libraries/p5.js тут]. В этом случае ссылку можно поменять на...

	<syntaxhighlight lang="javascript~~" enclose="div~~">		<syntaxhighlight lang="javascript">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>		<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
	</syntaxhighlight>		</syntaxhighlight>
Строка 28:		Строка 28:
	Таким образом, шаблон HTML-страницы может выглядеть примерно так:		Таким образом, шаблон HTML-страницы может выглядеть примерно так:

	<syntaxhighlight lang="html5" line="GESHI_NORMAL_LINE_NUMBERS\|GESHI_FANCY_LINE_NUMBERS~~" enclose="div~~">		<syntaxhighlight lang="html5" line="GESHI_NORMAL_LINE_NUMBERS\|GESHI_FANCY_LINE_NUMBERS">
	<html>		<html>
	<head>		<head>
Строка 59:		Строка 59:
	Впишите в редакторе следующее:		Впишите в редакторе следующее:

	<syntaxhighlight lang="javascript" line="GESHI_NORMAL_LINE_NUMBERS\|GESHI_FANCY_LINE_NUMBERS~~" enclose="div~~">		<syntaxhighlight lang="javascript" line="GESHI_NORMAL_LINE_NUMBERS\|GESHI_FANCY_LINE_NUMBERS">
	function setup() {		function setup() {

Строка 81:		Строка 81:
	Теперь давайте попробуем более сложный и интересный скетч. Удалите код предыдущего скетча-примера и впишите в редактор следующее:		Теперь давайте попробуем более сложный и интересный скетч. Удалите код предыдущего скетча-примера и впишите в редактор следующее:

	<syntaxhighlight lang="javascript" line="GESHI_NORMAL_LINE_NUMBERS\|GESHI_FANCY_LINE_NUMBERS~~" enclose="div~~">		<syntaxhighlight lang="javascript" line="GESHI_NORMAL_LINE_NUMBERS\|GESHI_FANCY_LINE_NUMBERS">
	function setup() {		function setup() {
	createCanvas(640, 480);		createCanvas(640, 480);

Myagkij в 07:08, 15 сентября 2018

2018-09-15T07:08:45Z

Новая страница

{{JavaScript панель перехода}}

{{Перевод от Сubewriter}}
{{Myagkij-редактор}}

{{Черновик}}

=С чего начать<ref>[https://p5js.org/get-started/ p5js.org - Get Started]</ref>=

Это руководство проведет вас через настройку проекта p5.js и создание вашего первого скетча. Если вы хотите начать с использования нового [https://editor.p5js.org/ веб-редактора p5.js], можете сразу перейти к [https://p5js.org/get-started/#sketch разделу «Ваш первый скетч»].

== Загрузка и настройка файла ==

Самый простой способ начать – это воспользоваться пустым шаблоном, который есть в [https://p5js.org/download/ комплекте «p5.js complete»].

Если взглянуть в файл «index.html», можно обнаружить ссылки на файл «p5.js». Если вы предпочитаете использовать минимизированную версию (т.е. сжатую версию, в которой страницы загружаются быстрее) библиотеки, поменяйте ссылку на «p5.min.js».

<syntaxhighlight lang="javascript" enclose="div">
<script src="../p5.min.js"></script>
</syntaxhighlight>

Кроме того, вы можете сделать ссылку на файл «p5.js», расположенный онлайн. Все версии p5.js хранятся в CDN (сокр. от «content delivery network», что можно перевести как «сеть доставки (и дистрибуции) контента»). Историю версий библиотеки можно посмотреть [https://cdnjs.com/libraries/p5.js тут]. В этом случае ссылку можно поменять на...

<syntaxhighlight lang="javascript" enclose="div">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
</syntaxhighlight>

Таким образом, шаблон HTML-страницы может выглядеть примерно так:

<syntaxhighlight lang="html5" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS" enclose="div">
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
<script src="sketch.js"></script>
</head>
<body>
</body>
</html>
</syntaxhighlight>

Кроме того, можно начать с использования шаблона с [https://codepen.io/p5js/pen/wreBKy codepen].

== Среда разработки ==

Для разработки скетчей с помощью библиотеки p5.js можно использовать разные IDE. Далее в этой статье описываются инструкции по настройке p5.js в среде разработки [http://www.sublimetext.com/2 Sublime Text 2], но есть и другие хорошие IDE – [http://brackets.io/ Brackets], [https://atom.io/ Atom] и [http://openprocessing.org/ OpenProcessing]. Если вы используете скринридеры, но предпочитаете не использовать веб-редактор p5, советуем обратить внимание на [https://notepad-plus-plus.org/ Notepad++] и [https://www.eclipse.org/ide/ Eclipse].

Откройте Sublime. Перейдите в меню File и кликните на Open..., а затем выберите папку, в которой расположены ваши файлы с расширением «*.html» и «*.js». В верхней части левой боковой панели вы увидите название папки, а ниже будет список файлов, находящихся в этой папке.

Кликните по файлу «sketch.js». После этого он должен открыться в правой части программы, где его также можно редактировать.

[[File:p5js_js_sublime2_1.png|center]]

Откройте в браузере файл «index.html», дважды кликнув по нему, или впишите в адресной строке браузера путь к нему (он будет выглядеть примерно так: file:///путь/к/вашему/html), а потом нажмите Enter.

== Ваш первый скетч ==

Пользователи Processing сначала могут ознакомиться с [https://github.com/processing/p5.js/wiki/Processing-transition руководством по конвертации скетчей Processing в скетчи p5.js].

Впишите в редакторе следующее:

<syntaxhighlight lang="javascript" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS" enclose="div">
function setup() {

}

function draw() {
ellipse(50, 50, 80, 80);
}
</syntaxhighlight>

Этот код означает «нарисовать эллипс, центр которого будет находиться в 50 пикселях от левого края экрана и 50 пикселях от верхнего края экрана, а ширина и высота которого будут составлять 80 пикселей».

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

[[File:p5js_js_first-sketch_2.png|center]]

'''Примечание:''' Если вы используете скринридер, то вам нужно включить в онлайн-редакторе p5 функцию вывода данных для людей с ограниченными возможностями, но также добавить в HTML соответствующую библиотеку. Руководство по использованию p5 со скринридером смотрите [https://p5js.org/learn/p5-screen-reader.html тут], а статью о библиотеке с функциями для людей с ограниченными возможностями читайте [https://github.com/processing/p5.accessibility тут].

Если код написан неправильно, то на экране может ничего не появиться. Если так и произошло, лучше скопируйте код и вставьте его в окно редактора. Числа должны быть помещены в скобки, и, кроме того, между всеми числами должны стоять запятые, а каждая строчка должна заканчиваться точкой с запятой.
Одна из самых сложных вещей в начале изучения программирования – это аккуратность при соблюдении правил синтаксиса. Браузер не всегда достаточно умен, чтобы понять, что именно вы имеете в виду, и также может быть очень привередлив к пунктуации. Вы к этому привыкните, просто нужно немного практики. В зависимости от используемого браузера вы также будете видеть ошибки в «консоли» JavaScript. Например, в Chrome она открывается, если кликнуть на три точки в правом верхнем углу браузера, а затем на «Дополнительные инструменты» > «Инструменты разработчика» > вкладка Console.
Теперь давайте попробуем более сложный и интересный скетч. Удалите код предыдущего скетча-примера и впишите в редактор следующее:

<syntaxhighlight lang="javascript" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS" enclose="div">
function setup() {
createCanvas(640, 480);
}

function draw() {
if (mouseIsPressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}
</syntaxhighlight>

Эта программа создает окно шириной 640 пикселей и высотой 480 пикселей, а затем начинает рисовать белые круги – в месте, где в данный момент находится курсор мышки. Если при этом также нажать на кнопку мышки, круг окрасится в черный цвет. Более подробно об элементах этого скетча мы расскажем позднее. Сейчас просто попробуйте запустить код, подвигать мышкой и понажимать на кнопки, чтобы понять, что делает эта программа.

[[File:p5js_js_first-sketch2_3.png|center]]

== Что дальше? ==

* Советуем ознакомиться с [https://github.com/processing/p5.js/wiki/Processing-transition руководством по преобразованию скетчей Processing в скетчи p5.js], в котором также объясняется, в чем их главные отличия.
* Справочник по функциям, классам и другими элементам библиотеки p5.js смотрите [https://p5js.org/reference/ тут].
* Руководства и скетчи-примеры, объясняющие разные функции p5.js, смотрите [https://p5js.org/learn/ тут] и [https://p5js.org/examples тут].
* Если вы планируете использовать p5.js вместе со скринридером, то соответствующее руководство можно найти [https://p5js.org/learn/p5-screen-reader.html тут].

=См.также=

=Внешние ссылки=

<references />

{{SEO
|Заголовок статьи=JavaScript: Библиотека p5.js - С чего начать/ Онлайн справочник - wikihandbk.com
|Ключевые слова=processing, Библиотеки, p5.js, С чего начать
|Описание статьи=
|Изображение статьи для Open Graph=
|Адрес страницы для schemaNewsArticle=<nowiki>http://wikihandbk.com/wiki/JavaScript:Библиотеки/p5.js/С чего начать</nowiki>
|Изображение статьи для schemaNewsArticle=<nowiki></nowiki>
|Высота изображения статьи для schemaNewsArticle=
|Ширина изображения статьи для schemaNewsArticle=
|Дата публикации для schemaNewsArticle=2018-09-15
|Автор=Мякишев Е.А.
|Издатель=myagkij
|Логотип издателя для schemaNewsArticle=<nowiki>http://wikihandbk.com/ruwiki/images/6/61/Tech_geek_logo_1x.jpg</nowiki>
|Ширина логотипа издателя для schemaNewsArticle=60
|Высота логотипа издателя для schemaNewsArticle=45
}}