Gradients and scaling

Processing
#1

Hi,
question in two parts.

I am able to make gradient shapes in P2D renderer (using fill and vertex) but unable to do so in default renderer. i assume it is related to opengl, anyway to make shape gradients in default renderer ?

If i use P2D renderer, i am unable to scale. i use create graphics and set the height and width. but no matter how high i set , it takes the maximum screen size as the final value of height and width

1 Like
#2

hello,
it is as you say, gradient shapes seem to be only possible using the P2D or P3D renderer. PGraphics needs to be of the same type as your renderer.
Scaling works.
->

PShape s;
//----------------------
void setup () {
  size(400, 400, P2D);
  s = createShape();
  s.beginShape();
  s.fill(0);
  s.vertex(0, 0);
  s.fill(255, 0, 0);
  s.vertex(50, 100);
  s.fill(255, 255, 0);
  s.vertex(-50, 100);
  s.endShape();
}
//----------------------
void draw() {
  background(0);
  shape(s, width/2, height/2);
  scale(0.5);
  shape(s, width/2, height/2);
}

since you are too shy to show your code, it is hard to say how you use scale.

if you use a PGraphics (I call it ‘pg’)you could either us scale while drawing -> then it should be something like:

pg.beginDraw();
pg.scale(0.5);
pg.shape(s,width/2, height/2);
pg.endDraw();

if you use scaling outside e.g. in draw()
it would look like this:

draw() {
scale(0.5);
image(pg, 0,0);
}

so you either scale how you draw into the graphics buffer, or you scale how the PGraphics is drawn into the display

1 Like
#3

Thanks for the prompt reply and a detailed answer.

My code is a bit of a mess to isolate, but here is an isolated example

PGraphics gradient;

void setup() {
  size(400, 400, P2D);
  gradient = createGraphics(width, height, P2D);

}

void renderGradient() {
  gradient.beginDraw();
  gradient.noStroke();
  gradient.beginShape();
  gradient.fill(255, 0, 0);
  gradient.vertex(0, 0);
  gradient.fill(0, 255, 0);
  gradient.vertex(0, height);
  gradient.fill(0, 0, 255);
  gradient.vertex(width, height);
  gradient.fill(255, 255, 0);
  gradient.vertex(width, 0);
  gradient.endShape();
  gradient.endDraw();
}

void draw() {
  renderGradient();
  image(gradient, 0, 0);
}

so the size is currently set to 400 x 400
but if i want to scale it to 4000 X 4000 or 8000 X 8000. it doesn’t scale

and i get a message in the console

The sketch has been automatically resized to fit the screen resolution

What’s the best best approach to scale up P2D renderer ?

Also if i remove P2D renderer then i can easily scale, but it is just a yellow box, no gradient.

1 Like
#4

I tried using default and P2D renderer.
First there is a difference between those two, as you noted.

i have set my screen resolution to 5k (5120x2880) and created a window with 15000x1000 pixels.
In P2D it works as expected, the display window is. 15000 pixels wide.
In default renderer I get an inexplicable width of 8100 + a few pixels.
It seems to depend on the monitor resolution. With 3200x1800 the sketch window is only 4100. This seems to be connected to the “pixels doubled” mode of so called retina displays…

However I have not been able to deduce why the maximum window size in the default renderer is actually this particular size. Only that there is that kind of limit (which scales 2x when not using pixels doubled)

Tbh i have experienced the automatic resize message only when I tried to run a sketch on windows, I am using a Mac.

Still it seems to me that P2D is the way to go.
Apparently you can create a PGraphics buffer of the correct size. Maybe use scale() to make it fit to your current screen resolution.

But hopefully there are better informed guys in this forum than me. Which is very probable :slight_smile:

#5

This is a good approach.

For gradients in P2D / P3D another alternative to beginShape and per-vertex coloring is to instead use a PShader.

What is the goal with the high resolution output? Are you displaying it on an extremely large monitor / tile display / wall, or are you instead trying to save it to an image file for print, or…?