Processing as a "programming language", rather than an actual library, caters more for the artistic folks. :D

And Processing's already got the 3 most important languages for them covered, and even beyond: $-)

1. Java as Java & Android Modes: Still the world's most used programming language. C-style syntax. ~O)
2. JavaScript as both Pjs & p5.js flavors: Literally the Java's syntax deployed to the web! Where most artists wanna show up their works! :bz
3. Python as both Python Mode & p5py flavors: Earned its place in academics introductory programming courses, due to its clean (no curly brackets) & easier syntax. O:-)

Of course there are also R as R Mode, Clojure as Quill and Ruby as Ruby-Processing. Maybe more. <:-P
And similar to Processing we've even got C/C++ as Arduino & openFrameworks. \m/

Joshua Davis had mentioned porting it to p5.js a while ago, ...

Given his library Hype uses just a small fraction of Java stuff that Pjs is fully able to transpile to JS syntax, it shouldn't be that hard to convert it to a p5.js extension library. ~O)

But I've spotted some technicalities in Hype which makes converting it to JS a real challenge. :-SS

It is its usage of operator instanceof. Well, JS got that operator too. :>
However, Hype relies on instanceof in order to check whether an object is affiliated to some interface.

But JS doesn't have interfaces. We can attempt to solve that by reifying a Java interface as an actual JS class.

But then we'd need to replace implements w/ extends when defining subclasses of it. ~:>
But Hype got classes that implements more than 1 interface.

But if those interfaces are classes now, we gotta use extends instead.
And only 1 class can be specified by extends, even in JS! #-o

Dunno exactly which voodoo tricks Pjs pulled off in order to transpile Hype Java into Hype JS. :-$

But to make a multi-inheritance in JS, we gotta use a programming technique called mixin.
It's not a JS builtin facility though. :(

And Pjs had to do mixins in such a way that instanceof would detect the "mixed" interface as a parent of the object being tested. :ar!

... but Hype is not compatible with P5.js.

In general, any regular JS library can be used in p5.js.
Although there are some which are specifically written as a p5.js extension: https://p5js.org/libraries/

Hype is a Java library, so it does not work with Javascript.

That's true. But Pjs can automatically transpile it to JS syntax! :ar!
That's why we can see Hype sketches running inside a browser: \m/
http://www.HypeFramework.org/examples/HOscillator/example_0tml

... as I managed to get this same kind of code working in Hype and Processing in seconds.

According to Hype's site: http://www.HypeFramework.org
Its Hype library is also compatible w/ Pjs: http://ProcessingJS.org

Here's an example running online:
http://www.HypeFramework.org/examples/HOscillator/example_009/index.html

If you take its whole ".pde" file:
http://www.HypeFramework.org/examples/HOscillator/example_009/index.pde

And paste it in Processing under Java Mode, the code is gonna work there too! :)>-

If you do the same at: https://www.OpenProcessing.org/sketch/create
Switch to its Processing.js Mode and click at its play button, that very same ".pde" runs there as well. \m/

I've pasted your Java version at https://OpenProcessing.org/sketch/create, switching to Processing.js mode of course, and the gradient effect failed there.

It also fails on Java Mode if sketch's renderer is switched to either JAVA2D or FX2D.

Only OpenGL renderers (P2D & P3D) generates the gradient effect for vertex(), no matter whether the sketch is running online (JS) or offline (Java).

However, in "ancient times" (Processing 1.x.x), neither renderers P2D & P3D weren't OpenGL-based. Only its renderer OPENGL was.

And even today, Processing.js (a.K.a. Pjs or JavaScript Mode), still pretty much follows the old Processing 1.5.1 API: http://ProcessingJS.org/reference/

Under Pjs, b/c it runs in a browser, there are only 2 canvas renderers: 2D or WebGL.

Under Pjs, JAVA2D & P2D constants activate the 2D canvas.
While P3D & OPENGL would activate the WebGL canvas.

Lo & behold! If size(200, 200, P2D); is changed to size(200, 200, P3D); or size(200, 200, OPENGL);, the same gradient effect kicks in under Pjs too! \m/

Now for p5.js' createCanvas(), it recognizes renderer constants P2D & WEBGL only: https://p5js.org/reference/#/p5/createCanvas

So in order to activate p5.js' OpenGL-based canvas, the correct constant is WEBGL.

However, given p5.js' WEBGL is still ongoing & buggy, I'd recommend Pjs b/c it's much more mature & stable, even though it's behind both Java Mode & p5.js API-wise. 8-|

Also, some sketches work and others don't...

• It all depends whether a sketch is pure Processing API (Pjs): http://ProcessingJS.org/reference/
• Or if it depends on Java 3rd-party libraries. :-SS

Does this work for you? : https://OpenProcessing.org/sketch/8168

• Yes, it did as well! :>
• Actually, there's no need to copy & paste it to another blank sketch. :-\"
• Simply open the right panel and switch from Processing to Processing.js mode! :ar!
• Processing.js (Pjs) mode works both for this sketch #8168 and that #20140 too! \m/

Hmm... Your posted sketch code has worked for me w/o any hassles. 8-|
Anyways, I've decided to remake it based on a previous p5.js sketch I already had: O:-)

