Make a specific PGraphics not smooth in P2D

Processing Coding Questions
1

Does anybody know if theres a way to render a pgraphics that is mabye 16x16 px so it looks looks pixelated and not smooth but just the specific one?

2

noSmooth()

Draws all geometry and fonts with jagged (aliased) edges and images with hard edges between the pixels when enlarged rather than interpolating pixels

Maybe pg.noSmooth();

3

that doesnt do anyhting…

1 Like
4

You won’t see much on such a small field

You could use scale maybe?

Or write it with 16x16 rectangles, each 2x2 or 4x4?

5

I’m using a PGraphics, in a drawing app where U could do pixelart…

6

noSmooth() doesn’t apply to textures or to image() so the only way I know to do it is with your own shader.

There is also currently a bug with P2D PGraphics where anything drawn between the first calls to beginDraw() / endDraw() gets wiped out, so you have to put a dummy pair in setup() to initialize the PGraphics.

In this code, I create a PGraphics and set it noSmooth() so that it won’t try to anti-alias the line() and circle() calls. I draw some stuff on it, then pass it as a texture to my shader which then draws onto a rect(). You can move around and size the rect as you wish.

PGraphics thing;
PShader shdr;

void setup() {
  size( 800, 800, P2D );
  shdr = new PShader( g.parent, vertSrc, fragSrc );
  thing = createGraphics( 16, 16, P2D );
  thing.noSmooth();

  thing.beginDraw();  // begin/draw pair needed to
  thing.endDraw();    // "init" PGraphics using P2D

  thing.beginDraw();
  thing.background(0);
  thing.loadPixels();
  for( int i=0; i<thing.height; i++ )
    thing.pixels[ i + i*thing.height ] = 0xffffffff;
  thing.updatePixels();
  thing.stroke( 200, 255, 200 );
  thing.line( 0, 5, thing.width, thing.height );
  thing.stroke( 255, 200, 100 );
  thing.noFill();
  thing.circle( 8, 6, 7 );
  thing.stroke( 200, 255, 100 );
  thing.strokeCap( PROJECT );       // needed to make point() visible
  thing.point( 8, 6 );
  thing.endDraw();

  frameRate( 1 );
}


void draw() {
  thing.beginDraw();
  thing.stroke( random(100,255), random(100,255), random(100,255) );
  thing.point( random( thing.width ), random( thing.height ) );
  thing.endDraw();

  background( 100 );
  shdr.set( "texture", thing );
  shader(shdr);
  rect( 100, 80, 600, 600 );
  resetShader();
}


String[] vertSrc = { """
#version 330
uniform mat4 transformMatrix;
uniform mat4 texMatrix;
in vec4 position;
in vec2 texCoord;
out vec4 vertTexCoord;

void main() {
  gl_Position = transformMatrix * position;
  vertTexCoord = texMatrix * vec4( texCoord, 1.0, 1.0 );
  vertTexCoord.y = 1.0 - vertTexCoord.y;
}
""" };

String[] fragSrc = { """
#version 330
uniform sampler2D texture;
in vec4 vertTexCoord;
out vec4 fragColor;

void main() {
  ivec2 ij = ivec2( floor( vertTexCoord.st * textureSize( texture, 0 ) ) );
  fragColor = texelFetch( texture, ij, 0 );
}
""" };
1 Like
7

Hello,

Is this what you are trying to achieve?

image
image672Ă—658 9.61 KB

I used my pixel viewer to view the pixels in the screen and my phone to zoom in on them (16x16 is small!) on my display.

Sunflowers:

  • top original image 16x16
  • middle original image pixelated to 2x2 blocks
  • bottom original image from a P2D PGraphic pixelated to 2x2 blocks

Pixel viewer:

Reference:

Shaders were not used in my exploration of this.

:)

8

that gives an opengl error:“RuntimeException: Cannot compile vertex shader:
0:2(10): error: GLSL 3.30 is not supported. Supported versions are: 1.10, 1.20, and 1.00 ES”

9

Try this one instead:

PGraphics thing;
PShader shdr;

void setup() {
  size( 800, 800, P2D );
  shdr = new PShader( g.parent, vertSrc, fragSrc );
  thing = createGraphics( 16, 16, P2D );
  thing.noSmooth();

  thing.beginDraw();  // begin/draw pair needed to
  thing.endDraw();    // "init" PGraphics using P2D

  thing.beginDraw();
  thing.background(0);
  thing.loadPixels();
  for( int i=0; i<thing.height; i++ )
    thing.pixels[ i + i*thing.height ] = 0xffffffff;
  thing.updatePixels();
  thing.stroke( 200, 255, 200 );
  thing.line( 0, 5, thing.width, thing.height );
  thing.stroke( 255, 200, 100 );
  thing.noFill();
  thing.circle( 8, 6, 7 );
  thing.stroke( 200, 255, 100 );
  thing.strokeCap( PROJECT );       // needed to make point() visible
  thing.point( 8, 6 );
  thing.endDraw();

  frameRate( 1 );
}


void draw() {
  thing.beginDraw();
  thing.stroke( random(100,255), random(100,255), random(100,255) );
  thing.point( random( thing.width ), random( thing.height ) );
  thing.endDraw();

  background( 100 );
  shdr.set( "texture", thing );
  shdr.set( "texSize", float(thing.width), float(thing.height) );
  shader(shdr);
  noStroke();
  rect( 60, 80, 16, 16 );
  rect( 60, 180, 64, 64 );
  rect( 200, 80, 512, 512 );
  resetShader();
}


String[] vertSrc = { """
#version 120
uniform mat4 transformMatrix;
uniform mat4 texMatrix;
in vec4 position;
in vec2 texCoord;
varying vec4 vertTexCoord;

void main() {
  gl_Position = transformMatrix * position;
  vertTexCoord = texMatrix * vec4( texCoord, 1.0, 1.0 );
  vertTexCoord.y = 1.0 - vertTexCoord.y;
}
""" };

String[] fragSrc = { """
#version 120
uniform sampler2D texture;
uniform vec2 texSize;
in vec4 vertTexCoord;

void main() {
  vec2 uv = (floor(vertTexCoord.st*texSize) + 0.5) / texSize;
  gl_FragColor = texture2D( texture, clamp(uv, 0., 1.) );
}
""" };