Month: February 2024

For this assignment, I went back to the basics and utilized the main coding concepts we learned in class last week to create a simple and EXTREMELY plain piece that showcased my understanding of generative text using p5js. I used a poem from Mahmoud Darwish, a popular poet from Palestine, as text for my sketch. The main concept of my sketch was to create a simple piece of art that displays his poem using generative text that includes elements of interactivity, while simultaneously prioritizing simplicity and minimalism. This can be seen through the simple text font and color used in the sketch to display the words of the poem. 

The process of creating this sketch involved a lot of trying to understand the coding concepts that come with generative text. This was because I was confused about the concepts we learned that week. Through practicing and studying the material once more I was able to better understand the technicalities behind generative text and how to successfully implement it in my sketch. With that being said, I used this assignment as a way to integrate all the other things we learned in class such as the ‘mousePressed’ command and different ways to position elements within my sketch. Side note, pressing the mouse allows for users to see the whole poem, if they wished to view it in the non-generative text form. Back to my sketch, implementing past material with new material helped me better conceptualize how these different elements within p5js are able to compliment one another, which in a sense enriches the flow and user experience of the sketch. 

Another side note, I used functions but decided to keep them on the main Javascript file instead of a separate file due to the fact that it made it easier for me to organize the code. Anyway, back to the sketch coversation!

As I mentioned, I was struggling initially with understanding and implementing generative text concepts, which is why the parts I am most proud of are ones that relate to it: 

function drawWords(x, y) {
  // Splits the poem into words and removes any empty strings from the poem
  let wordGroup = poem.split(' ').filter(word => word.trim() !== "");

  // A random number from the array is selected as a starting word and ending word
  let firstWord = random(int(wordGroup.length));
  let lastWord = firstWord + random(2, 8);

  // Makes gold the color of the text
  fill('gold');
  
  // Displays the selected words from the poem at specified positions
  text(wordGroup.slice(firstWord, lastWord).join(' ').trim(), x, y);
}

My Final Sketch: 

In terms of improvements, I think I would have loved it if I was able to have made my art more complex. Although not necessary, I feel like using generative text to create something more complex would have helped add more effects and style to the piece as a whole. By doing so, it would have made my sketch more dynamic and potentially more appealing to users. Overall, this sketch has made me want to practice using generative text in my future projects as I want to develop my skill in it and add more complexity, effect, and different forms of user interface design to my sketch. I really enjoyed learning and experimenting with generative text as I was able to combine a poem from one of my favorite poets to create text that is creative and sometimes even humorous.

One of the aspects that piqued my interest in the reading was the paradox of technology. It is without a doubt that things tend to get replaced as newer and better technology emerges. As the complexity increases alongside it, I believe there is certain fragility that comes with as well. In the case of watches, as it evolves to maximize efficiency there could be certain capabilities that are sacrificed in order to achieve that. These sacrifices are what causes these fragilities. This leads to the question of whether there should be balance between them, as this could lead to lower efficiency. I think that there are many examples of products that is made with this in mind, but they are not particularly regarded as better in this society’s standards.

In regards to design, I often noticed that when something has a good design, it is rarely notices, but if it has a bad design, the annoyances are highlighted much easily. When the design is good, there seems to be a certain smoothness within the system, but if the design is bad, certain redundancy or annoyances are to be found. With a good conceptual model, the communication between the design and the user becomes less confusing. With complex operating systems like Microsoft, it contains numerous manuals but when there are certain errors, troubleshooting it becomes more and more vague in some cases therefore requiring additional help, which I believe is large but inevitable design flaw.

The concept for this week’s assignment, I wanted to make a hangman word game. The code consists of helper functions such as keyPressed, startNewGame, checkGuess etc. Firstly, it creates a number of empty dashes  based on the number of letters in the chosen word. As a letter is pressed, dashes are changed to a letter if the letter is in the word, and the body of the hangman is drawn if it is not. At the end of the game, it checks if the user guessed the word correctly, and shows corresponding texts.

Further on, I would like to add randomized word generation or read from csv or text file large pool of words.

code:

