gen_art_bg 0.5.1

Flutter Animated Generative Art Backgrounds collection. Can be used as a background or separately.

🎨 Gen Art Backgrounds

Flutter Animated Generative Art Backgrounds collection.

Used by

• Knight's Graph ➭ AppStore / Google Play

• Board Buddy ➭ AppStore / Google Play

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,
    ),

AsciiCube

AsciiCube(
    backgroundColor: Colors.black,
    textColor: Colors.white,
    animationSpeed: 1.0,
    scale: 1.0,
    showDots: false, // like rolling dice
    edgeChars: ['@', '#', '*', '+', '=', '&'],
    dotChar: '●',
  )

RetroGridBackground

RetroGridBackground(
      config: RetroGridConfig(
        gridDarkColor: Color.fromRGBO(0, 255, 255, 0.7),
        gridLightColor: Color.fromRGBO(255, 0, 128, 0.7),
        shaderColors: [
          Color(0xFF00FFFF),
          Color(0xFFFF00FE),
          Color(0xFFFFFF00),
        ],
        gridSize: 30.0, // Size of the grid
        angle: 65, // Angle of the grid lines
        animationDuration: Duration(seconds: 1),
      ),
    )

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.

Contacts

License

Project support

Additional information

Medium article link

Inspired by flutter_spinkit

And here are some cool articles and repos on the topic of generative art in Flutter

Generative Art in Flutter / funvas / Flutter-Artbook / Art Processing Playground / GenArtCanvas / flutterfx_widgets

p5.js creators

Patt Vira / mattdesl

Processing creators

Roni Kaufman / Okazz / bcarrca