Diamond square shaped pixelation of an image

Processing Coding Questions
1

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

2

Just to be clear, pixels 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.

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

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

1 Like