Releases: quinton-ashley/p5play
v3.22
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
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
Hopefully fixed a memory leak that would cause p5play to bring frame rate to a crawl on some devices after a few minutes!
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 iO, 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.
Contributors
Assets 2
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
quinton-ashley/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
NOTE: Using group.remove() with no input parameters now removes the group itself. To remove all the sprites from a group, use group.removeAll(). These used to be equivalent, so to ensure backwards compatibility, I decided to implement a breaking change to group.remove under a flag, set p5play.targetVersion to 16 (the minor version number of this release) to enable p5play to delete removed groups from memory.
I also did a breaking change (no flag required) 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.
v3.14
3.14.13
Fix for rotated text images with centered text alignment.
I also noticed text image caching fixes rotation jitter.
3.14.12
pixelPerfect implementation should check the dimensions (width and height) of a sprite's current animation frame, not the dimensions of its collider when calculating the pixel perfect position for images with odd side lengths. For example, an image with a width of 5 should have its x position rounded to the nearest integer + 0.5 so that the image can be displayed pixel perfectly.
3.14.10
Proper fix for #256
I didn't consider that if group sprites with no colliders are set to overlap on a group level, at the time addDefaultSensors is called sprite._angle would not exist. I switched the order of those lines in the Sprite constructor to make it work. I also never considered that the sprite needs to maintain its velocity vector as well, so I added that too.
3.14.9
Properly fixed #261 createTextImage now returns a p5.Image with correct sizing.
Also fixed p5play.palettes not being assigned the default color palette.
Fixed mouse.dragging. Also now sprite.mouse.hovering and sprite.mouse.pressing are strictly true only if the mouse is currently pressing on the sprite, so if the sprite moves they'll be false. sprite.mouse.dragging is still suitably sticky, even if the mouse stops hovering directly over the sprite during the drag, it'll still drag.
3.14.4
Better fix for #256
3.14.2
p5.js actually sets textLeading to be 1.25x textSize by default, so I needed to adjust the position of text images to accommodate that. Also upgraded q5 to have the same behavior.
I also added the version number to the top of the file, haha I always forget.
3.14.0
Added not just a 2x or 5x, but a ridiculous 90x performance increase for rendering rotated text! All thanks to the new text image cache system. This feature is enabled by default, simply use the text function as you normally would and p5play handles the rest behind the scenes.
Why does VSCode autocompletion only work inside the p5.js setup function?
https://github.com/quinton-ashley/p5play/wiki/FAQ#why-does-vscode-auto-completion-only-work-inside-the-p5js-setup-function
v3.13
3.13.5
Added group.velocity alias for group.vel.
Fixed a small mistake made in v3.13.0, group sprites should inherit group.speed.
3.13.4
Sprites made with the GroupSprite constructor new group.Sprite() now have auto-completion! Same with Subgroup groups.
3.13.2
Added types for input devices so that they can get auto-completions in VSCode too! #254
I also added contro.leftTrigger and contro.rightTrigger getters, thanks to discord user @ Metamere
Fixed #255
3.13.1
Removed all private (underscored) properties and methods from p5play.d.ts.
3.13.0
BIG update! Auto-complete in VSCode is here!
To add auto-completion to an existing project use npm or bun to install @types/p5 and p5play and add this jsconfig.json file to your project folder:
{
"compilerOptions": {
"target": "ESNext"
},
"include": ["*.js", "**/*.js", "node_modules/@types/p5/global.d.ts", "node_modules/p5play/p5play.d.ts"]
}Optionally, you can use the new p5play-vscode extension to create a new p5play project that will have auto-complete enabled. Huge thanks to @ Yog for his research and work on the extension.
This update to p5play adds a p5play.d.ts file to the p5play npm package.
This update also includes:
- fix for sprites not inheriting the name of an animation from a group animation (including when used with the Tiles constructor)