v3.24

Use these links in your projects to always get the latest version of p5play:

https://p5play.org/v3/planck.min.js
https://p5play.org/v3/p5play.js

3.24.13

Added support for server side synchronous image loading. p5play can now run server side with q5, skia-canvas, and jsdom npm packages. Check out the demo:

https://github.com/quinton-ashley/p5play-render-demo

3.24.10

Merged PRs from @codingMASTER398 and @Dukemz 🎉

3.24.8

Added support for sketches written for q5 WebGPU that fall back to the Canvas2D renderer if WebGPU is not available in the user's browser.

3.24.6

Fixed friendly angle rounding, angular slop was not properly calculated.

3.24.5

Fixed #337

3.24.3

When sprite.debug is true sensors now display as bright yellow with 50% transparency, so that lime green colliders drawn directly under a sensor can still be seen.

3.24.1

Fixed a regression introduced in v3.22.13 that messed up animation scaling. I recommend that npm users upgrade to this version ASAP!

When used with q5.js v2.9 and above, p5play will use q5's default image scale system. p5play will also use the image's defaultWidth and defaultHeight to determine the size of group sprites when a group has an image or animation but the user didn't specifying what width and height the sprites should be like in this example.
https://p5play.org/learn/animation.html?page=3

v3.23

3.23.0

Initial support for q5-webgpu!
https://q5js.org

Made a proper fix for group.width and group.height not being inherited by group animations if no other dimensions are specified.

v3.22

v3.22.17

p5.js v1.10.0 finally has the fix I helped Dave make for deltaTime, 5 months after I suggested it. Better late than never I guess, but it took so long I forgot to remove the warning I made to p5play user's about p5's inaccurate delaTime, until now.

Reimplemented the Emoji Image function so that it simply uses a p5 or q5 graphics object to make the image. It's a bit faster than the previous implementation that used createTextImage.

Removed the text image cache system from p5play.js because it was admittedly a hacky solution to p5's slow text rendering and I don't want to maintain a separate version of this code I originally wrote for q5. I've improved the system in q5.js, so anyone that wants to use text image caching going forward needs to use q5.js instead of p5.js.

For q5's WebGPU renderer I'm working on a more robust system for displaying high quality text with much better performance compared to p5.js WebGL mode. Stay tuned!
https://github.com/q5js/q5.js/wiki/Developer-Log#research-on-realtime-text-rendering-in-webgpu--september-22-2024

v3.22.16

Fixed #332 a regression introduced in v3.22.15

v3.22.12

Optimized EmojiImage code.

Updated applyForce params and documentation. Thanks to @sifhg!

v3.22.11

Fixed regression in v3.22.8, use of new Canvas(200, 200, "pixelated") properly makes the canvas fullscreen.

v3.22.10

If no input params are given to fill, stroke, and background, p5play.js no longer throws an error, the error should be thrown from q5 or p5.

v3.22.9

Fixed major issue with v3.22.8 that caused p5play to crash when used with p5.js. I forgot to test with p5, not just with q5.

v3.22.6

sprite.move now works with negative direction angles.

v3.22.5

Fixed #323

v3.22.4

Setting group.image to an arrow function works now.

v3.22.3

sprite.image and group.image have to determine if the input string is a file path or emoji. My test to determine that was not so sophisticated, just checking if the length of the string were less than 4. But some emojis have a really long unicode char lengths:

"👋🏻".length; // => Expected 1, got 4.
"👨‍👩‍👧‍👧".length; // => Expected 1, got 11.
"🤽🏿‍♀️".length; // => Expected 1, got 7.
credits: https://github.com/jericirenej/emoji-string-length

Now p5play just checks if the string includes a ".", then it's an image file.

v3.22.2

group.image works now! What an oversight haha.

v3.22.1

No images? 🫥 No problem! 😄 You can use any emoji as the image for your sprite. The size of the emoji image will be based on the sprite's size. Great for quick prototyping! 🧪 https://p5play.org/learn/sprite.html?page=2

sprite.image = '🏀';

Also implemented #322. The setter of sprite.image no longer creates a single frame animation behind the scenes, it just stores the image. Some pretty common questions on the discord server were how to offset an image from the center of the sprite and how to scale it. I figured these features should be introduced sooner on Sprite page 2.

Deprecated sprite.addImage, group.addImage, and similar functions because it's unclear that p5play is making single frame animations inside these functions which are actually just aliased to sprite.addAni anyway.

Implemented #321 spirte.canvasPos requested by a user on discord (can't find them!)

Fixed #320

Also the memory leak fix from v3.21.7 has been confirmed to work!

v3.21

3.21.7

Fixed a memory leak introduced in v3.18.5 that brought fps to a crawl on some devices after a few minutes of use!

