gen_art_bg 0.1.6

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

🎨 Gen Art Backgrounds

Flutter Animated Generative Art Backgrounds collection.

Usage

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

Examples of use with parameters

AnimatedBWSquares and AnimatedColoredSquares

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

AnimatedLinesGradient

AnimatedLinesGradient(
        animationDuration: 5, // Duration of the animation
      ),

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

GridOfLines

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

MolnarArt

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.

PerlinNoise

PerlinNoise(
        width: 40, // width
        height: 40, // height
        frequency: 5, // frequency
      ),

PulsedCircleGrid

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

RandomNoise

RandomNoise(
        duration: Duration(seconds: 10), // Duration of animation
        dotSize: 13, // Size of dots
        dotSpacing: 11, // Spacing between dots
      ),

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

WaveDotGrid

WaveDotGrid(
        columns: 15, // Number of columns
        rows: 25, // Number of rows
        locationConstant: 100, // Location constant
      ),

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

DynamicShapes

DynamicShapes(
      colors: [Colors.blue, Colors.red, Colors.green],
      maxShapes: 150, // max number of shapes
      minShapeSize: 0.02, // min shape size
      maxShapeSize: 0.08, // max shape size
      minActionPoints: 3, // min number of actions
      maxActionPoints: 6, // max number of actions
      animationSpeed: 1.5, // animation speed
      backgroundColor: Colors.black, // background color
    ),

ExpandingCircles

ExpandingCircles(
      // Custom list of colors
      colors: [
        Colors.blue,
        Colors.red,
        Colors.green,
        // ... other colors
      ],
      // Number of moving circles
      numberOfMovers: 15,
      // Grid size (affects number of blocks)
      gridSize: 50,
      // Block scale (0.0 - 1.0)
      blockScale: 0.75,
      // Minimum circle expansion speed
      minSpeed: 5.0,
      // Maximum circle expansion speed
      maxSpeed: 20.0,
      // Background color
      backgroundColor: Color(0xFF050505),
    ),

Showcase

WaveDotGrid	PerlinNoise	RandomSquare	SpiralWave
GridOfLines	AnimatedColoredSquares	AnimatedLines	AnimatedLinesGradient
RandomNoise	MolnarArt	AnimatedBwSquares	WaveLineGrid
PulsedCircleGrid	DynamicShapes	ExpandingCircles	Space for a new

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

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

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