Category: S2026 – Aya

My Concept:
For this week’s assignment, I was interested in creating a generative text for something specific and engaging. I explored different ideas, such as movie recommendations, a recipe cookbook, and motivation cards, but then I realized I wanted to create something playful and useful, something that’s fun for the user and easy to benefit from. That’s when I came up with the idea of an arts and crafts guide, since it’s simple, enjoyable, and something many people could try, and I personally like it as well. I created a note-like arts and crafts guide that gives the user multiple random ideas they could experiment with, whether using paper, paint, or other materials. It has a stable template of familiar instructions but allows the user to explore many ideas by simply clicking, changing the materials, actions, and the craft they will end up with. My vision was a board with a note pad on it, where other notes get stuck on top, so I chose a pastel brown background to resemble a pin board and a yellow note pad for the text. I also made the text color and the pins on the top corners change each time, creating a more realistic effect of a new note being stuck on top of an older one.

Embedded Sketch:

A Code I’m proud of:
A piece of code I’m particularly proud of is using the split function to allow one position of my sentence to generate multiple options. This way, one material could have more than one possible action and craft. I used the | character in the CSV file to separate multiple choices within a single row, and then used it in the sketch when calling the variables into the sentence, allowing the program to select one option for each category.

CSV file:

paper, fold|cut|glue, flower|card|plane
cardboard, fold|cut|glue, box|poster|house
clay, mold|shape|paint, bowl|vase|sculpture
cloth, sew|stitch|cut, shirt|bag|scarf
yarn, knit|weave|stitch, scarf|blanket|bracelet

Sketch file:

// These read and call each material, action, and object  from the chosen row
  // The actions and objects are split since they have multiple options assigned in each row
  let material = singleRow[MATERIAL];
  let actions = split(singleRow[ACTIONS], "|");
  let objects = split(singleRow[OBJECTS], "|");

  // This allows only one action and object to be chosen randomly
  let action = random(actions);
  let object = random(objects);

Another part of the code I’m satisfied with is the fonts. I enjoyed applying what we learned in class to change the font of my text, which made it look much better. I was also able to include more than one font in the same sketch.

// Define font variables to store the different ones used
let myFont;
let myFont2;
let myFont3;

// This function loads all the files in the sketch before it generates, to ensure they appear
  myFont = loadFont("titlefont.ttf");
  myFont2 = loadFont("textfont1.ttf");
  myFont3 = loadFont("textfont2.ttf");

// Draw and adjust the title of the note pad
  fill("black");
  textSize(32);
  textFont(myFont);
  text("Arts and Crafts", 6, -50);

  // Draw and adjust the text of instructions
  fill(textColor);
  textSize(16);
  textFont(myFont2);
  textWrap(WORD);
  text(idea, -90, 20, 190);

  // Provide text instructions at the bottom of the frame
  fill("rgb(103,85,79)");
  textFont(myFont3);
  textSize(16);
  text("Click for another idea!", width / 2, height - 20);

A minor piece of code I initially struggled with was the rotation of the note. At first, the note moved too slowly and didn’t look like a realistic new note being placed. I then figured out that I needed to adjust the positioning and randomize the range of radians, which gave the note the movement I wanted.

// Tilt the note pad
  noteAngle = radians(random(-5, 5));

Reflection and ideas for future work or improvements:
Overall, I feel that I was able to apply what we have learned over the past four weeks while also exploring additional aspects to create my project, and I am satisfied with the result. I personally enjoyed designing a set framework that can generate many different outcomes, while also allowing me to add personal touches. I find this concept very fascinating, and I think many different ideas, whether fun or practical, could be implemented in a neater and more accessible way using this approach. However, while I initially found the project interesting, I began to feel that it might be a bit basic as I worked on it. For future work, I feel I could improve the visual quality to make it more appealing to the viewer or user, for example, by adding elements like scissors or paint around the note pad, or including an icon for each craft. I could also make it more interactive, either by allowing the notes to move or by creating a book that actually flips pages, with photos and longer instructions for more advanced crafts, to give a more realistic and engaging experience.

References:
I mainly used the class slides to remind myself of the key concepts needed for creating generative text. In particular, I referred to uploading fonts and lists using different files, such as .csv and .ttf, along with the preload() function.

