Creative Coding/Scripting animation in P5js: Difference between revisions
More actions
No edit summary |
No edit summary |
||
| (9 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
= P5js = | == P5js == | ||
[https://p5js.org P5js] is a library of [https://developer.mozilla.org/en-US/docs/Web/JavaScript JavaScript] designed for artists and creatives working with graphics, animation, and interaction on the web. | [https://p5js.org P5js] is a library of [https://developer.mozilla.org/en-US/docs/Web/JavaScript JavaScript] designed for artists and creatives working with graphics, animation, and interaction on the web. | ||
| Line 7: | Line 6: | ||
It was initiated by the [https://processing.org Processing] foundation, the group behind Java-based coding software Processing. Processing was built in 2001 for artists who wanted to dive into code as a creative medium, without having the expertise of a computer scientist. | It was initiated by the [https://processing.org Processing] foundation, the group behind Java-based coding software Processing. Processing was built in 2001 for artists who wanted to dive into code as a creative medium, without having the expertise of a computer scientist. | ||
Since then, the community around Processing grew and built an online-friendly version | Since then, the community around Processing grew and built an online-friendly version, p5js, including a browser-based code editor and a small cloud to store your codes and files. | ||
You can find the code editor at [https://editor.p5js.org editor.p5js.org]. | You can find the code editor at [https://editor.p5js.org editor.p5js.org]. | ||
= Interface = | == Interface == | ||
[[File:Screenshot 2025-09-20 142604.png|alt=Screenshot of editor.p5js.org|thumb|Screenshot of editor.p5js.org]] | |||
The main interface has an ''editor'' on the left and a ''preview'' on the right. A ''menu bar'' on top and the ''account menu'' on top-right. | |||
=== Play your sketch === | |||
You can display the result of your code in the ''preview'' by pressing the ''play'' button on top-left. You can also enable the ''Auto-refresh'' button to update your ''preview'' whenever you make changes. However, this will run continuously and often not when you need it. You can use shortcut <code>cmd+ENTER</code> (or <code>ctrl+ENTER</code> on Windows) to run the code, instead. | |||
=== Save your sketch === | |||
Remember to save your sketch by pressing <code>cmd+S</code> or <code>file > save</code>. You can also enable the ''Autosave'' option in the settings to make saving automatic. | |||
You need to be logged in to save your file, so make sure you [https://editor.p5js.org/signup register] an account. | |||
=== Fix your sketch === | |||
The console is the grey area at the bottom of the code editor. If the code does not work, its errors and warnings are displayed here. | |||
You can also make use of the console with a function like <code>print(mouseX,mouseY)</code>, which displays the live coordinates of your mouse. | |||
=== Share your sketch === | |||
If you are logged in and you have saved your file, you can share it by copying the link from the URL bar. | |||
It looks like this: <code><nowiki>https://editor.p5js.org/</nowiki>''(your username)''/sketches/''(random ID)''</code> | |||
If you prefer to share it without the code, you can use the ''view-only'' option in <code>file > share</code>. This option uses the link <code><nowiki>https://editor.p5js.org/</nowiki>''(your username)''/'''full'''/''(random ID)''</code>, it displays the website full-screen version of your sketch. | |||
Alternatively, you can also use the <code><iframe></code> option to embed your sketch in an HTML page. | |||
=== Video: Interface === | |||
<html> | |||
<iframe width="560" height="315" src="https://www.youtube.com/embed/dTv_bYVdoJA?si=0qfirBQU5XfTXYZi" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> | |||
</html> | |||
== Functions == | |||
''Functions'' are '''instructions''' written in natural language that translate into a specific browser operation. It is the way you, the coder, direct or communicate with your computer! | |||
P5js knows all the JavaScript functions. But, on top of that, it contains [https://p5js.org/reference dozens of extra P5 functions] that specialise in animating graphics and interaction. | |||
''Functions'' require ''arguments''. For example, <code>createCanvas(400, 400)</code> needs two arguments: width (400) and height (400). To find out what arguments a function needs, you can use the documentation page at <code>help > reference</code>. This is a dictionary of all the ''functions'' with descriptions, common use examples and argument definitions. | |||
=== Setup and Draw === | |||
= | <html><iframe src="https://timrodenbroeker.de/wp-content/uploads/2023/04/setup_draw.mp4" width="600" height="400"></iframe></html> | ||
== Shape functions == | === Shape functions === | ||
== Color functions == | === Color functions === | ||
== Text functions == | === Text functions === | ||
== Image functions == | === Image functions === | ||
== Preload == | === Preload === | ||
== Fonts == | === Fonts === | ||
= Variables = | == Variables == | ||
== Environment Variables == | === Environment Variables === | ||
== Declarations == | === Declarations === | ||
== Operators == | === Operators === | ||
Latest revision as of 20:37, 20 September 2025
P5js
P5js is a library of JavaScript designed for artists and creatives working with graphics, animation, and interaction on the web.
JavaScript is a scripting language for interactive design on the web. Together with HTML and CSS, it makes 98% of the web content. Javascript has different libraries, the same way a language like English comes with different dialects and accents. Three.js is the 3D library of the web, Node.js is the library for multi-user live interaction, P5.js is the creative dialect of JavaScript.
It was initiated by the Processing foundation, the group behind Java-based coding software Processing. Processing was built in 2001 for artists who wanted to dive into code as a creative medium, without having the expertise of a computer scientist.
Since then, the community around Processing grew and built an online-friendly version, p5js, including a browser-based code editor and a small cloud to store your codes and files.
You can find the code editor at editor.p5js.org.
Interface
The main interface has an editor on the left and a preview on the right. A menu bar on top and the account menu on top-right.
Play your sketch
You can display the result of your code in the preview by pressing the play button on top-left. You can also enable the Auto-refresh button to update your preview whenever you make changes. However, this will run continuously and often not when you need it. You can use shortcut cmd+ENTER (or ctrl+ENTER on Windows) to run the code, instead.
Save your sketch
Remember to save your sketch by pressing cmd+S or file > save. You can also enable the Autosave option in the settings to make saving automatic.
You need to be logged in to save your file, so make sure you register an account.
Fix your sketch
The console is the grey area at the bottom of the code editor. If the code does not work, its errors and warnings are displayed here.
You can also make use of the console with a function like print(mouseX,mouseY), which displays the live coordinates of your mouse.
Share your sketch
If you are logged in and you have saved your file, you can share it by copying the link from the URL bar.
It looks like this: https://editor.p5js.org/(your username)/sketches/(random ID)
If you prefer to share it without the code, you can use the view-only option in file > share. This option uses the link https://editor.p5js.org/(your username)/full/(random ID), it displays the website full-screen version of your sketch.
Alternatively, you can also use the <iframe> option to embed your sketch in an HTML page.
Video: Interface
Functions
Functions are instructions written in natural language that translate into a specific browser operation. It is the way you, the coder, direct or communicate with your computer!
P5js knows all the JavaScript functions. But, on top of that, it contains dozens of extra P5 functions that specialise in animating graphics and interaction.
Functions require arguments. For example, createCanvas(400, 400) needs two arguments: width (400) and height (400). To find out what arguments a function needs, you can use the documentation page at help > reference. This is a dictionary of all the functions with descriptions, common use examples and argument definitions.
Setup and Draw