1.13.0

lang/en/learn/index.md

@@ -1,6 +1,6 @@
 # 0-0
 
-[**_Learn p5play: An Introduction to Object Oriented Programming_**](.) was written by Quinton Ashley, the creator of p5play v3. It's packed with beginner friendly reference documentation and interactive code examples.
+[**_Learn p5play: An Introduction to Object Oriented Programming_**](.) was written by Quinton Ashley, the creator of p5play v3. It's packed with beginner friendly reference documentation and interactive code examples!
 
 # 0-1
 

lang/en/learn/sprite.md

@@ -1,6 +1,6 @@
 # 0-0
 
-## Setup
+## Setup and Draw
 
 The code inside the [q5.js](https://q5js.org) (or [p5.js](https://p5js.org)) `setup` function runs when the program starts. The `new Canvas()` constructor creates a section of the screen that the program can draw on.
 

learn/animation.html

@@ -49,7 +49,7 @@ <h2 id="how-to-load-animations">How to load animations</h2>
 function setup() {
 	new Canvas(500, 160);
 
-	cloudAni = loadAni('assets/cloud_breathing1.png', 9);
+	cloudAni = loadAni('assets/cloud_breathing1.webp', 9);
 }
 
 function draw() {
@@ -71,13 +71,13 @@ <h2 id="how-to-load-animations">How to load animations</h2>
 	new Canvas(500, 160);
 
 	shapeShifterAni = loadAnimation(
-		'assets/asterisk.png',
-		'assets/triangle.png',
-		'assets/square.png',
-		'assets/cloud.png',
-		'assets/star.png',
-		'assets/mess.png',
-		'assets/monster.png'
+		'assets/asterisk.webp',
+		'assets/triangle.webp',
+		'assets/square.webp',
+		'assets/cloud.webp',
+		'assets/star.webp',
+		'assets/mess.webp',
+		'assets/monster.webp'
 	);
 
 	shapeShifterAni.frameDelay = 10;
@@ -103,7 +103,7 @@ <h2 id="how-to-load-animations">How to load animations</h2>
 function setup() {
 	new Canvas(500, 200);
 
-	splatAni = loadAnimation('assets/explode_sprite_sheet.png', { frameSize: [171, 158], frames: 11 });
+	splatAni = loadAnimation('assets/explode_sprite_sheet.webp', { frameSize: [342, 316], frames: 11 });
 }
 
 function draw() {
@@ -128,15 +128,18 @@ <h2 id="animating">Animating</h2>
 function setup() {
 	new Canvas(500, 160);
 
-	ani = loadAni('assets/asterisk_explode0001.png', 11);
+	ani = loadAni('assets/asterisk_explode01.webp', 11);
 }
 
 function draw() {
 	clear();
 
-	if (kb.presses('s')) ani.stop();
-	if (kb.presses('p')) ani.play();
-	if (kb.presses('o')) ani.play(0);
+	if (kb.presses('space')) {
+		if (ani.playing) ani.pause();
+		else ani.play();
+	}
+
+	if (kb.presses('p')) ani.play(0);
 	if (kb.presses('ArrowDown')) ani.frameDelay--;
 	if (kb.presses('ArrowUp')) ani.frameDelay++;
 	if (kb.presses('r')) ani.rewind();
@@ -185,8 +188,8 @@ <h2 id="control-a-sprites-animation">Control a Sprite's Animation</h2>
 	new Canvas(500, 160);
 	ghost = new Sprite(250, 80, 120);
 
-	ghost.addAni('fly', 'assets/ghost_walk01.png', 3);
-	ghost.addAni('idle', 'assets/ghost_standing01.png', 7);
+	ghost.addAni('fly', 'assets/ghost_walk01.webp', 3);
+	ghost.addAni('idle', 'assets/ghost_standing01.webp', 7);
 }
 
 function draw() {
@@ -231,7 +234,7 @@ <h2 id="groups-with-animations">Groups with Animations</h2>
 	new Canvas(500, 160);
 
 	splats = new Group();
-	splats.addAni('assets/asterisk_explode0001.png', 11);
+	splats.addAni('assets/asterisk_explode0001.webp', 11);
 }
 
 function draw() {
@@ -248,20 +251,23 @@ <h2 id="groups-with-animations">Groups with Animations</h2>
 				<md id="md4-0">
 					<h2 id="sprite-sheets-with-multiple-animations">Sprite Sheets with Multiple Animations</h2>
 					<p>To load multiple animations from the same sprite sheet image, first set the
-						<code>spriteSheet</code> property of the sprite or group.</p>
+						<code>spriteSheet</code> property of the sprite or group.
+					</p>
 					<p>Next, use the <code>addAnimations</code> / <code>addAnis</code> function. They accept an object
 						that uses animation names as keys and sprite sheet atlases as values.</p>
 					<p>Using an atlas object is way easier than manually specifying the coordinates of every frame!</p>
 					<p>Atlas objects can have the following properties:</p>
 					<p><code>x</code>, <code>y</code>, <code>pos</code>, <code>w</code>/<code>width</code>,
 						<code>h</code>/<code>height</code>, <code>size</code>/<code>frameSize</code>, <code>row</code>,
 						<code>col</code>, <code>frames</code>/<code>frameCount</code>,
-						<code>delay</code>/<code>frameDelay</code>, and <code>rotation</code>.</p>
+						<code>delay</code>/<code>frameDelay</code>, and <code>rotation</code>.
+					</p>
 					<p>In the "hero" example the size of the hero sprite is set to 32x32 pixels in the
-						<code>Sprite</code> constructor. That size is used as a multiplier to the row value given.</p>
+						<code>Sprite</code> constructor. That size is used as a multiplier to the row value given.
+					</p>
 					<p>The <code>ani.offset</code> property is used to adjust the position of an animation relative to
 						the sprite's position.</p>
-					<p>Click this link to see the full <a href="/learn/assets/questKid.png" target="_blank">questKid</a>
+					<p>Click this link to see the full <a href="/learn/assets/questKid.webp" target="_blank">questKid</a>
 						sprite sheet used in the example.</p>
 					<p>If you'd like to truly appreciate p5play, compare the example code to <a
 							href="https://labs.phaser.io/view.html?src=src/animation/create%20animation%20from%20sprite%20sheet.js"
@@ -286,7 +292,7 @@ <h2 id="anis">anis</h2>
 
 function preload() {
 	hero = new Sprite(125, 48, 32, 32);
-	hero.spriteSheet = 'assets/questKid.png';
+	hero.spriteSheet = 'assets/questKid.webp';
 	hero.anis.offset.x = 2;
 	hero.anis.frameDelay = 32;
 	hero.anis.demoMode = true;
@@ -304,7 +310,8 @@ <h2 id="anis">anis</h2>
 }
 
 function setup() {
-	new Canvas(250, 96, 'pixelated x2');
+	new Canvas(250, 96);
+	displayMode('default', 'pixelated', 2)
 	allSprites.pixelPerfect = true;
 }
 
@@ -323,7 +330,7 @@ <h2 id="anis">anis</h2>
 
 function preload() {
 	hero = new Sprite(62, 24, 32, 32);
-	hero.spriteSheet = 'assets/questKid.png';
+	hero.spriteSheet = 'assets/questKid.webp';
 	hero.anis.offset.x = 2;
 	hero.anis.frameDelay = 8;
 	hero.friction = 0;
@@ -339,7 +346,8 @@ <h2 id="anis">anis</h2>
 }
 
 function setup() {
-	new Canvas(124, 48, 'pixelated x4');
+	new Canvas(124, 48);
+	displayMode('normal', 'pixelated', 4);
 	allSprites.pixelPerfect = true;
 }
 
@@ -370,7 +378,7 @@ <h2 id="animation-sequencing">Animation Sequencing</h2>
 
 function preload() {
 	hero = new Sprite(62, 24, 32, 32);
-	hero.spriteSheet = 'assets/questKid.png';
+	hero.spriteSheet = 'assets/questKid.webp';
 	hero.anis.offset.x = 2;
 	hero.anis.offset.y = 2;
 	hero.anis.frameDelay = 8;
@@ -450,7 +458,7 @@ <h2 id="advanced-animation-sequencing">Advanced Animation Sequencing</h2>
 
 function preload() {
 	hero = new Sprite(90, 24, 32, 32);
-	hero.spriteSheet = 'assets/questKid.png';
+	hero.spriteSheet = 'assets/questKid.webp';
 	hero.anis.offset.x = 2;
 	hero.anis.offset.y = 2;
 	hero.anis.frameDelay = 8;
@@ -505,15 +513,15 @@ <h2 id="advanced-animation-sequencing">Advanced Animation Sequencing</h2>
 	</article>
 
 	<script src="/v3/q5.min.js"></script>
-<script src="/v3/planck.min.js"></script>
-<script src="/v3/p5play.min.js"></script>
-<script>
-window.mie = { autoLoad: false };
+	<script src="/v3/planck.min.js"></script>
+	<script src="/v3/p5play.min.js"></script>
+	<script>
+		window.mie = { autoLoad: false };
 
 	</script>
 	<script src="/learn/mie.js"></script>
-<script src="/learn/learn.js"></script>
-<script src="/account/account.js"></script>
+	<script src="/learn/learn.js"></script>
+	<script src="/account/account.js"></script>
 </body>
 
 </html>

learn/sprite.html

@@ -34,9 +34,9 @@
 
 		<div id="page-0" class="page">
 			<md id="md0-0">
-				<h2 id="setup">Setup</h2>
-				<p>The code inside the <a href="https://q5js.org" target="_blank">q5.js</a> (or <a
-						href="https://p5js.org" target="_blank">p5.js</a>) <code>setup</code> function runs when the
+				<h2 id="setup-and-draw">Setup and Draw</h2>
+				<p>The code inside the <a href="https://q5js.org" target="_blank">q5.js</a> (or <a href="https://p5js.org"
+						target="_blank">p5.js</a>) <code>setup</code> function runs when the
 					program starts. The <code>new Canvas()</code> constructor creates a section of the screen that the
 					program can draw on.</p>
 				<p>The q5 <code>draw</code> function is run 60 times per second by default. The <code>background</code>
@@ -176,7 +176,8 @@ <h2 id="sprite-physics">Sprite physics</h2>
 					Setting a sprite's collider
 					type to <code>'none'</code> makes it have no collider.</p>
 				<p>The collider type can also be set using the first letter of the collider type name: <code>'d'</code>,
-					<code>'s'</code>, <code>'k'</code>, or <code>'n'</code>.</p>
+					<code>'s'</code>, <code>'k'</code>, or <code>'n'</code>.
+				</p>
 				<p>Click the reload icon on the top right corner of a code example to replay it!</p>
 			</md>
 			<script type="mie/p5" id="dynamic-and-static-colliders" base-2="" horiz="" lines="16">
@@ -292,7 +293,7 @@ <h2 id="sprites-with-an-image">Sprites with an Image</h2>
 
 	monster = new Sprite();
 	monster.diameter = 70;
-	monster.image = 'assets/monster.png';
+	monster.image = 'assets/monster.webp';
 	monster.image.offset.y = 6;
 }
 
@@ -351,7 +352,7 @@ <h2 id="try-it">Try it!</h2>
 ..yyyyyy`;
 
 	smiley = new Sprite();
-	smiley.img = spriteArt(smileText, 16);
+	smiley.img = spriteArt(smileText, 32);
 }
 
 function draw() {
@@ -371,7 +372,7 @@ <h2 id="try-it">Try it!</h2>
 `;
 
 	let alpha = new Sprite();
-	alpha.img = spriteArt(alphaText, 10);
+	alpha.img = spriteArt(alphaText, 20);
 
 	background(20);
 	noLoop();
@@ -391,8 +392,8 @@ <h2 id="custom-colors">Custom Colors</h2>
 					define a color for each letter you use in your pixel art. To create a color use the q5 <a
 						href="https://p5js.org/reference/p5/color" target="_blank"><code>color</code></a> function which
 					accepts RGB (red, green, blue) values or HEX color codes.</p>
-				<p>The easiest way to find colors is to use a <a
-						href="https://www.google.com/search?q=google+color+picker" target="_blank">color picker</a>.</p>
+				<p>The easiest way to find colors is to use a <a href="https://www.google.com/search?q=google+color+picker"
+						target="_blank">color picker</a>.</p>
 			</md>
 			<script type="mie/p5" id="blue-smiley" lines="20">
 let smiley;
@@ -413,7 +414,7 @@ <h2 id="custom-colors">Custom Colors</h2>
 	};
 
 	smiley = new Sprite();
-	smiley.img = spriteArt(smileText, 16, palette);
+	smiley.img = spriteArt(smileText, 32, palette);
 }
 
 function draw() {
@@ -466,7 +467,8 @@ <h2 id="sprite-movement">Sprite movement</h2>
 					</script>
 			<md id="md3-2">
 				<p>All the other movement methods on this page change the sprite's <code>velocity</code>, aka
-					<code>vel</code>, which is its rate of motion along the x and y axis.</p>
+					<code>vel</code>, which is its rate of motion along the x and y axis.
+				</p>
 				<p><code>vel</code> is Q5.Vector, you can use any vector functions on it.</p>
 				<p>Restart this example to see the player sprite hit the block!</p>
 			</md>
@@ -476,7 +478,8 @@ <h2 id="sprite-movement">Sprite movement</h2>
 					</script>
 			<md id="md3-3">
 				<p>Yet, you may find it's more convenient to move a sprite by setting its <code>direction</code> and
-					<code>speed</code>.</p>
+					<code>speed</code>.
+				</p>
 				<p>You can also set a sprite's direction using an angle value or direction name such as: 'up', 'down',
 					'left', 'right', 'upLeft', 'upRight', 'downLeft', 'downRight'.</p>
 			</md>
@@ -853,7 +856,8 @@ <h2 id="sprite-rotation">Sprite rotation</h2>
 			</script>
 			<md id="md7-1">
 				<p>All of the other rotation methods on this page work by changing the sprite's
-					<code>rotationSpeed</code>.</p>
+					<code>rotationSpeed</code>.
+				</p>
 			</md>
 			<script type="mie/p5" id="rotationSpeed" base="5">
 sprite.rotationSpeed = 1;
@@ -937,7 +941,7 @@ <h2 id="scaling">Scaling</h2>
 	new Canvas(500, 200);
 
 	sprite = new Sprite(250, 100, 90, 90);
-	sprite.img = 'assets/square.png';
+	sprite.img = 'assets/square.webp';
 	sprite.debug = true;
 }
 
@@ -1500,7 +1504,8 @@ <h2 id="combo-sensors">Combo Sensors</h2>
 					<p>Overlap sensors determine if a sprite overlaps with another sprite.</p>
 					<p>By default when an overlap checking method is used, and the sprite has no sensors, the
 						<code>addDefaultSensors</code> function is used behind the scenes to create sensors for each of
-						the sprite's colliders.</p>
+						the sprite's colliders.
+					</p>
 					<p>You can add additional sensors to a sprite by using the <code>addSensor</code> function.</p>
 				</md>
 			</div>
@@ -1571,7 +1576,7 @@ <h2 id="custom-update">Custom Update</h2>
 function setup() {
 	new Canvas(500, 200);
 
-	let face = loadImage('assets/face.png');
+	let face = loadImage('assets/face.webp');
 	let stretchy = new Sprite();
 
 	stretchy.draw = () => {
@@ -1662,8 +1667,8 @@ <h2 id="movement-sequencing">Movement Sequencing</h2>
 					repeatedly, without waiting for the sprite to reach its destination. But for better performance, try
 					using the <code>angleTo</code> function, which gets the angle between a sprite and a position. This
 					angle can be used to change the direction that the sprite moves in.</p>
-				<p>In this example, the q5 <a href="https://p5js.org/reference/p5/dist"
-						target="_blank"><code>dist</code></a> function is used to calculate the distance between the
+				<p>In this example, the q5 <a href="https://p5js.org/reference/p5/dist" target="_blank"><code>dist</code></a>
+					function is used to calculate the distance between the
 					player and its ally.</p>
 			</md>
 			<script type="mie/p5" base-8="" hidden="">
@@ -1721,16 +1726,16 @@ <h2 id="movement-sequencing">Movement Sequencing</h2>
 	</article>
 
 	<!-- <script src="https://cdn.jsdelivr.net/npm/p5@1/lib/p5.min.js"></script> -->
-<script src="/v3/q5.min.js"></script>
-<script src="/v3/planck.min.js"></script>
-<script src="/v3/p5play.min.js"></script>
-<script>
-window.mie = { autoLoad: false };
+	<script src="/v3/q5.min.js"></script>
+	<script src="/v3/planck.min.js"></script>
+	<script src="/v3/p5play.min.js"></script>
+	<script>
+		window.mie = { autoLoad: false };
 
 	</script>
 	<script src="/learn/mie.js"></script>
-<script src="/learn/learn.js"></script>
-<script src="/account/account.js"></script>
+	<script src="/learn/learn.js"></script>
+	<script src="/account/account.js"></script>
 </body>
 
 </html>

learn/style.css

@@ -57,7 +57,6 @@ body.dark {
 
 	body.dark {
 		--pink0: oklch(0.657 0.294 16.698);
-		--pink1: oklch(0.657 0.294 16);
 		--pink1: oklch(0.6 0.28 16);
 		--pink2: oklch(0.11 0.28 16);
 

package.json

@@ -36,5 +36,5 @@
 		"version": "git add -A",
 		"postversion": "git push"
 	},
-	"version": "1.12.16"
+	"version": "1.13.0"
 }