I also used the p5.js website to review and better understand specific functions, including:
https://p5js.org/reference/p5/translate/
https://p5js.org/reference/p5/rotate/
https://p5js.org/reference/p5/split/
https://p5js.org/reference/p5/int/ 

I was introduced to the textWrap() function using:
https://p5js.org/reference/p5/textWrap/ 

I used ChatGPT when I faced a setback with the movement of the note pad. As mentioned, I defined the noteAngle variable and used it in the mouseClicked() function to tilt the note. Initially, the note moved only a very small distance with each click, which made it look static and took away from the effect of new notes being added on top. ChatGPT helped me realize that my mistake was writing noteAngle = radians(-1, 1) with fixed numbers, which made the movement predictable. Instead, I learned to use the random() function to randomly select a position within the desired range on each click, producing the realistic and dynamic note movement I wanted.

i tried

so for this one i ended up making this floating eyeball angel thing that generates some cryptic dialogue in a manner reminiscent of 2d indie game boss fight interactions. (click the screen).

the background is very similar to the one i made for my week 2 assignment, nothing special there. I used frameCount to animate the ominous red rays eminating from the eyeball. The slightly more tricky part was getting them to actually follow the eye as it oscillates, though it was pretty easy to figure out.

as for the eyeball itself, i implemented some rotation to give it some depth, and had it oscillate via a sin() function, for which i referred back to the slides and studied the example projects provided. i think he’s my favorite part since it turned out exactly as i intended.

//eyeball & bg animation settings
push();
let pos = 200 + sin(angle) * amp; //sin oscillation
angle += 1;
translate(100, 0);
strokeWeight(0.5);
stroke(0);
noFill();

let x = 300;
let y = pos;
let pattern = 10;

if (frameCount % 8 > 6) {
  pattern = 29;
} else if (frameCount % 8 > 4) {
  pattern = 24;
} else if (frameCount % 8 > 2) {
  pattern = 19;
} else {
  pattern = 17;
}
while (pattern > 1 && pattern < 1000) {
  strokeWeight(1);
  circle(x, y, pattern);
  pattern += 14;
}

//eyeball
strokeWeight(1);
stroke(255);
fill(0);
circle(300, pos, 95);
rotate(-5);
ellipse(262, pos + 27, 40, 55);
ellipse(265, pos + 27, 25, 35);
stroke(255);
strokeWeight(2);
fill(255, 0);
rotate(15);
ellipse(333, pos - 100, 120, 20);
pop();

the generated text was incredibly frustrating to figure out on a short notice, especially since i insisted upon having it animated in a typewriter style. I’ll be honest, I still don’t fully understand what I did, especially since I stayed up all night figuring it out after having deleted all my code by accident (would not recommend). Here I had a friend teach me some tricks, as well as ask AI mode on google to help explain how text generation works, however i did all the actual coding myself. My friend really saved my life, though.

i was thinking of adding some interactive dialogue options, but thats for another time perhaps.

im so tired bro

Concept

For this week’s assignment, I was fascinated by the data visualization we did in class, so I wanted to create something similar using that technique. I was browsing the internet for inspiration and came across this website. In the video on the page, one of the data visualization ideas showed the Paris metro activity. This inspired me to visualize the London underground passenger traffic.

I had to create my own CSV file to obtain the data I needed. I used two different datasets from the Transport for London (TFL) website. One of them shows the total number of passengers using stations weekly, and another one shows the coordinates of the stations. I removed all the unnecessary columns and pasted the coordinates with the passenger counts and station names.

I ran into an error where the console said that some of the values it loaded from the CSV file were NaN, even though I made sure to delete any rows with no data. In previous data science classes I took, we always added a check to ensure we were only taking valid values, so I did the same in this sketch. I made new arrays that only add values that are not NaN.

I also added a feature to allow you to check the station name and the number of weekly passengers when you hover the mouse over it.

Reflection

Despite my love for the technique of data visualization, this is not one of my proudest works simply because I was extremely busy this week and could not dedicate as much time as I wanted to on this sketch. In the future, I would definitely like to add a map of London in the background and also to space the circles out in a way where you can actually see each station since there is a lot of overlapping circles and you are not able to properly see each station when you hover your mouse.

