Introduction
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:
![Image 1](/KB/graphics/859011/Victoria_C_Rhodes_Cold_Inside.jpg)
"Cold Inside" © 2014 Victoria C. Rhodes
![Image 2](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
"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);
}
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()
{
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:
![Image 3](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
Changing the number of squares per line from 64 to 16 respectively 4 produces new results:
![Image 4](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![Image 5](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
Points of Interest
A similar approach is used for a "woven collage".
![Image 6](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
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()
{
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);
}
}
![Image 7](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![Image 8](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
History
- 2nd January, 2015 - Published
- 11th January, 2015 - Links to other articles in the series added
- 25th January, 2015 - Klimt example added