View source for Creative Coding/Scripting animation in 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.

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 [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, 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].

== 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 ===

=== Color functions ===

=== Text functions ===

=== Image functions ===

=== Preload ===

=== Fonts ===

== Variables ==

=== Environment Variables ===

=== Declarations ===

=== Operators ===