While I was reading the text, I did see the point the author is trying to make. I also got confused and frustrated whenever there were not many or unclear instructions for something, or if there were no instructions at all. I remembered when I used the washers for the first time in uni, I got confused about how they worked because they were different from what I used before, and I even tried to open it from a different direction since the handle was so sleek that you couldn’t tell it was the handle at all. This connects to the idea of failure of discoverability and signifiers mentioned in the reading, because the design did not clearly show where the action should take place, which led to trial and error and frustration. 

Additionally, when I got back to uni after the spring semester, they changed both the washers and dryers with options that were very limited (heavy, normal, delicates) compared to the multiple options before (eco, quick, mixed, delicates, heavy, wool, etc.) Without any proper instructions or signifiers explaining what is considered a heavy, normal, or delicate wash, washing clothes could go wrong. This confused my understanding of how the machine worked, since my experience with washers no longer matched the new system image, and I was left unsure about what each setting did. Situations like this could be improved by adding clearer labels, brief explanations, visible signifiers, and better feedback so users can understand how things work without feeling lost.

Applying the author’s principles of design to interactive media, especially Human-Centered Design (HCD), helps me think more about how users actually experience what I create. I realized that it’s not enough for an interface to just look nice, it needs to be easy to understand and navigate. The readings reminded me how important it is to include clear labels and signifiers so users don’t have to guess what a button, icon, or feature does. Actions should be easy to discover, and feedback should appear immediately when something works, so users don’t feel lost or frustrated.

CONCEPT

For this week’s assignment, I decided to make generative text based on a floating lantern event. I was listening to Tangled’s “I See the Light” when the idea came to me. As far as I know, people usually make wishes or set intentions before releasing their lanterns. To show this, I added different verbs and objects into my code and had p5.js generate them into random sentences, so each lantern shows a different kind of wish or intention.

I kept the visuals simple and warm to match the feeling I imagined. The lanterns float slowly upward, like in a real event, and I added a soft flicker inside so they feel alive. When you hover your mouse over a lantern, a text appears below showing the wish. I hid the wishes at first so you people can only see them when interacting with the lanterns.

HIGHLIGHT

The piece of code I’m most proud of is this:

// ------------- text hover ------------- //
function hover(lanterns) {
  for (let l of lanterns) {
    if (dist(mouseX, mouseY, l.x, l.y) < 25) {
      stroke("rgb(23,23,55)");
      strokeWeight(3);
      fill(255);
      textFont(myFont);
      textSize(28);
      textAlign(CENTER, BOTTOM);
      text(l.phrase, width / 2, height - 20);
      break;
    }
  }
}

This function checks if the mouse is close to any of the lanterns. If it is, it displays a phrase at the bottom of the screen. I like this part because it adds interaction instead of just having a static scene. It makes the viewer move their mouse around and discover different messages. I’m especially proud of it because it connects the visual part (the lanterns) with the text in a simple but meaningful way, making it more engaging and giving each lantern its own small story.

REFLECTION

Overall, I really enjoyed making this assignment and seeing how it developed throughout the process.  One thing I would like to explore further is adding more movement and animation to the lanterns. At first, I planned to make them gently sway, like real lanterns do when they float up into the sky. However, because of time constraints, I wasn’t able to add that effect. If I had more time, I would definitely include the sway to make it feel more natural and complete.

I would also like to experiment with making the movement slightly different for each lantern, so they don’t all move the exact same way. Small changes like that could make the scene feel more realistic and alive. Overall, I’m proud of what I created, and I can see a lot of potential to keep improving and building on this idea.

USAGE OF AI

Most of my code came from previous in-class exercises and what I already understood about p5.js. However, I did use ChatGPT to help me with a few parts that I wasn’t fully confident about yet: the gradient background, the lantern movement, and the twinkling stars. I mainly used it to understand the logic behind those effects so I could apply them in my own way.

For the gradient background, I wanted something that would reflect what we see on the sky during nighttime. I asked how to create a gradient effect, and I learned that I could draw horizontal lines and slightly change the color value based on the y position. By adjusting the blue value little by little like this:

 
stroke(23, 23, 55 + y * 0.1);
line(0, y, width, y);

This code helped me create a soft transition that makes the sky feel more atmospheric.

For the lantern movement, I needed help in remembering how to animate them moving upward and then reappearing at the bottom after leaving the screen. I then remembered that subtracting from the y value makes them move up, and using a conditional statement resets their position:

