Author: Lujain Elmallah

For a long time creating art was a linear process, with a clear beginning and end points, they were made to be viewed and attract reactions from their target audience. This was until we introduced interactivity into works, since then many have adopted a more ‘cyclic’ approach where the beginning is set in stone and the journey to end is more adaptive and influenced by the viewer. But what is that interactivity that is capable of affecting the path of a work that much? Crawford defines true interactivity as not merely participation or response but as an endless, two-way cycle of listening, thinking, and speaking by both the user and the system. Both sides must look, process, and respond, influencing each other in some manner. Without this exchange, even if there is a significant input from the audience, the experience remains linear at its very core.

Now that I look back, I realize that creating interactive art is not just having buttons, choices, or answers, I realized that it’s about creating a system where it can actually respond to the user and have the user’s actions change the experience. The challenge is to do that two-way effect without breaking the cohesiveness of the story or the aesthetic, similar to the challenge that was discussed last reading about randomness.  Balancing things such as interactivity and randomness while maintaining a logical flow that the user can follow is quiet a difficult task. To me, this idea holds possibility for my own work, the user is not anymore a passive receiver but an active participant whose decisions and actions construct a unique experience each time. After reading the text, in my future works I’d like to now create a conversation between the user and the works where they both respond to each other’s cues creating a work that it truly interactive.

Concept & Inspiration

When I first started working on this project, the Wi-Fi didn’t work and I was welcomed with the familiar Google Dinosaur game on my screen that appears when there is no connection. That simple little dinosaur planted the idea in my mind for a playful take, a prisoner committing an escape through a pixelated desert. The prisoner is guided by the player as he jumps over cacti with rolling tumbleweeds in the background adding to the atmosphere as he attempts to outrun the inevitable collision that make the game end. I aimed to add some gamification to the work, so it is interactive in a way that directly affects the narrative, the user decides whether the prisoner escapes or not. The desert is dramatized with gradient skies giving it depth and atmosphere without breaking up gameplay. To make the character interesting and match the aesthetic of the original game, I added a pixelated body, clothing, and even simple facial features, so every dodge and every jump feels dynamic and personal. In retrospect on the project, I enjoyed taking a fundamental, well-known mechanic and making it something more story-based and visual. My objective was to make the user more in control of the narrative compared to my previous work, making each playthrough a lighthearted and engaging choice-based experience.

Code that I am Proud of

display() {
    rectMode(CENTER);
    noStroke();

    //Legs
    fill(255, 120, 0);
    rect(this.x - 10, this.y - this.legHeight / 2, this.legWidth, this.legHeight); //left leg
    rect(this.x + 10, this.y - this.legHeight / 2, this.legWidth, this.legHeight); //right leg

    //Feet
    fill(0);
    rect(this.x - 10, this.y, this.legWidth + 2, 5); //left foot
    rect(this.x + 10, this.y, this.legWidth + 2, 5); //right foot

    //Body (torso)
    fill(255, 120, 0);
    rect(this.x, this.y - this.legHeight - this.bodyHeight / 2, this.bodyWidth, this.bodyHeight); //torso

    //Arms
    fill(255, 120, 0);
    rect(this.x - this.bodyWidth / 2 - this.armWidth / 2, this.y - this.legHeight - this.bodyHeight / 2, this.armWidth, this.armHeight); //left arm
    rect(this.x + this.bodyWidth / 2 + this.armWidth / 2, this.y - this.legHeight - this.bodyHeight / 2, this.armWidth, this.armHeight); //right arm

    //Head
    fill(255, 220, 180);
    rect(this.x, this.y - this.legHeight - this.bodyHeight - 15, 20, 20); //pixel head

    //Prisoner beanie
    fill(255, 140, 0);
    rect(this.x, this.y - this.legHeight - this.bodyHeight - 25, 20, 8);//beanie band
    rect(this.x, this.y - this.legHeight - this.bodyHeight - 30, 16, 5);//top of beanie

    //Facial features
    fill(0); //eyes
    rect(this.x - 5, this.y - this.legHeight - this.bodyHeight - 20, 3, 3); //left eye
    rect(this.x + 5, this.y - this.legHeight - this.bodyHeight - 20, 3, 3); //right eye

    fill(150, 0, 0); //mouth
    rect(this.x, this.y - this.legHeight - this.bodyHeight - 10, 6, 2); //simple mouth
  }
}

With a goal of focusing more on the artistic and creative aspects of this assignment, I’d say I am most proud of the design of the prisoner for the game. I wanted to go for a more pixilated look to match the aesthetic of the original game and gave the design of the prisoner a lot of focus. I am proud of this code merging visual creativity with functional interactivity, the arms, legs, beanie, facial features were all carefully positioned to give personality, while integrating the goal look of the character. Through this code I learnt the importance of the visuals in determining the feel of the game.

