# Yoga Mat

I own this yoga mat. The surface is textured, and I wanted to try to recreate it.

The approach: draw a bunch of (vertical) lines that vary in color. The main thing to vary here is the function to determine the line color, based on the x coordinate.

```
// Width of each "bar."
const SEGMENT_WIDTH = 30;
function draw() {
for (var x = 0; x < CANVAS_WIDTH; x++) {
r = // determine color
stroke(r, 0, 0);
line(x, 0, x, CANVAS_HEIGHT);
}
}
```

To start, I tried sine:

```
// Normalize.
segmentX = (x % SEGMENT_WIDTH) / SEGMENT_WIDTH;
r = 255 * sin(TWO_PI * segmentX);
```

The resulting image had a lot of blackâ€”that’s because the red value ranges from `[-255, 255]`

. Mapping the range to `[128, 255]`

gives a better image:

```
// Normalize.
segmentX = (x % SEGMENT_WIDTH) / SEGMENT_WIDTH;
r = map(sin(TWO_PI * segmentX), -1, 1, 128, 255);
```

The red shade here is “undulating,” but I wanted it to look more like “bouncing.” Taking the absolute value got what I wanted:

```
// Normalize.
segmentX = (x % SEGMENT_WIDTH) / SEGMENT_WIDTH;
r = map(abs(sin(TWO_PI * segmentX)), 0, 1, 128, 255);
```

This is essentially the yoga mat, but I wanted it to be a bit less uniform. This is handled by adding in noise when determining the shade of red:

```
segmentX = (x % SEGMENT_WIDTH) / SEGMENT_WIDTH;
r = map(abs(sin(TWO_PI * segmentX)), 0, 1, 128, 224)
+ map(noise(x/SEGMENT_WIDTH), 0, 1, 0, 32);
```

After tweaking constants, I got an image I liked:

Sketch available here.