Adding a bit of Generative Art to a Flutter project
Hi everyone, I just recently posted my first package on pub.dev that allows you to make your project a little more interesting. In this article I’ll tell you a bit about the process of creating the package and how you can use it.
Flutter Animated Generative Art Backgrounds collection (gen_art_bg) makes it easy to add an interesting animated background to your flutter app or use it as a loading screen.
It all started with developing my side project to improve my flutter knowledge and skills. I started writing a simple game and I wanted to add some animation to a static application, but also had the challenge of keeping a minimalistic look.
This is exactly what I wrote about in the article Animated grid background in Flutter.
I made one example, integrated it into the application and I really liked the result. I wanted to continue the development and add some more examples.
Inspired by some of the work, I decided to try to implement something similar to flutter.
Inspered by flutter_spinkit
And here are some cool articles and repos on the topic of generative art in Flutter
p5.js creators
Processing creators
If you know of any other resources on this topic, be sure to let me know
So why did I decide to make a package after all?
There are two obvious reasons for this:
- Creating a real small project
Yes, a package is also a small project (some packages are just as useful as apps). I wanted to go through all the stages of project development and publication myself.
- Contribution to the community
p5.js makes it easy to implement such animations, flutter has a different task. I just decided that it would be easier to call the name of the desired background than to write such code from scratch.
Once the 15 examples were ready, I started developing the package. The Internet is full of guides on how to create a project, so here I will mention only a few points.
I added the ability to adjust the widget properties by passing them through the constructor and formalized README.md so that the package can be used with ease.
About the package
Installation is done the same way as for all packages on pub.dev:
dependencies:
gen_art_bg: ^0.0.2import 'package:gen_art_bg/gen_art_bg.dart';or with Flutter:
flutter pub add gen_art_bgNext we’ll move on to using:
void main() {
runApp(const MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: WaveLineGrid(
columns: 15, // Change this value to change the number of columns
rows: 25, // Change this value to change the number of rows
locationConstant: 100, // Change this value to change the location
animationDuration: Duration(seconds: 5), // Change this value to change the animation duration
)
),
));
}Voila!
In the next part, we’ll look at each example separately.
Showcase
WaveLineGrid
WaveLineGrid(
columns: 15, // Number of columns in the grid
rows: 25, // Number of rows in the grid
locationConstant: 100, // Constant to adjust the location of the grid
animationDuration: Duration(seconds: 5), // Duration of the animation
),PerlinNoise
Perlin noise was created by Ken Perlin in 1983 and was subsequently named after its creator. Perlin created the algorithm while working at Mathematical Applications Group, Inc. In 1997, Ken Perlin received an Academy Award for Technical Achievement[edit] from the American Academy of Motion Picture Arts and Sciences for his contributions to the movie Tron (1982). [Wikipedia]
Perlin noise is widely used in 2D and 3D computer graphics to create visual effects such as smoke, clouds, fog, fire, etc. It is also very commonly used as a simple texture covering a geometric model. Unlike raster textures, Perlin noise is a procedural texture and hence it does not occupy memory, but at the same time, the execution of the algorithm requires some computational resources. The use of Perlin noise is very common in the demoscene, with participants using it in demos. Perlin Noise is also used in sandbox game development to generate a random landscape, as Notch did in early versions of Minecraft. [Wikipedia]
PerlinNoise(
width: 40, // width
height: 40, // height
frequency: 5, // frequency
),RandomSquare
RandomSquare(
gridSize: 10, // Change this value to change the grid size
updateInterval: Duration(seconds: 1), // Change this value to change the update interval
),SpiralWave
SpiralWave(
size: 10, // Size of each circle
k: 20, // Constant value for controlling wave effect
),GridOfLines
Inspired by mattdesl
GridOfLines(
animationDuration: 5, // Animation duration in seconds
gridSize: 10, // Number of lines in the grid
strokeWidth: 0.015, // Stroke width of the lines
color: Colors.black, // Color of the lines
),AnimatedBWSquares and AnimatedColoredSquares
Inspired by Roni Kaufman
AnimatedBWSquares(
squareCount: 40, // Number of squares
animationDuration: 10, // Duration of the animation
margin: 0, // Margin around the canvas
strokeWidth: 1.5, // Stroke width of the squares
),AnimatedLines
AnimatedLines(
numberOfLines: 30, // Number of lines
lineLength: 200, // Length of each line
lineColor: Colors.black, // Color of each line
strokeWidth: 3, // Stroke width of each line
animationDuration: 10, // Duration of the animation
),AnimatedLinesGradient
AnimatedLinesGradient(
animationDuration: 5, // Duration of the animation
),RandomNoise
RandomNoise(
duration: Duration(seconds: 10), // Duration of animation
dotSize: 13, // Size of dots
dotSpacing: 11, // Spacing between dots
),MolnarArt
Inspired by Roaa Khaddam
I was hugely inspired by Vera Molnar, a great Hungarian artist based in France who is now in her 90’s and still produces work. She is considered one of the pioneers of computer generated generative art. [Generative Art in Flutter]
From a young age, Molnar was fascinated by randomness and was one of the early adapters of using algorithms to render artwork, and in a time when computer generated art was claimed to be dehumanized and its authenticity highly doubted, she argued that working with the randomness in machines and their ability to efficiently produce a high number of outputs was in fact proof of the opposite of those arguments. [Generative Art in Flutter]
MolnarArt(
rows: 8, // Number of rows
cols: 8, // Number of columns
n: 12, // Code
colSeq: [
Color(0xFFC4951B),
Color(0xFF9E3C52),
Color(0xFF1D6383),
Color(0xFF19315B),
Color(0xFF0D1280),
Color(0xFFADD27D),
Color(0xFFBD1528),
Color(0xFF0D4D89),
Color(0xFFAC4075),
Color(0xFFAB933C),
Color(0xFF7EB741),
Color(0xFF1C2266),
],
),The parameter n in the MolnarArt function is responsible for the number of bits in the binary code that is generated for each grid cell. This binary code is used to define the pattern structure in each cell. More specifically, each bit in this binary code indicates whether a particular layer of the pattern should be mapped or not. For example, if n in is 12, a random 12-bit binary code is generated for each grid cell. Each bit of this code represents a different layer of the pattern. If a bit is set to 1, the corresponding pattern layer will be displayed in that cell, and if the bit is 0, the layer will not be displayed.
ConicGradient
ConicGradient(
durationSeconds: 10, // Duration of the animation in seconds
maxDiameter: 1.2, // Maximum diameter of the gradient
steps: 10, // Number of steps in the gradient
),PulsedCircleGrid
Inspired by Roni Kaufman
PulsedCircleGrid(
cellSize: 36, // Size of each grid cell
marginSize: 72, // Margin around the grid
circleDiameter: 27, // Diameter of circles
animationDuration: Duration(seconds: 5), // Animation duration
numberOfRowsColumns: 12, // Number of rows and columns in the grid
),WaveDotGrid
Same example with WaveLineGrid, only without lines between points.
WaveDotGrid(
columns: 15, // Number of columns
rows: 25, // Number of rows
locationConstant: 100, // Location constant
),It should be said that at this point, not all of these examples work the same on different device sizes. If for some reason you have a problem, feel free to open an issue. If you feel the library is missing a feature, please raise a ticket on Github and I’ll look into it. Pull requests are also welcome.
I hope you enjoyed this article. Share your opinion in the comments ❤️
P.S. Many thanks to Eugenia for the package development recommendations