Embedded Sketch

Reflection

The main challenge I ran into while creating this game I’d say was balancing the focus on visual design as well as on the functional side of the work. For example, designing the prisoner to be pixelated yet still have recognizable features required careful positioning. So I had to constantly test and adjust the sizes so that the character didn’t interfere with collision detection. However, at the same time it was a learning experience where I went more in depth into the possibilities that come with this program. Next time I’d like to focus more on creating a more detailed visual world where more elements are integrated to create an immersive work.

Randomness in computer art is integrating a level of unpredictability into a work, creating a piece that is ever changing and transforming. Casey Reas’ presentation on introducing randomness to creative coding pieces, opened my eyes to the value such an approach can add to a work. Coding can seem like a rigid mechanical process that is deprived of nature, however, with an added touch of randomness we can emulate the natural phenomenon of chance. One of the things that one would notice if they observed their surroundings is the existence of chance and randomness everywhere. You can never predict when you’ll bump into a childhood friends years later or when a leaf will fall off a tree as you pass by it. These uncertainties that we face in our everyday life are what define our everyday experiences, they are not mechanical and precise. Bringing that same sense of unpredictability into our code to some extent gives a piece life, where the viewer cannot tell what the work’s next move will be.

Randomness comes with  countless merits, but it does raise the question of where do we draw the line. How much randomness before we define a piece as chaos? Reas’ claim that a strong foundational code that randomness is to be built on is essential and is a factor that I do believe is important to integrate into works, though I do also believe that relying on chance to a larger extent is not creating disorder and taking away from the work’s value. Chaos and spectacle have always been an essential part of art, and an integration of randomness to the extent that it leaves the viewer confused to me is not necessarily a bad thing. It could leave the audience with an overwhelming feeling, which is a chance to explore a certain intersection of art where appreciation and discomfort come together. Digital and algorithmic art is a relatively new practice, and shying away from too much randomness in fear of chaos might hold us back from exploring this type of art to it’s full potential. In some cases foregoing the foundational code that the randomness is built on could result in intriguing work. Art is about experimentation and risk and unless we let go of order we will never reach an understanding of what that really means.

Portrait Concept

For my self-portrait, I decided to create a cartoon-esque representation of myself, with a background that evokes the feeling of entering another world in the viewer. The expanding circles in the background represent a portal, implying that the portrait is a view into another world. Aiming to give a sense of exploration, I wanted to add layers of interaction where the eyes follow the viewer’s cursor. The wandering of the eyes with the viewer are there to represent the curiosity of the character as they enter another world exploring their surroundings along with the viewer’s cursor. Combining the concept of dimensional portals, exaggerated cartoon features, and interactivity expresses my interest in making a portrait that feels alive and dynamic. The work aims to combine a static drawing with an experience where viewer becomes part of the artwork with their movement.

Code that I am Proud of  

//necklace
  fill('white');
  let necklace = [
    [210, 415], [220, 425], [230, 434], [245, 437],
    [260, 437], [275, 437], [289, 428], [294, 415]
  ];
  for (let bead of necklace) circle(bead[0], bead[1], 10);

  fill(125, mouseX, mouseY);
  let innerBeads = [
    [215, 420], [225, 430], [237, 437], [253, 437],
    [267, 437], [283, 434], [292, 423]
  ];
  for (let bead of innerBeads) circle(bead[0], bead[1], 10);

One of my priorities while coding is to keep my code clear and concise, as it ensures that later if there are any edits to be made I can easily identify the exact area that I need to modify and edit it with ease. While creating the circles for the necklace at the start I was creating one by one using the circle() function, which was taking a lot of time and was starting to look pretty repetitive, especially with all of them sharing the same size. At the start I decided to create a size variable to avoid having to change the size in every line if I wanted to change it. But then I realized that I was still repeating the circle() function, so I decided to create an array of the coordinates of each bead and creating a loop to place a circle in each of them. The resulting code was what I am particularly proud of off due to its efficiency and clarity.

Self-Portrait

Reflection

As my focus for this assignment was to get comfortable with the use of code for the purpose of drawing, I spent majority of my time experimenting with functions and made different stylistic choices without focusing too much on the concept and the story behind the work. For future assignments and projects I’d like to look into how to use the code to deliver a message or a story, which in turn would lead to me adding more interactivity and complexity to the piece as there would be a more clear path I am following while working. In particularly, I’d like to focus on adding an element of animation to a piece to give it life and create a more engaging feel to it.