http://Bl.ocks.org/GoSubRoutine/5fbc03e019c53254a2ba7e7fd3318b45

/**
 * OpenWeatherMapJSON (v1.0.2)
 * Mod GoToLoop (2018-Feb-13)
 *
 * Forum.Processing.org/two/discussion/26332/
 * api-json-cannot-create-reader#Item_1
 *
 * Bl.ocks.org/GoSubRoutine/5fbc03e019c53254a2ba7e7fd3318b45
 */

static final String
  HTML = "http" + "://", 
  SITE = "api.OpenWeatherMap.org", 
  FOLD = "/data/2.5/weather" + '?', 
  COORDS = "lat=35" + '&' + "lon=139" + '&', 
  API_KEY = "appid=f77c..." + '&', 
  PATH = HTML + SITE + FOLD + COORDS + API_KEY;

JSONObject weather;

void setup() {
  noLoop();

  weather = loadJSONObject(PATH);
  final JSONObject wind = weather.getJSONObject("wind");
  final float speed = wind.getFloat("speed");
  println("Wind Speed: " + speed);

  exit();
}

I don't disagree with you.

You could try Khan Academy: https://www.khanacademy.org/computer-programming/new/pjs

Not using a separate file. I.e. any file other than the .pde.

This is probably not going to be possible. You need to use a JavaScript library.

Can a .pde call a JS library, then? I thought not.

Not in Java mode, no. But you're presumably using Processing.js.

Please check out this guide: http://processingjs.org/articles/jsQuickStart.html#accessingjsobjectsfrompjs

If you wish, you may also take a look at Pjs' own implementation of class PVector:
https://Gist.GitHub.com/GoToLoop/acbf106aa784820aff23

It's much closer to Processing Java's PVector class than p5.js is. ~O)

... that fails on W A S and D keys.

• Only when running it online due to the strictly way JS' switch () / case: checks each value. :-\"
• Copy, paste & try it out under PDE's Java Mode and everything's gonna work. :bz
• Or replace switch () / case: w/ some regular if () else block instead.
• So it works 100% both offline (Java Mode) & online (Pjs)! *-:)

A Cross-Mode Java-Pjs sketch: O:-)

static final boolean JAVA = 1/2 != 1/2.;

void setup() {
  size(100, 100, JAVA? P2D : P3D);
  smooth();
  noLoop();

  colorMode(RGB);
  noStroke();
  fill(#FFFF00);
}

void draw() {
  background(0);

  beginShape(TRIANGLE_STRIP);
  vertex(30, 75);
  vertex(40, 20);
  vertex(50, 75);
  vertex(60, 20);
  vertex(70, 75);
  vertex(80, 20);
  vertex(90, 75);
  endShape();
}

• According to your online sketch link, that glitch shows up when using size() w/o passing a 3rd argument.
• size() w/o a 3rd parameter is the same as passing constant JAVA2D as its 3rd argument.
• Now, you've stated you've fixed that glitch under P3 by passing constant P2D as size()'s 3rd argument.
• As I've already revealed, P2D is an OpenGL-based renderer since P2, confirmed by invoking PGraphics::isGL() method.
• If you wanna have any hopes about fixing that glitch under Pjs as well, it'd be a smart move to pick a constant there which activates a corresponding OpenGL-based browser canvas rendering context, right?
• According to my very 1st reply, the "webgl" rendering context can be activated under Pjs by passing either constants OPENGL or P3D.
• Have you already tried out any of those constants under Pjs as well, and checked out its result? =P~

So, if Processing's renderer P2D is OpenGL-based since P2, which browser's rendering context should you pick for Pjs: '2d' or 'webgl'? :>

Run this little code under Processing (not Pjs) in order to know whether current renderer is OpenGL-based: :ar!

size(300, 200, P2D);
println(g.isGL());
exit();

Is there a way to set the canvas rendering context from within Processing?

• Well, when invoking size(), pass 1 of the following 5 renderer constants:
  JAVA2D, FX2D, P2D, P3D or OPENGL, as its 3rd argument. :-B
• If none is passed, the default JAVA2D constant renderer is set instead. :\">

1. JAVA2D is the default renderer and has always existed for Processing. \m/
2. FX2D is new to P3. And it isn't available for the ancient Pjs nor any older Processing versions. :(
3. P2D was an old P1 2D renderer. And since P2, it is now emulated as an OpenGL-based renderer instead. @-)
4. P3D was an old P1 3D software-based renderer. And since P2, P3D is the same as OPENGL constant. :-j
5. OPENGL was and still is an OpenGL-based renderer. And since P2, it is a deprecated alias for constant P3D. $-)

Setting to P2D fixes it inside Processing, but not in Pjs.

• Seems like you haven't paid attention to those 2 options I've laid out above? [-(
• It's either CanvasRenderingContext2D or WebGLRenderingContext! L-)
• It's the same for any JS browser library; old or new! :-\"

Setting to P2D fixes it inside Processing, but not in Pjs. I know it's ancient, maybe that's the problem. Hoping it will work in P5js.

As an ancient JS library, Pjs got 2 renderers only for its size()'s 3rd parameter:
https://Developer.Mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext

1. CanvasRenderingContext2D: Constants: JAVA2D or P2D.
2. WebGLRenderingContext: Constants: OPENGL or P3D.