# Schotter grid// rasterized image
**URL:** https://discourse.processing.org/t/schotter-grid-rasterized-image/40419
**Category:** Coding Questions
**Created:** [January 3, 2023, 12:31am UTC](https://discourse.processing.org/t/schotter-grid-rasterized-image/40419 "2023-01-03T00:31:44Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@asymmetric](https://discourse.processing.org/u/asymmetric)
#### Post date: [January 3, 2023, 12:31am UTC](https://discourse.processing.org/t/schotter-grid-rasterized-image/40419/1 "2023-01-03T00:31:44Z")
Happy New Year, Processing community! π π π π π π π π π π π π π π₯³ π₯³ π π π :piΓ±ata: :piΓ±ata:
I would like to turn the following Schotter code into a rasterized image with this pattern. How do I go about translating the code an rasterized an image?
```auto
float lapse = 0; // mouse timer
int x = 10;
int y = 10;
float r = 0;
int s = 20; //square size
int rows = 90; //number of rows
int columns = 90; //number of columns
int margin = s*2; //margin of the
void setup() {
//size ((columns*s+margin*2), (rows*s+margin*2));
size(1112, 834);
colorMode(0);
background(255);
noLoop();
rectMode(CENTER); //uses center instead of left corner
}
void draw() {
for (int j = 10; j < height-margin*2; j = j+s) { //columns
fill(j/3, 200, 200, 60); //semi-transparent spectrum fill
for (int i = 10; i < width-margin*2; i = i+s) { //rows
pushMatrix(); //save this position for the origin
translate(i, j); //saves origin space as first box space
rotate(radians(random(-r, r))); //random rotations
r = r + .05; //rotational increment
rect(0+margin, 0+margin, s, s);
popMatrix(); //reference back to the initial origin saved...
//so translations and rotations dont stack/accumulate
}
}
}
```
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [January 3, 2023, 2:17am UTC](https://discourse.processing.org/t/schotter-grid-rasterized-image/40419/2 "2023-01-03T02:17:22Z")
Hello,
An example to get you started:
```auto
float r = 0;
PImage img0, img1;
void setup()
{
size(600, 1100, P2D);
background(255);
img0 = loadImage("http://learningprocessing.com/code/assets/sunflower.jpg");
img0.resize(width, height);
img1 = createImage(50, 50, RGB);
img1 = img0.get(0, 0, 50, 50);
noLoop();
}
void draw()
{
background(255);
for (int i = 75; i < 550; i = i + 50)
{
for(int j = 75; j < 1050; j = j + 50)
{
float x = .05 + (j*j/400000);
float y = j/75;
push();
translate(i,j);
rotate(r);
strokeWeight(1.5);
noFill();
image(img1, random(-y,y)-25, random(-x,x)-25);
pop();
//resetMatrix();
r = r + random (-x,x);
}
r=0;
}
}
void keyPressed()
{
img1 = img0.get(int(random(width-50)), int(random(height-50)), 50, 50);
redraw();
}
```
It is simple enough to adapt to do this:
`:)`
---
### Author:  [@asymmetric](https://discourse.processing.org/u/asymmetric)
#### Post date: [January 3, 2023, 2:20am UTC](https://discourse.processing.org/t/schotter-grid-rasterized-image/40419/3 "2023-01-03T02:20:05Z")
Thank you @glv! Specifically, I need help connecting the angle of the square to the value of each pixel. The end product would be shifting transparent squares reacting to each pixel.
```auto
float lapse = 0; // mouse timer
int x = 10;
int y = 10;
float r = 0;
int s = 10; //square size
int rows = 120; //number of rows
int columns = 120; //number of columns
int margin = s*2; //margin of the
void setup() {
//size ((columns*s+margin*2), (rows*s+margin*2));
size(1112, 1000);
pixelDensity(2);
noFill();
background(255);
noLoop();
rectMode(CENTER); //uses center instead of left corner
}
void draw() {
for (int j = 10; j < height-margin*2; j = j+s) { //columns
noFill(); //semi-transparent spectrum fill
for (int i = 10; i < width-margin*2; i = i+s) { //rows
pushMatrix(); //save this position for the origin
translate(i, j); //saves origin space as first box space
rotate(radians(random(-r, r))); //random rotations
r = r + .002; //rotational increment
rect(0+margin, 0+margin, s, s);
popMatrix(); //reference back to the initial origin saved...
//so translations and rotations dont stack/accumulate
}
}
}
```