code-dot-org / dance-party

Renderer for the Dance game type. Based on p5.js and p5.play.js.
https://code-dot-org.github.io/dance-party/
13 stars 13 forks source link

Foreground effects in preview #659

Closed bencodeorg closed 1 year ago

bencodeorg commented 1 year ago

Supports showing foreground effects in preview. General approach here is to modify effects that were not rendering in preview as minimally as possible to get something rendered that approximated the effect, and adding some reset functionality such that foregrounds are reset before students hit the run button.

Worth noting that we considered an alternative path here of just running the draw() loop several (maybe 200) times to generate a "preview" rather than having explicit preview code paths for each effect. We found this approach to be slow, which could be an issue for lower powered devices.

From a code style perspective, the customizations required varied across effects, which felt a little yucky. I tried to use a standard approach to these customizations and keep them all together within each effect, such that they'll be findable in the future.

Should have no impact on effects being used in Dance Party levels/projects today that do not use the preview feature.

See companion PR in code-dot-org here: https://github.com/code-dot-org/code-dot-org/pull/54307

New foreground previews

https://github.com/code-dot-org/dance-party/assets/25372625/05ef7f0d-b62d-45b6-a340-3b2895587e9b

Testing story

I manually tested:

I also tested removing/adding the foreground block to the main setup block, and saw the foreground effect removed/added from the preview as appropriate.

Follow-up work

bencodeorg commented 1 year ago

@code-dot-org/student-labs if anyone would be up to pull this branch (and the companion branch in code-dot-org) and play around a bit and see if things look reasonable, that would be much appreciated! I've been looking at these effects for too long and I'm a little 😵‍💫

bencodeorg commented 1 year ago

@fisher-alice added an item to Trello to split out foreground and background effects here:

https://trello.com/c/fMj7vFqX/69-split-dance-party-effects-file-into-foreground-and-background-effects