# 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.