Author: Ziya Vhora

Week 4 – Generative Text

CONCEPT:

I recently re-read one of my favorite Shakespearean plays, The Merchant of Venice. When it came time to start my assignment, I knew I wanted to create something related to Shakespeare. I began by searching for “Shakespeare datasets” online and clicked on the first link I found on Kraggle.  The vast amount of data available was overwhelming, and I realized I could approach the project in many ways. After experimenting with different methods for generating text, I ultimately decided to focus on extracting character lines. A user selects a play, a character from that specific play, and then a line at random is generated.

CODING:

I did find this assignment challenging, as working with APIs is something I am not familiar with. Funnily enough, I spent time focusing over a silly mistake, wondering why my code was not working – it was because I had forgotten to upload the actual file into p5.js. 

I was unsure on how to get started, therefore I took to p5.js – Table for aid. From there, I learnt how to upload my data.However, I faced several issues in terms of uploading the file because it was colossally over the file size limit, so I had to spend a lot of time cutting 3 to 4 plays out of the file in order for it to be of a decent file size.

However, during my coding, I came across an issue. The character lists were not showing up on my dropdown list. After several attempts of testing and Youtube videos, I took to ChatGPT to give me help. It then told me although I was populating the ‘play’ dropdown in the setup() function,  I wasn’t updating the character dropdown when a play is selected. To fix this, I needed to add an event listener to the playSelect dropdown that will update the characterSelect dropdown whenever a new play is chosen. I asked it to explain the logic of the task at hand and I was finally able to understand. I created a new function called updatecharacterselect() — which basically  dynamically updates the character dropdown menu.

 

function generateRandomLine() {
  selectedCharacter = characterSelect.value();
  if (selectedPlayName && selectedCharacter && characterDialogues[selectedPlayName][selectedCharacter]) {
    let lines = characterDialogues[selectedPlayName][selectedCharacter];
    randomLine = random(lines);
  }
}

REFLECTION.

Perhaps, if I were able to expand on this, then I would add further levels of interactivity and make it a bit more aesthetically pleasing.

This reading made me realize just how imperative the ‘human’ aspect of things comes into play when it comes to interactive design. As I reflected on the chapter, I found myself connecting the concepts to my own experiences with technology and design.

The author’s emphasis on discoverability and understanding resonated with me deeply. I’ve often purchased products and I couldn’t figure out what to actually do or how it’s done without reading the instructions manual first. It made me appreciate the importance of intuitive design that communicates its functionality without requiring extensive instructions or manuals.

I found the writer’s descriptions of engineers and their thought process during production to be quite intriguing, as I had not thought of things that way before. The chapter delves into the failings of machines due to the way certain engineers think – logically. In terms of failings, I am referring to the I learned that they often assume that the audience of their product or project will think like them or read the instruction manual. This is where they fall short. I came to understand that they struggle to grasp the idea that we all think so uniquely, and therefore, designs need to be adapted into a language that can be universal yet enjoyable enough to use. Which made me understand that this failing bleeds into the actual production of the gadgets, hence why it is not received the way they hand in mind.

As I came to learn of these concepts, I found myself looking at the designed world around me with new eyes. I started noticing how certain designs naturally suggest their use, while others require explicit instructions. This awareness has changed how I interact with and evaluate the design of everyday objects and digital interfaces. For example, the doors in D2 are just abysmal. Although they have a sensor, where if you wave at it then it opens the doors – it doesn’t always work, and I actually have to manually open the door like a jester. Although I am unsure if this fault is due to some technical thing, or a lapse in judgment, it is a problem that has existed since freshman year.

This new perspective isn’t just changing how I look at things; it’s changing how I create them too. Whether I’m putting together a presentation or organizing my workspace, I’m now thinking about how to make things clear and intuitive for others. It’s like I’ve been given a new set of glasses to see the world of design through.

CONCEPT:

The idea came to me when I was listening to one of my favourite songs — David Bowie’s Starman (2012 Remastered version of course). The song is essentially about an alien, stuck in space, trying to find a community. One of the lyrics particularly inspired me to create the final vision –”There’s a starman waiting in the sky”. In terms of the project, I then imagined the screen to display bright, twinkling stars as spaceships explore the universe. Initially, I thought to just include one spaceship, but then, upon deeper reflection, I thought it would be a nice challenge for me to understand how I can generate different spaceships without adding any sort of manual commands. The alien (Starman), is us all — we’re navigating through the domain that is our life, which is reflected by the different coloured spaceships, symbolising different aliens trying to fit in. Each spaceship, represented in different colours, symbolises various aliens striving to fit into the cosmos, reflecting our own journeys through life. The different backgrounds depicts the unique journey each alien has — the stars are automatically rearranged when the user clicks the screen, to explore the journey of another alien in a spaceship.

 

VISION:

