https://github.com/stonet2000/mondrian-generator
Generate Mondrian-esque art
https://github.com/stonet2000/mondrian-generator
art javascript mondrian p5js
Last synced: 7 months ago
JSON representation
Generate Mondrian-esque art
- Host: GitHub
- URL: https://github.com/stonet2000/mondrian-generator
- Owner: StoneT2000
- License: mit
- Created: 2018-07-20T17:44:28.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-05T23:18:25.000Z (almost 7 years ago)
- Last Synced: 2025-02-05T13:52:44.268Z (11 months ago)
- Topics: art, javascript, mondrian, p5js
- Language: JavaScript
- Size: 211 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Mondrian Art Generator
Draw Mondrian-esque art by clicking generate, and hover your mouse around the white canvas to draw the art. Click rectanges to change their colors.
Working demo provided here https://stonet2000.github.io/Mondrian-Generator/
## Technical
Created using HTML, p5.js, jQuery
How is it generated?
Initially, random x-values and y-values (treating the canvas as a coordinate plane) are chosen. Those values then form up-down or left-right lines respectively, serving as the intial rectangles on the canvas, of which those rectangles are stored in an array.
Then, using a function that randomly chooses an existing rectangle, it chooses either to split the rectangle with a up-down or left-right line, then chooses a random x-value or y-value within the boundary of that rectangle and creates two new rectangles and removes the old rectangle. This process is repeated several times to generate Mondrian-esque art.