Schotter grid// rasterized image

[asymmetric]

Happy New Year, Processing community!

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?

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

[glv]

Hello,

An example to get you started:

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:

:)

[asymmetric]

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.

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