gen_art_bg 0.3.10

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

Usage

void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: Scaffold(
      body: WaveLineGrid(
        columns: 15,
        rows: 25, 
        locationConstant: 100, 
        animationDuration: Duration(seconds: 5),
      )
    ),
  ));
}

copied to clipboard

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

copied to clipboard

AnimatedLinesGradient

AnimatedLinesGradient(
        animationDuration: 5,
      ),

copied to clipboard

AnimatedLines

AnimatedLines(
        numberOfLines: 30,
        lineLength: 200, 
        lineColor: Colors.black,
        strokeWidth: 3, 
        animationDuration: 10,
      ),

copied to clipboard

GridOfLines

GridOfLines(
        animationDuration: 5,
        gridSize: 10, 
        strokeWidth: 0.015,
        color: Colors.black,
      ),

copied to clipboard

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

copied to clipboard

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

copied to clipboard

PulsedCircleGrid

PulsedCircleGrid(
        cellSize: 36,
        marginSize: 72,
        circleDiameter: 27,
        animationDuration: Duration(seconds: 5),
        numberOfRowsColumns: 12, 
      ),

copied to clipboard

RandomNoise

RandomNoise(
        duration: Duration(seconds: 10),
        dotSize: 13,
        dotSpacing: 11,
      ),

copied to clipboard

RandomSquare

RandomSquare(
        gridSize: 10,
        updateInterval: Duration(seconds: 1),
      ),

copied to clipboard

SpiralWave

SpiralWave(
        size: 10,
        k: 20,
      ),

copied to clipboard

WaveDotGrid

WaveDotGrid(
        columns: 15,
        rows: 25, 
        locationConstant: 100,
      ),

copied to clipboard

WaveLineGrid

WaveLineGrid(
        columns: 15,
        rows: 25,
        locationConstant: 100,
        animationDuration:  Duration(seconds: 5),
      ),

copied to clipboard

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

copied to clipboard

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

copied to clipboard

BubbleField

BubbleField(
      backgroundColor: Colors.black,
      circleColor: Colors.white,
      animationSpeed: 1.0,
      gridSize: 100,
    ),

copied to clipboard

WaveField

WaveField(
      gridStep: 15,
      backgroundColor: Colors.black,
      squareColor: Colors.white,
      animationSpeed: 0.7,
    ),

copied to clipboard

AsciiCube

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

copied to clipboard

Showcase

WaveDotGrid	PerlinNoise	RandomSquare	SpiralWave
GridOfLines	AnimatedSquares	AnimatedLines	AnimatedLinesGradient
RandomNoise	MolnarArt	ExpandingCircles	WaveLineGrid
PulsedCircleGrid	DynamicShapes	WaveField	BubbleField
AsciiCube

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 | [e-mail]

Support the project:

• Telegram Stars
• YooMoney

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

p5.js creators

• Patt Vira
• mattdesl

Processing creators

• Roni Kaufman
• Okazz
• bcarrca

If you know of any other resources on this topic, be sure to let me know