How will you approach this picture?

p5.js Coding Questions
1

Like a lot of us, I’ve been a fan of Autechre since 2001 (I was 11) and I’ve been always amazed by their covers.
There are a couple of covers that always make me think of raw code.
So my question is, how will you approach this cover in Processing or P5j?

Autechre-l-event

I thought it will be easy to translate to code, but it’s harder than I thought!
So my logic was either create a X amount squares, with random widths and heights and let them intersect, but some some of them touch at their vertex…
and my second idea was just to create a grid of squares fill some randomly and that way you can intersect stuff…I don’t know

Also, Exai artwork goes under the similar concept.

Anyway, sorry if there’s no code for me, I’ve started it but I have no clue how to do it.

I’ll try to add some stuff, maybe I can get a better idea after I post this.

2

I think it’s definitely a grid of squares (2D array, see tutorials).

You can fill it randomly in a nested for-loop

Idea

You can also make a random walker (see examples) that starts at different random locations a and walks from there (marks rectangles as black). Instead of walking it could also draw multiple times (random number) from the random point “a” a certain distance (random dist and direction).

Chrisir

1 Like
3

Hello,

I always try to visualize the problem and approaches to tackling it before writing a single line of code. You are doing this…

You then have to translate to code with what is available to you. That is where the fun and learning begins.

One of the best tools in a programmer’s tool chest is knowing the resources available to you and learning to navigate, filter, and use them.

A short list of resources to peruse:

Resources < Click here to expand !

Explore the resources available here:

:)

1 Like
4

Creating a grid of squares right, but randomly making them dark or bright would create a to evenly distributed pattern.
So I would generate the values using noise() or even include another noise function (opensimplex noise)

1 Like
5

oh, amma get my hands on that and come with a code. What I’m thinking to is that range is an important aspect of it. All squares should start and end from a specific range instead of the full canvas.

I better start talking some code and see if I come back with a proper result.

of course! Noise! I always seem to forget about that function.

6

Hi @Huno,

Have you looked at the Wikipedia page of the “Exai” album ?

… Following the album’s release, fan speculation included theories that the artwork was based on Conway’s Game of Life[5] or binary code.[6] Autechre members Sean and Rob were initially reluctant to discuss the album as they “wanted to see what people could figure out” but ultimately confirmed that the artwork depicts a heavily-pixelated typography exercise. Exai is Autechre’s eleventh album, and the title may be derived from a phonetic rendering of the Roman numeral “XI,” or eleven, which also appears in one track title: “T ess xi.”

If the artwork is indeed the result of a heavy pixelisation of an image I would suggest to look for downsampling methods. Something like Gaussian Pyramid or Lanczos resampling could be worth investigating.

I really enjoy this kind of question. Reading people’s various ideas and approaches is always both exciting and instructive.

2 Likes
7

Wow, I didn’t actually thought of the Wiki, lol. I will check it out. I love the idea of the Pixelated Type.

does seem like something I will love to try!

Yes! I’m always wondering how people approach stuff. I’ve come around some solutions that seem pretty bold, some pretty smart and even some pretty dumb but work!

1 Like
8

Ok! So, as basic as I can think, because I’m a noob.

// s to save png
// p to record pdf
// e to stop pdf record.

import processing.pdf.*;
import java.util.Calendar;

boolean recordPDF = false;

int a = 0;

void setup() {
  size(600,600);
  background(255,230,100);
  noStroke();
  //noLoop();
}

void draw(){
   if (a < 5) {
  for (int x = 60; x < width - 60; x = x + 60){
    for (int y = 60; y < height - 60; y = y + 60){
     
  rect(x, y,60,60);
  for (int a = 0; a < 255; a = a + 1){
    for (int b = 0; b < 255; b = b + 1){
  fill(255, 230, 100 + random(x));
      }
     }
    }
  }
     a = a + 1;
   } else {
     noLoop();
   }
 
}

void keyReleased(){
  if (key == 's') saveFrame(timestamp()+"_##.png");
  if (key == 'p') {
    if (recordPDF == false) {
      beginRecord(PDF,timestamp()+".pdf");
      println("making pdf");
      recordPDF = true;
    }
  } else if (key == 'e'){
    if (recordPDF){
      println("done!");
      endRecord();
      recordPDF = false;
    }
  }
}
//timestamp 
String timestamp() {
  Calendar now = Calendar.getInstance();
  return String.format("%1$ty%1$tm%1$td_%1$tH%1$tM%1$tS",now);
}

now, I had to add the if condition as “amount of repetitions” because, if the code runs once, the first square, rect(0,0) always appears white. And even though it doesn’t appear white anymore, the first rectangle always appear to be the same color.
I don’t know why this happens! Maybe because is too much randomness.

