# Diamond square shaped pixelation of an image

**URL:** <https://discourse.processing.org/t/diamond-square-shaped-pixelation-of-an-image/11990>\
**Category:** Coding Questions\
**Created:** [June 11, 2019, 3:00pm UTC](https://discourse.processing.org/t/diamond-square-shaped-pixelation-of-an-image/11990 "2019-06-11T15:00:27Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ruchi](https://avatars.discourse-cdn.com/v4/letter/r/f475e1/32.png) [@Ruchi](https://discourse.processing.org/u/Ruchi)\
**Post date:** [June 11, 2019, 3:00pm UTC](https://discourse.processing.org/t/diamond-square-shaped-pixelation-of-an-image/11990/1 "2019-06-11T15:00:27Z")

</div>

Hi, is there a way to get diamond square shaped pixels or for that matter give different shapes pixelation to an image just like photoshop in processing?

![rhombuspixel](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/83f016363d4b5e1c43ce285d35a55afb7218ca6b.jpeg)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [June 14, 2019, 5:05pm UTC](https://discourse.processing.org/t/diamond-square-shaped-pixelation-of-an-image/11990/2 "2019-06-14T17:05:41Z")

</div>

Just to be clear, [pixels](https://en.wikipedia.org/wiki/Pixel) are the smallest thing on your screen. A pixelation effect is a visual effect. For a diamond texture, you could

1. rotate the screen, then draw a bunch of rectangles
2. draw a bunch of rotated rectangles
3. use a shader

It depend on what you are trying to do. Are you trying to texture an image, or do drawing with a texture?

Here is a simple example of some manual drawing and scaling approaches.

```auto
/**
 * Simple pixel point effects without shaders
 * Processing 3.4 - 2019-06-14
 * cycles through four drawing modes
 * - grid of rectangles,
 * - rotated grid of rectangles
 * - grid of rotated rectangles
 * - scaled pixels
 * discourse.processing.org/t/diamond-square-shaped-pixelation-of-an-image/11990
 */

int mode=0; // select drawing mode
int blockw = 20;
int blockh = 20;
int columns;
int rows;

void setup() {
  size(400, 400);
  columns=width/blockw;
  rows=height/blockh;
  frameRate(5);
}
void draw() {
  background(0, 0, 255);
  noStroke();
  // timed switch between 3 drawing modes
  if (frameCount%15==0) {
    mode++;
    if (mode>3) mode=0;
  }

  // draw a grid of rectangles
  if (mode==0) {
    for (int y=0; y<rows; y++) {
      for (int x=0; x<columns; x++) {
        fill((int)random(255));
        rect(x*blockw, y*blockh, blockw, blockh);
      }
    }
  }

  // rotate before drawing a grid of rectangles
  if (mode==1) {
    translate(width/2, 0);
    rotate(PI/4);
    for (int y=0; y<rows; y++) {
      for (int x=0; x<columns; x++) {
        fill((int)random(255));
        rect(x*blockw, y*blockh, blockw, blockh);
      }
    }
  }
  
  // draw individually rotated rectangles,
  // with rows staggered to tile
  if (mode==2) {
    for (int y=0; y<rows; y++) { // or y < (int)grid*sqrt(2) + 1
      for (int x=0; x<columns; x++) {
        fill((int)random(255));
        pushMatrix();
        translate(x*blockw*sqrt(2), y*blockh*sqrt(2)/2);
        if (y%2==1) translate(blockw*sqrt(2)/2, 0);
        rotate(PI/4);
        rect(0, 0, blockw, blockh);
        popMatrix();
      }
    }
  }
  
  // scale up, then draw points
  if (mode==3) {
    scale(blockw, blockh);
    translate(0.5,0.5);
    for (int y=0; y<rows; y++) {
      for (int x=0; x<columns; x++) {
        stroke((int)random(255));
        point(x, y);
      }
    }
  }
}

```

For more on pixelation shaders, see the basic texture shader example in the PShader tutorial:

[https://processing.org/tutorials/pshader/](https://processing.org/tutorials/pshader/)

You might also be interested in this old adaptation of a simple pixel shader from ShaderToy:

- [https://forum.processing.org/two/discussion/1723/unwanted-artifacts-in-a-simple-pixelation-shader](https://forum.processing.org/two/discussion/1723/unwanted-artifacts-in-a-simple-pixelation-shader)