Independent Web and Educational Software Developer
Mouse-over or touch/drag to interact with Violett. Or, view fullscreen.
Sort of in response to yesterday's screed, I decided to dig in to a project in order that I wouldn't feel like I was wasting my time. For some inspiration, I turned to the ever wonderful Met Open Access Image Collection. I wanted to make something playful that would put me (and hopefully other people) in a good mood. So - Kandinsky. Generally you can't be in a mad mood looking at his work, and it's a blast to cut up and play with in Photoshop. I picked the print called Violett, because it has fun colors and good shapes to work with.
Vasily (sometimes Wassily) Kandinsky was born in Russia but wound up leaving his motherland because of conflicting opinions with the Communist regime. Eventually he immigrated to France where he lived until he passed away. He was one of the original painters who pioneered abstract art.
Violett was created in 1923 during his Bauhaus period. Kandinsky was synesthetic, which means he had a fusion of different senses when he experienced color and shape. There are many kinds of synesthesia, so this is not the only way it can manifest. However, it influenced Kandinsky's color and shape theories and the emotions and meanings of each. He wrote about this in the book Concerning the Spiritual in Art. During the Bauhaus period he experimented with color and lines creating many works like Violett, which frankly I would also like to animate.
I began by using Photoshop to cut up and separate the individual components from the background and from each other. Not all of the objects were good candidates for cutting up, so I settled on 10. The rest became part of the background.
After that, I used PixiJS to render them to the page as sprites. Each component has one of three ways that it can interact with the user - it either spins, bounces, or teeters. The bounce is based on my prior Zero Percent Off interactive.