Creative Coding/Scripting animation in P5js - Revision history

Leo at 20:37, 20 September 2025

2025-09-20T20:37:20Z

← Older revision		Revision as of 20:37, 20 September 2025
Line 38:		Line 38:
	=== Video: Interface ===		=== Video: Interface ===
	<html>		<html>
	<iframe width="560" height="315" src="https://www.youtube.com/embed/dTv_bYVdoJA?si=0qfirBQU5XfTXYZi~~&controls=0~~" 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>		<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>		</html>

Leo at 20:36, 20 September 2025

2025-09-20T20:36:06Z

← Older revision		Revision as of 20:36, 20 September 2025
Line 36:		Line 36:
	Alternatively, you can also use the <code><iframe></code> option to embed your sketch in an HTML page.		Alternatively, you can also use the <code><iframe></code> option to embed your sketch in an HTML page.

			=== Video: Interface ===
	<html>		<html>
	<iframe width="560" height="315" src="https://www.youtube.com/embed/dTv_bYVdoJA?si=0qfirBQU5XfTXYZi&controls=0" 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>		<iframe width="560" height="315" src="https://www.youtube.com/embed/dTv_bYVdoJA?si=0qfirBQU5XfTXYZi&controls=0" 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>

Leo at 20:34, 20 September 2025

2025-09-20T20:34:56Z

← Older revision		Revision as of 20:34, 20 September 2025
Line 36:		Line 36:
	Alternatively, you can also use the <code><iframe></code> option to embed your sketch in an HTML page.		Alternatively, you can also use the <code><iframe></code> option to embed your sketch in an HTML page.

			<html>
	<iframe width="560" height="315" src="https://www.youtube.com/embed/dTv_bYVdoJA?si=0qfirBQU5XfTXYZi&controls=0" 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>		<iframe width="560" height="315" src="https://www.youtube.com/embed/dTv_bYVdoJA?si=0qfirBQU5XfTXYZi&controls=0" 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 ==

Leo at 20:34, 20 September 2025

2025-09-20T20:34:34Z

← Older revision		Revision as of 20:34, 20 September 2025
Line 35:		Line 35:

	Alternatively, you can also use the <code><iframe></code> option to embed your sketch in an HTML page.		Alternatively, you can also use the <code><iframe></code> option to embed your sketch in an HTML page.

			<iframe width="560" height="315" src="https://www.youtube.com/embed/dTv_bYVdoJA?si=0qfirBQU5XfTXYZi&controls=0" 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>

	== Functions ==		== 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!		''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!

Leo at 20:21, 20 September 2025

2025-09-20T20:21:56Z

← Older revision		Revision as of 20:21, 20 September 2025
Line 45:		Line 45:
	=== Setup and Draw ===		=== Setup and Draw ===

	<html><iframe src="https://timrodenbroeker.de/wp-content/uploads/2023/04/setup_draw.mp4" width="600"></iframe></html>		<html><iframe src="https://timrodenbroeker.de/wp-content/uploads/2023/04/setup_draw.mp4" width="600" height="400"></iframe></html>

	=== Shape functions ===		=== Shape functions ===

Leo at 20:21, 20 September 2025

2025-09-20T20:21:37Z

← Older revision		Revision as of 20:21, 20 September 2025
Line 42:		Line 42:

	''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.		''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"></iframe></html>

	=== Shape functions ===		=== Shape functions ===

Leo at 20:19, 20 September 2025

2025-09-20T20:19:34Z

← Older revision		Revision as of 20:19, 20 September 2025
Line 12:		Line 12:
	== Interface ==		== Interface ==
	[[File:Screenshot 2025-09-20 142604.png\|alt=Screenshot of editor.p5js.org\|thumb\|Screenshot of editor.p5js.org]]		[[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.		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 ===		=== 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~~, sometimes,~~ not when you need. You can use shortcut <code>cmd+ENTER</code>(or <code>ctrl+ENTER</code> on Windows) to run the code ~~only when you want~~.		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 ===		=== Save your sketch ===
Line 41:		Line 41:
	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.		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''~~, which are input values~~. For example, <code>createCanvas(400, 400)</code> ~~has~~ 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.		''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.


	=== Shape functions ===		=== Shape functions ===

Leo at 16:31, 20 September 2025

2025-09-20T16:31:35Z

← Older revision		Revision as of 16:31, 20 September 2025
Line 6:		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~~: P5js! P5js also includes~~ a browser-based code editor, and a ~~mini~~ cloud ~~storage for~~ your codes and files.		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].

Leo at 13:58, 20 September 2025

2025-09-20T13:58:32Z

← Older revision		Revision as of 13:58, 20 September 2025
Line 37:		Line 37:

	== Functions ==		== 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'', which are input values. For example, <code>createCanvas(400, 400)</code> has 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.


	=== Shape functions ===		=== Shape functions ===

Leo at 13:42, 20 September 2025

2025-09-20T13:42:47Z

← Older revision		Revision as of 13:42, 20 September 2025
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 11:		Line 10:
	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.

			=== 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, sometimes, not when you need. You can use shortcut <code>cmd+ENTER</code>(or <code>ctrl+ENTER</code> on Windows) to run the code only when you want.

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

	= Functions =		== Functions ==

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