processing / p5.js-web-editor

The p5.js Editor is a website for creating p5.js sketches, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! You can create, share, or remix p5.js sketches without needing to download or configure anything.
https://editor.p5js.org
GNU Lesser General Public License v2.1
1.3k stars 1.27k forks source link

Screen going blank with 'Alder veil #3002

Open performant23 opened 5 months ago

performant23 commented 5 months ago

p5.js version

No response

What is your operating system?

Windows

Web browser and version

121.0.6167.140 (Official Build) (64-bit) (cohort: Stable)

Actual Behavior

Not sure if this is addressed in an issue before but when reducing the screen width below about 770px, the screen of the web editor goes completely blank with the page heading 'Alder veil' and the rest of UI disappears.

Expected Behavior

Ideal behavior would be that the interaction still remains possible for screens below 770px.

Steps to reproduce

Going to web editor and reducing the screen size via inspection or simply resizing the window would highlight the issue. The navbar, console, input section, etc. all disappears on doing this and we get a blank page where going from code to preview only happens through pressing the stop/resume button which sort of toggles the two views. Not sure if this behavior is expected or if this is a bug and ideally both code injection and preview should be visible for smaller screens. The first image shows the page after being resized to <=770px and the other one shows the image for >770px

Screenshot 2024-02-07 234230

Screenshot 2024-02-07 234210

welcome[bot] commented 5 months ago

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

PATHAKAAKASH19 commented 5 months ago

@performant23 i would like to work on this bug....

performant23 commented 5 months ago

Hey, @PATHAKAAKASH19, I think you'll need to take this up with the maintainers of the repository.

PATHAKAAKASH19 commented 5 months ago

thanks @performant23 i keep this in mind....

lindapaiste commented 4 months ago

The navbar, console, input section, etc. all disappears on doing this and we get a blank page where going from code to preview only happens through pressing the stop/resume button which sort of toggles the two views. Not sure if this behavior is expected or if this is a bug and ideally both code injection and preview should be visible for smaller screens.

This is the expected behavior. It is not possible to show both the code editor and the sketch preview on small screens so we switch between them.

There is only one thing here that I would consider a "Bug" which is that the sketch stops playing when switching between the mobile and desktop layouts. The editor thinks it's playing the sketch which is why you see the preview rather than the code. See #2642

We could potentially make other improvements. Like "Alder veil" is the name of your sketch but you're not the first person to be confused by that. See #2790