av

/// Main area of interest, this function will
/// return color for each particular color on our [ui.Image]
int generatePixel(int x, int y, Size size) {
  /// Compute unified vector, values of its components
  /// will be between 0 and 1
  var uv = Vector2(x / size.width, y / size.height);
  var xTiles = 5.0;
  var yTiles = 10.0;

  /// We can now use this [Vector2] as our unit coordinates

av

/// Main area of interest, this function will
/// return color for each particular color on our [ui.Image]
int generatePixel(int x, int y, Size size) {
  var tiles = 5.0;
  /// Compute uv in same way as in previous examples.
  var uv = Vector2(x / size.width, y / size.height);

  /// New twist, [Size.aspectRatio] is essentially [Size.width] 
  /// divided by [Size.height].
  /// uv.y /= 2 would make our tiles 2 times taller

av

/// Main area of interest, this function will
/// return color for each particular color on our [ui.Image]
int generatePixel(int x, int y, Size size) {
  var tiles = 5.0;
  var uv = Vector2(x / size.width, y / size.height);
  uv.y /= size.aspectRatio;

  var gridUv = frac2(uv * tiles);

  /// We have a square with top left and bottom right quarters

av

/// Don't forget to import dart:math!
var rnd = Random();

/// Main area of interest, this function will
/// return color for each particular color on our [ui.Image]
int generatePixel(int x, int y, Size size) {
  var tiles = 3.0;
  var uv = Vector2(x / size.width, y / size.height);
  uv.y /= size.aspectRatio;

av

/// Generates pseudo random double
/// based on input [Vector2], try to
/// change numbers within to see how it changes
/// the pattern generated. Try some small integers
/// to see more repetition in how tiles are placed.
double random2(Vector2 vec) {
  // return vec.x % 2 + vec.y % 2;
  // return frac(vec.dot(vec.xy) * 0.28);
  // return frac(vec.x * vec.y * .99);

av

/// Generates a [ui.Image] with certain pixel data
Future<ui.Image> generateImage(Size size) async {
  int width = size.width.ceil();
  int height = size.height.ceil();

  /// PerlinNoise generator, there're lots of parameters
  /// to tweak and lots of effects possible to produce
  var noise = PerlinNoise(
      octaves: 1, frequency: 0.03, fractalType: FractalType.RigidMulti);

av

pixels[index] = toColorInt(
  Vector3.all(
    // [smoothStep] will return value between 0..1
    // which is growing smoothly when luminance is between
    // 0.92 and 0.99
    smoothStep(0.92, .99, luminance),
  ),
);

av

import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(BikeApp());

class BikeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(

av

class BikeButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 50.0,
      child: CustomPaint(
        painter: BikeButtonPainter(),
        child: Center(
          child: Text('Buy Tough Bike'.toUpperCase()),
        ),

av

class BikeButtonPainter extends CustomPainter {
  final fillPaint = Paint()..color = Colors.grey;

  @override
  void paint(Canvas canvas, Size size) {
    // This [Rect] will fill the whole canvas we got
    var fillRect = Rect.fromPoints(Offset.zero, size.bottomRight(Offset.zero));

    canvas.drawRect(
      fillRect,