# Rhythm fishes

Using p5js and p5.pattern, I created an illustration of fishes wearing various patterns.The color and pattern changes every 5 seconds. Isn’t it cute?

The source code can be found at the link below.
https://openprocessing.org/sketch/1376776

In this article, I will introduce you to the p5.pattern that I used in my work.

# p5.pattern

The source code for the p5.pattern library is available on github.

The first illustration is without the pattern.

The p5.pattern library supports 11 different patterns. The pattern names are all intuitive, but let’s take a look at all the pattern names and the drawing results.

# PTN.noise

`PTN.noise(0.5)`

`PTN.noiseGrad(0.4)`

# PTN.stripe

`PTN.stripe(t / int(random(6, 12)))`

# PTN.stripeCircle

`PTN.stripeCircle(t / int(random(6, 12)))`

# PTN.stripePolygon

`PTN.stripePolygon(int(random(3, 7)), int(random(6, 12)))`

`PTN.stripeRadial(TAU / int(random(6, 30)))`

# PTN.wave

`PTN.wave(t / int(random(1, 3)), t / int(random(10, 20)), t / 5, t / 10)`

# PTN.dot

`PTN.dot(t / 10, (t / 10) * random(0.2, 1))`

# PTN.checked

`PTN.checked(t / int(random(5, 20)), t / int(random(5, 20)))`

# PTN.cross

`PTN.cross(t / int(random(10, 20)), t / int(random(20, 40)))`

# PTN.triangle

`PTN.triangle(t / int(random(5, 20)), t / int(random(5, 20)))`

Did you find a pattern you like? My favorite is PTN.stripeCircle. If your imagination has been captured by this article, You may want to try making your own.

The OpenProcessing site has a curation page called Rhythm in Patterns: Coding Challenge where you can see works using p5.pattern.

I wonder what I’ll draw next…