Is there a way to make random grids/layouts in Processing?

Processing Coding Questions
1

Hi everyone,

I’m a visual designer and I’m new to processing. I would like to know if there are any possibilities in Processing to create random aesthetic grids/layouts for editorial projects let’s say that are very similar to the Swiss International Style. Does someone of you have a clue how to do that?

2

Could you provide a link please?`
…and welcome to the forum!

3

Thank you for welcoming me! In general I want to create sort of helplines like this:

https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwj_8onh-LzkAhWPKVAKHV2JB6QQjRx6BAgBEAQ&url=https%3A%2F%2Fwww.pinterest.com%2Fpin%2F370139663099732410%2F&psig=AOvVaw2lk2jLiTdUj521UIlhhnVc&ust=1567884916013730

I want to use those lines later in InDesign or Illustrator to work with them to align objects, texts, shapes and such. My question is if there is any way to create these aesthetically, but also randomly to bring a bigger variety to them than just my imagination. I hope I explained it well.

4

see Creating a grid with a PShape

5

Cool, thank you so much!

1 Like
6

If you want a design grid, then you probably want guidelines / rules that you can use to size, snap, and crop all kinds of elements – text boxes, rects, ellipses, images, etc.

Here is an example of function that should return a ruler:

float[] ruler (float start, float stop, float column, float gutter) {
}

Now you create two rulers:

float[] rx = ruler(0, width, 40, 10);
float[] ry = ruler(0, height, 40, 5);

now you can place any element by referencing ruler lines.

ellipse(rx[1], ry[1], rx[2], ry[2] );
rect(   rx[2], ry[1], rx[6], ry[8] );
text( "hi", rx[3], ry[2], rx[5], ry[7] );

Now that your abstract shapes and text blocks are ruled in, redefine your ruler values to change the layout dimension without altering your rendering code.

2 Likes
7

Without getting into ruler generation or a grid class etc., here is a very simple sketch to show you how rulers can work as simple lists of pixel values.

// define rulers
float[] rx = new float[]{0, 10, 60, 70, 120, 130, 180, 190, 240, 250};
float[] ry = new float[]{0, 10, 60, 70, 120, 130, 180, 190, 240, 250};

size(250, 250);
ellipseMode(CORNERS);
rectMode(CORNERS);

// draw elements using ruler values
ellipse(rx[1], ry[1], rx[2], ry[2] );
rect(   rx[2], ry[2], rx[5], ry[7] );
rect(   rx[3], ry[3], rx[4], ry[4] );
fill(0);
text( "hi", rx[3], ry[3], rx[4], ry[4] );

// show ruler guidelines
stroke(255, 0, 0, 32);
for (int i=0; i<rx.length; i++) {
  line(rx[i],0,rx[i],height);
}
for (int i=0; i<ry.length; i++) {
  line(0,ry[i],width,ry[i]);
}

rulers

So, to make those lines random, you can march up by random values:

for (int i=1; i<rx.length; i++) {
  rx[i] = rx[i-1] + (int)random(50);
}
for (int i=1; i<ry.length; i++) {
  ry[i] = ry[i-1] + (int)random(50);
}

…now each time you get a random grid.

4 Likes
8

Thank you so much Jeremy! It’s exactly what I was looking for. I don’t want to align anything to the grid on processing, but rather get these grids into Illustrator, Indesign, Photoshop whatever to work with them over there. The code works perfectly and I generate awesome and aesthetic layouts, but is there any way to sort of export them or to just know exactly the parameters of the lines to rebuild them in a design software? Sorry for my english. That would be my last question for this one, I promise haha.

1 Like
9

I don’t know what “get these grids into Illustrator” means in this context. Do you want an image with the grid drawn on it that you can open in illustrator as a layer, like a png image – or an svg?

For example, I don’t believe (?) that Illustrator / Photoshop / etc. have tools to import or export guidelines specifically. They only thing that Illustrator does that I’m aware of (again, not an expert) is “release guides” to turn the guides you have manually set into vector objects. But I think that is a limitation of Adobe’s software – so there isn’t anything Processing can do about that…

10

SVG would be the most ideal honestly

11

Then consider using the line drawing method alongside the SVG export library:

https://processing.org/reference/libraries/svg/index.html

Another option is geomerative, which lets you create an RShape, add line components to it, and then save it to svg,

The PShape method that @Chrisir suggested above works in the same way – you can group them together into a single svg with createShape(GROUP) and adding a child for each createShape(LINE).

https://processing.org/reference/createShape_.html

The only problem is that PShape doesn’t have a built in save method if your eventual goal is vector export.

2 Likes