let word;
let guessedWord;
let maxAttempts = 6
let attemptsLeft = maxAttempts;
let guessedLetters = [];

function setup() {
  createCanvas(400, 400);
  textAlign(CENTER, CENTER);
  startNewGame();
}

function draw() {
  background(220);

  // Display hangman
  drawHangman();

  // Display guessed word
  textSize(32);
  text(guessedWord.join(' '), width / 2, height / 2 - 20);

  // Display attempts left
  textSize(16);
  text(`Attempts left: ${attemptsLeft}`, width / 2, height - 20);

  // Display guessed letters
  text(`Guessed letters: ${guessedLetters.join(', ')}`, width / 2, height - 40);

  // Check for game over
  if (attemptsLeft === 0 || guessedWord.indexOf('_') === -1) {
    gameOver();
  }
}

function keyPressed() {
  if (keyCode === ENTER) {
    startNewGame();
  } else if (key >= 'a' && key <= 'z' && !guessedLetters.includes(key)) {
    checkGuess(key);
  }
}

function startNewGame() {
  // List of possible words
  let words = ["apple", "banana", "simulation", "problems", "reaction"];

  // Choose a random word
  word = random(words).split('');

  // Initialize guessedWord with underscores
  guessedWord = Array(word.length).fill('_');

  // Reset attempts
  attemptsLeft = maxAttempts;

  // Reset guessed letters
  guessedLetters = [];
}

function checkGuess(letter) {
  // Add guessed letter to the list
  guessedLetters.push(letter);

  // Check if the letter is in the word
  let correctGuess = false;
  for (let i = 0; i < word.length; i++) {
    if (word[i] === letter) {
      guessedWord[i] = letter;
      correctGuess = true;
    }
  }

  // Decrease attempts if the guess is incorrect
  if (!correctGuess) {
    attemptsLeft--;
  }
}

function drawHangman() {
  stroke(0);
  
  line(width / 2 - 100, height /2 - 80 ,width /2 - 50, height /2 -80)
  line(width / 2 - 75, height / 2 -80, width / 2 -75, height /2 - 180)
  line(width / 2 -75, height / 2 - 180, width / 2, height / 2 - 180)
  line(width / 2, height / 2 - 180, width / 2, height / 2- 160)
  
  // Head
  if (attemptsLeft < maxAttempts) {
    ellipse(width / 2, height / 4 - 50, 20, 20)
  }

  // Body
  if (attemptsLeft < maxAttempts - 1) {
    line(width / 2, height / 4 - 40, width / 2, height / 2 - 80);
  }

  // Left arm
  if (attemptsLeft < maxAttempts - 2) {
    line(width / 2, height / 4 -30, width / 2 - 20, height / 4-10 );
  }

  // Right arm
  if (attemptsLeft < maxAttempts - 3) {
    line(width / 2, height / 4 -30, width / 2 + 20, height / 4 -10);
  }

  // Left leg
  if (attemptsLeft < maxAttempts - 4) {
    line(width / 2, height / 2 - 80, width / 2 - 20, height / 2 -60);
  }

  // Right leg
  if (attemptsLeft < maxAttempts - 5) {
    line(width / 2, height / 2 -80, width / 2 + 20, height / 2 -60);
  }
}

function gameOver() {
  // Display game over message
  textSize(16);
  if (guessedWord.indexOf('_') === -1) {
    text("You guessed the word!", width / 2, height / 2 + 60);
  } else {
    text("Game over! The word was " + word.join(''), width / 2, height / 2 + 60);
  }

  // Display new game prompt
  textSize(16);
  text("Press ENTER for a new game", width / 2, height/ 2 + 100);
}

the game:

Concept:

As soon as the professor introduced us to the “poetry generator” and its code, I wanted to apply this concept and code that we learned in class. Then, I came up with the idea of creating a “random letter generator” by applying the concept and code we learned in class. To make it resemble a real letter, I downloaded some “letter background” templates from Canva and obtained some handwritten-style fonts from https://www.1001fonts.com/handwritten-fonts.html to make the letter appear as if it were genuinely written by someone. Additionally, to make my output more interesting, I allowed the background image and font to be randomly generated.