but yea, not so complex!

Now with the concept of range I subtracted the width and height of the canvas to 1 square width and heigt, start maybe 2 columns and rows offset from the limit

What do y’all think?

1 Like
9

Ok, so I was thinking… if I want just the background and the square colors to be constant. Background Yellow, squares black.
I thought of working with the alpha on the fill loop, but that will only give me a range of opacities, and welp…there’s the issue with the first square that never matches the background color, is either white or background, something that I think is due to that first square being doubled due to the nested loop.

What about drawing just one square and then translate it around randomly within range?

10

You are doing it wrong.

There is a nice tutorial about 2D arrays. Data of the colors of the grid. You should use a 2D array / grid to store colors.

Start by filling the 2D array / grid randomly (black or yellow) then display the grid. So TWO nested for-loops. 2 times 2.

The fill must be before the rect so it can work (in the 2nd double for-loop).

fill ( grid [x][y] );

1 Like
11

Maybe it will help for visualization, here’s the grid. The overall image is 21 x 21. The black squares are bounded in a 15 x 16 area, unless you consider the first or last column to have been “Intentionally left blank”, then I suppose you could say it’s 16 x 16.

grid
grid2020×2020 1.21 MB

1 Like
12

so, one nested loop for the grid and one for the colors? Oh…snap, I better start some reading.

Hey! That’s a great idea, I never thought of that. Thanks a lot.

13

Read the tutorial about two-dimensional arrays on the Website | tutorials

14

I think it’s a nice idea to create random artwork pixelations like that, but you have to invent some methods to evenly distributed the pattern like @philipplehmann mentioned.
The whole thing reminded me of a QR code, so I puzzled a little bit and the result are these lines of code, which give the embedded iframe below. What do you think the decoding of this bar will write?

t=u=g=0;r=[1,8,9,12,15,22,12,14,3,6,17,20,3,6,12,14,17,20,3,6,17,20,9,14,1,8,15,22,10,
12,1,3,5,8,18,22,1,4,14,17,19,21,7,12,17,19,8,11,13,15,16,18,4,11,14,16,17,19,20,22,
1,8,15,19,9,12,3,6,12,15,20,22,3,6,17,19,3,6,10,12,14,16,13,15,1,8,9,12,13,15,18,19,21,22];
q=[3,1,2,3,2,1,2,1,3,3,2,3,1,3,2,1,3,2,3,1,5,3,1,1,1,0,2,2,0,6,2,2,2,2,1,1,3,2,0,1,1,2];
c=[1,8,9,14,15,22,9,11,11,12,12,13,10,11,12,14,1,8,15,22,1,5,7,8,10,11,14,15,17,18,20,21,4,6,
15,16,1,4,6,9,10,11,14,15,7,10,12,14,16,17,1,8,9,10,17,18,20,22,16,17,19,20,19,20,12,18,1,8,18,19];
setup=_=>{createCanvas(w=460,w).background(255);strokeWeight(20).strokeCap(SQUARE)
for(y=20;y<440;y+=20){for(p=0;p<q[u];p++){line(r[t]*20,y,r[t+1]*20,y);t+=2;}u++;}
for(x=30;x<440;x+=20){for(p=0;p<q[u];p++){line(x,c[g]*20-10,x,c[g+1]*20-10);g+=2;}u++;}}
.

1 Like
15

I LOVE PROCESSING! lol

1 Like
16

-hey, ! well
No, I couldn’t do it.
I really don’t know how to approximate the array thing. I understand the concept but I can’t make it work.

var cols = 10;
var rows = 10;

var colors = [];


function setup() {
  createCanvas(400, 400);
  for (var i=0; i<cols;  i++){
    colors[i] = [23];
    for (var j=0; j<rows;  j++){
      colors[i][j] = [190];
      
    }
  }
}

function draw() {
  background(220);
    for (var i=0; i<cols;  i++){
    for (var j=0; j<rows;  j++){
      var x = i * 60;
      var y = j * 60;
      fill(colors[i][j]);
      stroke(0);
      rect(x,y, 60,60);
    }
  } 
}

I read the processing tutorial but had to do it on the js editor.
I really don’t know

17

Here is the extension of the QR shorthand code above with some comments.
I created a QR bar online here and took it to Inkscape drawing some thin lines to facilitate seeing the x-y positions of the blocks as @ddown suggested. It took half an hour puzzling but it’s fun.

let t = 0;
let index = 0;
let g = 0;