It was quite a challenge for me to be able to exactly visualise what it is I want to execute. Therefore, I came up with a simple, initial sketch to sort of understand what is supposed to be on my canvas, and perhaps what is supposed to happen. The sketch showcases two things namely: the background, and the starships. In this drawing, I drew two spaceships because at the time I had thought of displaying multiple spaceships, stationary.  However, as I began to implement the vision, I came to understand that it would look plain and it would block  the focus of the piece: the twinkling stars.

IMPLEMENTATION:

I decided to not store the starships in an array, unlike with the stars, because it did not make sense to me. The spaceships would appear and disappear one click at a time, so there was no actual reason for it to be stored in any sort of way. 

I focused on creating the spaceship first, as I wanted to see if I could make them fly. I first began by creating the class, and then manually generating them, e.g. spaceship1.show(), spaceship2.show(), for testing purposes. The spaceship was mreo tricky than generating the background for me, as I sort of struggled to understand how I can make them generate the spaceship at a certain set of coordinates without it going beyond the boundaries of the canvas. However, I then came to the realization that I can change the parameters in the this.x, and this,y, value so that they appear within the boundary, as the parameters I had them at originally were (0,600)

regenerate() {
  
  // to make the space ships a bit unqiue
  this.w = random(70, 100); 
  this.h = random(50, 70);  
  // instantiates ship at random pos
  this.x = random(50, 500);
  this.y = random(50,500); 
  
  //unqiue colours
  this.color1 = color(random(255), random(255), random(255)); //top col
  this.color2 = color(random(255), random(255), random(255)); //bottom col
}

In terms of the stars, I believe I am quite proud of my code, especially as the result of the background is quite aesthetic. I decided to create an array, so that the stars are stored into it as they are spawned, so that it is easier for them to be displayed in the draw function. I am mostly happy with my twinkle function, as I had thought long and hard about how to make it seem like it is getting brighter or dimmer. However, at the time, I was also experimenting with the opacity of the stars ellipse, to see how bright they should appear on the canvas — which then led me to the realisation that I can quite literally increase or decrease the opacity to give it the desired visual effect.

 
twinkle() {
  this.opacityChange = random(5);
  this.opacity *= this.opacityChange;
  
  // check if opacity is set below
  if (this.opacity < 50) {
    this.opacity = 50;
    this.opacityChange *= this.opacity;      
  }
  
  // check if opacity goes above
  if (this.opacity > 255) {
    this.opacity = 255;
    this.opacityChange = this.opacity;

  }
}

    

REFLECTION: 

If I were given the opportunity to further this piece, perhaps I would add another level of interactivity to the spaceships. Maybe I would make them shoot different coloured beams in any direction I am pointing at, storing them into an array, implement sound, or even some sort of rotation to add another pop of visual activity.

Crawford’s paper was remarkable in re-shaping my understanding of what makes something interactive, and how to approach the definition of the very term

At first, I also agreed with his statement about seeing as a conversation between two entities. This reminded me of one of my literature classes, where we discussed reading a paper is like the author trying to have a conversation with us. However, as I am writing this, and after reading the paper, perhaps I was mistaken to agree with this argument, as a conversation requires some degree of back-and-forth, which is something that papers and books do not do. Unless you consider it from a technical sense – if you are reading a book from a Kindle, where there are tons of buttons and opportunities to interact with the book e.g You can highlight any word, and it will look up the definition for you. That is seen as interactive, but reading from a physical paper does not allow users to have that sort of reaction.

This prompted me to question – what is the distinction between a reaction and an interaction? Which the author conveniently brings up at the right time. He brings up the situation of a tree branch falling, and the way he responds – that response does not prompt the fallen branch to suddenly get up and start flying around – it is still still. This example helped me to understand the difference. Once the user reacts to the prompt or situation, the other entity must react and continue as per the user’s actions and word.

What also deepened my understanding of interactivity is Crawford’s example of the Nintendo Fridges. He argues earlier that interactivity should be entertainment, but there are nuances to this statement. He explains that though adults may find a fridge to be mundane, children would like, as they can “play” with its lights by closing and opening the door. He explains that the fridge is still interactive, albeit uniquely. I learnt that interactivity has different grades: High, moderate, low, and none. An item like a fridge has low interactivity, but reading from a Kindle has a high interactivity. I found Cicero’s statement on the notion of interactivity very appealing. I discovered the notion of “imitation” in the interactive sense — I learnt that reading is an activity that imitate the idea of interactivity — as our emotional capacity is exercised there, thus alluding to the idea of interactivity, it not truly interactive. Additionally, Cicero believes “Fuller nourishment comes from the living voice.” – Another (biological) entity provides you with the intimacy that deepens your correspondences and actions with someone or something. Which made me think about the difference between interactive technical projects, and interactive human projects.

