# Make a specific PGraphics not smooth in P2D

**URL:** https://discourse.processing.org/t/make-a-specific-pgraphics-not-smooth-in-p2d/41560
**Category:** Coding Questions
**Created:** [April 1, 2023, 8:46pm UTC](https://discourse.processing.org/t/make-a-specific-pgraphics-not-smooth-in-p2d/41560 "2023-04-01T20:46:25Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![Aryszin](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@Aryszin](https://discourse.processing.org/u/Aryszin)
#### Post date: [April 1, 2023, 8:46pm UTC](https://discourse.processing.org/t/make-a-specific-pgraphics-not-smooth-in-p2d/41560/1 "2023-04-01T20:46:25Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [April 1, 2023, 8:49pm UTC](https://discourse.processing.org/t/make-a-specific-pgraphics-not-smooth-in-p2d/41560/2 "2023-04-01T20:49:01Z")

</div>

[noSmooth()](https://processing.org/reference/noSmooth_.html)

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();

---

<div class="post-metadata">

### Author: ![Aryszin](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@Aryszin](https://discourse.processing.org/u/Aryszin)
#### Post date: [April 1, 2023, 8:57pm UTC](https://discourse.processing.org/t/make-a-specific-pgraphics-not-smooth-in-p2d/41560/3 "2023-04-01T20:57:33Z")

</div>

that doesnt do anyhting…

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [April 1, 2023, 9:48pm UTC](https://discourse.processing.org/t/make-a-specific-pgraphics-not-smooth-in-p2d/41560/4 "2023-04-01T21:48:18Z")

</div>

> [@Aryszin](#):
>
> 16x16 px

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?

---

<div class="post-metadata">

### Author: ![Aryszin](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@Aryszin](https://discourse.processing.org/u/Aryszin)
#### Post date: [April 1, 2023, 10:15pm UTC](https://discourse.processing.org/t/make-a-specific-pgraphics-not-smooth-in-p2d/41560/5 "2023-04-01T22:15:43Z")

</div>

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

---

<div class="post-metadata">

### Author: ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)
#### Post date: [April 2, 2023, 5:23am UTC](https://discourse.processing.org/t/make-a-specific-pgraphics-not-smooth-in-p2d/41560/6 "2023-04-02T05:23:41Z")

</div>

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.

```auto
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 );
}
""" };

```

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [April 2, 2023, 8:44pm UTC](https://discourse.processing.org/t/make-a-specific-pgraphics-not-smooth-in-p2d/41560/7 "2023-04-02T20:44:36Z")

</div>

Hello,

Is this what you are trying to achieve?

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/e/8e729eed8503054841aa47fb373d4f601e7c18f9.png)

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:

> [@Issue when rendering small rectangles](https://discourse.processing.org/t/issue-when-rendering-small-rectangles/38217/5):
>
> Hello, A very simple pixel viewer that I use to zoom in on sketch. Try different renderers, smooth() values, etc. I even tried odd and even. No pun intended! Some code for you to experiment with: // Pixel Viewer // v1.0.0 // GLV 2022-08-06 PImage img; boolean toggle; int oddeven, count, choice; void setup() { //size(650, 600); size(650, 600, P2D); //size(650, 600, P3D); background(255); //smooth(4); // Default is 2 noSmooth(); //strokeWeight(1); } …

Reference:

> **[Pixelation](https://en.wikipedia.org/wiki/Pixelation)**
>
> In computer graphics, pixelation (or pixellation in British English) is caused by displaying a bitmap or a section of a bitmap at such a large size that individual pixels, small single-colored square display elements that comprise the bitmap, are visible. Such an image is said to be pixelated (pixellated in the UK).
> Early graphical applications such as video games ran at very low resolutions with a small number of colors, resulting in easily visible pixels. The resulting sharp edges gave curved ...

_Shaders_ were not used in my exploration of this.

`:)`

---

<div class="post-metadata">

### Author: ![Aryszin](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@Aryszin](https://discourse.processing.org/u/Aryszin)
#### Post date: [April 3, 2023, 11:27am UTC](https://discourse.processing.org/t/make-a-specific-pgraphics-not-smooth-in-p2d/41560/8 "2023-04-03T11:27:38Z")

</div>

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”

---

<div class="post-metadata">

### Author: ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)
#### Post date: [April 3, 2023, 2:37pm UTC](https://discourse.processing.org/t/make-a-specific-pgraphics-not-smooth-in-p2d/41560/9 "2023-04-03T14:37:17Z")

</div>

Try this one instead:

```auto
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.) );
}
""" };

```