Highlight of the Code:

There are three functions I intentionally created: generateLetter(), getRandomWord(), and mouseClicked(). generateLetter() is responsible for generating the random content, getRandomWord() retrieves a random word from the string array based on the given index, and mouseClicked() generates “new letters” when the mouse is clicked.

I am proud of all the code I have written for this project. However, I am most proud of the code I created for the generateLetter() function.

//function to generate the letter content using random words
function generateLetter() {
  //constructing the letter content involving template literal and getRandomWord() function
  let letterContent = `Dear ${getRandomWord(RECIPIENT)},

I wanted to take a moment to ${getRandomWord(VERB)} my ${getRandomWord(ADJECTIVE)} ${getRandomWord(NOUN)} for your ${getRandomWord(NOUN)}.Your ${getRandomWord(NOUN)} means a lot to me, and I am truly ${getRandomWord(ADJECTIVE)} to have you in my life. From the ${getRandomWord(ADJECTIVE)} ${getRandomWord(NOUN)} we've shared to the ${getRandomWord(ADJECTIVE)} ${getRandomWord(NOUN)} we've ${getRandomWord(VERB)} together, every ${getRandomWord(NOUN)} with you is a ${getRandomWord(ADJECTIVE)} ${getRandomWord(NOUN)} I hold dear to my heart. As we continue on our journey together, I look forward to creating many more ${getRandomWord(ADJECTIVE)} memories with you.With ${getRandomWord(EMOTION)}, ${getRandomWord(EMOTION)}, and ${getRandomWord(EMOTION)}, I want to express how much you ${getRandomWord(VERB)} and ${getRandomWord(VERB)} to me. Wishing you ${getRandomWord(ADJECTIVE)} days ahead and ${getRandomWord(ADJECTIVE)} adventures.

With ${getRandomWord(EMOTION)},
${getRandomWord(NAME)}`;

  textAlign(LEFT); //aligning text to center
  text(letterContent, 130, 250, width - 250, height); //displaying the letter content on the canvas
}

The attached code above is what I created for the generateLetter() function. I am proud of this code primarily because of the utilization of template literals. Initially, I considered adopting the same approach as our professor did when generating poetry. However, I realized that my code would become too lengthy if I followed the exact same method. So, I began contemplating how to make my code more concise. Eventually, I came up with the idea of utilizing template literals in my code. Template literals, a feature in JavaScript, allow you to embed expressions within strings. This feature enabled me to directly integrate the getRandomWord() function into my base letter content, making my code more concise. Although I was aware of the existence of template literals before, I had never used them. Thus, it was initially challenging for me to figure out how to apply them and understand the syntax. I felt a sense of pride in myself for successfully incorporating template literals to make my code more concise.

Final Output:

**Click the mouse t0 randomly generate a new letter! 

Reflection:

Overall, I am very satisfied with my project. Although it was initially challenging for me to grasp the syntax of template literals, I thoroughly enjoyed working on this project. As for areas of improvement for next time, I believe adding animation where the letter’s content is being written or implementing a feature where the viewer can change particular words one by one when clicked would be intriguing.

The Design of Everyday Things” begins with an introduction to the basic ideas of excellent design and stresses the value of user-centered design. Norman talks on how the way that commonplace things and interfaces are designed can either help or hurt our ability to use them. He highlights how important it is to comprehend user experience and the psychology of how people interact with products in order to produce designs that are understandable and practical. The chapter frequently draws attention to typical design defects in commonplace items to show how bad design can cause user errors and irritation.

How does Norman distinguish between well-designed and poorly designed commonplace items?
Norman makes his distinctions based on user experience and usability: while poorly designed designs lead to irritation because of poor function communication, well-designed designs are intuitive and satisfy needs without misunderstanding. A poorly designed chair, on the other hand, could be visually beautiful but unpleasant. A well-designed chair, for instance, is solid and comfy, encouraging use.

What impact do affordances have on a product’s usability?
Affordances improve usability by indicating possible uses for an item. A door handle that allows for pulling instead of a flat plate implies pushing, assisting the user in an instinctive manner.

