Making a generative creation of the “NEW YORK CITY I” BY Piet Mondrian
Guided by Prof. Rasagy Sharma
Context:
As a part of our curriculum in Information Design here at National institute of Design Bangalore, we were asked to recreate an abstract painting using P5js and make it interactive to people seeing it, which was quite challenging and fun for me being an architect for the fact I never coded in my life. But let me tell you it was fun to enter the word of coding when you feared it most and coming up with something that makes you happy :)
The module was of two weeks where I would say our objective was not become a super cool coder who can just hack the world around and make super hyper realistic things but to learn the basics of coding and to learn how to apply it when you need it.
So, it was scary at first when you are asked to code something and you know you don’t even know anything about coding but am glad that Rasagy was there to guide as well through those preconceived notions that “how can I code, I don’t know anything “and helped as to come out of that zone of fear and creating something from scratch using P5js.
Introduction:
Processing is a free graphical library and integrated development environment (IDE) built for the electronic arts, new media art, and visual design communities with the purpose of teaching non-programmers the fundamentals of computer programming in a visual context.
Yes, I know this seems techy again but let me tell you one thing that it might seem difficult to beginners but I can assure you that if I can do it you can also do it.
About Artist:
Piet Mondrian is a Dutch artist best known for his abstract paintings. Art that is abstract does not show things that are recognizable such as people, objects or landscapes. Instead, artists use colors, shapes and textures to achieve their effect.
“Every true artist has been inspired more by the beauty of lines and color and the relationships between them than by the concrete subject of the picture.”
According to Piet Mondrian every art form can be depicted by using horizontal and vertical lines and one can really feel the sense of it which for me was very intriguing and hence this was the reason I decided to go with his paintings.
About Painting:
New York City I, 1942
or rather the series of works later brought together under the title New York City, marks the beginning of a new phase in Mondrian’s work. The black lines have disappeared along with the rectangles of primary color, which since the 1918 Composition: Color Planes with Gray Contours had formed a solid flat totality with the lines and the white that had previously been the background. Instead, lines in the primary colors — yellow, but also red and blue — traverse the square canvas, interweaving with each other.
For the most part, the yellow lines cross those of the other colors, but here and there, in a most subtle way, the red and blue lines cross the yellow. Yet this style does not give rise to an illusionary space; the colored bands over- and underlap one another on the surface, before the eyes of the viewer
I knew this Under and overlaps of different colorized lines was going to be the main challenge while recreating this painting and coming up with some integration that a viewer can do while interacting with the painting was the second most important thing in the whole process.
About my recreation of New York City I
So, in order to create this with p5js I decided to add motion to the composition which would also give a feeling of weaving something from scratch and letting viewer to create their own Piet Mondrian compositions with movement of lines and filled color blocks. Also, I tried randomizing direction of lines which enhance overall dynamics of the composition so that the whole piece is interactive.
Hover mouse on painting canvas to play with lines and create your own composition :)
References:
https://www.piet-mondrian.org/
https://www.tate.org.uk/kids/explore/who-is/who-piet-mondrian