var t;


Learning about art, using JavaScript.


@author Jenn Schiffer


// Henri Matisse [demo]

"Creativity takes courage." - Henri Matisse

In 1989, a woman my Kindergarten classmates and I were told to call "Mrs. Kotter" gave me an N in "using scissors" on my report card – the N stood for "needs improvement." It was so traumatic for me that the memory of my then-stepmother making me practice holding scissors "the right way" and cutting tons and tons of paper still feels fresh in my mind today. Much like meritocracy, time, and gravity, the definition of how to properly hold a pair of scissors is a social construct that has plagued me over the past near-three decades of my being alive. Henri Matisse, a well-known French artist of numerous media, saved the scissors for his final years of living.

Many folks are familiar with Matisse and his mix of impressionist art with deep and almost surreal hues. He was a leader of the Fauvism movement in the early 1900s, which was characterized by such use of strong color. His work to me is not only stunningly beautiful, but he managed to be bold without the campiness that we see in pop art using similar color schemes.

La femme au chapeau (Woman With A Hat), 1905

My first in-person encounter with Matisse's artwork was the painting La Danse in the Museum of Modern Art in New York City. It was a study piece for a more detailed version he painted the following year. He continued to use similar artistic representations of the human body in other paintings, sculpture, and, in the final post-war years of his life, paper.

La Danse (I), 1909

World War II was a particularly difficult time for Matisse, as with most everyone. His only daughter, Margueritte, was imprisoned and tortured by the Gestapo for working in the French Resistance, yet managed to escape from the train transporting her to a concentration camp (she lived until the early 1980s, not too long before my embarrassing report card). Matisse, himself, had fallen ill with cancer and was left wheelchair-ridden from surgery. Instead of ending his prolific life and career of art, though, he had a rebirth in creativity and took to paper cut-outs as a medium.

For the last several years of his life, Matisse "painted with scissors," using paper cut-outs in the same bold colors he painted with in previous decades to create similar works – the bodies reminiscent of La Danse can be seen in some pieces, particular his series of blue nudes. The size of his cut-outs ranged from small, like a book of jazz-inspired art and writing, to so large it takes a whole room to show just that piece. He even took some of these cut-out works and recreated them as beautiful stained glass windows.

My latest in-person encounter with his work was also at the MoMA, only just a few weeks ago and for a new special exhibit, Henri Matisse: The Cut-outs. It is really a sight to see, although I suggest you do not make the same mistake as I did by going on a weekend when everyone else in the world seemed to go. The piece I found most interesting and beautiful, and what drew me to this time period of Matisse's work, was The Swimming Pool, which went through a very ambitious restoration after several years of not being available to the public because of paper staining and degradation.


Much like my 4-year-old self, Matisse was no perfectionist when it came to scissor work. When looking closely at some of these collages, in plain sight you can see the pencil lines, the sharp turns, and some fringes in the paper. This can be attributed to Matisse's assistants who helped out in the cutting, or just to the fact that much like paint splatter or pencil leads breaking, the shearing of paper is not all too predictable or always perfect (are you listening, Mrs. Kotter?). The same can be said for JavaScript.

In this installation of vart.institute, I did not make generative paper cut-outs. Instead, I built a web app so we can make our own unique cut-out-esque work.

✶ ✶ ✶

The Canvas

I wanted to have a canvas that spans the full window of my digital space. I decided to use an HTML5 canvas to create this, and make the entire browser window a space where I can create these cut-outs. A lot of this I learned from making make8bitart.com.

See the Pen Cutting Out Matisse - Part 1 by Jenn (@jennschiffer) on CodePen.

I gave the canvas a pink background temporarily, just to test that it covers the whole window.

The Paper

Instead of using scissors, which I already have outed myself as a terrible user of, the app allows us draw our cut-outs, but in a painstaking manner which slightly matches the movements of scissor cutting: just clicking the path. When working with an HTML5 canvas, we can set click events and draw paths, close paths, and fill those paths with a set color.

We start with an empty array and a color (a blue matching Matisse's series of blue nudes), then as we click around to create a shape, we save those coordinates to save the number of clicks and retain the first point and the latest point. We need to eventually close our path, so when our latest click is within several pixels of the first point of our shape, we close the path and fill it with color.

See the Pen Cutting Out Matisse - Part 2 by Jenn (@jennschiffer) on CodePen.

To make our cut-outs seem more paper-like, I added a darker stroke so "layered" paper can be seen, and also played around with the colors of the canvas and paper to make them look less sterile.

See the Pen Cutting Out Matisse - Part 3 by Jenn (@jennschiffer) on CodePen.

Go ahead, click around and make some cut-outs!

The Tools

Two of the most important parts of creating art is either saving it for posterity or throwing it in the trash, never to be seen again. I added a small menu at the top of the canvas that allows us to clear the canvas or open a png format of the canvas in a new tab/window. Anyone can then save their work!

See the Pen Cutting Out Matisse - Part 4 by Jenn (@jennschiffer) on CodePen.

The Colors

While we have a menu, I figured we might as well use it to give some color options. I chose a selection of colors based off of other collages Matisse created, and added color squares with click events that change our cut-outs color. Since we do not want to change colors while we are in the midst of drawing, and because we don't want to lose precious cutting space to buttons, I have the menu hide between the first click of a path and the closing of it.

And that leaves us with our final product...

Cutting Out Matisse

See the Pen Cutting Out Matisse - Part 5 by Jenn (@jennschiffer) on CodePen.

You can find the full page demo here!

✶ ✶ ✶

One of the biggest takeaways I have had from this project so far, specifically my studying of Matisse, is that imperfections due to the medium we are working with only add to the intellectual value of a piece of art. When I look at all the code I've written for these past three vart posts, I see the imperfections of how I made my own art with code and the parallels bring me great comfort. I feel like it gives me a thicker skin when irrelevant people nitpick my work, knowing now that my code is my art and that affords me an artistic license. Also, fuck the haters, right?