🎨 Gen Art Backgrounds

pub package License: MIT Codacy Badge

Gen Art Backgrounds GIF

Flutter Animated Generative Art Backgrounds collection.

Usage

void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: Scaffold(
      body: WaveLineGrid(
        columns: 15,
        rows: 25, 
        locationConstant: 100, 
        animationDuration: Duration(seconds: 5),
      )
    ),
  ));
}
Examples of use with parameters
AnimatedSquares
AnimatedSquares(
        squareCount: 40, 
        animationDuration: 10,
        margin: 0, 
        strokeWidth: 1.5,
        palette: [
        Color(0xFFabcd5e),
        Color(0xFF14976b),
        Color(0xFF2b67af),
        Color(0xFF62b6de),
        Color(0xFFf589a3),
        Color(0xFFef562f),
        Color(0xFFfc8405),
        Color(0xFFf9d531),
      ],
      ),
AnimatedLinesGradient
AnimatedLinesGradient(
        animationDuration: 5,
      ),
AnimatedLines
AnimatedLines(
        numberOfLines: 30,
        lineLength: 200, 
        lineColor: Colors.black,
        strokeWidth: 3, 
        animationDuration: 10,
      ),
GridOfLines
GridOfLines(
        animationDuration: 5,
        gridSize: 10, 
        strokeWidth: 0.015,
        color: Colors.black,
      ),
MolnarArt
MolnarArt(
        rows: 8,
        cols: 8,
        n: 12,
        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.

PerlinNoise
PerlinNoise(
        width: 40,
        height: 40,
        frequency: 5,
      ),
PulsedCircleGrid
PulsedCircleGrid(
        cellSize: 36,
        marginSize: 72,
        circleDiameter: 27,
        animationDuration: Duration(seconds: 5),
        numberOfRowsColumns: 12, 
      ),
RandomNoise
RandomNoise(
        duration: Duration(seconds: 10),
        dotSize: 13,
        dotSpacing: 11,
      ),
RandomSquare
RandomSquare(
        gridSize: 10,
        updateInterval: Duration(seconds: 1),
      ),
SpiralWave
SpiralWave(
        size: 10,
        k: 20,
      ),
WaveDotGrid
WaveDotGrid(
        columns: 15,
        rows: 25, 
        locationConstant: 100,
      ),
WaveLineGrid
WaveLineGrid(
        columns: 15,
        rows: 25,
        locationConstant: 100,
        animationDuration:  Duration(seconds: 5),
      ),
DynamicShapes
DynamicShapes(
      colors: [Colors.blue, Colors.red, Colors.green],
      maxShapes: 150,
      minShapeSize: 0.02,
      maxShapeSize: 0.08,
      minActionPoints: 3,
      maxActionPoints: 6,
      animationSpeed: 1.5,
      backgroundColor: Colors.black,
    ),
ExpandingCircles
ExpandingCircles(
      colors: [
        Colors.blue,
        Colors.red,
        Colors.green,
        // ... other colors
      ],
      numberOfMovers: 15,
      gridSize: 50,
      blockScale: 0.75,
      minSpeed: 5.0,
      maxSpeed: 20.0,
      backgroundColor: Color(0xFF050505),
    ),
BubbleField
BubbleField(
      backgroundColor: Colors.black,
      circleColor: Colors.white,
      animationSpeed: 1.0,
      gridSize: 100,
    ),
WaveField
WaveField(
      gridStep: 15,
      backgroundColor: Colors.black,
      squareColor: Colors.white,
      animationSpeed: 0.7,
    ),

Showcase


WaveDotGrid

PerlinNoise

RandomSquare

SpiralWave

GridOfLines

AnimatedSquares

AnimatedLines

AnimatedLinesGradient

RandomNoise

MolnarArt

ExpandingCircles

WaveLineGrid

PulsedCircleGrid

DynamicShapes

WaveField

BubbleField

Bugs/Requests

If you encounter any problems 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 request are also welcome.

Note

This is my first package, I will be very grateful to you if you help me to improve it or add new works. The artwork is trusted for the web, so for now some of it may not work well on mobile devices.

License

MIT License

Additional information

Medium article link

Created by Gled (a.k.a khlebobul) | sbgleb10@gmail.com

X Telegram

Inspired 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

Libraries

gen_art_bg