Breaking change to the getter for sprite.direction. When a sprite stopped moving it used to get the sprite's rotation. I realized after talking to some users on discord that this behavior is too confusing and doesn't make sense in many situations. Now a sprite's direction and rotation are completely separate. A sprite's direction setting persists, even if it stops moving. To retain old behavior simply set sprite.direction = sprite.rotation.

Turtle sprites have direction tied to rotation and the examples that use the turtles now explain this.

3.21.6

Fix for sound not activating on first touch on iOS devices, needed to call userStartAudio in ontouchstart.

3.21.4

Added sprite.gravityScale

3.21.3

Removed ".png" extension check which doesn't work if image names have "?" params.

3.21.2

When a sprite with a collider type of "d", "s", or "k" is changed to "none", or vice versa, the sprite will maintain its current position, speed, rotation, and rotation speed.

If you want to have the sprite lose it's speed or rotationSpeed after the collider type change, simply set them to zero manually.

https://aijs.io/editor?user=quinton-ashley&project=colliderEditing_demo

3.21.1

It just wouldn't be a new minor release bump if I didn't forget to manually update the version number at the top of the file lol.

3.21.0

Fixed bug that caused new Sprite() with no input params to crash inside preload.

v3.20

3.20.11

contros.swap should also update contro in p5.js if contros[0] is changed.

3.20.10

More sophisticated feature detection for Contro object's hasAnalogTriggers property

3.20.9

The way I had implemented contro did not work properly with p5. Fixed it real quick!

3.20.8

Added world.meterSize.

Fixed camera support with p5's webgl mode.

3.20.7

Upgraded the controllers array, now aliased to contros (with an "s") instead of contro.

contro will still attempt to get input from the first controller but if it doesn't exist, it'll get a mock controller. The mock controller object can be used for testing or even TAS purposes.

I also publicly exposed Contro as a public class in case users want to make additional mock controllers. Added getter hasAnalogTriggers to controller objects.

Added contros.onConnect, contros.onDisconnect, contros.swap, and contros.remove functions.

Fixed some mistakes that had broken the camera for canvas 2d mode.

I still need to implement proper support for the camera in p5's webgl mode.

3.20.5

p5 webgl mode support is ready for beta testing!

new Canvas(400, 400, 'webgl');

p5play canvas presets can still be used but must be specified before the mode param:

new Canvas(400, 400, 'fullscreen', 'webgl');

Also fixed a q5.js bug with sprite.strokeWeight = 0, which should just make chain colliders not be drawn.

3.20.4

Added world.rayCast and world.rayCastAll functions.
https://p5play.org/docs/World.html#rayCast

Demo:
https://aijs.io/editor?user=quinton-ashley&project=p5play_world_rayCast_demo

Added world.physicsTime and world.realTime

Added sprite.distanceTo
https://p5play.org/docs/Sprite.html#distanceTo

Thanks to @codingMASTER398 for his help and PR #314 !

3.20.3

Fixed bug with frameRate function override.

3.20.2

Fixed bug that caused sprite.mass setter to crash due to changes in v3.20.1. Oof my bad, I didn't consider it.

Also sprite.resetMass will now only reset the sprite's mass, not its center of mass.

3.20.1

The renderStats function is now deprecated in favor of setting a boolean property p5play.renderStats. This makes it easier to render stats, no need to run renderStats every frame, its much better to just be able to toggle it on and off, which can simply be done in the console. renderStats didn't actually draw the stats anyways, it just set a flag for p5play to draw them after the user's draw loop and all sprites were drawn.

Fixed #312. In p5play my goal was always to have the sprite's center (position), center of mass, and center of rotation all be the same point. So to ensure this is true, addCollider will not change the sprite's center of mass. Users can then use a separate function for that: resetCenterOfMass

Also I tweaked sprite.rotate so that it will not snap to the angle amount prematurely. It also will slow the sprite on the last frame of rotation if the remaining angular distance is not divisible by the rotation speed. This prevents the sprite from having to rotationally teleport too far, ideally a negligible amount or not at all, when set to the exact destination angle. The v3.20.0 implmentation broke my hourglass demo, now it's working great!

3.20.0

Fixed renderStats crashing if not used on frame 1.

v3.19

3.19.17

Fixes #310

3.19.16

sprite.life is now based on world.timeScale instead of frameCount. Fixes #308

Fixed renderStats not working with p5.js and made the rect bigger to fit the additional line of text that shows the display frame rate.

Also when sprite.debug is true, sensors will be drawn with bright yellow to differentiate them from colliders which are bright green.

3.19.15

Implemented world.timeScale which can be used to control the physics simulation.
https://p5play.org/learn/world.html?page=1

3.19.11

Fixed #307 rotateTo is now straightforward, just rotate the sprite to whatever angle at whatever speed you give it. rotateMinTo will rotate the sprite the minimum angular distance to the destination angle, using the given rotation speed as an absolute speed, flipping the direction of rotation as needed.

