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
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
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…