When Crawford moves on to performance, it helped me to understand how important the role of an audience is. I discovered that the larger the audience might be, the more challenging it might be to interact with them. In the theatrical world, it takes a large cast to be able to execute this – as you would have to break the fourth wall in order to deem a play as interactive. This instantly reminded me of interactive still lives. It is when an actor or the cast pose as part of an environment, allowing the audience to manipulate the scenery using their body. For example, if the scenery is a forest, then one actor may pose as a tree — and the audience ‘walks’ through this forest (keeping in mind this is a still life therefore the actors don’t move), and they play around with their environment. The audience would shape scenery by moving around the arms of an actor to make the tree appear wider, or perhaps, making them lay on the ground to show that is has fallen. That is an example of interactivity in performance, which Crawford argues barely exist.

He also argues at the end that “good interactive design integrates form with function”, which I sort of struggled to grasp as I did not understand what he exactly meant by form as it was sort of slapped on at the end, but I assume that he means that those who are in charge of interactivity must step out of convention to make a good interactive design.

REFLECTION

Casey Reas’ talk on randomness & chance revolutionized my own understanding of how art is composed, and what defines it as art. Before watching this video, I held a rigid view that randomness and art were mutually exclusive, believing that every artistic decision was deliberate, therefore, randomness is not possible. However, Reas’ discussion used the example of Dada’s artwork — which made me reflect on his time period. I am familiar with Dada, and his works. Like Reas mentioned, Dada shows his approach was to challenge the rational, as a reflection of the collapsing societies and turmoil post World War I.

He forges a link to art and the use of technology, by discussing the renowned John Cage. He was revolutionary in the field of Music Technology, as he was one of the first producers to use technology to compose music – utilizing the element of randomness  to determine pitch and length. As someone that has heard of John Cage, and is familiar with parts of his work,  I was surprised to see him featured here, as I had not considered his Book Of Music as ‘art’ — I had seen it as a strict use of splicing, impressing his audience of the time with the tools he was able to fine tune and take advantage of. Therefore, this got me to think, what kind of music did I consider as art? And what kind of technology makes art?

I also found Reas’ discussion on his concert compositions quite profound. He reveals how he found inspiration from previous pieces to make his composition, yet included an algorithm to sort of generate a randomness, limited by his requirement of the shapes being 90 degrees. This discussion has led me to question my own methods on inculcating this philosophy of randomness when I am making artworks and projects, and how I can draw a so-called ‘balance’ between the idea of randomness and other deliberate pieces.

CONCEPT:

While walking across campus, I saw children blowing bubbles with their families. This simple, joyful scene transported me back to my own childhood, when my brother and I would spend hours blowing bubbles in the park. While I was in front of the screen, I thought about the patterns I recently saw during the week — and then I was reminded of the bubbles. I was then propelled this wave of nostalgia, inspiring me to incorporate the playful essence of bubbles into my piece. 

 

CODE:

In terms of coding, I was particularly challenged by the randomness factor. I was unsure of how to produce bubbles at random places, sizes, and even colours. Therefore, I looked for assistance on the p5.js website.: https://p5js.org/reference/p5/random/ to understand the syntax of the ‘random’ feature. After relentless experimenting, I was able to randomise the selection of colours, which I had little idea on how to approach. I was particularly proud of it. In terms of design, I removed the stroke to add some sort aesthetic to the bubbles, and I changed the background to a light blue, to resemble the sky.

 

for (let i = 0; i < 20; i++ ){
  
  let x = random(width);
  let y = random(height);
  let r = random (10, 50);
  
  fill(random(250), random(250), random(250))
  
  noStroke()
  
  ellipse(x,y,r)
  

REFLECTION:

This assignment really challenged what my understanding of art is, and also made me realise how often we are surrounded by ‘art’ – no matter how subtle, quotidian, or ordinary it may be. Perhaps, if I were given the opportunity to further it, I may add some user interactivity such as popping the bubble and slowing down the speed.

WORK:

 

My Concept:

As the first assignment, I thought to keep things simple but also to add some personality into it. The background is a beach. One thing about me is that I absolutely cannot tolerate the beach – it is one of those outings I just cannot stand and enjoy. So as I started to create this piece, I thought to implement that (which is why I look so unhappy haha)

In terms of code, I decided to include some user interactivity. If you do click on me, then I end up blushing for as long as you press on the mouse.  I was quite happy with this part of the code because it took me some time to decide on what particular user interactivity I wanted.

// BLUSH
if (mouseIsPressed) {
  fill('pink');
  ellipse(460, 400, 40, 40); // blush on the right cheek
  ellipse(300, 400, 40, 40); // blush on the left cheek
}

Reflection:

This first assignment was quite an enjoyable one, because I liked getting the opportunity make something both creative and having a technical element into it. I suppose the most time consuming thing was editing the circles for the eyes and pupils, deciding where exactly they go and their sizes. I think this assignment helped me to have a solid understanding in how p5.js operates. I had hit a wall when I was drawing the hair on the character. It just looked awkward, especially as there was none present at the forehead, hence I decided to give her a fringe. If I had another opportunity, perhaps I would elevate the work by adding facial expressions and adding some text.