3.19.9

No longer shows the "made with p5play" on replit.dev pages.

Properly implemented rotationSpeed. In planck angularVelocity is specified in angles per second. Therefore to properly set rotationSpeed the user's angle value must be multiplied by 60 (fps) then divided by 57.2958 to convert to radians. Previously this function didn't do any calculation and the results were visually similar when used with the default degree mode. I'm not sure how I didn't catch this, but no one else ever reported the issue either. Glad it's fixed now!

3.19.8

p5play now calls mousePressed on first touches, as it should.

Various tweaks were made to make p5play not throw errors if window or document are not defined node.js.

A template for using p5play in a node.js server with q5, canvas, and jsdom packages will be published soon!

v3.19.6

Documented p5play's touches array!
https://p5play.org/learn/input.html?page=5

Fixed #298

Implemented #258 kb.visible = true only works if done inside the p5/q5 touchStarted function.

Fixed this but only with p5.js #296

v3.19.3

Forgot to add the fix to #270 into the new release. Re-added...

v3.19.2

Fixed bug with touches not ending. A variable name was wrong in one place.

v3.19.1

Fixed crash with "pixelated" preset when using p5play with p5.js. I forgot one line of code ah. Thanks to @ coding on Discord for reporting the error.

v3.19.0

The future is here: p5play v3.19 now supports HDR color space when used with q5.js! ✨
https://github.com/quinton-ashley/q5.js
q5js/q5.js#24

Thusly, p5play.org has been upgraded to display vibrant colors and images on HDR devices. 👀
https://p5play.org

Check out my "HDR Web Design Guide" for more info on how to use HDR in your own projects. 🤝
https://quinton-ashley.github.io/hdr-web-design-guide/

New feature: sprite.opacity which changes the opacity of the sprite, whether it's drawn using shapes or images.

Keep this a secret for now, but I also added p5play style input functions pressing and dragging for touch objects in the touches array. I will announce this feature on Discord after I write documentation for it. 😅
https://p5play.org/learn/input_devices.html?page=5

v3.18

v3.18.12

Upgraded p5play's license from the GPLv3 to the AGPLv3. See LICENSING.md for more info.

v3.18.9

The fullscreen and pixelated (no scalar) canvas presets are now programmed to decide to scale width or height to 100% by comparing the aspect ratio of the canvas to the aspect ratio of the window.

if (c.w / c.h > window.innerWidth / window.innerHeight) style += 'width: 100%!important; height: auto!important;';
else style += 'height: 100%!important; width: auto!important;';

v3.18.8

Fixed #281

v3.18.7

I added a new feature to make it easier to make tile based games. When using sprite.move with a sprite that has a tileSize (not equal to 1), and an input distance that's divisible by 0.5, and an input direction name or cardinal direction angle, then the distance the sprite moves will be rounded up to the nearest half tile.

Also improved the canvas "fullscreen" preset and wrote documentation for it.
https://p5play.org/learn/canvas.html?page=0

v3.18.6

Reverted some incorrect changes to move and moveTo. For better performance, I tried making it so that if a sprite is moved in a cardinal direction, the calculations for one axis of movement would be skipped, but these functions still need to override that axis of movement. In the docs it says inputting direction in these functions should be equivalent to changing the sprite.direction property, like this:

sprite.move(1, 'left');

// is equivalent to

sprite.direction = 'left';
sprite.move(1);

For non-imperative movement, applyForce can be used.

v3.18.5

Fixed sprite.moveTo function errors introduced in v3.17.

Changed the implementation of the sleep function, when run without arguments it now resolve it's promise after the next world step is complete, instead of using requestAnimationFrame. Pretty much the same result in normal use cases but it could allow users to run world.step separate from the canvas display rate and have functions like move and moveTo still work. Previously they were tied to the frame rate too.

v3.18.0

Upgraded p5play's rotated text caching system to work exclusively with p5.js v1.9.0 (latest) and any future releases.

This is because p5.js' devs made some breaking changes to p5.Graphics.get which makes the current implementation of text caching in p5play incompatible with older versions of p5.js.

v3.17

v3.17.11

Fixes for text caching bugs with p5.js v1.8.0.

v3.17.8

Bug fix. When setting a sprite's collider type to 'none' with the property setter, for sprites with no overlap sensors, after destroying the body I needed to also set this.body = null.

v3.17.6

Support for negative sprite.scale (which mirrors the sprite).

Support use of sprite.moveTo with null values for x or y destination. Will only ensure move along one axis, used internally by move if a cardinal direction is used.

v3.17.4

Took out the deprecation warning for group.collides(sprite) cause even though its implementation is a bit messier than sprite.collides(group) I think the former can read better for users in some scenarios, especially if only the first input param to the callback needs to be used. For example:

