Author: Moza AlMazrouei

Overall concept:

Since I am half Moroccan, I wanted to include a personal touch to my work and connect it to my culture. I decided to create a game where users can design one of my favorite elements of Moroccan architecture, which is the doors. Instead of simply creating a game that includes templates and colors, after speaking to Professor Mang, I decided to make it more interactive and generative. This way players can add their own shapes, change colors, and control the speed of the patterns. The shapes are also randomly generated, which is one of my favorite parts because my game includes randomness but at the same time it makes every design unique and unpredictable.

In Moroccan architecture, the Riyad is one of my favorite styles because of the level of detail and craftsmanship. It’s known for its intricate patterns, zellige tiles, and carefully designed spaces. What I find most interesting is how much time and effort goes into creating these details by hand, sometimes taking weeks or even months and up to years depending on the piece. I also grew up seeing these designs in my own home in Morocco, especially in fountains, tiled walls, and stairs which inspired me to recreate this experience digitally. I realized that there aren’t many games that focus on cultural design, especially Moroccan culture, so I wanted to create something that represents it in an interactive and modern way.

I started this project with an idea, although I had multiple ideas and sketches I decided to stay with this one. I mainly feared that it would be hard to create but in fact although it was challenging (starting before spring break and then with everything happening it was confusing to go back to unfinished work so a part of me wanted to start everything all over again and even change the concept but I didnt!) I loved every part of it because the concept truly speaks to me.

Inspo from Moroccan Architecture: 

Embedded sketch: (click to start!)

How it was made/how it works:

The project is built using a state-based system (a system where it changes, operates, or makes decisions based on the current “state” of the process), where the player moves through five different screens or pages as I call them: the home screen, help screen, info page, door selection, and finally the interactive “studio.” Each page is controlled by a variable that updates depending on where the user clicks, making the navigation simple but effective. I’ve always liked using Canva which is why I decided to create shapes and patterns to make something inspired by Moroccan architecture while still keeping it visually aesthetic and aligned with the overall concept. I also decided to look at Aya’s class since they finished their midterms, I got inspired to generate an image using Gemini which pushed me to experiment more with tools like Gemini. Instead of just using basic images, I uploaded my own references and used Gemini to help generate and refine visuals for the first three pages (home, intro, and instructions). So while the first 3 pages (home page, intro, and instructions) are generated by ai using an original existing image that I uploaded I still did lots of the designing myself in the other pages. When it comes to the doors I used a base vector from Vecteezy, but since the quality was low, I enhanced and clarified the design using Gemini so it would look clean and detailed in the final game. For the sound, I wanted something that matched the cultural vibe of my project and game so I searched for Moroccan-style audio on TikTok. I wanted to find a sound I can play in the background and a nice click sound effect, the click sound I found actually reminded me of games I used to play as a kid (friv, roblox, blocks). When I found the sounds I liked I had to convert the files into MP3 format since p5.js does not support formats like MOV or MP4. After that, I uploaded all the files into the sketch, I initially thought this would be the hardest part, but it turned out to be one of the easiest since it mainly involved organizing and dropping files correctly.

When it comes to coding, (the fun part!) I mainly relied on class lecture notes from Professor Mang and Professor Aya because the material and examples available are always extremely helpful and always makes my process a lot smoother. For the main interaction, I used Object-Oriented Programming by creating a Tile class so every time the player clicks inside the door area (the white part), a new tile (which are the shapes) is created and added to an array. Each tile is independent so it stores its own size and color based on the slider values at the exact moment it is placed but for the speed slider, all the tiles change accordingly. One part I’m especially proud of is the geometric pattern system, specifically the 8-point star. I created this using a loop that rotates shapes by PI / 4 (45 degrees) around a central point. By repeating this rotation, I was able to recreate patterns inspired by traditional Moroccan zellige designs. Even though the code itself is relatively simple, the final result looks detailed and visually complex. I also focused on the user interface. I used createDiv() along with .parent() to group the canvas and sliders into one container, which keeps everything centered and organized. This idea came from researching how to structure UI elements because I thought I needed to research it a bit more. By doing this, the sliders stay aligned with the canvas and the whole project feels more like a complete application rather than just a basic sketch. The sliders allow users to control size, color, and speed, making the experience interactive and personalized instead of static.

Resources:

• p5.js Reference: .parent(): I used this to attach my sliders and canvas to a single createDiv(). I had to use this to keep my UI organized and in position on the page.
• p5.js Reference: colorMode(HSB): I switched from RGB to HSB (Hue, Saturation, Brightness) so that my color slider could be used as a 360-degree rainbow wheel since the game is a design studio.
• The Coding Train: Transformations: This helped me understand how to use push() and pop() within my Tile class so that the rotation of one star wouldn’t affect the rest of the canvas.
• MDN Web Docs: Early Return: I used return in my mousePressed function to stop the code once a button was clicked. This helped me fixed an issue (the bug) where a tile would accidentally be placed behind the “Home” or “Screenshot” buttons.
• Vecteezy Moroccan Door Vector: For the architectural doors which I then refined and cleared up using Gemini AI.
• Aya Riad lecture notes: Anytime I forgot how to use a concept like PI or OOP I was able to go back and look at the slides which is always helpful.
• Mang lecture notes: I always referred to the lecture notes for writing the code and functions as well understanding the bug in my code by checking the examples.
• Gemini’s images: creating and clearing up images
• Canva: used to help create all the pagesCode:

