Work
Archive
2024
Archive
2024
Decoding Piet Mondrian
Type
Coding Experiment
Coding Experiment
Year
2023
2023
Class
Long Exposure | Generative Drawing through Time
Long Exposure | Generative Drawing through Time
Instructor
Ryan Whitby
Project Description
Inspired by Piet Mondrian's iconic Composition with Red, Yellow, Blue, and Black (1921), this project leverages p5.js in Open Processing to recreate the masterpiece in various compositions. By delving into Mondrian's artistic rationale, the designer analyzes his visual logic and translate it into JavaScript code, enabling the generation of a series of Mondrian-inspired artworks. This experiment not only pays homage to the legendary artwork but also showcases the fusion of art and technology through the use of JavaScript, creating a visually captivating series of Mondrian-inspired compositions.
Inspired by Piet Mondrian's iconic Composition with Red, Yellow, Blue, and Black (1921), this project leverages p5.js in Open Processing to recreate the masterpiece in various compositions. By delving into Mondrian's artistic rationale, the designer analyzes his visual logic and translate it into JavaScript code, enabling the generation of a series of Mondrian-inspired artworks. This experiment not only pays homage to the legendary artwork but also showcases the fusion of art and technology through the use of JavaScript, creating a visually captivating series of Mondrian-inspired compositions.
A comparison of Piet Mondrian's original artwork and iterations of replica generated by the JavaScript code
Pseudocode for Mondrian-Inspired Artwork
1) Prepare Canvas:
Initialize a square canvas with a white base coat.
2) Grid Formation:
Divide the canvas into a grid of squares and rectangles using horizontal and vertical lines.
3) Color Palette:
Establish a palette with primary colors (red, yellow, blue), complemented by black, white, and light gray.
4) Focal Point Creation:
Position a sizable red rectangle, covering ~25% of the canvas, as the central focal point.
5) Grid Structure and Rhythm:
Introduce intersecting black lines to form a grid structure, enhancing visual rhythm.
6) Color Fill:
Fill designated grid rectangles with ~10% yellow and ~5% blue.
7) Balance and Contrast:
Enhance balance by filling ~5% of other rectangles with black for contrast.
8) Neutral Spaces:
Fill remaining rectangles with light gray and white, creating spaces between primary color shapes.
Pseudocode for Mondrian-Inspired Artwork
1) Prepare Canvas:
Initialize a square canvas with a white base coat.
2) Grid Formation:
Divide the canvas into a grid of squares and rectangles using horizontal and vertical lines.
3) Color Palette:
Establish a palette with primary colors (red, yellow, blue), complemented by black, white, and light gray.
4) Focal Point Creation:
Position a sizable red rectangle, covering ~25% of the canvas, as the central focal point.
5) Grid Structure and Rhythm:
Introduce intersecting black lines to form a grid structure, enhancing visual rhythm.
6) Color Fill:
Fill designated grid rectangles with ~10% yellow and ~5% blue.
7) Balance and Contrast:
Enhance balance by filling ~5% of other rectangles with black for contrast.
8) Neutral Spaces:
Fill remaining rectangles with light gray and white, creating spaces between primary color shapes.