How to create The seigaiha pattern using JavaScript p5.js

P5.js is a powerful tool for creating interactive graphics and animations on the web. With just a few lines of code, it’s possible to create stunning visual experiences that can be easily shared with others.

The seigaiha pattern is created by drawing a series of overlapping circular or semicircular shapes. These shapes can be filled with color or left as outlines, depending on the desired effect. The pattern can be varied in size and color to suit different design needs.

This code defines a canvas element with a width and height equal to the width and height of the browser window minus 20 pixels, respectively. It also sets the stroke color to a shade of red and the stroke weight (i.e., the thickness of the lines used to draw the ellipses) to 10 pixels.

The draw function is called repeatedly to draw each frame of the animation. It consists of a nested loop structure that iterates over the variables i, j, and k. For each value of i and j, the loop draws a series of four ellipses with progressively smaller sizes, as determined by the value of k. The position of the ellipses is determined by the values of i and j, as well as the parity of j (i.e., whether j is even or odd). The ellipses are spaced horizontally by 240 pixels and vertically by 40 pixels, with an additional horizontal offset of 120 pixels added to alternate rows.

Code: [ Ссылка ]

свернуть