arrows.collides(shield, (arrow) => arrow.remove());

v3.17.3

Added warning if animation is cloned before it's loaded:

The animation named "${this.name}" must be loaded before it can be properly copied. Sprites need their own copy of a group's animation. Try loading the animation in the preload function and creating new group sprites in the setup function.

v3.17.1

Fixed a little mistake in the internal helper function group._ensureCollide. I had set hasOverlaps to true for reflexive group collisions, sprites in the same group. Which broke the example on Tile page 1.

Also only if a sprite has a tileSize greater than 1 will it's movement with the sprite.move function be rounded to the nearest half tileSize if direction names are used.
https://p5play.org/learn/tiles.html?page=1

v3.17.0

Last month p5.js v1.8.0 added support for pixelDensity in p5.Graphic and p5.Image, so I had to edit p5play's textCache code to be compatible with the changes. Thanks to @ Mike on Discord for noticing this issue!

v3.16

v3.16.6

Discord user @ zeebeejeebee pointed out that this use case was previously supported new Sprite(x, y, colliderType) but I had forgot that was a valid use. Just added it back!

Also I better documented all the different ways the Sprite constructor can be used.

v3.16.5

Earlier I upgraded the setter for sprite.collider so that it would not destroy the sprite's body and instead use the new planck function body.setType, which is a much more efficient way to do it, but this change had a lot of unintended consequences. In the process of fixing the issues I refactored the Sprite constructor, which was a total mess! There was lots of duplicate code in the Sprite constructor and sprite.addCollider which I consolidated and organized better.

Additional fix for reflexive group contact handling so it can work when called after the group's sprites are created.
groupA.overlaps(groupA)

Fixed issue where only setting group.width and not group.height would make new GroupSprites be circles, when they should be boxes.

Updated the setter for sprite.shape which no longer destroy's the sprite's physics body, it removes the sprite's fixtures, then creates new ones based on the desired shape. The sprite's mass is now recalculated if the sprite's shape changes, this was in the documentation but by mistake had not actually been implemented.

v3.16.4

Fixed issue changing a "none" collider with a "circle" shape to any non-"none" collider type.

v3.16.3

SpriteAnimation set frame now throws an error if the user tries to set a frame value that's too high (or low).

v3.16.2

Breaking change to a previously undocumented feature, world.offset which is now called world.origin because it doesn't behave the same as sprite.offset, it just sets where the origin (0, 0) of the world is on the canvas, effectively translating every sprite. Also the physics world doesn't have a size, so it was misleading to have world.hw and world.hh (half-width and half-height) properties, those are now properties of the p5 canvas.

v3.16.1

The new contact handling system did have one issue I hadn't tested for.

Just fixed reflexive group contact handling, where a contact handler is set between members of a group.

groupA.overlaps(groupA, cb);

Used in Fruit 2048:
https://arissazh.github.io/final-project/

v3.16.0

This update contains mostly internal changes (refactoring 🧼). I rewrote a big part of p5play's contact handling system... again. 🐳 But I think I've finally cracked it with the perfect mix of good performance, memory efficiency, and much more readable code.

Also, it's now possible to set a group contact (collision or overlap) handler and then additional contact handler between group members. I don't know how useful this feature will actually be but it is what users would expect. I achieved this new capability by doing another overhaul of how contact relationships, collisions and overlaps, are implemented internally.

I added a ton of contact handling Jest tests to the Sprite.test.js and Group.test.js files to try to ensure this implementation is correct. 🤞🏻

v3.15

3.15.8

Fix for #275

3.15.7

Fixed group to group overlap checks.

3.15.5

If a sprite is added to a group that was previously removed with group.remove(), users will get this warning.

"Adding a sprite to a group that was removed. Use group.removeAll() to remove all of a group's sprites without removing the group itself. Restoring the group in p5play's memory."

This provides backwards compatibility with previous version of p5play where group.remove and group.removeAll were exactly the same.

3.15.3

Fixed #270 problem with instance mode cause I acidentally used touches instead of this.touches in __ontouchstart

I also added _ontouchmove to make dragging sprites work.

3.15.2

Fixed sprite to group contact callback input params being ordered wrong only if group sprites were added to the group after the contact was set.

3.15.1

Includes bug fixes for all known issues!

Fixes #262, #265, #266, #267, #269, #270, #271, #272, #273, #274

I pretty much re-implemented how p5play handles contacts (collisions and overlaps) for better performance, which is why this update took 2 months to finish. 😅

sprite.mouse now functions properly on mobile touchscreen devices.

Another important change is that setting a sprite's collider type to "none" does not remove its overlap sensors. Any projects that took advantage of that erroneous behavior can additionally use the sprite.removeSensors() function.

Also I did a lot of little updates to p5play.org. The homepage videos play automatically on mobile now, I made them play based on whether they're observed, not based on the mouse hover position.