Deconstructing Art: Learning From Constraints
Tags: javascript, showdev, design, webdev
Published: 2021-05-24 13:38:54

Artists have always worked with a lot of constraints. 

Today, we can make *any* color we want chemically (with very few exceptions, such as *vantablack*), but earlier on, artists had to rely on *much* fewer colors.

- Some colors weren't possible to make with the available pigments
- Some colors made them sick (containing arsenic!) 
- Some colors reacted too much with air
- Some colors were simply too expensive

Another constraint was the way colors reacted with *each other*, how they had to be layered etc. I'm *deeply in awe* of the sheer knowledge these artist must have had about colors and pigments.

Nowadays we can paint digitally, and there are *no* constraints besides the limitation of our imagination. But what if we remove that constraint, and let the power of *randomness* guide us to new visual ideas? Do we then need to *add* constraints, in order to keep it human?

---

I recently went to the National Art Gallery in Copenhagen, Denmark, and stumbled upon this beautiful painting, *Cirkler og vertikaler (Circles and verticals) 1930*, by Fransiska Clausen:

![franciska-clausen-cirkler-og-vertikaler](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rvdhkdy4arm0wv7qn4qy.jpg)

There are clearly *a lot of constraints* in that painting. The color palette is limited, almost grayscale — with a dominant red as a contrast.

Every “object” is a rectangle with two circles. The radii of the circles are half the width of the rectangles, and the vertical start-position of a rectangle (it's *y*-coordinate) is equal to the radius.

In dummy `svg`-code, this is how a single object is constructed:

```xml
<rect y="{width/2}" width="{width}" height="{height-width}" />
<circle r="{width/2}" cx="{width/2}" cy="{width/2}" />
<circle r="{width/2}" cx="${width/2}" cy="{height-(width/2)}" />
```

And now for the fun parts: Let's *keep* the shape and the color-palette, but *randomize* the height, width, position, and how the colors are used:

![circlesverticals](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0tjksuphr5hl3zz25mz.png)

Now, let's randomize the *amount of shapes*, as well as *rotation:* 

![image_ (41)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3lyny3weahzy5er7r6cr.png)

So far, so good! It still resembles a piece of art. What happens if we loosen the constraints and randomize everything (except the shape)? 

We end up with something like this:

![image_ (43)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/101rwkgyvn1vstwu86dm.png)

While this is fun, it's a bit *too chaotic* for my taste! Let's *add* a constraint, still randomizing the colors, but only picking random colors *between* two hues:

![image_ (36)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3yuvwumw9hqr0hyszc18.png)

Let's add *another* constraint, forcing the rotation to a single angle:

![image_ (39)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/go3df55n9q0g82u2dh1p.png)

We can also add a constraint limiting the width of the shape:

![image_ (40)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zm7p1wvbji4pgyxs6omg.png)

Now, *that's* a bit boring for my taste!

I think the secret to good art – and maybe even webdesign – is *unpredictability* mixed with ... well, *predictability*! 

And while we can seek inspiration in *randomness* (and AI-art), we should add just enough constraints to make it predictable and human.

Thanks for reading! 

---

PS! The JavaScript for these examples simply iterate an array of random coordinates (snippet):

```js
svg.innerHTML = coords.map(coord => {
  const [x, y] = [...coord];
  const width = R(10,100);
  const height = R(25,400);
  return `
    <g transform="translate(${x},${y}) rotate(${R(0,360)})">
      <rect y="${width / 2}" width="${width}" height="${height - width}" fill="${randomColor()}" />
      <circle r="${width / 2}" cx="${width / 2}" cy="${width / 2}" fill="${randomColor()}" />
      <circle r="${width / 2}" cx="${width / 2}" cy="${height - (width / 2)}" fill="${randomColor()}" />
    </g>	
  `;
}).join('');
```

The `R()`-function returns a random number between a min- and a max-value, whereas the `randomColor()`-function returns a `hsl()`-color with random hue, saturation and lightness-values.

The added constraints then limit these.