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.
In this article, I will introduce you to the p5.pattern that I used in my work.
The source code for the p5.pattern library is available on github.
GitHub - SYM380/p5.pattern: A pattern drawing library for p5.js.
A pattern drawing library for p5.js. Contribute to SYM380/p5.pattern development by creating an account 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.stripe(t / int(random(6, 12)))
PTN.stripeCircle(t / int(random(6, 12)))
PTN.stripePolygon(int(random(3, 7)), int(random(6, 12)))
PTN.stripeRadial(TAU / int(random(6, 30)))
PTN.wave(t / int(random(1, 3)), t / int(random(10, 20)), t / 5, t / 10)
PTN.dot(t / 10, (t / 10) * random(0.2, 1))
PTN.checked(t / int(random(5, 20)), t / int(random(5, 20)))
PTN.cross(t / int(random(10, 20)), t / int(random(20, 40)))
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.
Rhythm in Patterns: Coding Challenge - OpenProcessing
This is a creative coding challenge to create sketches under the theme 'Rhythm in Patterns' using the p5.pattern…
I wonder what I’ll draw next…