Uploading a p5.js sketch to OpenProcessing

p5.js
1

I am trying to change some of my old Java Applet sketches to p5.js and upload them to OpenProcessing with their new UI.

Unfortunately I am unable to find any information on how to upload my sketch created in Processing to OpenProcessing. I know I can copy and paste the code into OPs web editor but that doesn’t help with resources such as images.

Any help greatly appreciated. :smile:

1 Like
2

There’s an icon on the top right with 3 little dots. Click it, then Files, then upload Files :slight_smile:

3 Likes
3

I believe you already know OpenProcessing.org/sketch/create has a switch to change the default p5js engine to the Processing.js (Pjs) 1.

For example, I’ve got this sketch “Repetitive Bézier Curve Patterns” for both p5js & Pjs engines:

  1. OpenProcessing.org/sketch/400949 (p5js)
  2. OpenProcessing.org/sketch/400921 (Pjs)

The same for the sketch “3D Knot”:

  1. OpenProcessing.org/sketch/608726 (p5js)
  2. OpenProcessing.org/sketch/608725 (Pjs)

At the top-right side, there’s a clickable vertical ellipsis that opens a panel w/ 3 tabs:

  1. Settings
  2. Files
  3. History

Within the Settings tab, there are the options Engine & Text Size.

And finally, under the Files tab, we can upload assets for the sketch via the Upload Files button.

3 Likes
4

Thanks for the help guys, I’ll be trying it out in a couple of days

5

Thanks again guys, I found the Files option but you can only upload resources not code. You still have to copy and paste the code.

Its been a long time since I used OpenProcessing and I must say I am not impressed with the latest version. Navigating the user interface is un-intuitive with options hard to find or unavailable, for instance I still haven’t found a way of changing the sketch icon apart from creating a screenshot of the sketch display which is not what I want to do.

6

What is a sketch icon? I know how to select a screenshot for each sketch:

  • At the top-center, there are 3 clickable icons: :information_source:, :arrow_forward:, </>.
  • When we click the 1st 1 :information_source:, a red clickable button “Edit” shows up when we’re signed in.
  • And when we click that button, there’s a screenshot icon :camera_flash: as 1 of the “Edit” options.

Well, we can create extra tabs by hovering the mouse at the same row as the default tab “mySketch”.
A :heavy_plus_sign: sign shows up for us to create extra tabs.

7

That demonstrates the problem I have with OpenProcessing’s UI. Why is the + sign invisible? how is any one to know that it is there? Am I supposed to be psychic? In Processing the extra tab button is always visible and even if you didn’t know what it did, you could try it because you can see it.

By sketch icon I was referring to the screenshot. It is the picture OP uses when browsing through the sketches.

In earlier versions of OP you could design and upload your own image so you could add text or select part of the sketch display which made for better icons.

In the sketch I uploaded, Fisheye Lens, the lens appears when the mouse is over the image, but I have to move off the image to click the screenshot button. I would like to use the image below as the icon but it is not possible because the mouse pointer cannot be in two positions at the same time.

fisheyeview