l.y -= 0.3; // movement
    if (l.y < -50) {
      l.y = height + 5;

This made the animation feel continuous, like an endless lantern release.

For the twinkling stars, I asked how to make them look like they were softly flickering instead of staying the same brightness. I learned that adding a small random change to the brightness each frame and then constraining it within a range creates that effect:

s.brightness += random(-10, 10);
s.brightness = constrain(s.brightness, 150, 255);

This made the sky feel more alive and less static, which matched the mood I was trying to create.

Overall, I used AI mostly when I got stuck.It gave me a better understanding of how to create those effects, but I adjusted everything to match the look and feeling I wanted for my project. It supported my process rather than replacing it, and it helped me feel more confident experimenting with movement and atmosphere in my project.

Source: https://p5js.org/reference/ and Class Slide decks

The author states that a product must have discoverability and allowing understanding to be usable, without these it would not be human-centered enough and cause fustration. Except for all the example mentioned like doors and remote controls, one that often bothers me is the shower knobs at hotels. Usually we assume twisting a knob to the left is hot water and to the right cold water. I have encontered ones that are the opposite, ones that control temprature and water flow at the same time (it definately isn’t a water pressure problem it is a true design flaw) , ones that need a button to be pressed before it is spinned, and other confusing designd. This lead to me standing before the shower head for at least half a minute every time tryin to figure out how things work, and often getting blasted by cold water accidentaly.

The same applies to a lot of electric cars, at least my experience back in China was sometimes frustrating. The electric cars almost all aim for a futuristic design, many following Tesla in using the flat door handles. Some of them need to be pressed to pop out, some of them requires the driver to control them, some are automatic and some need to be pressed on one side, grabbed and them pulled to open the door. The open door button inside the doors and easily just as annoying as them come in knobs, buttons and handles.

The authors idea that the design should be human centered can serve as a central rule to interactive design. The experience of the participant is of the utmost importance. For example, signifiers should be present almost everywhere. The interaction is most likly strange to the user, so they must be instructed what to do. Clear instructions would make an experience a whole lot better than a confusing one.

Feedback is also a key component. Feedback should be fast and accurate to the action to allow the user to truly feel that they are engaging in an interactive activity. It needs to be clear to what it is responding to create logical connections between the users actions and the design’s response, creating a smooth transition in interaction.

Concept

The inspiration for the homeowrk came easily as the Spring Festival is around the corner. In China everyone heads back home before the Sprign Festival and the whole country is on the move, we call this Chunyun (literately meaning Spring travel). Also being inspired by the world population map that we made in class I wanted to make a map that showed the great migration of people that happen every New Year.

The most difficult part was actually looking for the data. Because this was a very Chinese thing and is not really recorded on databases in other countries, I first tried a government site in China but it requested a lot of filling out forms and emails and getting back to me in a few working days so I gave up. Eventually, I asked Gemini to dig through the internet to see if there is any Chunyun data, and Gemini turned up with some data and crawling codes on github. I decided to use the data Gemini found but it was recorded in a way that completely didn’t suit my needs and I was unable to transform it in to a easy understandable format. So I gave up and picked the top 50 most traveled intercity routes and put them on the map.

Code that I am proud of

//decide the real limits of the Chinese map so the cities are mapped to the shape of the country
  //West
  let mapLeft = 71.0;
  //East
  let mapRight = 136.0;
  //North
  let mapTop = 57.0;
  //South
  let mapBottom = 18.0;
  //for loop to draw all the dots
  for (i = 0; i < numRows; i++) {
    //map the coordinated acourding to the outer rims of the country defined earilier
    let x1 = map(float(originLon[i]), mapLeft, mapRight, 0, width);
    //y coordinates are upside down because origin is in top left, reverse height and 0 to reverse the map
    let y1 = map(float(originLat[i]), mapBottom, mapTop, height, 0);
    let x2 = map(float(destLon[i]), mapLeft, mapRight, 0, width);
    let y2 = map(float(destLat[i]), mapBottom, mapTop, height, 0);

This is how I mapped the locations of the cities to the actual shape of China instead of just mapping them to the canvas. I identified the four outer rims of China and kept the dots of cities within the limits so they would be proportional to their real location.

Sketch

The cities are either at their actual location or close. I was unable to be very exact because the margins and stretch of the background map was manually adjusted.

Reflection and improvements

The result of the map is not very good because only 50 routes were chosen and becaue of how people populate china they are mostly on the east side of the country. This makes the map look unbalances. Secondly, 50 is way too far from enough to create something like a flightmap that would outline the country with arcs. This was difficult to do because I had to process the data manually and even 50 took a huge amount of time. I will see if there are futher ways to used exel functiond or formulas to easily transform the data into something that can be processed easily. That would also deal with the problem of dots not fitting on maps properly because the dots and lines would create the map itself.

While reading I was constantly thinking that the author is being too sensitive about the intricacies. “If I were at his place I would have Ignored and moved”. But after some giving it a thought later and looking at things around me. I kinda see the point. I would obviously appreciate if the the buttons on my headphones  were easily navigatable. I understand that there should be ease along side utility but that is kinda of contrary to modern development. Techonology wants to pack everything in a box and give it to humanity like a phone. Will it be easy to use? Probably not. Beacause of its range of functionalities. Lets take the example of the washing machine with all those buttons. Now what will be HDC?, all functions in one button or one button for each functions. It clicked me when the author said “accumulation of poorly designed interactions”. This is indeed evident in the realm of computer science. For example, I open chatgpt and it gives a list of model to choose from. It is marketed as choose the one based on your work. I believe it to be an inconvenicence as the engineers believe that I have and memorised the up to knowledge of Large Language Models.

This makes me question whether human-centered design is always about reducing complexity, or if it is more about organizing complexity in a way that makes sense. In interactive media especially, I think designers should focus less on adding features and more on clear mapping and feedback, so users understand what their actions are doing. The reading changed my perspective in a way that I have been noticing how often modern technology expects me to adapt to machines instead of machines adapting to me. At the same time, as an engineer I think, is bad design inevitable? or its just a result of race era we are in, in which we focus on developing, when we get to pause and we will start working on the design

This week’s reading made me notice many things around me that I had not thought about before, even though they are right in front of me. When using objects, we usually try to figure out how they work no matter how confusing they are until we reach the desired outcome, but I never really stopped to ask why they were designed that way or to critique them in terms of how well they meet user needs. One thing that drives me crazy is the light control system in hotel rooms, where there is a pad of lightbulb icons but they rarely indicate which lights they turn on or off. What usually happens is that whenever I want to turn off the lights, I have to press random buttons until the ones I want finally switch off, often mixing bedside lights, main lights, entrance lights, and others. This connects to Norman’s ideas because these systems have poor signifiers, since they do not clearly indicate which light each control operates, as well as weak mapping and mismatched mental models, since the arrangement of controls does not reflect the layout of the room. Therefore, this design could be improved by including clearer labels for each icon and arranging each control closer to the light or area it affects.

After reading and reflecting, I can apply Norman’s design principles to interactive media by ensuring that I always include clear signifiers and efficient mapping in my work, whether it is a p5 sketch or a physical device. There should always be signs, icons, or instructions that clearly communicate what the user should do in order to achieve the intended outcome. For instance, in interactive sketches such as games, I would provide clear guidance about where to click or what actions are possible, and in tools or interfaces I would make sure that labels and controls are easy to understand. I would also arrange functions logically so that controls and outcomes match efficiently. Ultimately, I need to ensure that everything in my work clearly communicates what the user can do and what they can expect, allowing them to reach their goals without confusion. The reading helped me understand how many things are designed to look more modern or visually appealing but still fail to meet user expectations that we are not always aware of, which made me realize that future designs should aim to improve functionality while remaining clear and understandable to users.

Concept:

At the beginning of this project, I was deciding whether I should create a truth or dare style generative text. After researching different types of questions, I came across “Who’s Most Likely To,” which has a similar concept but felt more suitable for the project. Because the project focuses on generative text, I chose to create an interactive “Who’s Most Likely To” generator. Each click produces a new randomly generated question using words taken from a CSV file.

I wanted the interaction to feel playful and social, similar to a board game night activity. To support this, the background color changes every time the user clicks, so the experience feels dynamic rather than static. I also designed a bold border, a clear title, and a short prompt explaining how to interact with the page so the user immediately understands what to do. I used a playful font to match the tone of the game and make the interface feel light and inviting. The goal of the project is to create a simple interactive experience where the user repeatedly clicks and receives a new question each time.

Embedded code:

Highlight of the code:

push();//saves current drawing setting
 stroke(3);
 strokeWeight(20);
 noFill();
 rect(15, 15, width - 29, height - 29);//draws the rect to be framing the canvas
 noStroke();
 pop();//closes the drawing seeting what is between push and pop wont affect the other lines of code

 push();//saves current drawing setting
 textSize(30);
 text("Whos Likely Game", width / 2, height / 4);
 pop();//closes the drawing seeting what is between push and pop wont affect the other lines of code

 push();//saves current drawing setting
 textSize(17);
 // textAlign(CENTER,CENTER);
 text("Click the screen to generate a question!", width / 2, height / 3.5);
 pop();//closes the drawing seeting what is between push and pop wont affect the other lines of code

 translate(width / 2, height / 2);

function randomColor() {
  bgColor = color(random(255), random(255), random(255)); //everytime th emouse is clicked a new color is given to the background
}

I used push () and pop () to isolate the styling of the title and prompt. This prevents their font size and styling from affecting the generated question. It helped me understand that p5.js keeps drawing settings active unless they are reset, so push and pop act like saving and restoring the canvas settings. Instead of calculating the exact position of the generated text, I used translate () to move the coordinate system to the center of the canvas. This allowed me to draw the question at (0,0) and keep it centered regardless of canvas size. I implemented randomness visually by generating a new RGB color on every click. The background change works as feedback, letting the user know their interaction triggered the system while also making every interaction visually unique.

How it was made:

For the process, I first began by implementing the CSV file. I created a CSV containing the word groups I was going to use, specifically the determiners and the verbs. I then loaded the CSV file using loadStrings () and tested that the data was being imported correctly. I mostly used the same structure as the code we used in class, but modified it so it would fit my sentence structure and generate a “Who’s Most Likely To” question.

After that, I added a custom font to improve the visual style. I placed the font file as a . ttf file and loaded it inside the preload () function so it would be available before the sketch starts. Then I applied the font to the text elements.

Next, I created the stationary text elements, including the title “Who’s Most Likely Game” and the prompt “Click the screen to generate a question.” I positioned them using width/2 and height/4, and a similar proportional placement for the prompt. This way, if the canvas size changes, the text stays centered and aligned above the generated question. I then added a border using rect () and adjusted the dimensions so it scales with the canvas size. For the stationary text, I wrapped the styling inside push () and pop () so the text settings would not affect the rest of the sketch.

I also implemented interaction using mousePressed (). Each click refreshes the question and changes the background color to make the experience more playful. I referenced the p5.js example (link in refrences) for this part and adapted the example to my project. To properly position the generated question, I used translate() to center the text on the canvas. Throughout the process, I relied on the examples from class to build the basic structure first, and then gradually added variations and visual improvements.

Reflection and Future ideas:

For reflection and future ideas, I am proud that I was able to understand how to implement important p5.js features such as push () and pop (), the use of translate(), and how to properly structure the draw() function. I also learned how to work with external files by importing a custom font and a CSV dataset into p5.js. Through this project I improved my understanding of transformations and how randomness can be used to generate a dynamic canvas. The background color changes helped me better understand how interaction and feedback can make a simple system feel more engaging. I also became more aware of layout and visual clarity, and how small design choices affect how easily the user understands the interface.

In the future, I would like to expand the project by animating the generated text so it fades in or slightly bounces when a new question appears. I would also like to allow users to input their own names so the game feels more personalized, and possibly add a point system to make it feel closer to an actual game. Additionally, adding small icons or visual elements could make the interface more visually appealing and reinforce the playful board-game atmosphere.

References:

For the color background changing whenever its pressed:

https://p5js.org/reference/p5.Element/mousePressed/

For text randomizer :

https://editor.p5js.org/maa9946/sketches/-4EPAewPV

For refreshing my understanding of transformations:

https://p5js.org/tutorials/coordinates-and-transformations/

Background color labeling and randomizer:

https://editor.p5js.org/aferriss/sketches/B1oYHcN9W

For text font:

https://editor.p5js.org/maa9946/sketches/FUnL3noV1

https://fonts.google.com/specimen/Barriecito

For who’s most likely to questions:

https://www.teenvogue.com/story/most-likely-to-questions#how-to-play