q5play 4.1.2 → 4.2.2

package/q5play.js

@@ -12,21 +12,19 @@
  *       |__/          |__/                     \______/
  *
  * @package q5play
- * @version 4.1
+ * @version 4.2
  * @author quinton-ashley
  * @website https://q5play.org
  */
 
-let q5play_version = '4.1';
+let q5play_version = '4.2';
 
-if (typeof globalThis.Q5 == 'undefined') {
+if (typeof globalThis.Q5 == 'undefined' && typeof globalThis.p5 == 'undefined') {
 	console.error('q5play requires q5.js to be loaded first. Visit https://q5js.org to learn more.');
-	if (typeof globalThis.p5 != 'undefined') {
-		console.error('p5.js is not compatible with q5play. https://github.com/processing/p5.js/issues/7737');
-	}
 }
 
-let box2dPromise;
+let box2dPromise,
+	using_p5 = false;
 
 // called when a new instance of Q5 is created
 async function q5playPreSetup(q) {
@@ -150,6 +148,7 @@ async function q5playPreSetup(q) {
 		b2CreateChain,
 		b2Chain_GetSegmentCount,
 		b2Chain_GetSegments,
+		b2DestroyChain,
 
 		/* Body */
 		b2BodyType,
@@ -249,7 +248,7 @@ async function q5playPreSetup(q) {
 			this.context = 'web';
 
 			this.update = () => q5playUpdate.call($, q);
-			this.postdraw = () => q5playPostDraw.call($, q);
+			this.draw = () => q5playPostDraw.call($, q);
 
 			if (window.matchMedia) {
 				this.hasMouse = window.matchMedia('(any-hover: none)').matches ? false : true;
@@ -327,7 +326,7 @@ async function q5playPreSetup(q) {
 
 		async splashScreen() {
 			if (document.getElementById('made-with-q5play')) return;
-			if (!using_p5v2) $._incrementPreload();
+			if (!using_p5) $._incrementPreload();
 			let d = document.createElement('div');
 			d.id = 'made-with-q5play';
 			d.style =
@@ -359,27 +358,30 @@ async function q5playPreSetup(q) {
 			d.style.display = 'none';
 			d.remove();
 			document.getElementById('made-with-q5play')?.remove();
-			if (!using_p5v2) $._decrementPreload();
+			if (!using_p5) $._decrementPreload();
 		}
 	};
 
 	$.q5play = new $.Q5Play();
 	delete $.Q5Play;
 
-	let using_p5v1 = !$._q5 && p5.VERSION[0] == 1;
-	let using_p5v2 = !$._q5 && p5.VERSION[0] == 2;
+	using_p5 = !$._q5;
+	if (using_p5 && p5.VERSION[0] != 2) {
+		throw new Error(`q5play requires q5.js or p5.js v2. Detected version: ${p5.VERSION}. Please upgrade.`);
+	}
 
-	// in q5play the default angle mode is degrees
 	const DEGREES = $.DEGREES,
 		DEGTORAD = Math.PI / 180,
 		RADTODEG = 180 / Math.PI;
+
+	// in q5play the default angle mode is degrees
 	$.angleMode(DEGREES);
 
 	// in q5play the default color mode is float RGB
-	$.colorMode($.RGB, 1);
+	if (!using_p5) $.colorMode($.RGB, 1);
 
 	// in q5play the default image mode is center
-	$.imageMode($.CENTER);
+	if (!using_p5) $.imageMode($.CENTER);
 
 	const ZERO_VEC = new b2Vec2(0, 0),
 		ZERO_ROT = b2MakeRot(0),
@@ -396,7 +398,9 @@ async function q5playPreSetup(q) {
 	const scaleFrom = (x, y) => ({ x: x * meterSize, y: y * meterSize });
 
 	const linearSlop = 0.005,
-		angularSlop = 0.000582;
+		angularSlop = 0.0333;
+
+	let visualSlop = 0.5;
 
 	const isSlop = (val) => Math.abs(val) <= linearSlop;
 	const fixRound = (val) => {
@@ -490,13 +494,13 @@ async function q5playPreSetup(q) {
 				geom = this.geom;
 
 			if (type == 0) {
-				let hw = geom._hw * scaleX,
-					hh = geom._hh * scaleY,
+				let hw = geom._hw * Math.abs(scaleX),
+					hh = geom._hh * Math.abs(scaleY),
 					rr;
 
 				if (!geom._rr) geom = b2MakeBox(hw, hh);
 				else {
-					rr = geom._rr * Math.min(scaleX, scaleY);
+					rr = geom._rr * Math.min(Math.abs(scaleX), Math.abs(scaleY));
 					geom = b2MakeRoundedBox(hw, hh, rr);
 				}
 				b2Shape_SetPolygon(id, geom);
@@ -504,11 +508,44 @@ async function q5playPreSetup(q) {
 				geom._hh = hh;
 				geom._rr = rr;
 				this.geom = geom;
+			} else if (type == 1) {
+				// convex polygon
+				geom = b2Shape_GetPolygon(id);
+				let verts = [];
+				for (let i = 0; i < geom.count; i++) {
+					const v = geom.GetVertex(i);
+					verts.push({ x: v.x * scaleX, y: v.y * scaleY });
+				}
+				let hull = b2ComputeHull(verts);
+				let rr = geom.radius * Math.min(scaleX, scaleY);
+				geom = rr ? b2MakeOffsetRoundedPolygon(hull, ZERO_VEC, ZERO_ROT, rr) : b2MakePolygon(hull, 0);
+				b2Shape_SetPolygon(id, geom);
+				this.geom = geom;
 			} else if (type == 3) {
-				geom.radius *= scaleX;
+				geom.radius *= Math.abs(scaleX);
 				b2Shape_SetCircle(id, geom);
 				this.geom = geom;
+			} else if (type == 4 || type == 7) {
+				// capsule (single or capsule chain segment)
+				geom = b2Shape_GetCapsule(id);
+				geom.center1.x *= scaleX;
+				geom.center1.y *= scaleY;
+				geom.center2.x *= scaleX;
+				geom.center2.y *= scaleY;
+				geom.radius *= Math.min(scaleX, scaleY);
+				b2Shape_SetCapsule(id, geom);
+				this.geom = geom;
+			} else if (type == 5) {
+				// segment
+				geom = b2Shape_GetSegment(id);
+				geom.point1.x *= scaleX;
+				geom.point1.y *= scaleY;
+				geom.point2.x *= scaleX;
+				geom.point2.y *= scaleY;
+				b2Shape_SetSegment(id, geom);
+				this.geom = geom;
 			}
+			// type 6 (chain) - handled by sprite's scaleBy, which rescales and sets all segments
 		}
 
 		_enableContactEvents(val = true) {
@@ -835,7 +872,13 @@ async function q5playPreSetup(q) {
 				if (flipY) ani.scale.y = -ani.scale.y;
 
 				if (start < 0) start = ani.length + start;
-				if (start !== undefined) ani._frame = start;
+				if (start !== undefined) {
+					ani._frame = start;
+				} else {
+					// reset so recycled animations don't immediately resolve
+					ani._frame = 0;
+					ani.playing = true;
+				}
 
 				if (end !== undefined) ani.goToFrame(end);
 				else if (ani._frame == ani.lastFrame) resolve();
@@ -952,7 +995,7 @@ async function q5playPreSetup(q) {
 
 			this._posX = x;
 			this._posY = y;
-			this._pos = $.createVector.call($);
+			this._pos = $.createVector.call($, 0, 0);
 
 			let _this = this;
 			Object.defineProperties(this._pos, {
@@ -974,7 +1017,7 @@ async function q5playPreSetup(q) {
 				}
 			});
 
-			this._canvasPos = $.createVector.call($);
+			this._canvasPos = $.createVector.call($, 0, 0);
 
 			Object.defineProperties(this._canvasPos, {
 				x: {
@@ -994,16 +1037,16 @@ async function q5playPreSetup(q) {
 			});
 
 			this._direction = 0;
-			this._velX = 0;
-			this._velY = 0;
+			this.vx = 0;
+			this.vy = 0;
 			this._velSynced = true;
-			this._vel = $.createVector.call($);
+			this._vel = $.createVector.call($, 0, 0);
 			this._vel._useCache = true;
 
 			this._syncVel = () => {
 				let v = b2Body_GetLinearVelocity(this.bdID);
-				this._velX = v.x;
-				this._velY = v.y;
+				this.vx = v.x;
+				this.vy = v.y;
 				this._velSynced = true;
 			};
 
@@ -1013,13 +1056,13 @@ async function q5playPreSetup(q) {
 						if (!_this._velSynced && _this._physicsEnabled) {
 							_this._syncVel();
 						}
-						return _this._velX;
+						return _this.vx;
 					},
 					set(val) {
 						if (_this._physicsEnabled) {
 							b2Body_SetLinearVelocity(_this.bdID, new b2Vec2(val, this.y));
 						}
-						_this._velX = val;
+						_this.vx = val;
 						this._magCached = this._directionCached = false;
 					}
 				},
@@ -1028,13 +1071,13 @@ async function q5playPreSetup(q) {
 						if (!_this._velSynced && _this._physicsEnabled) {
 							_this._syncVel();
 						}
-						return _this._velY;
+						return _this.vy;
 					},
 					set(val) {
 						if (_this._physicsEnabled) {
 							b2Body_SetLinearVelocity(_this.bdID, new b2Vec2(this.x, val));
 						}
-						_this._velY = val;
+						_this.vy = val;
 						this._magCached = this._directionCached = false;
 					}
 				}
@@ -1153,8 +1196,7 @@ async function q5playPreSetup(q) {
 				set(val) {
 					if (!val || val == this._x) return;
 					if (_this.watch) _this.mod[26] = true;
-					let scaleX = Math.abs(val / this._x);
-					_this.scaleBy(scaleX, 1);
+					_this.scaleBy(val / this._x, 1);
 					this._x = val;
 					this._avg = (this._x + this._y) * 0.5;
 					_this._shouldScale = this._avg != 1;
@@ -1168,8 +1210,7 @@ async function q5playPreSetup(q) {
 				set(val) {
 					if (!val || val == this._y) return;
 					if (_this.watch) _this.mod[26] = true;
-					let scaleY = Math.abs(val / this._y);
-					_this.scaleBy(1, scaleY);
+					_this.scaleBy(1, val / this._y);
 					this._y = val;
 					this._avg = (this._x + this._y) * 0.5;
 					_this._shouldScale = this._avg != 1;
@@ -1199,10 +1240,10 @@ async function q5playPreSetup(q) {
 				else this.addCollider(...args);
 			}
 
-			this.prevPos = { x, y };
+			this.prevX = x;
+			this.prevY = y;
 			this.prevRotation = 0;
-			this._dest = { x, y };
-			this._destIdx = 0;
+
 			this._debug = false;
 
 			if (!group._isAllSpritesGroup) $.allSprites.push(this);
@@ -1512,10 +1553,10 @@ async function q5playPreSetup(q) {
 							geom.center2 = vecs[i];
 							geom.radius = rr ? rr / meterSize : 0.02;
 							id = b2CreateCapsuleShape(bdID, shape.def, geom);
-							let shapePart = new Collider(this);
-							shape._init(id, 7, geom);
-							shapes.push(shapePart);
-							shapeDict[id.index1] = shapePart;
+							let sh = new Collider(this);
+							sh._init(id, 7, geom);
+							shapes.push(sh);
+							shapeDict[id.index1] = sh;
 						}
 						shape = null;
 						this.isSuperFast = true;
@@ -1533,12 +1574,17 @@ async function q5playPreSetup(q) {
 
 						id = b2CreateChain(bdID, shape.def);
 						shape._init(id, 6);
+						shape.friction = 0.5;
+						shape._points = vecs.map((v) => ({ x: v.x, y: v.y }));
+						shape._isLoopChain = vecs.isLoop;
+						this._chain = shape;
 
 						let count = b2Chain_GetSegmentCount(id);
 						let segments = b2Chain_GetSegments(id, count);
 						for (let segID of segments) {
 							let sh = new Collider(this);
 							sh._init(segID, 6);
+							sh.friction = 0.5;
 							shapes.push(sh);
 							shapeDict[segID.index1] = sh;
 						}
@@ -1891,7 +1937,7 @@ async function q5playPreSetup(q) {
 			}
 			const speed = this._vel.mag();
 			if (speed) {
-				this._setVel($.cos(val) * speed, $.sin(val) * speed);
+				this.__setVel($.cos(val) * speed, $.sin(val) * speed);
 				this._vel._magCached = false;
 			}
 			this._vel._direction = val;
@@ -1999,19 +2045,17 @@ async function q5playPreSetup(q) {
 			this._opacity = val;
 		}
 
-		get previousPosition() {
-			return this.prevPos;
+		get previousX() {
+			return this.prevX;
 		}
-		set previousPosition(val) {
-			this.prevPos = val;
+
+		get previousY() {
+			return this.prevY;
 		}
 
 		get previousRotation() {
 			return this.prevRotation;
 		}
-		set previousRotation(val) {
-			this.prevRotation = val;
-		}
 
 		get pixelPerfect() {
 			return this._pixelPerfect;
@@ -2035,8 +2079,9 @@ async function q5playPreSetup(q) {
 		get rotation() {
 			if (!this._physicsEnabled || !usePhysics) return this._rotation || 0;
 			let val = b2Body_GetRotation(this.bdID).GetAngle();
+			if ($._angleMode == DEGREES) val = $.degrees(val);
 			if (friendlyRounding) val = fixRoundAngular(val);
-			return (this._rotation = $._angleMode == DEGREES ? $.degrees(val) : val);
+			return (this._rotation = val);
 		}
 		set rotation(val) {
 			this._rotation = val;
@@ -2089,17 +2134,85 @@ async function q5playPreSetup(q) {
 		scaleBy(x, y) {
 			if (y === undefined) y = x;
 
+			const ax = Math.abs(x),
+				ay = Math.abs(y);
+
 			if (this._shapes) {
 				for (let shape of this._shapes) {
 					shape.scaleBy(x, y);
 				}
 			}
 
-			this._w *= x;
-			this._hw *= x;
+			if (this._hasChain) this._rebuildChain(x, y);
+
+			this._w *= ax;
+			this._hw *= ax;
 			if (this._h) {
-				this._h *= y;
-				this._hh *= y;
+				this._h *= ay;
+				this._hh *= ay;
+			}
+		}
+
+		_rebuildChain(scaleX, scaleY) {
+			const chain = this._chain;
+			const shapes = this._shapes;
+
+			// save properties from existing segments before removing them
+			const firstCollider = this.colliders[0];
+			const savedFriction = firstCollider?._friction ?? 0.5;
+			const savedSurfaceSpeed = firstCollider?._tangentSpeed ?? 0;
+			const savedBounciness = firstCollider?._restitution ?? 0.2;
+			// negate surfaceSpeed when the chain is flipped (odd number of axes negated)
+			const newSurfaceSpeed = scaleX * scaleY < 0 ? -savedSurfaceSpeed : savedSurfaceSpeed;
+
+			// scale the stored points (already in Box2D meter coordinates)
+			for (let p of chain._points) {
+				p.x *= scaleX;
+				p.y *= scaleY;
+			}
+
+			// when an odd number of axes are negated, the winding order reverses,
+			// flipping the collision normal; reverse the point order to compensate
+			if (scaleX * scaleY < 0) chain._points.reverse();
+
+			// clean up old chain segment JS references
+			for (let i = shapes.length - 1; i >= 0; i--) {
+				if (shapes[i].type === 6) {
+					delete shapeDict[shapes[i].id.index1];
+					this.colliders.splice(this.colliders.indexOf(shapes[i]), 1);
+					shapes.splice(i, 1);
+				}
+			}
+
+			// destroy old chain (Box2D frees all segment physics objects)
+			b2DestroyChain(chain.id);
+
+			// recompute packed material data
+			const packedData = ((chain._isFirstShape ? 1 : 0) << 26) | this._uid;
+
+			// create new chain with scaled points
+			const chainDef = new b2DefaultChainDef();
+			chainDef.SetPoints([chain._points[0], ...chain._points, chain._points.at(-1)]);
+			chainDef.isLoop = chain._isLoopChain;
+			chainDef.SetMaterials([{ customColor: packedData }]);
+
+			const newId = b2CreateChain(this.bdID, chainDef);
+			chain._init(newId, 6);
+			chain.friction = savedFriction;
+			chain._tangentSpeed = newSurfaceSpeed;
+
+			// register new chain segments with restored properties
+			const count = b2Chain_GetSegmentCount(newId);
+			const segments = b2Chain_GetSegments(newId, count);
+			for (let segID of segments) {
+				let sh = new Collider(this);
+				sh._init(segID, 6);
+				sh.friction = savedFriction;
+				sh.bounciness = savedBounciness;
+				if (newSurfaceSpeed) sh.surfaceSpeed = newSurfaceSpeed;
+				shapes.push(sh);
+				this.colliders.push(sh);
+				shapeDict[segID.index1] = sh;
 			}
 		}
 
@@ -2123,10 +2236,7 @@ async function q5playPreSetup(q) {
 
 			if (this.watch) this.mod[26] = true;
 
-			let scaleX = Math.abs(x / sc._x);
-			let scaleY = Math.abs(y / sc._y);
-
-			this.scaleBy(scaleX, scaleY);
+			this.scaleBy(x / sc._x, y / sc._y);
 
 			sc._x = x;
 			sc._y = y;
@@ -2153,14 +2263,14 @@ async function q5playPreSetup(q) {
 			return this._vel.mag();
 		}
 		set speed(val) {
-			if (!val) this._setVel(0, 0);
+			if (!val) this.__setVel(0, 0);
 			else {
 				const mag = this._vel.mag();
 				if (mag > 0) {
-					this._setVel((this._vel.x / mag) * val, (this._vel.y / mag) * val);
+					this.__setVel((this._vel.x / mag) * val, (this._vel.y / mag) * val);
 				} else {
 					const dir = this._vel.direction();
-					this._setVel($.cos(dir) * val, $.sin(dir) * val);
+					this.__setVel($.cos(dir) * val, $.sin(dir) * val);
 				}
 			}
 			this._vel._mag = val;
@@ -2168,7 +2278,7 @@ async function q5playPreSetup(q) {
 		}
 
 		setSpeedAndDirection(speed, direction) {
-			this._setVel($.cos(direction) * speed, $.sin(direction) * speed);
+			this.__setVel($.cos(direction) * speed, $.sin(direction) * speed);
 			this._vel._mag = speed;
 			this._vel._direction = direction;
 			this._vel._magCached = this._vel._directionCached = true;
@@ -2180,6 +2290,10 @@ async function q5playPreSetup(q) {
 		}
 		set surfaceSpeed(val) {
 			if (this.watch) this.mod[21] = true;
+			if (this._hasCapsuleChain) {
+				return console.error('Can not set surfaceSpeed of a capsule chain.');
+			}
+			if (this._hasChain) this._chain.surfaceSpeed = val;
 			for (let collider of this.colliders) {
 				collider.surfaceSpeed = val;
 			}
@@ -2230,7 +2344,7 @@ async function q5playPreSetup(q) {
 		}
 
 		get pos() {
-			return this._pos;
+			return { x: this._posX, y: this._posY };
 		}
 		set pos(val) {
 			if (val == $.mouse && !$.mouse.isActive) return;
@@ -2409,23 +2523,32 @@ async function q5playPreSetup(q) {
 		}
 		set vel(val) {
 			this._setVel(val[0] ?? val.x, val[1] ?? val.y);
-			this._vel._magCached = this._vel._directionCached = false;
+		}
+
+		get velocity() {
+			return this._vel;
+		}
+		set velocity(val) {
+			this.vel = val;
 		}
 
 		_setVel(x, y) {
 			if (this._physicsEnabled) {
 				b2Body_SetLinearVelocity(this.bdID, new b2Vec2(x, y));
 			}
-			this._velX = x;
-			this._velY = y;
+			this.vx = x;
+			this.vy = y;
 			this._velSynced = true;
+			this._vel._magCached = this._vel._directionCached = false;
 		}
 
-		get velocity() {
-			return this._vel;
-		}
-		set velocity(val) {
-			this.vel = val;
+		__setVel(x, y) {
+			if (this._physicsEnabled) {
+				b2Body_SetLinearVelocity(this.bdID, new b2Vec2(x, y));
+			}
+			this.vx = x;
+			this.vy = y;
+			this._velSynced = true;
 		}
 
 		get grabbable() {
@@ -2447,6 +2570,9 @@ async function q5playPreSetup(q) {
 
 		_update() {
 			if (this._customUpdate) this._customUpdate();
+			this.prevX = this._posX;
+			this.prevY = this._posY;
+			this.prevRotation = this.rotation;
 			if (this.autoUpdate) this.autoUpdate = null;
 		}
 
@@ -2455,8 +2581,8 @@ async function q5playPreSetup(q) {
 			if (this._life <= 0) {
 				this.delete();
 			} else if (!this._physicsEnabled || !usePhysics) {
-				this._posX += this._velX * timeScale;
-				this._posY += this._velY * timeScale;
+				this._posX += this.vx * timeScale;
+				this._posY += this.vy * timeScale;
 				this._rotation += this._rotationSpeed * timeScale;
 			}
 
@@ -2468,6 +2594,70 @@ async function q5playPreSetup(q) {
 				}
 			}
 
+			if (this._destArrivalTime !== undefined && $.world.physicsTime >= this._destArrivalTime) {
+				const x = this._posX,
+					y = this._posY,
+					prevX = this.prevX,
+					prevY = this.prevY,
+					destX = this._destX,
+					destY = this._destY;
+
+				const destReachedX =
+					destX === undefined || (destX >= Math.min(prevX, x) - visualSlop && destX <= Math.max(prevX, x) + visualSlop);
+				const destReachedY =
+					destY === undefined || (destY >= Math.min(prevY, y) - visualSlop && destY <= Math.max(prevY, y) + visualSlop);
+				const destReached = destReachedX && destReachedY;
+
+				if (destReached) {
+					this._setVel(0, 0);
+					this.rotationSpeed = 0;
+					this.pos = [this._destX ?? this._posX, this._destY ?? this._posY];
+					if (this._destRot !== undefined) {
+						this.rotation = this._destRot;
+					}
+				}
+
+				if (this._destResolve) {
+					this._destResolve(destReached);
+					this._destResolve = undefined;
+				}
+
+				this._destX = this._destY = this._destRot = this._destArrivalTime = undefined;
+			}
+
+			if (this._destRotArrivalTime !== undefined && $.world.physicsTime >= this._destRotArrivalTime) {
+				const isDeg = $._angleMode == DEGREES,
+					full = isDeg ? 360 : $.TWO_PI,
+					half = isDeg ? 180 : Math.PI,
+					prevRot = this.prevRotation,
+					currRot = this.rotation,
+					destRot = this._destRot;
+
+				// normalize destRot to [-half, half) to match this.rotation's range
+				let nd = ((destRot % full) + full) % full;
+				if (nd >= half) nd -= full;
+
+				// when the sprite crosses the ±half boundary, prevRot and currRot jump
+				// by ~full°; invert the range check so nd is tested against the arc that
+				// was actually traversed rather than the gap between them
+				const crossed180 = Math.abs(prevRot - currRot) > half;
+				const rotReached = crossed180
+					? nd >= Math.max(prevRot, currRot) - visualSlop || nd <= Math.min(prevRot, currRot) + visualSlop
+					: nd >= Math.min(prevRot, currRot) - visualSlop && nd <= Math.max(prevRot, currRot) + visualSlop;
+
+				if (rotReached) {
+					this.rotationSpeed = 0;
+					this.rotation = nd;
+				}
+
+				if (this._destRotationResolve) {
+					this._destRotationResolve(rotReached);
+					this._destRotationResolve = undefined;
+				}
+
+				this._destRot = this._destRotArrivalTime = undefined;
+			}
+
 			if (!this._physicsEnabled && !this._deleted) return;
 
 			this.__step();
@@ -2699,8 +2889,9 @@ async function q5playPreSetup(q) {
 				args[2] = args[1];
 				args[1] = undefined;
 			}
-			let o = {};
-			o.forceVector = new b2Vec2(args[0], args[1]);
+			const v = this._args2Vec(args[0], args[1]),
+				o = {};
+			o.forceVector = new b2Vec2(v.x, v.y);
 			if (args[2] !== undefined) {
 				o.poa = this._args2Vec(args[2], args[3]);
 				o.poa = scaleTo(o.poa.x, o.poa.y);
@@ -2776,30 +2967,70 @@ async function q5playPreSetup(q) {
 			wind.delete();
 		}
 
-		angleTo(x, y) {
-			if (typeof x == 'object') {
-				y = x.y;
-				x = x.x;
+		move(distance, direction, speed) {
+			if (!distance) return;
+
+			if (typeof direction == 'string') {
+				directionNamed = true;
+				this._heading = direction;
+				direction = this._getDirectionAngle(direction);
 			}
-			return $.atan2(y - this.y, x - this.x);
+			direction ??= this.direction;
+
+			const x = $.cos(direction) * distance + this.x,
+				y = $.sin(direction) * distance + this.y;
+			return this.moveTo(x, y, speed);
 		}
 
-		rotationToFace(x, y, facing) {
-			if (typeof x == 'object') {
-				facing = y;
-				y = x.y;
-				x = x.x;
+		moveTo(x, y, speed) {
+			if (x === undefined && (y === undefined || y === null)) return;
+
+			if (x !== null && x !== undefined && typeof x != 'number') {
+				let pos = x;
+				if (pos == $.mouse && !$.mouse.isActive) return;
+				speed = y;
+				y = pos.y;
+				x = pos.x;
 			}
-			// if the sprite is too close to the position, don't rotate
-			if (Math.abs(x - this.x) < 0.01 && Math.abs(y - this.y) < 0.01) {
-				return 0;
+
+			const moveX = x !== null && x !== undefined;
+			const moveY = y !== null && y !== undefined;
+
+			speed ||= this.speed || 1;
+
+			const dist =
+				moveX && moveY
+					? Math.hypot(x - this._posX, y - this._posY)
+					: moveX
+						? Math.abs(x - this._posX)
+						: Math.abs(y - this._posY);
+
+			if (this._destResolve) {
+				this._destResolve(false);
+				this._destResolve = undefined;
 			}
-			return this.angleTo(x, y) + (facing || 0);
-		}
 
-		angleToFace(x, y, facing) {
-			let ang = this.rotationToFace(x, y, facing);
-			return minAngleDist(ang, this.rotation);
+			this._destX = moveX ? x : undefined;
+			this._destY = moveY ? y : undefined;
+			this._destArrivalTime = $.world.physicsTime + dist / (speed * $.world._updateRate);
+
+			if (dist > 0) {
+				if (moveX && moveY) {
+					this.setSpeedAndDirection(speed, $.atan2(y - this.y, x - this.x));
+				} else if (moveX) {
+					this._setVel(x > this._posX ? speed : -speed, this.vy);
+				} else {
+					this._setVel(this.vx, y > this._posY ? speed : -speed);
+				}
+			}
+
+			if ($._py) return new Promise((resolve) => (this._destResolve = resolve));
+
+			return {
+				then: (onFulfilled) => {
+					this._destResolve = onFulfilled;
+				}
+			};
 		}
 
 		moveTowards(x, y, tracking) {
@@ -2816,21 +3047,120 @@ async function q5playPreSetup(q) {
 
 			let velX, velY;
 
-			if (x !== null) {
+			if (x !== null && x !== undefined) {
 				let diffX = x - this.x;
 				if (!isSlop(diffX)) {
 					velX = diffX * tracking;
 				} else velX = 0;
-			} else velX = this._velX;
-			if (y !== null) {
+			} else velX = this.vx;
+			if (y !== null && y !== undefined) {
 				let diffY = y - this.y;
 				if (!isSlop(diffY)) {
 					velY = diffY * tracking;
 				} else velY = 0;
-			} else velY = this._velY;
+			} else velY = this.vy;
 
 			this._setVel(velX, velY);
-			this._vel._magCached = this._vel._directionCached = false;
+		}
+
+		angleTo(x, y, facing = 0) {
+			if (typeof x == 'object') {
+				facing = y || 0;
+				y = x.y;
+				x = x.x;
+			}
+			// if the sprite is too close to the position, don't rotate
+			if (Math.abs(x - this.x) < 0.01 && Math.abs(y - this.y) < 0.01) {
+				return this.rotation;
+			}
+			return $.atan2(y - this.y, x - this.x) + facing;
+		}
+
+		angleDistTo(x, y, facing = 0) {
+			if (typeof x == 'object') {
+				facing = y || 0;
+				y = x.y;
+				x = x.x;
+			}
+			// if the sprite is too close to the position, don't rotate
+			if (Math.abs(x - this.x) < 0.01 && Math.abs(y - this.y) < 0.01) {
+				return 0;
+			}
+			return minAngleDist($.atan2(y - this.y, x - this.x) + facing, this.rotation);
+		}
+
+		rotateTo(angle, speed) {
+			let args = arguments;
+			let x, y, facing;
+			if (typeof args[0] != 'number') {
+				x = args[0].x;
+				y = args[0].y;
+				speed = args[1];
+				facing = args[2];
+			} else if (arguments.length > 2) {
+				x = args[0];
+				y = args[1];
+				speed = args[2];
+				facing = args[3];
+			}
+
+			if (x !== undefined) angle = this.angleTo(x, y, facing);
+
+			const full = $._angleMode == DEGREES ? 360 : $.TWO_PI;
+			let angleDist = (angle - this.rotation) % full;
+			if (angleDist < 0 && speed > 0) angleDist += full;
+			if (angleDist > 0 && speed < 0) angleDist -= full;
+
+			return this.rotate(angleDist, speed);
+		}
+
+		rotateMinTo(angle, speed, facing) {
+			let args = arguments;
+			let x, y;
+			if (typeof args[0] != 'number') {
+				x = args[0].x;
+				y = args[0].y;
+				speed = args[1];
+				facing = args[2];
+			} else if (args.length > 2) {
+				x = args[0];
+				y = args[1];
+				speed = args[2];
+				facing = args[3];
+			}
+
+			if (x !== undefined) angle = this.angleTo(x, y, facing);
+
+			return this.rotate(minAngleDist(angle, this.rotation), speed);
+		}
+
+		rotate(angleDist, speed) {
+			if (Math.abs(angleDist) <= angularSlop) return;
+
+			speed ||= this.rotationSpeed || 1;
+			speed = Math.abs(speed) * Math.sign(angleDist);
+
+			// cap speed so the sprite doesn't overshoot the destination in one physics step
+			if (Math.abs(speed) > Math.abs(angleDist)) speed = angleDist;
+
+			this._destRotArrivalTime = $.world.physicsTime + Math.abs(angleDist) / (Math.abs(speed) * $.world._updateRate);
+
+			this._destRot = this.rotation + angleDist;
+
+			if (this._destRotationResolve) {
+				this._destRotationResolve(false);
+				this._destRotationResolve = undefined;
+			}
+
+			this.rotationSpeed = speed;
+
+			if ($._py) return new Promise((resolve) => (this._destRotationResolve = resolve));
+
+			return {
+				then: (onFulfilled) => {
+					this._destRotationResolve = onFulfilled;
+				}
+			};
 		}
 
 		rotateTowards(angle, tracking) {
@@ -2848,18 +3178,31 @@ async function q5playPreSetup(q) {
 				facing = args[3];
 			}
 
-			if (x !== undefined) angle = this.angleToFace(x, y, facing);
+			if (x !== undefined) angle = this.angleDistTo(x, y, facing);
 			else angle -= this.rotation;
 
 			tracking ??= 0.1;
 			this.rotationSpeed = angle * tracking;
 		}
 
-		_setTargetTransform(x, y, rotation) {
-			let t = new b2Transform();
-			t.p = scaleTo(x, y);
+		transformTowards(x, y, rotation, tracking = 0.1) {
+			if (x === undefined) return;
+
+			if (typeof x != 'number') {
+				let pos = x;
+				if (pos == $.mouse && !$.mouse.isActive) return;
+				tracking = rotation ?? tracking;
+				rotation = y;
+				y = pos.y;
+				x = pos.x;
+			}
+
+			const t = new b2Transform();
+			t.p = scaleTo(x ?? this._posX, y ?? this._posY);
+			rotation ??= this._rotation;
+			if ($._angleMode == DEGREES) rotation = (rotation % 360) * DEGTORAD;
 			t.q = b2MakeRot(rotation);
-			b2Body_SetTargetTransform(this.bdID, t, $.world._timeStep);
+			b2Body_SetTargetTransform(this.bdID, t, $.world._timeStep / tracking);
 		}
 
 		delete() {
@@ -4083,7 +4426,7 @@ async function q5playPreSetup(q) {
 			for (let vecProp of vecProps) {
 				vecProp = '_' + vecProp;
 				if (vecProp != 'vel') this[vecProp] = {};
-				else this[vecProp] = $.createVector.call($);
+				else this[vecProp] = $.createVector.call($, 0, 0);
 				this[vecProp]._x = undefined;
 				this[vecProp]._y = undefined;
 				for (let prop of ['x', 'y']) {
@@ -4532,6 +4875,193 @@ async function q5playPreSetup(q) {
 			}
 		}
 
+		rotateTowards() {
+			for (let s of this) {
+				s.rotateTowards(...arguments);
+			}
+		}
+
+		rotateTo(angle, speed) {
+			const thenables = [];
+			for (let s of this) {
+				thenables.push(s.rotateTo(...arguments));
+			}
+
+			if ($._py) {
+				return new Promise((resolve) => {
+					let pending = thenables.length;
+					if (!pending) return resolve(true);
+					let allReached = true;
+					for (let t of thenables) {
+						t.then((reached) => {
+							if (!reached) allReached = false;
+							if (--pending === 0) resolve(allReached);
+						});
+					}
+				});
+			}
+
+			return {
+				then: (onFulfilled) => {
+					let pending = thenables.length;
+					if (!pending) return onFulfilled(true);
+					let allReached = true;
+					for (let t of thenables) {
+						t.then((reached) => {
+							if (!reached) allReached = false;
+							if (--pending === 0) onFulfilled(allReached);
+						});
+					}
+				}
+			};
+		}
+
+		rotate(angle, speed) {
+			const thenables = [];
+			for (let s of this) {
+				thenables.push(s.rotate(...arguments));
+			}
+
+			if ($._py) {
+				return new Promise((resolve) => {
+					let pending = thenables.length;
+					if (!pending) return resolve(true);
+					let allReached = true;
+					for (let t of thenables) {
+						t.then((reached) => {
+							if (!reached) allReached = false;
+							if (--pending === 0) resolve(allReached);
+						});
+					}
+				});
+			}
+
+			return {
+				then: (onFulfilled) => {
+					let pending = thenables.length;
+					if (!pending) return onFulfilled(true);
+					let allReached = true;
+					for (let t of thenables) {
+						t.then((reached) => {
+							if (!reached) allReached = false;
+							if (--pending === 0) onFulfilled(allReached);
+						});
+					}
+				}
+			};
+		}
+
+		rotateMinTo(angle, speed) {
+			const thenables = [];
+			for (let s of this) {
+				thenables.push(s.rotateMinTo(...arguments));
+			}
+
+			if ($._py) {
+				return new Promise((resolve) => {
+					let pending = thenables.length;
+					if (!pending) return resolve(true);
+					let allReached = true;
+					for (let t of thenables) {
+						t.then((reached) => {
+							if (!reached) allReached = false;
+							if (--pending === 0) resolve(allReached);
+						});
+					}
+				});
+			}
+
+			return {
+				then: (onFulfilled) => {
+					let pending = thenables.length;
+					if (!pending) return onFulfilled(true);
+					let allReached = true;
+					for (let t of thenables) {
+						t.then((reached) => {
+							if (!reached) allReached = false;
+							if (--pending === 0) onFulfilled(allReached);
+						});
+					}
+				}
+			};
+		}
+
+		transformTowards(x, y, rotation, tracking = 0.1) {
+			if (x === undefined) return;
+
+			if (typeof x != 'number') {
+				let pos = x;
+				if (pos == $.mouse && !$.mouse.isActive) return;
+				tracking = rotation ?? tracking;
+				rotation = y;
+				y = pos.y;
+				x = pos.x;
+			}
+
+			this._resetCentroid();
+
+			for (let s of this) {
+				if (s.distCentroid === undefined) {
+					this._resetDistancesFromCentroid();
+				}
+				s.transformTowards(s.distCentroid.x + x, s.distCentroid.y + y, rotation, tracking);
+			}
+		}
+
+		moveTo(x, y, speed) {
+			if (x === undefined && (y === undefined || y === null)) return;
+
+			let nullX = x === null || x === undefined;
+			let nullY = y === null || y === undefined;
+
+			if (!nullX && typeof x != 'number') {
+				let pos = x;
+				if (pos == $.mouse && !$.mouse.isActive) return;
+				speed = y;
+				y = pos.y;
+				x = pos.x;
+				nullX = nullY = false;
+			}
+
+			this._resetCentroid();
+			this._resetDistancesFromCentroid();
+
+			const thenables = [];
+			for (let s of this) {
+				const tx = nullX ? null : s.distCentroid.x + x;
+				const ty = nullY ? null : s.distCentroid.y + y;
+				thenables.push(s.moveTo(tx, ty, speed));
+			}
+
+			if ($._py) {
+				return new Promise((resolve) => {
+					let pending = thenables.length;
+					if (!pending) return resolve(true);
+					let allReached = true;
+					for (let t of thenables) {
+						t.then((reached) => {
+							if (!reached) allReached = false;
+							if (--pending === 0) resolve(allReached);
+						});
+					}
+				});
+			}
+
+			return {
+				then: (onFulfilled) => {
+					let pending = thenables.length;
+					if (!pending) return onFulfilled(true);
+					let allReached = true;
+					for (let t of thenables) {
+						t.then((reached) => {
+							if (!reached) allReached = false;
+							if (--pending === 0) onFulfilled(allReached);
+						});
+					}
+				}
+			};
+		}
+
 		toString() {
 			return 'g' + this.idNum;
 		}
@@ -5040,6 +5570,7 @@ async function q5playPreSetup(q) {
 		}
 		set meterSize(val) {
 			meterSize = val;
+			visualSlop = meterSize / 120;
 		}
 
 		get profile() {
@@ -5155,6 +5686,8 @@ async function q5playPreSetup(q) {
 
 			this.physicsTime += timeStep;
 
+			this._sync();
+
 			let sprites = Object.values($.q5play.sprites);
 			let groups = Object.values($.q5play.groups);
 
@@ -5171,6 +5704,71 @@ async function q5playPreSetup(q) {
 			if (this.autoStep) this.autoStep = null;
 		}
 
+		_sync() {
+			jointStack = [];
+			shapeStack = [];
+
+			b2World_Draw(wID, drawCmds.GetDebugDraw());
+
+			let cmdPtr = drawCmds.GetCommandsData(),
+				cmdSize = drawCmds.GetCommandsSize(),
+				cmdStride = drawCmds.GetCommandStride(),
+				offset = cmdPtr,
+				renderJointForces = $.q5play.renderJointForces,
+				s;
+
+			for (let i = 0; i < cmdSize; i++, offset += cmdStride) {
+				// workaround that unpacks data from
+				// the shape material's customColor
+				const customColor = Box2D.HEAPU32[(offset + 4) >> 2],
+					uid = customColor & 0xffffff,
+					isSensor = (customColor >>> 25) & 0x1,
+					isFirstShape = (customColor >>> 26) & 0x1;
+
+				s = $.q5play.sprites[uid];
+
+				let type = Box2D.HEAPU8[offset];
+
+				if (type == 7) {
+					continue;
+				}
+
+				let vertexCount = Box2D.HEAPU16[(offset + 8) >> 1];
+
+				let dataLen = 4;
+				if (type == 1) dataLen = 5 + vertexCount * 2;
+				else if (type == 3 || type == 4) dataLen = 5;
+				let data = new Float32Array(Box2D.HEAPU8.buffer, offset + 12, dataLen);
+
+				if (!s) {
+					if (type == 0 && renderJointForces) jointStack.push(data);
+					continue;
+				}
+
+				// always keep position in sync since it has a low performance cost
+				// unless the shape is a chain
+				if (type < 4 || (type == 4 && !s._hasCapsuleChain)) {
+					s._posX = data[0] * meterSize;
+					s._posY = data[1] * meterSize;
+				}
+
+				s._velSynced = false;
+				s._vel._magCached = false;
+
+				if (!s.visible) {
+					continue;
+				}
+
+				if (s._hasImagery || s._userDefinedDraw) {
+					s._rotation = Math.atan2(data[2], data[3]) * RADTODEG;
+				}
+
+				if (s.debug || (!s._hasImagery && !s._userDefinedDraw)) {
+					shapeStack.push({ type, sprite: s, isSensor, isFirstShape, data, vertexCount });
+				}
+			}
+		}
+
 		get realTime() {
 			return $.millis() / 1000;
 		}
@@ -5278,7 +5876,7 @@ async function q5playPreSetup(q) {
 	$.Camera = class {
 		constructor() {
 			// camera position
-			this._pos = $.createVector.call($);
+			this._pos = $.createVector.call($, 0, 0);
 
 			// camera translation
 			this.__pos = { x: 0, y: 0, rounded: {} };
@@ -5298,7 +5896,7 @@ async function q5playPreSetup(q) {
 		}
 
 		get pos() {
-			return this._pos;
+			return { x: this._pos.x, y: this._pos.y };
 		}
 		set pos(val) {
 			this.x = val[0] ?? val.x;
@@ -6548,10 +7146,18 @@ async function q5playPreSetup(q) {
 	};
 
 	$.delay = (milliseconds) => {
-		if (!milliseconds) return new Promise(requestAnimationFrame);
+		if (!milliseconds) {
+			return new Promise((resolve) => {
+				requestAnimationFrame(() => {
+					if (!$._removed) resolve();
+				});
+			});
+		}
 		// else it wraps setTimeout in a Promise
 		return new Promise((resolve) => {
-			setTimeout(resolve, milliseconds);
+			setTimeout(() => {
+				if (!$._removed) resolve();
+			}, milliseconds);
 		});
 	};
 
@@ -6601,6 +7207,8 @@ async function q5playPreSetup(q) {
 	$.Canvas = $.createCanvas = function (w, h) {
 		let args = [...arguments];
 
+		if (using_p5 && !didCreateCanvas && w == 100 && h == 100) return _createCanvas.call($, ...args);
+
 		// prevent p5 v1 overriding the user's canvas with a new default canvas
 		if (didCreateCanvas && w == 100 && h == 100) return;
 
@@ -6631,7 +7239,7 @@ async function q5playPreSetup(q) {
 		let rend = _createCanvas.call($, ...args);
 		$.ctx = $.drawingContext;
 		let c = rend.canvas || rend;
-		window.canvas = c; // for p5 v2
+		if (using_p5) window.canvas = c;
 		if (rend.GL) {
 			c.renderer = 'webgl';
 			$._webgl = true;
@@ -6698,7 +7306,7 @@ async function q5playPreSetup(q) {
 		return rend;
 	};
 
-	$.canvas = $.canvas;
+	$.canvas = $.canvas; // for brython
 
 	const _resizeCanvas = $.resizeCanvas;
 
@@ -6826,7 +7434,7 @@ async function q5playPreSetup(q) {
 
 	$.allSprites = new $.Group();
 	$.world = new $.World();
-	$.camera = new $.Camera();
+	$.camera = $._camera = new $.Camera();
 
 	$.InputDevice = class {
 		constructor() {
@@ -6901,7 +7509,6 @@ async function q5playPreSetup(q) {
 
 			this.x = 0;
 			this.y = 0;
-			this.canvasPos = {};
 			this.isOnCanvas = false;
 			this.isActive = false;
 			this.left = 0;
@@ -6913,7 +7520,7 @@ async function q5playPreSetup(q) {
 			let _this = this;
 
 			// this.x and this.y store the actual position values of the mouse
-			this._pos = $.createVector.call($);
+			this._pos = $.createVector.call($, 0, 0);
 
 			Object.defineProperty(this._pos, 'x', {
 				get() {
@@ -6954,10 +7561,20 @@ async function q5playPreSetup(q) {
 		}
 
 		_update() {
-			let cam = $.camera;
-			let m = this;
-			m.x = $.mouseX / cam.zoom + cam.x;
-			m.y = $.mouseY / cam.zoom + cam.y;
+			let cam = $.camera,
+				m = this,
+				mx = $.mouseX,
+				my = $.mouseY;
+
+			if (using_p5) {
+				if ($._webgpuFallback) {
+					mx -= $.halfWidth;
+					my -= $.halfHeight;
+				}
+			}
+
+			m.x = mx / cam.zoom + cam.x;
+			m.y = my / cam.zoom + cam.y;
 
 			if (m.scroll < 0) m.scroll = 0;
 			if (m.scrollDelta.x == 0 && m.scrollDelta.y == 0) {
@@ -6966,7 +7583,7 @@ async function q5playPreSetup(q) {
 		}
 
 		get pos() {
-			return this._pos;
+			return { x: this.x, y: this.y };
 		}
 		get position() {
 			return this._pos;
@@ -7691,7 +8308,7 @@ async function q5playPreSetup(q) {
 			this[indexB] = tmp;
 			if (indexA == 0 || indexB == 0) {
 				$.contro = this[0];
-				if (!$._q5 && $._isGlobal) {
+				if (using_p5 && $._isGlobal) {
 					window.contro = this[0];
 				}
 			}
@@ -7778,7 +8395,7 @@ async function q5playPreSetup(q) {
 		fpsPos = 0,
 		fpsMin = 60,
 		fpsMax = 240;
-	let statsColor = $.color('lime');
+	let statsColor = $._q5 ? $.color('lime') : 'lime';
 
 	$.renderStats = () => {
 		let rs = $.q5play._renderStats;
@@ -7879,78 +8496,23 @@ async function q5playPreSetup(q) {
 		jointStack = [],
 		shapeStack = [];
 
-	$._syncWorld = () => {
-		jointStack = [];
-		shapeStack = [];
-
-		b2World_Draw(wID, drawCmds.GetDebugDraw());
-
-		let cmdPtr = drawCmds.GetCommandsData(),
-			cmdSize = drawCmds.GetCommandsSize(),
-			cmdStride = drawCmds.GetCommandStride(),
-			offset = cmdPtr,
-			renderJointForces = $.q5play.renderJointForces,
-			s;
-
-		for (let i = 0; i < cmdSize; i++, offset += cmdStride) {
-			// workaround that unpacks data from
-			// the shape material's customColor
-			const customColor = Box2D.HEAPU32[(offset + 4) >> 2],
-				uid = customColor & 0xffffff,
-				isSensor = (customColor >>> 25) & 0x1,
-				isFirstShape = (customColor >>> 26) & 0x1;
-
-			s = $.q5play.sprites[uid];
-
-			let type = Box2D.HEAPU8[offset];
-
-			if (type == 7) {
-				continue;
-			}
-
-			let vertexCount = Box2D.HEAPU16[(offset + 8) >> 1];
-
-			let dataLen = 4;
-			if (type == 1) dataLen = 5 + vertexCount * 2;
-			else if (type == 3 || type == 4) dataLen = 5;
-			let data = new Float32Array(Box2D.HEAPU8.buffer, offset + 12, dataLen);
-
-			if (!s) {
-				if (type == 0 && renderJointForces) jointStack.push(data);
-				continue;
-			}
-
-			// always keep position in sync since it has a low performance cost
-			// unless the shape is a chain
-			if (type < 4 || (type == 4 && !s._hasCapsuleChain)) {
-				s._posX = data[0] * meterSize;
-				s._posY = data[1] * meterSize;
-			}
-
-			s._velSynced = false;
-			s._vel._magCached = false;
-
-			if (!s.visible) {
-				continue;
-			}
-
-			if (s._hasImagery || s._userDefinedDraw) {
-				s._rotation = Math.atan2(data[2], data[3]) * RADTODEG;
-			}
-
-			if (s.debug || (!s._hasImagery && !s._userDefinedDraw)) {
-				shapeStack.push({ type, sprite: s, isSensor, isFirstShape, data, vertexCount });
-			}
-		}
-	};
-
 	const colorMax = $._colorFormat,
-		debugGreen = $.color(0, colorMax, 0, colorMax * 0.9),
-		debugGreenFill = $.color(0, colorMax, 0, colorMax * 0.1),
-		debugYellow = $.color(colorMax, colorMax, 0, colorMax * 0.9),
-		debugYellowFill = $.color(colorMax, colorMax, 0, colorMax * 0.1);
-
-	if ($.canvas.c2d) {
+		debugGreen = $._q5 ? $.color(0, colorMax, 0, colorMax * 0.9) : 'lime',
+		debugGreenFill = $._q5 ? $.color(0, colorMax, 0, colorMax * 0.1) : 'lime',
+		debugYellow = $._q5 ? $.color(colorMax, colorMax, 0, colorMax * 0.9) : 'yellow',
+		debugYellowFill = $._q5 ? $.color(colorMax, colorMax, 0, colorMax * 0.1) : 'yellow';
+
+	if (using_p5) {
+		$._getFillIdx = () => $._renderer.states.fillColor;
+		$._setFillIdx = (v) => $.fill(v);
+		$._getStrokeIdx = () => $._renderer.states.strokeColor;
+		$._setStrokeIdx = (v) => {
+			if ($._renderer.states.strokeSet) $.stroke(v);
+		};
+		$._getStrokeWeight = () => [$._renderer.states.strokeWeight];
+		$._setStrokeWeight = (v) => $.strokeWeight(...v);
+		$._getImageMode = () => $._renderer.states.imageMode;
+	} else if ($.canvas.c2d) {
 		// polyfill for q5 WebGPU high efficiency functions
 		$._getFillIdx = () => $._fill;
 		$._setFillIdx = (v) => ($._fill = v);
@@ -8136,12 +8698,17 @@ async function q5playPreSetup(q) {
 	};
 
 	// prettier-ignore
-	let q5playGlobals = ['q5play','Box2D','DYN','DYNAMIC','STA','STATIC','KIN','KINEMATIC','Sprite','Group','allSprites','Ani','Anis','Visual','Visuals','camera','Joint','GlueJoint','DistanceJoint','WheelJoint','HingeJoint','SliderJoint','GrabberJoint','world','kb','keyboard','mouse','contro','contros','controllers','pointer','pointers','spriteArt','EmojiImage','getFPS','animation','parseTextureAtlas','delay'];
+	let q5playGlobals = ['q5play','Box2D','DYN','DYNAMIC','STA','STATIC','KIN','KINEMATIC','Sprite','Group','allSprites','Ani','Anis','Visual','Visuals','Joint','GlueJoint','DistanceJoint','WheelJoint','HingeJoint','SliderJoint','GrabberJoint','world','kb','keyboard','mouse','contro','contros','controllers','pointer','pointers','spriteArt','EmojiImage','getFPS','animation','parseTextureAtlas','delay'];
 
 	// manually propagate q5play stuff to the global window object
 	if ($._isGlobal) {
 		for (let p of q5playGlobals) {
-			window[p] = $[p];
+			Object.defineProperty(window, p, {
+				value: $[p],
+				configurable: true,
+				writable: false,
+				enumerable: true
+			});
 		}
 	}
 
@@ -8152,10 +8719,31 @@ async function q5playPreSetup(q) {
 function q5playPostSetup() {
 	const $ = this;
 
-	if ($._isGlobal && window.update) {
-		$.update = window.update;
+	if ($._isGlobal && window.update) $.update = window.update;
+
+	if (using_p5) {
 		// p5 won't run the draw loop without a draw function defined
-		if (!$._q5) window.draw = () => {};
+		window.draw = () => {};
+
+		$.loge = $.log;
+		$.log = console.log;
+		$.camera = $._camera;
+
+		if ($._isGlobal) {
+			Object.defineProperty(window, 'log', {
+				value: console.log
+			});
+			Object.defineProperty(window, 'loge', {
+				value: $.loge
+			});
+			$.camera3D = window.camera;
+			Object.defineProperty(window, 'camera3D', {
+				value: $.camera3D
+			});
+			Object.defineProperty(window, 'camera', {
+				value: $.camera
+			});
+		}
 	}
 
 	$.update ??= $.clear;
@@ -8167,9 +8755,11 @@ function q5playPostSetup() {
 function q5playUpdate() {
 	const $ = this;
 
-	if (!$._q5) {
+	if (using_p5) {
 		$.q5play._preDrawFrameTime = performance.now();
+		$.resetMatrix();
 	}
+
 	$.q5play.spritesDrawn = 0;
 
 	$.contros._update();
@@ -8242,7 +8832,6 @@ function q5playUpdate() {
 
 	if ($.world.autoStep && $.world.timeScale > 0) {
 		$.world.physicsUpdate();
-		$._syncWorld();
 	}
 	$.world.autoStep ??= true;
 
@@ -8313,7 +8902,7 @@ function q5playPostDraw() {
 		else if ($.kb[k] > 0) $.kb[k]++;
 	}
 
-	if (!$._q5) {
+	if (using_p5) {
 		$.q5play._postDrawFrameTime = performance.now();
 		$.q5play._fps = Math.round(1000 / ($.q5play._postDrawFrameTime - $.q5play._preDrawFrameTime)) || 1;
 	}
@@ -8321,6 +8910,7 @@ function q5playPostDraw() {
 }
 
 function q5playRemove() {
+	this._removed = true;
 	this.world?.delete();
 }
 
@@ -8405,16 +8995,19 @@ addAnis -> es:añadirAnis
 changeAni -> es:cambiarAni
 playAni -> es:reproducirAni
 playAnis -> es:reproducirAnis
+moveTo -> es:moverA
 moveTowards -> es:moverHacia
+rotateTo -> es:rotarA
 rotateTowards -> es:rotarHacia
+transformTowards -> es:transformarHacia
 applyForce -> es:aplicarFuerza
 applyForceScaled -> es:aplicarFuerzaEscalada
 attractTo -> es:atraerA
 repelFrom -> es:repelerDe
 applyTorque -> es:aplicarTorque
-angleTo -> es:ánguloHacia
-rotationToFace -> es:rotaciónParaMirar
-angleToFace -> es:ánguloParaMirar
+applyWind -> es:aplicarViento
+angleTo -> es:ánguloA
+angleDistTo -> es:distÁnguloA
 setSpeedAndDirection -> es:establecerVelocidadYDirección
 scaleBy -> es:escalarPor
 resetMass -> es:reiniciarMasa
@@ -8518,6 +9111,56 @@ pressure -> es:presión
 };
 q5playClassLangs.Group += q5playClassLangs.Sprite;
 
+if (typeof globalThis.Q5 == 'undefined') {
+	console.warn('p5.js v2 is not fully compatible with q5play. Consider using q5 instead: https://q5js.org');
+
+	p5.addHook = (hook, fn) => {
+		p5.registerAddon((p5, proto, lifecycles) => {
+			lifecycles[hook] = fn;
+		});
+	};
+
+	// p5.js v2 compatibility layer
+	globalThis.Canvas = (...args) => {
+		return new Promise((resolve) => {
+			window.setup = async function () {
+				const $ = p5.instance;
+				$._webgpu = $._webgpuFallback = true;
+
+				$.Canvas(...args);
+
+				// q5play defaults
+				colorMode(RGB, 1);
+				imageMode(CENTER);
+
+				$.halfWidth = width / 2;
+				$.halfHeight = height / 2;
+
+				let _resetMatrix = $.resetMatrix;
+
+				$.resetMatrix = () => {
+					_resetMatrix.call($);
+					$.translate($.halfWidth, $.halfHeight);
+				};
+
+				Object.defineProperty(p5, 'update', {
+					set(fn) {
+						$.update = fn;
+					},
+					get() {
+						return $.update;
+					},
+					configurable: true
+				});
+
+				resolve();
+			};
+		});
+	};
+
+	globalThis.Q5 = globalThis.q5 = p5;
+}
+
 Q5.addHook('presetup', q5playPreSetup);
 Q5.addHook('postsetup', q5playPostSetup);
 Q5.addHook('predraw', q5playUpdate);