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

**URL:** <https://discourse.processing.org/t/is-there-a-way-to-make-random-grids-layouts-in-processing/13854>\
**Category:** Coding Questions\
**Created:** [September 6, 2019, 7:23pm UTC](https://discourse.processing.org/t/is-there-a-way-to-make-random-grids-layouts-in-processing/13854 "2019-09-06T19:23:01Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![jb99](https://avatars.discourse-cdn.com/v4/letter/j/439d5e/32.png) [@jb99](https://discourse.processing.org/u/jb99)\
**Post date:** [September 6, 2019, 7:23pm UTC](https://discourse.processing.org/t/is-there-a-way-to-make-random-grids-layouts-in-processing/13854/1 "2019-09-06T19:23:01Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 6, 2019, 7:33pm UTC](https://discourse.processing.org/t/is-there-a-way-to-make-random-grids-layouts-in-processing/13854/2 "2019-09-06T19:33:57Z")

</div>

> [@jb99](#):
>
> the Swiss International Style

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

---

<div class="post-metadata">

**Author:** ![jb99](https://avatars.discourse-cdn.com/v4/letter/j/439d5e/32.png) [@jb99](https://discourse.processing.org/u/jb99)\
**Post date:** [September 6, 2019, 7:38pm UTC](https://discourse.processing.org/t/is-there-a-way-to-make-random-grids-layouts-in-processing/13854/3 "2019-09-06T19:38:19Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 6, 2019, 7:46pm UTC](https://discourse.processing.org/t/is-there-a-way-to-make-random-grids-layouts-in-processing/13854/4 "2019-09-06T19:46:33Z")

</div>

see [Creating a grid with a PShape](https://discourse.processing.org/t/creating-a-grid-with-a-pshape/13268/2)

---

<div class="post-metadata">

**Author:** ![jb99](https://avatars.discourse-cdn.com/v4/letter/j/439d5e/32.png) [@jb99](https://discourse.processing.org/u/jb99)\
**Post date:** [September 6, 2019, 7:53pm UTC](https://discourse.processing.org/t/is-there-a-way-to-make-random-grids-layouts-in-processing/13854/5 "2019-09-06T19:53:27Z")

</div>

Cool, thank you so much!

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 6, 2019, 8:26pm UTC](https://discourse.processing.org/t/is-there-a-way-to-make-random-grids-layouts-in-processing/13854/6 "2019-09-06T20:26:04Z")

</div>

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:

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

```

Now you create two rulers:

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

```

now you can place any element by referencing ruler lines.

```auto
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.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 6, 2019, 8:40pm UTC](https://discourse.processing.org/t/is-there-a-way-to-make-random-grids-layouts-in-processing/13854/7 "2019-09-06T20:40:42Z")

</div>

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.

```auto
// 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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4187c9f0b34f0e021476f2080d00f7715b9fd1c6.png)

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

```auto
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.

---

<div class="post-metadata">

**Author:** ![jb99](https://avatars.discourse-cdn.com/v4/letter/j/439d5e/32.png) [@jb99](https://discourse.processing.org/u/jb99)\
**Post date:** [September 7, 2019, 4:15pm UTC](https://discourse.processing.org/t/is-there-a-way-to-make-random-grids-layouts-in-processing/13854/8 "2019-09-07T16:15:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 7, 2019, 4:51pm UTC](https://discourse.processing.org/t/is-there-a-way-to-make-random-grids-layouts-in-processing/13854/9 "2019-09-07T16:51:49Z")

</div>

> [@jb99](#):
>
> 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.

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…

---

<div class="post-metadata">

**Author:** ![jb99](https://avatars.discourse-cdn.com/v4/letter/j/439d5e/32.png) [@jb99](https://discourse.processing.org/u/jb99)\
**Post date:** [September 7, 2019, 5:05pm UTC](https://discourse.processing.org/t/is-there-a-way-to-make-random-grids-layouts-in-processing/13854/10 "2019-09-07T17:05:38Z")

</div>

SVG would be the most ideal honestly

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 7, 2019, 5:55pm UTC](https://discourse.processing.org/t/is-there-a-way-to-make-random-grids-layouts-in-processing/13854/11 "2019-09-07T17:55:37Z")

</div>

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

[https://processing.org/reference/libraries/svg/index.html](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](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.