This is particularly important for the collector who has bought a piece and who certainly does not want the piece he has chosen to be different after purchase because the size of the canvas has changed. It is also very important for printing because a non-dimensionless project cannot be printed in high resolution (or with a result that can sometimes be very different).

Personally as an artist but also a collector, I attach great importance to this point.

As I too often see artists make this mistake, I decided that my first article would be dedicated to this.

# Simple example with p5js

Creating a dimensionless project isn't that complicated... Here's a simple non-dimensionless example to start with:

```js
let WIDTH;

function setup() {
  
  WIDTH = 1000;

  createCanvas(WIDTH, WIDTH);
}

function draw() {
  
  background(220);
  
  strokeWeight(2);
  
  for (let i = 0; i < 8; i++) {
    fill(255 - i * 20);
    circle(500, 500, 750 - i * 100);
  }
}
```

This script returns a result in 1000x1000 px:

![](ipfs://QmNpingr17M319u5kNmSNoMfp71mDqGLE5MNXfvQSLdRNz)

Here is now the same script in dimensionless version:

```js
let WIDTH, MULTIPLIER;

function setup() {
  
  WIDTH = min(windowWidth, windowHeight);
  MULTIPLIER = WIDTH / 1000;

  createCanvas(WIDTH, WIDTH);
}

function draw() {
  
  background(220);
  
  strokeWeight(2 * MULTIPLIER);
  
  for (let i = 0; i < 8; i++) {
    fill(255 - i * 20);
    circle(500 * MULTIPLIER, 500 * MULTIPLIER, 750 * MULTIPLIER - i * 100 * MULTIPLIER);
  }
}
```

In the setup() function, the canvas size (WIDTH) is determined based on the window size:

```js
WIDTH = min(windowWidth, windowHeight);
```

And the multiplier is calculated (based on a fixed size of 1000 px):

```js
MULTIPLIER = WIDTH / 1000;
```

When you need to draw something on the canvas, just multiply the fixed value (based on a 1000 px canvas) by MULTIPLIER:

```js
circle(500 * MULTIPLIER, 500 * MULTIPLIER, 750 * MULTIPLIER - i * 100 * MULTIPLIER);
```

Don't forget the borders too:

```js
strokeWeight(2 * MULTIPLIER);
```

If you do this from the start of the project, it won't take much effort to get a dimensionless result.

In this case, if the canvas is at 400 px, the result will be adapted to the size of the canvas:

![](ipfs://QmWfMSCxFUspxiGe2Mdt66P9BR231nSyLtGJLaECK7qns2)

Similarly with a canvas at 678 px:

![](ipfs://QmWnmsweEENquVciVxxXnqY6obFED4gjJGdJEmvMo74Ko5)

And to print this masterpiece, it would be possible to generate a very high resolution version of perfect quality. Here is a very small portion of a canvas at 6000 px:

![](ipfs://QmWJQQtxW9YLVH17NwyzEkuL8ZAk4k5VWGpjgoWuZSkLVM)

# How to check if the result is dimensionless

Sometimes when the project is not dimensionless it shows right away, but sometimes it's just smaller and less visible elements such as textures that are not dimensionless and you risk missing out.

To check, a fairly simple and effective method consists of copying the displayed result into an image editor (for example Gimp):

![](ipfs://QmWQxLEpkXxLYXkNdePhDSh68gaQ7cztGoEG5R9vGQ4eER)

Then generate a high resolution version (with the same hash)... To avoid erasing, you can do it simply like this:

```js
WIDTH = 4567//min(windowWidth, windowHeight);
```

Then resize the generated image like the first image (if the first is 762x762 px, resize the second to 762x762 px).

Copy to finish the second image in a new layer:

![](ipfs://QmPXeKa8kAB9ea9yLJjXHUmSxo8Km1UEJ3YicZeniyfgHA)

Now just click the button multiple times to show/hide the top layer to see the differences.

And if you don't see any difference between the 2 images, well done, the result is dimensionless!


In generative art, it is important to create dimensionless projects, ie projects that return exactly the same result regardless of the size of the canvas.

Creative Coder & Artist

High res versions of all my Fxhash projects are available on my website: https://hevey.art

How to create a dimensionless project with p5js

Written by

Editions

Share

Details

stay ahead with our newsletter