Code Monkey home page Code Monkey logo

piet's Introduction

Procedurally Generating Images in the Style of Piet Mondrian

Introduction

Piet Mondrian was a Dutch painter. His paintings with orthogonal lines and rectangular splashes of primary colors on white backgrounds are very recognizable.

I wondered what it would take to programmatically generate Mondrian-esque images. Here's what I came up with.

The Algorithm

The algorithm operates on a two-dimensional grid. Initially, the grid is empty (white or 0) with the perimeter filled in (black or 1) as a sentinel border. The black areas indicate where the lines are to be drawn.

Next, the algorithm chooses a random number of times to "split" the grid into regions. I choose a random number between 4 and 16 (inclusive) for this.

For each "split" operation, the algorithm randomly chooses to split vertically or horizontally. Depending on the orientation chosen, a random X or a random Y value is chosen as the partition line.

The algorithm scans the partition line, looking for existing walls. (Shown in circles.) These existing walls are candidate endpoints for the new line segment. (Initially, only the perimeter border is present, so the first partition will span the entire width or height of the grid.) The algorithm randomly chooses two of the points found and draws a new line between those points.

This process repeats until the desired number of split operations have been completed.

Here, three endpoints are available. Two are chosen randomly for the next line.

The algorithm keeps track of prior split operations so that no two splits are too close together. (No splits are allowed in the gray region shown in the image. The amount of padding is configurable.)

After performing all of the splits, the grid looks something like this.

Next, the algorithm locates all of the distinct regions of the grid using flood fills. The algorithm chooses a random number of regions to "fill" with a color. For each fill, it chooses a random color to use - red, blue or yellow.

Finally, the perimeter border is chopped off and we have the final result.

And that's it - you can have all the procedurally-generated, Mondrian-esque images you want!

Samples

piet's People

Contributors

fogleman avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.