Simulating a Canvas/Denim Texture in Processing

This is another quick tip from an earlier post on how to add a canvas- or denim-like
texture onto your images. The basic idea is simple: create a pattern of some kind and
overlay it at a very low opacity over your final artwork. This adds a bit of texture
to it, darkening and lightening parts of the image under the overlay. Here is the
effect from my earlier post.

Here’s the canvas texture I came up with. (It’s been drawn on a black background here
for visibility as the lines are colored with a low-opacity white.)

This was done by drawing two sets of lines at 45° and 135° degrees.
With a low spacing between the lines, giving a nice crosshatch.

Here’s the code for generating this.

To make things a bit more interesting, I wrote a custom line-drawing function
that draws the exact same lines, but in short segments, while varying the
opacity, thickness, and orientation of each one (the last one only to a small
extent). Here’s the code for that.

The above is a simple line algorithm that calculates the change in X and Y
directions for a given step and draws a smaller line with slight variations
in the position and stroke thickness. We simply replace the calls to line()
in our grid() function to gridline() calls and vary the opacity randomly
like shown below.

And that’s it!

This approach as a whole is fairly simple and adds a lot of depth to an image. You
can color the lines to give a tinge to your image in addition to the texture, or
you can try different patterns and shapes to simulate other interesting features!