Creative Coding Week 1: Interactive Art

Hi there, my imaginary audience! This is the start of my blog for Creative Coding Fall 2020. For our first week of class, we started with an introduction to p5.js; specifically, we covered some fundamental features such as colors, shapes, and position.

Our assignment this week is to either create a self-portrait or a sketch of one of the works by Sol LeWitt. I decided to go with Sol LeWitt because I have noticed his works at MoMA and the subway of NYC. I like his use of highly-saturated colors and crisp shapes, but more importantly, I find that his way of conducting art offers many implications for Human-computer Interaction. Instead of putting an installation together himself, LeWitt gives detailed instructions of his concept and let other artists/people actualize them. This isn’t a conventional practice since most art/paintings are drawn by artists themselves. However, this approach subjects the art to interpretation and altercation when the work is being done by another person. In Delusions of Dialogue: Control and Choice in Interactive Art by Jim Campbell, the author suggests that for interactive work to live on its own, the artist need to be constructing it from the point of the work itself, so that it eventually “becomes interactive not with people but with its environment” (133). In a way, LeWitt’s concepts speak to this idea because the instructions are always adaptive to the environment that they live in.

But, as mentioned by Campbell, when interactive art is being constructed in a computer environment, where the interpreters are no longer human, the subtlety of art may be lost in translation because everything has to be precisely defined (134). Campbell brought in a different perspective by saying that rather than fitting an artistic process into a program, an interactive work should start with the program. This idea reminds me of a well-known phrase “the medium is the message” coined by Marshall McLuhan; the environment that the art lives in should also have a significance in its conceptualization and connotation.

Inspired by Campbell and LeWitt, I decided to not only make a replica of LeWitt’s Wall Drawing 396 but also make it responsive to the program. I realize that I need to create a custom shape in order to draw a star in p5.js, so I tried to understand beginShape() and endShape() from the reference page. I then found an example of a custom star function on p5.js, which then became the basis for my sketch. After trying to understand the features/functions that are used in the example, I built my own star function with 6 (later added in one more) parameters: x&y point, inside&outside radius, number of points, and color. Afterward, I called the function in draw and filled in their parameters respectively. I then thought about making them rotate according to the position of the mouse, so I added in transition and rotate with push & pop matrix to make sure that the shapes would rotate according to their respective centers. My sketch is linked here, and you can find more detailed documentation there.

Some questions I still have: 1. How to draw a star in code; I understand that a for loop can be used to make multiple points, but I am still confused about vertexes and the trigonometry involved. 2. I still don’t understand why I need to use translate() in order to make the stars rotate according to their own centers. 3. I was not able to set different rotate speeds for each star, it seems like they all just go with the highest rotate speed? Let me know your thoughts, thanks!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store