Week 2 – Loops

Concept

In this assignment, I initially created a work where random faces of different sizes and colors are displayed, as shown below.

However, after watching Casey Reas’ talk in Eyeo 2012, I challenged myself to mimic his style of digital artwork by using more simple objects to give somewhat abstract feeling to my audience.

So, I made a rotating square with circles of random coordinates. I wanted to create four different squares to rotate synchronously to make the four squares to form one large rotating square.

Demo

 

Code Highlight

let angle = 0;
let speed = 0.01;
let centerX = 200; 
let centerY = 200;  
...
//move the center of grid to (0,0) and top-left to (-200,-200) with top-right of (200,200)
  translate(centerX, centerY);
  rotate(angle); // Rotate the entire canvas
  angle += speed;

I am most proud of moving the center of grid to (0,0) to make it easier to code as I always found it hard to understand x- and y- coordinates system of p5.js. In addition, I made the objects rotate continuously for better visual aesthetics.

Reflection and Possible Improvements

I wanted to create an art as a result of some random values or outcomes of the code. Even though the circles have random coordinates, I initially wanted to create an entire artwork to be of a random result: to display a different outcome after each run. However, I could not be creative enough to make such imagination come true.

Moreover, my work would be more visually aesthetic if there are more shapes or colors; maybe, I could have made the shapes and colors to be randomly generated.

Reading Reflection – Week #2

I have had hard time really grasping what interactive media really means and what is expected in this class. Coming more from programming background, I have found myself struggling to be creative when completing assignments and working in class. As I have never challenged myself to think in realm of art, I needed to practice thinking like an artist and use my imagination in ways that are original : which is not usually the case when programming. When programming, there are very specific rules and guidelines; furthermore, there are limits to where I can be innovative. I need to use correct syntax, open brackets and close brackets in the right places for loops, and can never forget to put semi-colons after each lines of code. However, after watching Casey Reas’ speech in Eyeo 2012, I could understanding how art can be produced with the help of technology: more specifically how art can be created through coding.

Generating random numbers or patterns is one of the simplest concept in coding, and Reas discusses how such concept may create complex visual systems. It is intuitive for programmers to associate the word ‘random’ as chaos as they normally do not want random results or values to occur by their codes. However, Reas’ points on the relationship between systemic autonomy and artworks opened my eyes to a completely different perspective: persuading me to consider random outcome of code to be a form of art, in a sense. Seeing digital artworks presented by Reas during his presentation, I reflected on my programming journey and thought the amount of random outputs I got while learning how to code may have turned into an art piece!

Even though randomness in code and use of technology may be a medium to create art, I find Reas to be advocating the role of technology in art too much as he does not discuss art in forms of paintings or sculptures. He only talks about digital art forms, which might make painters or those who create more traditional forms of art uncomfortable. It occurs to me that if art can be created digitally with the help of machine learning and technological advancement, then there would be less opportunities for man-made arts as it is cost-effective and less time-consuming. Thus, I believe technological approach to art has to be made very carefully as it may not only affect the definition of art, but also have impacts on artists both socially and economically.

In addition, if art is made by random outcomes and does not show the same visualization consistently, I believe it is hard to be defined as ‘art’. Artists use specific colors, stroke their brushes in specific ways to match their needs, and pick specific apparatus to make their imagination come true, but Reas’ examples of art defies the traditional concept of art in all ways possible.

It is indeed remarkable how technology can be used to create art, but I think the creation of art cannot be relied entirely on randomness and should reflect more on the purpose of artists.

Week 1 – Self-portrait

Concept

In my self-portrait, I wanted to take a different approach and portray myself as who I want to be rather than who I am in real life. Since young, I have read numerous comics and enjoyed watching animated movies: my favorite being “Zootopia”.  Thus, I imagined myself being in the movie, and I call him : Mr. preachy cow! He gives motivation to those who may be having a bad day and tries to make everyone’s day better!

In order to do so, I needed to implement anthropomorphism and try to five Mr. preachy cow some human characteristics such as wearing a suit or being able to communicate in human languages.

I chose to use circles as my primary medium of drawing as it is the most friendly shapes out of all as there are no edges: representing Mr preachy cow’s inclusive personality. Also, I wanted to change colors of his facial features and the background to show his ability to embrace all cultures and diversity.

Demo

Code Highlight

function checkRepeat(arrayColor, colorCheck){ 
  //checking whether colors are repeating by deleting already assigned color values from the array
   for(let i=0;i<arrayColor.length;i++){
      if(arrayColor[i]==(colorCheck)) {
            arrayColor.splice(i,1);
      }
}
}
function doubleClicked() { //double click function to open a new page
 window.open('https://www.pinterest.com/hibluchic/inspirational-quotes/'); //opening a pinterest page full of inspirational quotes
}
function mouseClicked() { //mouse click function to generate random moticational words
    colorRepeatCheck = '';
    randomColorCheck = [];
    //inserting all the color values to the array that would be used to generate random color values 
     for(let i=0;i<randomColor.length;i++){
      append(randomColorCheck,randomColor[i]);

    }
    sentenceDisplay = random(motivationalWords); //generating random text value from the array to display when clicked
  
    backgroundColor = random(randomColorCheck);  //generating random color value from the array to change the background color when clicked
    checkRepeat(randomColorCheck,backgroundColor); //deleting the color of the background from the array to prevent being repeated

    faceColor = random(randomColorCheck); //generating random color value from the array to change the face color when clicked
    checkRepeat(randomColorCheck,faceColor); //deleting the color of the face from the array to prevent being repeated
  
    sclerColor = random(randomColorCheck); //generating random color value from the array to change the scler color when clicked
    checkRepeat(randomColorCheck,sclerColor); //deleting the color of the scler from the array to prevent being repeated

    irisColor = random(randomColorCheck);  //generating random color value from the array to change the iris color when clicked
    checkRepeat(randomColorCheck,irisColor); //deleting the color of the iris from the array to prevent being repeated

    eyeBrowColor = random(randomColorCheck); //generating random color value from the array to change the eye brow color when clicked
    checkRepeat(randomColorCheck,eyeBrowColor); //deleting the color of the eye brow from the array to prevent being repeated
  
    mouthColor = random(randomColorCheck); //generating random color value from the array to change the mouth color when clicked
    checkRepeat(randomColorCheck,mouthColor); //deleting the color of the mouth from the array to prevent being repeated

}

I am most proud of creating my own function to prevent the colors to repeat when changing. I purposefully made such function to avoid Mr. preachy cow to have the same colors for all his facial features : including his background. Even though the colors are generated randomly when mouse is clicked, there is still a possibility for the colors to be repeated; so I have implemented a function to prevent such event from happening.

Moreover, I made Mr. Preachy Cow to say motivational words when clicked and lead the visitor to a Pinterest page full of inspirational quotes as he is “Mr. Preachy Cow” after all!

Reflection and Possible Improvements

Even though it was fun making my own “Mr. Preachy Cow”, it took me a lot of time getting used to the x- and y-coordinates of the p5.js when drawing as I was not used to the coordinate system. Some of the shapes drawn on the self-portrait are not exactly symmetric and there are rough edges on his ears which could be better polished.

In addition, I think there could be more fun elements used when displaying the texts by making the texts move in certain ways so the user would have more fun with Mr. Preachy Cow.

Despite few regrets and possible improvements I have on my first assignment, I am happy to learn about basics of interactive media and looking forward to develop my learning to create more refined works in the future.