search

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.38k stars 1.32k forks source link

Adding examples preview #2532

Open madtitan02 opened 11 months ago

madtitan02 commented 11 months ago

Increasing Access

I think as a user when you scroll through the examples section, the User is generally confused by such a number of examples and cannot determine the actual behaviour of each shape; in other words, it is not very visually appealing; if the user is unsure of any shape he will have to check each sketch one by one, And it will take time as it will always redirect to the code editor, I am sure that would not be a very pleasant experience as a user. There should be a preview button. There is already an existing dropdown button which contains the download button. But it can be updated with a [+] expand view. It will display the preview, increase user accessibility, and make it easier to use.

Feature request details

In this feature, We will update the down arrow section, as shown in the screenshot. It will then expand the div where the preview of the sketch will be running, displaying the animation of the shape the div will also contain three buttons on the left side or right side, 1) share button (to share the shape) 2)Copy(To copy the default code) 3)Download Making this feature will save users time, and it can be implemented, and the code would be running on click, so it will be convenient too. Screenshot 2023-10-24 165035

madtitan02 commented 11 months ago

@lindapaiste @raclim if the community agrees do assign me i will submit a review pr

lindapaiste commented 11 months ago

We've wanted to add thumbnails for a long time (#398), but that's complicated to implement. It involves capturing a still frame of the canvas (at what time?) and storing that in AWS. Running the actual sketch like you are suggesting would be easier.

madtitan02 commented 11 months ago

We've wanted to add thumbnails for a long time (#398), but that's complicated to implement. It involves capturing a still frame of the canvas (at what time?) and storing that in AWS. Running the actual sketch like you are suggesting would be easier.

Implementing all the canvas features would be really difficult to implement i think running a default code and presenting it as an animation types on the div to give a rough idea to the user how it will work.If you have any idea related to it please do share as still frames seems complicated,But running a certain code block would work , Also can you provide me relevant files to look over so i can get more idea regarding it.

QUAGZA commented 11 months ago

I'm new to open source contributions, but I'd like to give this feature a try. I'm considering using iframes to implement it and would appreciate your thoughts on this approach. Also, could you please point me to the necessary files for this task?

On another note, I've set up the web editor locally, but I'm having trouble viewing the examples. Could you help me with that?

lindapaiste commented 11 months ago

Also can you provide me relevant files to look over so i can get more idea regarding it.

Check out PR #2168 that I did for the 404 page, it involves embedding a sketch using the EmbedFrame component.

KrishavRajSingh commented 10 months ago

Should I work on this?

KrishavRajSingh commented 9 months ago

Also can you provide me relevant files to look over so i can get more idea regarding it.

Check out PR #2168 that I did for the 404 page, it involves embedding a sketch using the EmbedFrame component.

Hey @lindapaiste, I was working on this issue and I need a little help. I was using the method that you used in #2168 and succeeded in making the previews, but it wasn't working for some sketches, especially the ones with images. This is the draft PR #2763.