multimedia arts      ·      visual communication     ·      archive     ·     info



Fall / 2018
Website . Interactive De Stijl Generator 

JavaScript . CSS . Html

· about ·
De Stijl Generator is:
︎ an art-making tool 
 ︎ a modern re-creation of the classic
︎ an experiencial learning opportunity

· goal ·
De Stijl Generator is an interactive website allows people to create their own De Stijl artworks. Through the platform, people could learn by making; to have a different understanding of De Stijl art and the principles of De Stijl through the eyes as a creator.

· context ·
How could this be called a piece of art?” The motivation for this project is essentially to answer questions such as this.

A lot of times this kind of question is caused by the gap between the perspective as an artist and as a viewer. It is less easy to build a personal connection with a piece of abstract art, like De Stijl art pieces. The depiction/storytelling/intention can be obsure. Thus people can’t relate.

This is the reason why I chose to start the project with De Stijl. And I intent to further develop this project to cover more art movements.

* click to try De Stijl Generator *

art pieces made through De Stijl Generator


· art recreation ·
An artwork can be more engaging when it opens for diverse interpretations. Each individual would be able to build their own kind of connection(emotionally, physically, etc) with a piece of art.

One efficient approach to “spiritually communicate” with the artwork or with the artist is to directly engage in the process of making.

Mona Lisa, 1797, painting by Leonardo da Vinci
L.H.O.O.Q., 1919, Marcel Duchamp

"Felt Art Imaginariumi" is an exhibition of Lucy Sparrow for M Woods.

Sparrow rewrites the conventional narratives of art history while simultaneously making masterpieces within the canon more approachable and accessible. The viewers can see art from around the world and through the ages in an experience that is at once both thrilling and educational.
— M Woods

The Treachery of Images(La Trahison des images), René Magritte
Lucy Sparrow’s re-creation using soft fabrics

L'Homme qui marche I, Alberto Giacometti
Lucy Sparrow’s re-creation

· analysis of art-recreate ·
  1. Engaging current era into the art works.
  2. Connecting the two time period through the piece of art.
  3. Audiences may feel more related and connected to the artwork.
  4. The relationship between audiences and the artworks get closer.
  5. Educates the audiences, particularly children in a more acceptable approach.

· context . De Stijl ·

De Stijl

is a Netherlands-based movement embraced an abstract, pared-down aesthetic centered in basic visual elements such as geometric forms and primary colors. The De Stijl (Dutch for “the style”) group was one of several art and design movements that responded to the chaotic trauma of World War I with a “return to order.”

Piet Mondrian is easily the most recognizable and most well known artist from the movement. To Mondrian, the vertical and horizontal elements represented two opposing forces: the positive and the negative, the dynamic and the static, the masculine and the feminine.

Composition with Large Red Plane, Yellow, Black, Gray, and Blue, Piet Mondrian, 1921
Composition VII (The Three Graces), Theo van Doesburg

principles of De Stijl ︎︎︎
Using only rectangular planes, straight lines, primary colors. The form of art restrains its' shape, composition, and color.

influence ︎︎︎
The influence of De Stijl is across diverse industries. Including Fashion, Architecture, Graphic Design, Music, Furniture, Fine art and so on.

The White Stripes took De Stijl inspiration for their so-titled album
Mondrian dresses by Yves St Laurent (1966)

Non-Objective I, Roy Lichtenstein, 1964
Red Blue Chair, Gerrit Rietveld, 1918-1923

Microsoft's perfect grid
Ultra-Rare Raf Simons "De Stijl" Hiking Boot

· draft ·

de stijl generator

· final outcome ·
De Stijl generator contains three major approaches for the user to create their unique De Stijl artwork. The three approaches are determined based on the principle of De Stijl. Through the experience, users could gain further understanding of the art movement in a fun way.

· homepage ·

· canvas one . variable compostion ·
Hover on each small areas, to active and move the patterns inside.
Refresh the page to change the given pattern.

· canvas two . variable shape ·
Drag any corner of the triangles to resize.
Composition and color are fixed.

· canvas three . variable color ·
Click on the color blocks given to pick up a color.
Select any area to fill in with the selected color.