P2D and vertex in P5 doesnt behave the same as in Processing?

Per · April 2018

In processing I can make a gradient on the vertex through the P2D renderer. But in P5 I get no gradient. Is it possible to do the same thing through the vertex in P5?

Processing sketch:

color[] col = { color(255, 0, 0), color(0, 255, 0), color(0, 0, 255), color(0, 0, 0), color(255), color(125)}; 

void setup() { 
  size(200, 200, P2D);  
}

void draw() {
  background(col[1]);
  gradient();
}

void gradient() {
  beginShape();
  fill(255, 0, 0);
  vertex(100, 100);
  fill(0, 255, 0);
  vertex(400, 100);
  fill(0, 0, 255);
  vertex(mouseX, mouseY);
  endShape();
}

P5 sketch:

var col;

function setup() {
  var col = [color(255, 0, 0), color(0, 255, 0), color(0, 0, 255), color(0, 0, 0), color(255), color(125)];
  createCanvas(200, 200, P2D);
}

function draw() {
  // background(col[1]);
  gradient();
}

function gradient() {
  beginShape();
  fill(255, 0, 0);
  vertex(100, 100);
  fill(0, 255, 0);
  vertex(400, 100);
  fill(0, 0, 255);
  vertex(mouseX, mouseY);
  endShape();
}

GoToLoop · April 2018

At line #4, you're redeclaring variable col as a local variable within setup() using the keyword var again!!! #-o

Also, b/c an array[] is a collection of things, it's recommended to call the variable holding its reference w/ a plural name. For example: colors or cols. *-:)

Or at least some collective name. For example: palette. :\">

Per · April 2018

Yes I rewrote the sketch from processing a bit too fast apparently :) but anyway. That array doesnt change the behaviour of the gradient function.

I have now removed that array from the P5 but still I get no gradient as I do get in processing. How can I get them to behave the same?

Processing sketch:

void setup() { 
  size(200, 200, P2D);  
}

void draw() {
  background(0);
  gradient();
}

void gradient() {
  beginShape();
  fill(255, 0, 0);
  vertex(100, 100);
  fill(0, 255, 0);
  vertex(400, 100);
  fill(0, 0, 255);
  vertex(mouseX, mouseY);
  endShape();
}

P5 sketch:

function setup() {
  createCanvas(200, 200, P2D);
}

function draw() {
  background(0);
  gradient();
}

function gradient() {
  beginShape();
  fill(255, 0, 0);
  vertex(100, 100);
  fill(0, 255, 0);
  vertex(400, 100);
  fill(0, 0, 255);
  vertex(mouseX, mouseY);
  endShape();
}

GoToLoop · April 2018

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-|

Howdy, Stranger!

Categories

In this Discussion

P2D and vertex in P5 doesnt behave the same as in Processing?

Answers