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.