row = [1, 8, 9, 12, 15, 22, 12, 14, 3, 6, 17, 20, 3, 6, 12, 14, 17, 20, 3, 6, 17, 20, 9, 14, 1, 8, 15, 22, 10, 
  12, 1, 3, 5, 8, 18, 22, 1, 4, 14, 17, 19, 21, 7, 12, 17, 19, 8, 11, 13, 15, 16, 18, 4, 11, 14, 16, 17, 19, 20, 22, 
  1, 8, 15, 19, 9, 12, 3, 6, 12, 15, 20, 22, 3, 6, 17, 19, 3, 6, 10, 12, 14, 16, 13, 15, 1, 8, 9, 12, 13, 15, 18, 19, 21, 22];

column = [1, 8, 9, 14, 15, 22, 9, 11, 11, 12, 12, 13, 10, 11, 12, 14, 1, 8, 15, 22, 1, 5, 7, 8, 10, 11, 14, 15, 17, 18, 20, 21, 4, 6, 
  15, 16, 1, 4, 6, 9, 10, 11, 14, 15, 7, 10, 12, 14, 16, 17, 1, 8, 9, 10, 17, 18, 20, 22, 16, 17, 19, 20, 19, 20, 12, 18, 1, 8, 18, 19];

repeat = [3, 1, 2, 3, 2, 1, 2, 1, 3, 3, 2, 3, 1, 3, 2, 1, 3, 2, 3, 1, 5, 3, 1, 1, 1, 0, 2, 2, 0, 6, 2, 2, 2, 2, 1, 1, 3, 2, 0, 1, 1, 2];

function setup() {
  createCanvas(460, 460);
  background(255);
  strokeWeight(20);
  strokeCap(SQUARE);

  for (let y = 20; y < 440; y += 20) { // for every row Y value with a 20 pixel stroke weight
    for (let rpt = 0; rpt < repeat[index]; rpt++) { // repeating in still the same row all the remaining lines 
      let startX = row[t] * 20; // the row array has two subsequent values. First the startX
      let endX = row[t+1] * 20; // second the endX (multiplied by the stroke width pixels amount 20)
      line(startX, y, endX, y); // the row lines (sometimes just one block)
      t += 2; // jump 2 to new startX
    }
    index++;
  }

  for (let x = 30; x < 440; x += 20) { // for every column X value with a 20 pixel stroke weight
    for (let rpt = 0; rpt < repeat[index]; rpt++) { // repeating in still the same column all the remaining lines 
      let startY = column[g] * 20 - 10; // the column array has two subsequent values. First the startY
      let endY = column[g+1] * 20 - 10; // second the endY (multiplied by the stroke width pixels amount 20)
      line(x, startY, x, endY); // the column lines (sometimes just one block)
      g += 2; // jump 2 to new startY
    }
    index++;
  }
}
1 Like
18

almost there

your draw() was good, in setup() you forgot to either set the color to black or yellow

here is an example in processing


int cols = 10;
int rows = 10;

color[][] colors = new color[cols][rows];

void setup() {
  size(400, 400);
  for (int i=0; i<cols; i++) {
    for (int j=0; j<rows; j++) {
      if (random(1) > 0.5)
        colors[i][j] = 0;
      else 
      colors[i][j] = color( 255, 255, 0 );
    }
  }
}

void draw() {
  background(220);
  for (int i=0; i<cols; i++) {
    for (int j=0; j<rows; j++) {
      int x = i * 60;
      int y = j * 60;
      fill(colors[i][j]);
      stroke(111);
      rect(x, y, 60, 60);
    }
  }
}

Chrisir

1 Like
19

here is another example that shows the coordinates (indexes) of the grid / 2D array


int cols = 10;
int rows = 10;

color[][] colors = new color[cols][rows];

void setup() {
  size(400, 400);
  for (int i=0; i<cols; i++) {
    for (int j=0; j<rows; j++) {
      colors[i][j] = color(190); // gray
    }
  }
  colors[2][4] = color( 255, 255, 0 ); // yellow
  colors[5][1] = color( 0, 255, 0 ); // blue
}

void draw() {
  background(220);
  for (int i=0; i<cols; i++) {
    for (int j=0; j<rows; j++) {

      int x = i * 60;
      int y = j * 60;

      fill(colors[i][j]);
      stroke(111);
      rect(x, y, 60, 60);

      fill(0); 
      text(i+","+j, x+23, y+23);
    }
  }
}
1 Like
20

Amazing how I totally forgot about if and else for the colors. And HONESTLY I read and read and read and saw youtube videos and I never got it.

Thanks a lot for being so kind and sharing. The else was a doubt I had like “how can I change some to be with a different color”
I will continue to study it and maybe come with some interesting solutions, like maybe try to draw different shapes or do it 3d, like each iteration goes up a level. I will try that.

Also, these example, is amazing for understanding what it’s actually happening. Thanks a lot Chrisir!

1 Like