for (let i = 0; i < 8; i++) { //option 3: a complex 8-pointed Moroccan star made of rotating rectangles
  rotate(PI / 4); 
  rect(0, 0, this.s, this.s / 4, 2); } //rotates 45 degrees for each of the 8 petals

This part of the code creates one of the more complex patterns in my project, which is the 8-point Moroccan star inspired by Zellige designs. Instead of drawing it manually, I used a loop that runs 8 times and rotates the shape by 45 degrees each time. By using ai I was able to create this repeating and rotating a rectangle around the same center point, it forms a symmetrical star pattern. Even though the code itself is simple, the result looks detailed and reflects real Moroccan geometric design.

class Tile {
  constructor(x, y, type) { //constructor allows the tiles to happen/appear
    this.x = x; //remembers where the user clicked horizontally
    this.y = y; //remembers where the user clicked vertically
    this.type = type; //remembers the type/shape
    //captures the current slider values at the exact moment of placement
    this.hue = colorSlider.value();  //color
    this.s = sizeSlider.value(); //size
  }

This constructor is what makes each tile unique! When a tile is created, it stores the exact position, type, size, and color based on the slider values at the moment the user clicks. This means that even if the user changes the sliders later, the old tiles stay the same instead of updating. Basically, each tile “remembers” how it was created, which makes the design feel more layered and personalized instead of everything changing at once.

//Home button: house icon which will be used to go back to the home screen
let homeBtn = dist(mouseX, mouseY, 745, 356); //the center of the house icon location is x:745, y:356
if (homeBtn < 55) { //if the click is within 55 pixels the home button will be triggered 
  clickSound.play(); //sound effect
  currentPage = 2; //return to Main Menu
  tiles = [];    //clear canvas
  hideSliders(); //sliders removed immediately to avoid overlap
  return; //pauses/stops the function

The ‘Early Return’ problem I faced. This part of the code solved one of my biggest issues because before adding this, whenever I clicked the Home button, it would also place a tile behind it, which messed up the design. By using return, the function stops immediately after detecting the button click, so no extra code runs after that. This makes sure the button works properly without triggering other actions at the same time.

Personal Sketches:

Code I am proud of + Areas for improvements and problems I ran into:

One of the biggest problems I ran into was when I clicked the “Home” or “Screenshot” buttons in the arch design pages, the program would accidentally place a tile on the door behind the button. This kept happening, and I didn’t know how to fix it until I used Early Return logic. Now, when the code detects a click on a button, it immediately stops the rest of the function, so no extra tiles are placed and the interaction works properly. Another issue I faced was when pressing the Home button on the arch design page, it would take me back to the home screen, but the sliders would still be visible, which made the interface confusing. I fixed this by explicitly hiding the sliders when leaving the studio page, so they only appear where they’re actually needed.

Overall, the idea of creating a game sounded scary at first. Before entering Intro to Interactive Media, I didn’t think I would be able to build something like this, let alone make it personal and meaningful. I’m really proud that I was able to create a full interactive experience and connect it to my culture. However, there are still areas I would improve. For example, I would expand the variety of shapes instead of only having a few options. I could also add an information button where users can learn about Moroccan architecture, the purpose of the game, and cultural facts. Another improvement would be giving users direct control over shape selection (like buttons for each shape) instead of relying only on randomness and sliders, which would make the experience feel more intentional and user-controlled.

Reading Levin’s “Computer Vision for Artists and Designers” made me realize how much I take my own sight for granted and got me questioning what it means for a computer to “see.” I think I always imagined it as something similar to human vision? just more technical with lots of codes and numbers and letters. This reading though, made it clear that computer vision is not actually vision in the way we experience it. While we humans automatically recognize faces, objects, details, and context without consciously thinking about it, a computer just receives pixel values without understanding the meaning since it only processes numbers and the differences between frames. That really stood out to me because it shows how much interpretation we naturally do as humans without noticing it.

Another important difference is that human vision is flexible while computer vision is mostly dependent on certain conditions, for example if the lighting or background changes a little, the computer vision system can fail completely. The reading emphasized how algorithms like frame differencing or background subtraction rely on stable environments and clear contrasts which made me realize that computer vision is not just about writing code but it’s also about carefully designing the physical environment so that the system can succeed. There are things like using a strong contrast or controlled lighting or also reflective materials can improve the tracking of the computer vision. This also allows the artist to be responsible for preparing the place or area so the computer can see clearly.

Overall, this reading made me see computer vision through a more structured system that has its own limitations. It also made me think about how these tracking systems can feel like surveillance, which gives the artist power to make the audience feel observed or even part of the piece in a more intense way. As someone working in interactive media, this makes me more aware that designing with computer vision is not just about making something work, but about understanding what the system can actually perceive and what it cannot.

Concept:
Instead of making a competitive game that includes winning or losing, I wanted to create something calm and creative while still connecting it personally. I decided to create “Morocco’s Door Studio” for my Midterm project. Initially, I got inspired by traditional Moroccan doors because of the detailed arches, colorful zellige tiles, and the decorative handles that make each door unique. Whenever I come across these doors in Morocco, each door is different, although the pattern and color can be similar, the entire final piece is different. The experience is similar to a digital sticker book because the user starts with a blank Moroccan door frame and can build their own entrance by selecting different decorative elements such as tiles, arches, and knockers while adding their own colors to it. The goal is for the user to experiment freely and design something that feels visually pleasing to them. Traditional Gnawa music will play in the background to enhance the atmosphere and make the experience feel immersive and culturally rooted.

Design:

The design will focus on Moroccan tones like gold, blue, red, and nude colors. The door frame will remain centered on the canvas as the main focus, while decorative options will appear as selectable buttons on the side of the screen (for example “Tiles” “Knockers” “Arches”). When the user selects a category and clicks on the door area, a decoration will appear at the mouse position. Each decoration will be represented as an object and added to an array so multiple elements can be placed on the screen. The experience will begin with an instruction screen that explains how to play. The user must press a key or click a button to begin designing. After decorating, there will be a “Reset” or “Start Again” button that clears the canvas so users are able to experiment again. Additionally, to make the interaction more engaging a soft sound will play when a decoration is placed.

Images: (inspo/planning for my game/experience)

Challenging Aspects:

One of the most challenging aspects of this project I think will be managing the different decoration objects and making sure they are stored and displayed properly. Since every click creates a new object, I need to make sure they are correctly added to an array and drawn continuously in the draw() function. Another challenging aspect is organizing the different design categories. I need to make sure that when the user selects “Tiles” only tile decorations are placed, and not arches or knockers. Another issue might be finding transparent PNG images for the decorations which might take a while, but I can try creating them on my own or maybe using AI for this part.

Risk Prevention:

Although I am still working on this project, and I won’t know what issues I will run into, to reduce the risk of the objects becoming confusing, I will first create a simple test version where clicking the screen generates basic colored shapes using a class that I recently found and learned about: Decoration. This will help me confirm that the objects are properly created and stored in the array.

Before adding detailed images, I will test everything using simple shapes like rectangles and circles. Once the system works, I will replace those shapes with the actual decorative images I have saved.

For the category selections, I will use a variable maybe naming it currentCategory that will update whenever a button is clicked and this way the program always knows which type of decoration to place on the screen.

Concept:

For this project, I wanted to experiment with text functions while learning and applying different codes to create a scrolling lyrics display similar to Spotify, Apple Music, and YouTube. When I first looked at the assignment, I immediately wanted to recreate the full music interface that includes the album cover and the timeline of the song at the bottom. But instead, I decided to focus only on the scrolling lyrics to make it more creative and manageable.

I chose the song Yellow by Coldplay because it reminds me of my last bus ride after a field trip in senior year. It was our last day of school after finishing our final exams, and on the way back from IMG everyone in my class was saying goodbye to each other at the final stoplight before we all went home. That moment felt nostalgic and emotional which is why I wanted to incorporate that feeling into my work.

Inspo from Spotify: 

Embedded sketch: (try pressing on the screen)

How it was made:

I usually start by building the background and adding simple codes that I know like the colored box and the title text at the top, the background, the size of the canvas, etc. After that, I started off by creating an array to store the lyrics so I could easily reference each line later in the code.

Then I created the scroll variable so the lyrics would begin at the bottom of the screen. Using translate() along with push() and pop(), I was able to make the lyrics scroll upward. While working on this part, I kept experimenting because sometimes the text wouldn’t move the way I wanted it to move. I also had to adjust the speed because it was first set to 0.3 but since I included the full lyrics of the song, I felt that 0.3 was too slow. I decided to change it to 0.6 which made the movement feel more reasonable.

I used this loop:

for (let i = 0; i < lyrics.length; i++) { //going through the lyrics line by line 
  let yPos = i * 40; //each line is 40 pixels below the previous one -using the name yPos for the positioning of lines vertically (y-axis)

This allowed the lyrics to display line by line with 40 pixels of spacing between each one. That spacing helped create a smoother scroll and prevented the lines from looking crowded.

For interactivity, I added the mouseIsPressed function with the if/else functions so that when the mouse is pressed, the scroll speed increases to 30. When it’s not pressed, it goes back to the normal pace of 0.6. I liked adding this because it made the project more engaging instead of just automatically scrolling.

Resources:

Push and pop functions: (all the resources helped me understand how push and pop work through examples and descriptions I was able to make my own transformation)
https://www.youtube.com/watch?v=KSo_VEbsWks 

https://www.youtube.com/watch?v=o9sgjuh-CBM

https://p5js.org/reference/p5/push/

Translate:

https://p5js.org/reference/p5/translate/ (in order for my lyrics to scroll and keep moving up from their starting point I had to use the translate function)

Text:

https://p5js.org/tutorials/loading-and-selecting-fonts/ (learning how to use text fonts and functions)

https://p5js.org/reference/ (Typography section to understand the types of text functions)

I also kept going back to Professor Aya’s slides, Week 4.1 and Week 4.2

I also used Musixmatch to get the lyrics of the song Yellow by Coldplay

Hardest Part of the Code (and the Part I’m Most Proud Of):

 //First layer of the lyrics 
push(); //starting a "transformation state" - using 'push' to save the current canvas settings
translate(10, height - scroll); //starting to move the original position 0,0 to 10 pixels from the left and being close to the bottom of the canvas 

for (let i = 0; i < lyrics.length; i++) { //going through the lyrics line by line 
  let yPos = i * 40; //each line is 40 pixels below the previous one -using the name yPos for the positioning of lines vertically (y-axis)
  
  //black txt if below the middle and white if above
  let currentY = (height - scroll) + yPos;//used to figure out the positions of the line
  if (currentY < height / 2) { //checking if the lyric is above the middle half, if it is it will change color
    fill(255); //the color of the text -white
  } else { //if it is below the screen it will..
    fill(0);
  }
  
  textSize(18); //text size of the lyrics 
  textStyle(BOLD); //adding bold text
  text(lyrics[i], 0, yPos, 280); //in order for the long lyrics to not go off the screen -lyrics is drawn inside this 280 sized pixel 
}
pop(); //concluding the end of the transformation so the other header doesnt move too

The hardest part was understanding how push(), pop(), and translate() all worked without affecting the rest of my design. The push() allowed me to save the current canvas settings before transforming it. Then with [translate(10, height – scroll);] I was able to shift the origin point so the lyrics would start near the bottom and move upward as the scroll value increased.

Inside the loop, [let yPos = i * 40;] this function made each lyric line 40 pixels below the previous one which keeps everything equal and smooth.

Then I used [let currentY = (height – scroll) + yPos;] to calculate the piston of each line on the canvas so that I can check where the lyric is positioned which will determine if it would change from black text to white (similar to Spotify). If the lyric was above the middle of the screen, it changed to white and if not it remained black until it reaches that point.

Similar to the issues I faced before, I had a hard time keeping the text inside the canvas because it would always go out. I decided to use [text(lyrics[i], 0, yPos, 280);] that draws each lyric at the x-position 0 and y-position yPos while being inside a 280-pixel text box so long lines wouldn’t overflow off the screen.

I’m proud of this section because even though it took time to understand, I was able to control the translation without changing the rest of my code. At one point I accidentally deleted the entire section, which was frustrating because it took me a while to feel confident in it, but since I practiced it before, I was able to rewrite it again.

Issues I faced:

At first, the lyrics started in the middle of the canvas and would bleed outside the frame which was a struggle because I couldn’t figure out how to fix it for a second. I remembered Professor Mang explaining how small positioning errors can happen when centering the text exactly in the middle because it will start exactly there instead of being all on the center. I also carefully adjusted the placement using translate() and the text box width: [text(lyrics[i], 0, yPos, 280);] that helped keep everything within the screen and made the scrolling smoother.

Final code: 

let lyrics = [//using the name lyrics for the array/list
  //adding all the lyrics of the song from Yellow -Coldplay
  "Look at the stars",
  "Look how they shine for you",
  "And everything you do",
  "Yeah, they were all yellow",
  "I came along",
  "I wrote a song for you",
  "And all the things you do",
  "And it was called, \"Yellow\"",
  "So, then I took my turn",
  "Oh, what a thing to have done",
  "And it was all yellow",
  "Your skin, oh yeah, your skin, and bones",
  "Turn into something beautiful",
  "And you know, you know I love you so",
  "You know I love you so",
  "I swam across",
  "I jumped across for you",
  "Oh, what a thing to do",
  "'Cause you were all yellow",
  "I drew a line",
  "I drew a line for you",
  "Oh, what a thing to do",
  "And it was all yellow",
  "And your skin, oh yeah, your skin, and bones",
  "Turn into something beautiful",
  "And you know, for you, I'd bleed myself dry",
  "For you I'd bleed myself dry",
  "It's true",
  "Look how they shine for you",
  "Look how they shine for you",
  "Look how they shine for-",
  "Look how they shine for you",
  "Look how they shine for you",
  "Look how they shine",
  "Look at the stars",
  "Look how they shine for you",
  "And all the things that you do"
];

let scroll = 0; //letting the lyrics start scrolling vertically

function setup() {
  createCanvas(300, 500); //canvas size
  textAlign(LEFT, TOP);  //postion of the text
  textFont('Helvetica'); //text font 
}

function draw() {
  background(158, 91, 28); //background color 'burnt orange'

   //First layer of the lyrics 
  push(); //starting a "transformation state" - using 'push' to save the current canvas settings
  translate(10, height - scroll); //starting to move the original position 0,0 to 10 pixels from the left and being close to the bottom of the canvas 
  
  for (let i = 0; i < lyrics.length; i++) { //going through the lyrics line by line 
    let yPos = i * 40; //each line is 40 pixels below the previous one -using the name yPos for the positioning of lines vertically (y-axis)
    
    //black txt if below the middle and white if above
    let currentY = (height - scroll) + yPos;//used to figure out the positions of the line
    if (currentY < height / 2) { //checking if the lyric is above the middle half, if it is it will change color
      fill(255); //the color of the text -white
    } else { //if it is below the screen it will..
      fill(0);
    }
    
    textSize(18); //text size of the lyrics 
    textStyle(BOLD); //adding bold text
    text(lyrics[i], 0, yPos, 280); //in order for the long lyrics to not go off the screen -lyrics is drawn inside this 280 sized pixel 
  }
  pop(); //concluding the end of the transformation so the other header doesnt move too
  
  //The scrolling movement 
  scroll += 0.6; //Speed of the scroll to make it a little faster since its the full song being used

  //Restarting the lyrics loop
  //checking if the scroll distance is greater > than the total height of the list
   if (scroll > (lyrics.length * 40) + height) { //calculation of height from the number of lines multiplied by 40 pixels each
   scroll = 0; //restarting the loop so the lyrics can come back from the bottom
  }

  //The title on the top
  noStroke(); //removing the outline of the rect
  fill(158, 91, 28); //color of background 
  rect(0, 0, width, 100); //adding a rect so that the lyrics can go under it -similar to spotify

  fill(255); //color of the text 'yellow'
  textAlign(CENTER); //adding it to the center of the frame
  textStyle(NORMAL);
  textSize(14); //size of text
  text("Yellow", width / 2, 45); //name of text + size
  
  textSize(12); //size of the second text of the band
  fill(255, 200); //color of the text -making it a little less white
  text("Coldplay", width / 2, 65); //name of text + size

  //Interactivity
  //when the mouse doesn't click, the lyrics move normally 
  //if mouse is clicked and stays on the canvas the lyrics will speed up
  if (mouseIsPressed) { //mouse pressed function
    scroll += 30; //move fast 
  } else {
    scroll += 0.6; //move at the normal speed
  }

}

Future improvements:

Even though this is my first time coding and creating generative text, I’m proud of how it turned out especially because of the scrolling effect and how similar it feels to Spotify’s lyrics feature. In the future, I’d like to add the time duration of the song at the bottom, along with play and pause buttons to make it feel more realistic. I also want to add small music note icons and experiment with the spacing between specific lines to match the original lyrics.

Norman’s idea that when a design doesn’t work for multiple people, the design itself is the problem actually changed the way I view things. Normally when certain designs don’t work, I either get annoyed at myself for not knowing how to use them or just confused. One thing that drives me crazy is the D2 sensory doors on campus because even though they are automatic, I cannot seem to get into D2 smoothly without fighting with the doors. When pushing the door, it takes a while for it to move, and then sometimes when I enter while the door is opening, it just closes on me with no signal or sign for me to move. When I first came to university during my Marhaba Week and the first week of classes, I would always worry about the doors because something would always happen to me before I could actually get in the building to eat lunch or breakfast. After reading and applying Norman’s principles, I understand what has been happening for all those weeks I struggled with this issue. There is a lack of clear feedback and signifiers due to the lack of sensors (there is one sensor on one door, but it takes a few seconds to open, and it is only for the exit). There should be a system that responds to give clues and hints for the users. This model can be improved easily, but unfortunately, it is still a work in progress.

In interactive media, I realized that when a sketch takes a while to load because of an error, for example, or maybe the functions or buttons on the canvas don’t react, it causes a delay in the system. Users will tend to be confused and won’t know how to solve those issues. If they try to play around with the system or reset it, it can cause even more delays. Norman’s human-centered design reminds me that interaction is not just about making something work; instead, it’s actually about making it understandable. This is something I hope to carry with me moving forward, especially after becoming aware of these issues and experiencing them in real life.

The words interaction, interactive, and interactivity have been used a lot and I’ve hear those words multiple times so what really does it mean? The word ‘Interactivity’ from the Oxford dictionary means “the process of two people or things working together and influencing each other.” But I dont think I’ve thought of the word in this way. Before reading this text, I mostly used these words without really questioning them or thinking deeply about qualities does something have to be in order to be labeled as interactive. When thinking about the major interactive media, quite frequently I would ask people like professors or students what it is and it seems to be hard to explain. What is interactive media? What does it mean to interact? This made me realize that interactivity is often treated as a vague label rather than a specific defined concept. So looking at this reading and thinking of interactivity I liked how Crawford explained it. He defined interactivity as a conversation when two actors are actively listening, thinking, and speaking which shows that in order to have or make something interactive, it must be able to be present and respond through interactions from both sides. This definition stood out to me because it made ‘interactivity’ feel more intentional instead of it being seen as automatic.

One thing he mentioned was books and movies, while I first believed that movies and books are interactive, I understand now why they aren’t categorized as interactive. They are just one-way monologues, no matter how emotionally involved I feel while reading or watching them. It makes me questions everything, not just books and movies but also the smallest things like the sensory doors for example or every day materials. This made me think about how often reaction is mistaken for interaction in design and media. Overall, the reading made me more critical of how I design, plan, and execute my ideas and projects. Instead of focusing only on visuals, I will start to think more carefully about whether a system can actually listen, think, and respond in a meaningful way.

Concept:

For this project, I created a generative artwork inspired by the idea of light and movement from a scene found in the movie Encanto. I asked my friends to tell me their favorite Disney movies, some mentioned Tangled, Moana, but one of them said Encanto. I started searching for movie clips to get inspiration from the scenes and movements but none of the Disney movies caught my attention until I looked at Encanto. While looking through images and clips from the film, I was drawn to the candle and flame that symbolized magic and hope. Looking at the circles and light around the candle made me wonder if I could also create the same scene through code which I titled Magic of Light.

Instead of creating the same exact image, I wanted to add my personal twists to create the feeling of movement and energy by making the flames move around a lot and also adding interactivity when clicking on the canvas.
Inspo: Encanto

Embedded sketch:

How the Artwork Was Made:
I first started by creating the base of my code, which to me is the background and candle. I then started creating the arrays and class for the lights and candlelight to start focusing closely on the code and specific movements of the balls which are the flames. I used a class to define each object that is moving included lots of codes and numbers so that the balls would bounce and move left/right or up/down in an array. Each object has its own position, speed, and behavior, which allows them to move independently across the canvas.

I organized my code using functions and clear variable names (light and candlelight) to keep it structured and smooth when I press play. I also added comments in the code (this is probably the best advice I got because when my code kept messing up and not working, I was easily able to look back and understand my thought process).

Resources:

• Lecture notes from Professor Mang [
• Ball Class Example 1 – using global variables (p5editor)
• Ball Class Example 2 – using a class (p5editor)
• Ball Class Example 3 – multiple instances using a class (p5editor)
• Ball Class Example 4 – keeping track of objects using array (p5editor)
• Ball Class Example 5 – basic interactivity (p5editor)]
• Lecture slides from Professor Aya [looking at OR function I I, bounce, and the loops in Week 2&3]
• p5.js Reference: Classes and Objects [to create the candlelight name]
• The Coding Train (Dan Shiffman) [drawCandle]
• Stack Overflow [to understand the this.size to make sure every light was a random size]

Hardest Part of the Code (and the Part I’m Most Proud Of):
The hardest part of the code was figuring out how I wanted the objects to move and bounce around the canvas. I struggled at first because I didn’t fully understand how to use the array, loop, and class the same way we did in class but especially when trying to figure out how to make the balls bounce on from the edge using the reverse code.

move() {
    this.x += this.xspeed; //moves left/right
    this.y += this.yspeed; //moves up/down

    //using IF and || (OR) to make it bounce, when the ball hits the edge it is reversed by x-1
    if (this.x < 0 || this.x > width) this.xspeed *= -1;
    if (this.y < 0 || this.y > height) this.yspeed *= -1;
  }

I’m proud of this because it took me a while to fully understand what was happening instead of just copying the code. I went back to Professor Aya’s google slides and was able to follow exactly how to create the bounce but also looking at the Ball Class Example 1 helped me create the bounce. Once I understood how multiplying the speed by -1 reversed the direction, I was able to control the movement more intentionally.

Full Code:

let lights = []; //Creating my Array/list that will include all my candleLight

function setup() {
  createCanvas(400, 400);
  
  //Creating my loop for the balls/flames to fill the array with 150x objects (the circles)
  for (let i = 0; i < 250; i++) {
    let light = new candleLight(//candleLight is the new class I'm using for this section
      random(width), //Random x position
      random(height), //Random y position
      random(7, 13) //random size for the object
    );
    lights.push(light); } // To make the balls continue to come and move around the 'push' will push out a new object into the array
}

function draw() {
  background(0);

  // draw candle
  drawCandle();

  //The Loop through the list to update every ball of light
  for (let i = 0; i < lights.length; i++) {
    lights[i].move(); //updating position of ball
    lights[i].show(); //showing the ball
  }
}

function drawCandle() { //Creating the candle+flame
  fill("#E7BE42");
  rect(125, 200, 150, 200);

  fill("#E7BE42");
  ellipse(200, 200, 150, 50);

  fill("#FAF6D0");
  ellipse(200, 180, 20, 40);
}
//What each light will follow and be programmed as
class candleLight {
  constructor(x, y, size) {//everytime a new obkect is created
    this.x = x; //using this to give each ball its specific position
    this.y = y;
    this.size = size;
    
    //playing around with the speed
    this.xspeed = random(-1, 1); //left/right
    this.yspeed = random(-1, 1); //up/down
    
    //creating the array of 3 different color values    
    let colors = ["#FFD700", "#FF8C00", "#FAF6D0"];
    this.color = random(colors); 
  }

 move() {
    this.x += this.xspeed; //moves left/right
    this.y += this.yspeed; //moves up/down

    //using IF and || (OR) to make it bounce, when the ball hits the edge it is reversed by x-1
    if (this.x < 0 || this.x > width) this.xspeed *= -1;
    if (this.y < 0 || this.y > height) this.yspeed *= -1;
  }
  
  show() {
    noStroke();
    fill(this.color); //going back to the random colors above
    ellipse(this.x, this.y, this.size);
  }
}

function mousePressed() { //interactive aspect, when someone clicks on the sketch a new ball appears
  let newLight = new candleLight(
    mouseX,
    mouseY,
    random(5, 10)
  );
  lights.push(newLight); //add to the array
}

  

Problems I Ran Into:
One major issue I faced was constant errors in p5.js where the code would turn red, and I couldn’t figure out what was wrong. At one point, when I pressed play, the sketch would run but only show the black background with no objects. So I tried looking back from top to bottom and commenting again on the functions while also using // to remove the codes I assumed were causing the problem. I was the able to debug it and play it smoothly.

Final reflection:
I am proud of my final artwork because not only is this my first time writing a lot of code (lines 1–78), but I was also able to have fun with my friends throughout the process. Since we all have different majors, I usually show them what I’m learning and creating in Intro to IM. This time I asked them about their favorite movies and used that to create something that could connect us in a meaningful way.

I got my inspiration from the Disney movie Encanto and built my code around that idea. For future improvements, I want to create more realistic versions of my work because even though I’m proud of how far I’ve come and how I used the code, I know I can push myself further and make it look closer to the original inspiration.

 

Every time I watch or read something about generative art, I feel really privileged because while many artists were trying to create art using limited computers and machines, I now have a laptop that allows me to create art whenever I want. Seeing the machines and codes in the talk made me realize how much effort and experimentation went into early computer art, which makes me appreciate the pieces even more since I know the background and history.
I also enjoy learning about different types of art because it allows me to question what art actually is. Before starting my major in Intro to IM and Understanding Interactive Media, I don’t think I would have considered generative art as “real” art, especially since it is created using code and computers. However, after my first two weeks in the major, I realized that art doesn’t have a fixed technical definition, because everyone perceives and understands it differently.
Casey Reas’ Eyeo talk on chance operations was overwhelming at first since he mentioned many different artworks and ideas very quickly making it hard to keep up. Although toward the end, I started to understand the structure of his approach, first introducing ideas through existing works and then building or continuing algorithms through code. One example that stood out to me was the Century piece, where he goes through 100 different artworks to generate a single evolving result, showing how systems can grow over time.
As someone with OCD, I usually want everything to be organized and controlled so the idea of randomness was never a suggestion to me. However, I realized that randomness can actually add beauty and meaning to art through overlapping shapes and unexpected placements. This way, art to me feels more expressive and story-driven than a perfectly structured piece.
After watching Casey Reas’ talk, I feel inspired to include randomness in my own work. I plan to experiment with random values and frameRate to allow my piece to change and evolve, while still keeping it controlled through specific rules in the code.

My concept:

Initially I had lots of images saved from different types of designs, forms, and artists until I realized that I kept going back to page 19 in ProgrammInformation21_PI21. When it comes to art, I have drawn many zentangle-style pieces, which rely heavily on repetition and pattern, which is why I felt drawn to this specific art piece. I then decided to take inspiration from the piece and try to create movement similar to what I see. When I first looked at the image the shapes I saw were: triangles, squares, and circles. When I first looked at the image, the shapes I noticed were triangles, squares, and circles. Although circles are not clearly visible when zooming in, I decided to include them in my final piece to represent my initial visual interpretation of the artwork, hence why I called the piece Captured.

Inspiration from old computer art magazines: My project is inspired by early computer-generated art found in old programming and computer art magazines, where artists worked with limited tools leading to their reliance on shapes, repetition, and randomness.

Embedded Sketch:

How this was made:

This project took me around 4 hours to create. Much of the time was spent on searching and finding idea because I was just introduced to generative art and was still learning how randomness and loops affect visual outcomes. After finding the “perfect” inspiration I was then able to start brainstorming how I wanted my piece to look like.

At first I started off by creating just squares and triangles that were evenly spaced out but the results felt too structured compared to the chaotic image from the magazine. I then began experimenting with the [random] function:

let x = random (width); 
let y = random (height);

I combined this with rect() for squares and ellipse() for circles. Initially, I used a single square size [rect(x,y,10,10);] but unfortunately again, did not create the layered visual effect I wanted. To address this issue, I added more than one rect and played around with the width and height until I was able to layer three squares on top of each other with the small ellipse size. After I created the three different points for the triangles:

if (random(1) <0.8) { //80% chance to draw 3 rects and 1 ellips 
    rect(x,y,10,10); //x,y being random and 10,10 the W,H \|/ the same
    rect(x,y,7,7);
    rect(x,y,6,6);
    ellipse(x,y,5,5);
  } else { //the rest -> 20% will be triangles
    triangle(x, y-5, x-5, y+2, x+2, y+2);

I was also able to play around with the amount of shapes appearing on each frame (5) [for (let m = 0; m < 400; m++)]. Like everything else, starting is the hardest part so once I get used to the numbers and codes I used the rest of my time experimenting until I was satisfied with the results.

One code I am proud of:

for (let m = 0; m < 400; m++) { //drawing 400 shapes for every frame -> x5. Using m for my name

This was my favorite part of the code. I kept changing the number between 100 and 600 and experimenting with how the shapes changed and how the final piece turned out. In the end, I decided to keep it at 400 because it felt the closest to how I first saw the image. When I looked at everyone else’s self-portrait, I noticed that some people used this function, and at first I honestly didn’t understand how it worked. After looking into this source (JavaScript Loops Explained), I was finally able to create a similar effect and actually understand what the code can be used for instead of just copying it.

Resources: I of course wasn’t able to open p5.Js and create this project, so I kept referring back to the Week 2 lecture notes from both Professor Mang and Professor Aya’s weekly slides along with the website JavaScript Loops Explained Helped me create my code for the 400 shapes for each frame, I was able to make the loop but instead of using ‘i’ I just decided to use m for my name, adding a personal twist.

Full code:

function setup() {
  createCanvas(400, 400);
  frameRate(5); //to control the speed, or like I call this "the sets" I put 5 to make it slow but fast.
  noFill(); //black outline for the shapes
  stroke(0);
}

function draw() {
  background(255); //making the background white to match inspo

  for (let m = 0; m < 400; m++) { //drawing 400 shapes for every frame -> x5. Using m for my name
    
    //local variables created, so inside the loop each shape gets a new random position
    let x = random (width); 
    let y = random (height);
 
    if (random(1) <0.8) { //80% chance to draw 3 rects and 1 ellips 
      rect(x,y,10,10); //x,y being random and 10,10 the W,H \|/ the same
      rect(x,y,7,7);
      rect(x,y,6,6);
      ellipse(x,y,5,5);
    } else { //the rest -> 20% will be triangles
      triangle(x, y-5, x-5, y+2, x+2, y+2); //creating 3 different points for the triangle. Point 1: x, y-5 moving up. Point 2: x-5 moving left, y+2 moving down. Point 3: x+2 right, y+2 down
    }
  }
}

 

Reflection:

For future assignments, I think I’ll try to come up with ideas faster so I don’t spend so much time looking for the “perfect” inspiration before starting. Instead, I want to just start coding and see where it takes me. This feels like a fun challenge because the code can change so much depending on small adjustments. At the same time, having a general idea and then adjusting it as I go also works. I also want to experiment with more types of code. I know it’s not realistic to use every single thing we learn in one project, but it would be interesting to try combining more of them and seeing what comes out of it.

My Concept:
For my first project in Intro to IM, I decided to create a representation of myself using only 2D shapes in p5.js for my self-portrait. My goal was to use simple shapes to create the representation using the elements and colors for the face details, hijab/shailah, and abaya. Initially, I wanted to create a yellow bird or a kitten, but when I started writing the code for the face structure, I wanted to create something comparable to myself while challenging my skills. I then changed the shapes and sizes to fit the way I want to portray myself on this canvas. When frustrated or confused, I usually frown without noticing and my cheeks get really hot and red, which is why I wanted to capture myself in this specific emotional state.

How this was made:
Resources: In the second IM class, Professor Mang went through p5.js which I found extremely helpful because I was able to navigate the platform better. I started experimenting with the codes and different forms of digital art I could make. Unfortunately, I had some work that wasn’t saved, so I couldn’t go back to review it. I also found the technical readings link 1 link 2 helpful, throughout my process, I was going back and forth to create the lines or shapes.

I started this sketch by creating the background and then the face shape and hijab. I used basic 2D primitives like lines, ellipse, and arc for my face details. I began with a large black ellipse for my shailah in the background and my face. At first, my head looked like an exact circle but after adjusting the values a couple of times, I was able to change it slightly to a more oval shape that felt more natural. I then worked on the details of my face like my eyes, pupils, nose, mouth, and cheeks. While I found it confusing at first to figure out the math, I searched for a 400×400 graph to help with the placement which made the process easier for me because I had many trials figuring out the size, shape, and position of the eyes and nose for example.

I learned how to create the smile using the arc() function. Even though I experimented with different types of shapes and lines for the mouth, I wasn’t satisfied with the results, so I stuck with this one. I used the arc() with PI, which draws part of a circle and allowed me to create a subtle smile.

I also learned about the stroke() and noStroke() commands which I was proud of. When using stroke () it controls the outline of a shape, so when adding noStroke() it completely removes the outline. I used this for the cheeks to create a softer and more natural look. When I put the noStroke () command, all the shapes lost their outlines, so I decided to move the cheek commands to the bottom but it was still removing all the outlines from all the other shapes. This is when I realized that I must include the stroke() command for the shapes I want to keep the outline, in this case it was the eyes.

Embedded sketch:

function setup() {
  createCanvas(400, 400);
}
   function draw() {
   //update background color to pink
   background(200, 150, 200);
  
   //my scarf- shailah in black
   fill("black");
   ellipse(200,200,240,270); //x,y: center 250,250: width,height
   fill("white");
   fill("black");
   ellipse(200,250,100,350);
  
   //my abaya
   fill("black");
   ellipse(200,400,350,145);
     
   //my face, the base
   fill("#E5C9A0");
   ellipse(200,200,190,230); //putting it in the middle: x,y,w,h
     
   //my eyes 
   stroke(0);
   fill("white");
   ellipse (160,180,40,30); //left eye
   ellipse (240,180,40,30); //right eye
   //my pupils
   fill("black");
   ellipse (160,180,18,18); //left
   ellipse (240,180,18,18); //right
     
   //eyebrows
   stroke(0);
   fill("black");
   line(140,155,180,150); //left
   line(220,150,260,155); //right

   //my nose
   stroke(0);
   line(200,235,195,235); //long line
   line(200,199,210,235); //short line
   
   //mouth
   noFill();
   stroke(0);
   arc(200,260,60,30,0,PI); //x,y,w,h,startAngle0: start of curve,endAngle PI: half circle-end of curve
     
   //cheeks
   noStroke();
   fill("rgb(197,122,135)");
   ellipse(160,220,30,15); //left
   ellipse(250,220,30,15); //right
     
}

 

The code I’m proud of:

<//my nose
stroke(0);
line(200,235,195,235); //long line
line(200,199,210,235); //short line>

I know that it’s simple, but for some reason I spent a long time trying to figure out how to create the nose. At first, I created a triangle with 2 lines like this /\ but this wasn’t the nose I was looking for, so I decided to create the nose I normally see in simple illustrations and cartoons using one long and one short line. I had trouble finding the right coordinates because sometimes the line would reach the top of the canvas board and then it would disappear and then it would be short. This challenge led me to use a 400×400 grid again to help me understand the positioning better.

Reflection:

I enjoyed doing this mini project. At first, I was procrastinating and stressing all weekend about how I would use code to create a self-portrait, but the process turned out to be much more manageable than I expected. I am proud with how the final piece turned out. In the future, I would love to add motion or interactivity like making the eyes follow the mouse or the facial expressions change when the mouse is clicked. As I learn and become more confident with coding, I would like to revisit this project and create a more advanced version to reflect my growth in the course.