How to get preview in a separate window

p5.js Beginners
1

Hi-
Very new user with a basic question-
I would like the preview window to open in a separate window from the sketch editor.
How do I do this?

2

What’s a preview window? Do you mean the running Sketch?

3

Yes. The window says preview but it is where the sketch is running

4

it does exactly that. What do you mean?

Can you show your code or tell your operating system?

1 Like
5

Ahhh, maybe it is not on some local host or something like that. I will keep going on this, and I am sure it will work out. Thanks for everyone’s patience. I just started learning today :slight_smile:

1 Like
6

I am on mac OS 10.11
I am using the Pt.js web editor.
Very basic beginners code

function setup() {
createCanvas(1024,768);
rect(10, 10, 1024, 768);
ellipse(512, 300, 100, 100);

}

7

40
Screen Shot 2019-07-23 at 19.32.40.png1920Ă—1080 374 KB

8

ah, because your forum section was processing, not js

I just changed this

1 Like
9

So the script window and preview window are attached and I would like the preview window to be floating so I can see the full thing without it cutting off.

10

Thank you. I am sorry for posting in the wrong place!

11

I don’t believe you can separate the windows when you’re using Web Editor. What you could do however, although it’s a little bit of extra work, is setting up your own local server and run your p5 sketch locally from your computer (so instead of doing everything via the Web Editor). This requires the following steps:

  1. Make sure you have a text editor, such as Sublime Text for Mac.

  2. Make a folder on your computer with the files index.html, style.css, and sketch.js. You can copy-paste the content for these files from your Web Editor sketch. Click on the little arrow below the play button and you’ll see the three files.

  3. Set up a local server using one of these methods.

  4. Open the files from step 2 in your text editor. Each time you edit one of the files, save it and the local server will instantly update your p5 website.

BAM! Fullscreen p5 sketches are now possible :slight_smile:

2 Likes
12

Thank you! I am really grateful for your detailed answer. I am trying this now :slight_smile:

13

You can also use p5.js mode in the Processing PDE:

https://processing.org/download/

This launches sketches in their own browser tab, separate from the code IDE window.

1 Like
14

Thank you @jeremydouglass! Will give that a try!