Generative Art III: Work With Image Tiles

• Download source - 858.3 KB

Introduction

• Generative Art I: Turtle graphics
• Generative Art II: Read and analyse pixels
• Generative Art III: Image sections and images
• Generative Art IV: Distribute Points With Poisson

This third part of the series deals with generative art based on sections of images.

Background

The basis of the representational example in this post are the two following photos:

"Cold Inside" © 2014 Victoria C. Rhodes

"Hope Road" © 2014 Victoria C. Rhodes

Basic Approach

For producing an artwork based on sections of images, you can:

• create a canvas with a first input image
• add image sections of a second input image onto it

private static string inputFileBackground = "Victoria C Rhodes Hope Road.jpg";
private static string inputFile = "Victoria C Rhodes Cold Inside.jpg";
private static string currentDirectory = Environment.CurrentDirectory + @"\";
private static BitmapImage inputImageBackground = new BitmapImage
    (new Uri(currentDirectory + inputFileBackground, UriKind.Absolute));
private Brush backgroundColor = new ImageBrush() { ImageSource = inputImageBackground };

public MainWindow()
{
    InitializeComponent();

    var canvas = new GenArtCanvas(inputImageBackground.Width, 
    inputImageBackground.Height, backgroundColor);

    canvas.Generate(currentDirectory + inputFile);
    canvas.Save(currentDirectory + title + format);
}

Generate Artwork

This algorithm cuts out sections (squares in this case) following a regular pattern:

public void Generate(string InputImage)
{
    Generator.ImageBasedSections(this, InputImage, Width, Height, 64); // <- number of squares per line
}

public static void ImageBasedSections(Canvas Canvas, string InputImage2, 
    double Width, double Height, int NumberOfSquares)
{
    double SquareSize = ((int)(Width / NumberOfSquares)) / 2;

    for (var row = SquareSize * 0.5; row <= Height - SquareSize * 0.5; row += SquareSize * 2)
        for (var column = SquareSize * 0.5; column <= Width - SquareSize * 0.5; 
        column += SquareSize * 2)
        {
            var shape = new Rectangle() //new Ellipse()
            {
                Width = SquareSize,
                Height = SquareSize,
                Fill = Section(InputImage2, Width, Height, SquareSize, row, column),
            };
            Canvas.Children.Add(shape);
            Canvas.SetLeft(shape, column);
            Canvas.SetTop(shape, row);
        }
}

Each section is made of an ImageBrush with a specific Viewbox and Viewport:

private static ImageBrush Section(string InputImage2, double ImageWidth, 
    double ImageHeight, double SquareSize, double Row, double Column)
{
    return new ImageBrush()
    {
        ImageSource = new BitmapImage(new Uri(InputImage2, UriKind.Absolute)), 
        Viewbox = new Rect(Column, Row, SquareSize, SquareSize),
        ViewboxUnits = BrushMappingMode.Absolute,
        Viewport = new Rect(0, 0, ImageWidth, ImageHeight),
        ViewportUnits = BrushMappingMode.Absolute,
        Stretch = Stretch.None,
        AlignmentX = AlignmentX.Left,
        AlignmentY = AlignmentY.Top
    };
}

The generated result looks like this:

Changing the number of squares per line from 64 to 16 respectively 4 produces new results:

Points of Interest

A similar approach is used for a "woven collage".

public static void WovenCollage(Canvas Canvas, string InputImage2, 
    double Width, double Height, int NumberOfSquares)
{
    int SquareSize = (int)(Width / NumberOfSquares);

    for (var row = 0; row < Height; row += SquareSize)
        for (var column = 0; column < Width; column += SquareSize * 2)
        {
            var shape = new Rectangle() //new Ellipse()
            {
                Width = SquareSize,
                Height = SquareSize,
                Fill = Section(InputImage2, Width, Height, SquareSize, 
            row, column + row % (2 * SquareSize)),
            };
            Canvas.Children.Add(shape);
            Canvas.SetLeft(shape, column + row % (2 * SquareSize));
            Canvas.SetTop(shape, row);
        }
}

History

• 2^nd January, 2015 - Published
• 11^th January, 2015 - Links to other articles in the series added
• 25^th January, 2015 - Klimt example added