Examples of designs that are non-intuitive versus intuitive?
Similar to the swipe feature on a smartphone, intuitive design conforms to user expectations. Unintuitive design, such a complicated remote control, can cause confusion among users and have a detrimental impact on engagement.

How may design be improved by an understanding of user psychology?
It foresees user requirements, actions, and mistakes, resulting in more considerate and effective products. Designs that provide a greater variety of interactions are made possible by the knowledge that users do not always follow intended paths.

How should designers address mistakes made by users in their creations?
by foreseeing mistakes and reducing the likelihood and consequences of them. This improves user safety and experience by incorporating fail-safes, unambiguous feedback systems, and simple corrective pathways.

To finish I liked this quote from the reading-  “Experience is critical, for it determines how fondly people remember their interactions.”
Norman, Don. The Design of Everyday Things : Revised and Expanded Edition, Basic Books, 2013. ProQuest Ebook Central, http://ebookcentral.proquest.com/lib/nyulibrary-ebooks/detail.action?docID=1167019.
Created from nyulibrary-ebooks on 2024-02-17 12:55:08.

Idea and Inspiration:

I am really into cryptocurrency, especially Bitcoin. I am doing an internship in a crypto exchange. I always read price tendency graphs and wanted to create one of my own.

Sketch: 

Code that I am proud of: 

//  X axis- dates
let dates = btcTable.getColumn("Date");
let years = {};
for (let date of dates) {   // Iterate over each date
  let year = date.substring(0, 4); //Extract the year from the date
  years[year] = true; //ensures that the years object will only contain unique year values by the end of the loop.
}

let uniqueYears = Object.keys(years); //// Extract the keys (unique years) into an array
for (let i = 0; i < uniqueYears.length; i++) {
  // // Iterate over each unique year
  let x = map(i, 0, uniqueYears.length - 1, 50, width - 50); //// Map the year index to x-coordinate
  text(uniqueYears[i], x - 15, height - 35); //// Display the year as text at the calculated position

The first step in the procedure is to extract every date entry from a database (btcTable) that contains the prices of Bitcoin. Each date is represented by a string to indicate a particular day. Every date string in a loop is handled with the substring(0, 4) function to extract only the year part. Essentially separating the year (assuming a YYYY-MM-DD format) with this method is to take the first four characters from the date string. After that, the values of each of the extracted years are set to true and they are used as keys in an object called years. By ensuring that every year is only recorded once, this technique produces a collection of unique years, independent of the number of entries for that year in the dataset.

In the 2 sample code provided, we first utilize the year of each date as a key in an object named years. Next, we use the Object.keys(years) function to obtain an array of those distinct years.

Creating the years Object: We take the year (the first four characters of the date string) and use it as a key in an object called years when we loop over each date in our dataset. We give every key a value of true. As a result of JavaScript’s prohibition on duplicate keys, this step effectively eliminates any duplicate years, guaranteeing that each year appears only once in the years object.

Object.keys(years): Extracting Unique Years: Object.keys() is a JavaScript function that accepts an object as input and returns an array with all of the object’s keys, or property names.
The years object contains an array containing all of the keys, which is returned when we apply Object.keys() to it. The uniqueYears array that is produced now contains every unique year in our dataset, without any duplicates, because the keys are the unique years that we previously extracted.

Why It’s Done This Way: This method makes sure that, no matter how many data points we have for a given year, we only include that year once when we visualize the data (e.g., putting it on a graph). This ensures that every year is represented uniformly and without repetition.

Difficulties: 

I encountered so many difficulties…

First of all the data was not uploading correctly into P5. It was complicated to figure out why. Then I realized the thing that was causing the problem was the year formating. Initially was (1.feb 2022) then (1/2/2022) and finally I changed to 2022-02-1.

then I did not know how to portray a graph. I followed these steps from the P5 website — https://editor.p5js.org/pedbad/sketches/sbGhi7GwU

Then I didn’t know how to leave some margin ant the bottom  bottom of the canvas. I used this equation to help me with map(value, start1, stop1, start2, stop2) let y = map(price, 0, 60000, height – 50, 50);

Improvements: 

I would like to have more up-to-date data.