# Diamond square shaped pixelation of an image

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? 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

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