My Concept: For this assignment, we were tasked to create a generative text output using P5js and the skills that we acquired from class. When assigned the task I immediately thought of creating an artwork that contained the Arabic language and began to brainstorm how I could incorporate this. I then thought of linking this project to the UAE and came up with the idea of using generative text to form the shape and outline of the UAE map through the use of repeated verses of the national anthem in Arabic. This therefore sheds light on Emirati identity and culture whilst also using code to create a generative text output.
How this was made: Honestly I started off the assignment being really stuck and confused as I was unaware of how I can get the coordinates of the UAE map and allow it to fit into my p5 canvas. I’ve also not had much experience creating my own shapes so therefore I decided to start by watching the Coding Train’s video on custom shapes. After being stuck for a while I decided to ask ChatGPT what the most convenient way of finding the coordinates would be and it said to upload a reference image of the map to another folder and print the image on the canvas using the loadImage function. I later used the mousePressed function to record the coordinates of each point I clicked on the map, which were then displayed in the console. Once I had collected all the coordinates, I added them to a separate folder to keep my code organized and tidy. I then used a loop to connect the coordinates and create an outline of the map. Once the map outline was successfully drawn, I commented out the code that inserted the original image to help avoid confusion and keep the final code cleaner.
Once the outline of the map was created, I stored the national anthem verses in an array which I called “verses” for simplicity. This allows p5 to then randomly select verses from this array. I also used the p5 createGraphics function to create a new layer that is particularly used for the arabic text to be separated from the rest of the canvas before applying the UAE map shape to it. Later, I ensured that the text sizes of the verses varied between 12 and 18, I ensured randomness of the colors of the UAE flag, and random spacing between the verses. The textWidth function that I used was particularly important as it calculated how wide each verse was before adding the next one in order to avoid overlapping.
Then, most importantly I created a mask in order to keep the text layer primarily inside the UAE map outline. This allowed for only the parts of the text that fell within the UAE shape to remain visible; creating the formation of the map effect.
Lastly I decided to add some final touches in order to elevate the artwork. I created a sandy background using a beige color; followed by a for loop to add 15,000 small randomly placed ellipses to imitate the effect of sand particles. Each ellipse has slightly different colors, sizes, and transparency, which creates a textured effect that looks like sand. I also decided to incorporate a font that looked like Arabic calligraphy by using the await and load font function. This was pretty easy to do as it required the same skills that I used to upload the image into the canvas.
Code that I am particularly proud of: I am particularly proud of the way in which I was able to successfully create an outline that looks like the UAE on a map. Despite this being the biggest struggle that I faced when working on this assignment, I am satisfied with the way that it turned out in the end. Initially, I was going to insert all the coordinates required to draw the outline into the main sketch under the draw function. However, I soon realised how messy this would turn out and used a loop that was able to grab the coordinates from a separate folder and create the same effect and outline that I was looking for.
// mapImg = await
// loadImage('UAE.jpeg');
//image( mapImg, 0, 39, 600, 522);
}
//function mousePressed() {
//console.log("vertex(" + mouseX + ", " + mouseY + ");");}
beginShape();
for (let i = 0; i < uaePoints.length; i++) {
vertex(uaePoints[i][0], uaePoints[i][1]);
}
endShape(CLOSE);
}
Reflection and ideas for future work or improvements: Honestly, I am really satisfied with the end result of this project and I do feel as though I was able to successfully display my initial intentions onto the canvas. As for ideas for future work, I felt as though my code could have been organized more efficiently throughout the process as I found myself getting confused with certain functions at some points which forced me to go back and reorganize all of my code from scratch. Therefore I believe that this is a skill that I should carry each time from the start of a project to the end in order to avoid future confusion and uncertainty. As for improvements, I struggled to create the shadow, particularly around the back of the map. Therefore, the shadow appears greyish and white in some areas which I feel creates a sense of visual confusion. In the future, I would like to understand how I can create a more consistent shadow effect to avoid this issue.