Potion Perfect!

Here’s a link to my midterm project: https://editor.p5js.org/Maithaalshamsi/full/dWxeimKZc

Concept:

My idea for this project was to make a potion memory game. The user enters the witches room and will have to make a potion according to what ingredients they are assigned. They will be given a list of ingredients but the catch is that they only see it for a few seconds and then it disappears BUT that’s not all, each round gets harder. The user has to see if they memorize the ingredients and click the correct potion in order to pass the game, but every round adds a new ingredient. If the user clicks the wrong ingredient, they lose and have to start over!

I want the game to feel fun but also challenging, so I decided to make each round harder than the previous one. Each round has a new ingredient added to the recipe. As they progress through the game the player has to pay attention and remember more ingredients as they try to win the game. I also wanted the game to feel like the player was actually inside a witchy room, rather than it just being a regular memory game. In the room I included potion drawers, sound effects, and make sure the color combination fits the theme.

How my project works:

Once you enter my game, there will a welcome screen that will explain how to play. When the player clicks the start button, they’ll enter a spooky, witchy room where there will be shelves filled with ingriendents. Before each round, you’ll get a recipe card showing you the ingredients. The trick is, you’ll get to see it for a few seconds only. After that the player will have to pick the ingredients by memory. If they click the wrong ingredient, boom, you lost and will have to start all over again. Every round more ingredients will be added to the recipe card, making it harder to memorize.

My code:

When it came to coding, I used different game states to switch between the start screen, recipe card, gameplay, and ending screens. I also used a CSV file to store the potion recipes, which allows the game to randomly choose a recipe for each round. I used arrays to store the ingredients in the recipe and a variable to keep track of which ingredient the player needs to click next.

One part of my code that I’m proud of is making the recipe disappear after a few seconds. I used mills() to check how much time had passed since the recipe appeared (recipeStartTime). Once the time was up, the game would switch from the recipe screen to the game screen, where the player had to remember the ingredients on their own. I’m proud of this because it was one of the most important parts of making my memory game actually work.

if (gameState == "recipe") {
  gameScreen();
  drawRecipeCard();

  // Hides the recipe when the time runs out
  if (millis() - recipeStartTime >= recipeTime) {
    gameState = "game";
  }
}

I also think an important aspect to my code is the visuals. The reason why is because it makes the user enjoy the experience even more. I spent a lot of time designing the witch’s room and adding small details like the candles, moon, shelves, and potion jars to make it feel like an actual potion room. I also added animations, such as the eyeballs following the mouse and the flies moving when the user hovers over them.

function drawEyeballJar(x, y) {

  // Checks if the mouse is hovering over the jar
  let hover = jarHover(x, y);
  let eyeY = y + 3;

  noStroke();
  fill("#eee8d5");
  ellipse(x, eyeY, 28, 28);

  // Sets the pupil's starting position in the center
  let pupilX = x;
  let pupilY = eyeY;

  let mx = mouseX - width / 2 + 350;
  let my = mouseY - height / 2 + 325;

  // Makes the pupil follow the mouse when hovering
  if (hover) {
  
  // Moves the pupil left or right
    if (mx < x) {
      pupilX = x - 5;
    } else {
      pupilX = x + 5;
    }
    
  // Moves the pupil up or down
    if (my < eyeY) {
      pupilY = eyeY - 5;
    } else {
      pupilY = eyeY + 5;
    }
  }

  fill("#8db66a");
  ellipse(pupilX, pupilY, 13, 13);

  fill("#17121c");
  ellipse(pupilX, pupilY, 6, 6);

  fill(255);
  ellipse(pupilX - 2, pupilY - 2, 3, 3);

  drawGlassJar(x, y);
}

I made the eyeball using ellipses, and then I used mouseX and mouseY to find the mouse position. I used if statements to check which direction the mouse was in and then I changed the pupil’s X and Y positions by 5 pixels so it looks like the eyeball is following the mouse. I also used a hover function so it only happens when the mouse is over the jar. I did the same for the flies, but I used frameCount as my built in variable and sin() to make the flies move around.

if (gameRound >= 2) {
  drawFrogJar(565, 255);
} else {
  drawLockedJar(565, 255);
}

A part of my project I’m actually really found of are my locked ingredients feature. I thought this feature would add more of a game feel. How it works is an if else statement basically asking, has the player reached round 2 yet?” If yes, Show the frog ingredient. If no, Show the locked jar. As you proceed in rounds, 3 new ingredients will be unlocked.

Problems I ran into :

A challenge I surprisingly faced was making sure the game wasn’t too difficult or too easy.  I made my friends try out my game, and I got similar feedback. The last round was too hard. I struggled with deciding how long the recipe should appear before disappearing. I decided the best solution was making the timer shorter for the shorter list of ingredients, while making the longer lists have a longer time limit. One thing I would still like to improve is adding more variety to the game, such as different potion recipes, more ingredients, and maybe even more animations. I think this would make the game more interesting and encourage players to keep playing.

One of the biggest challenges I faced while making my game was adjusting it to different screen sizes. This is because at first, I created my game using a fixed canvas size, but I realized that it didn’t fit properly when I opened it on a bigger screen. When I tried making it fullscreen, some of the elements, like the shelves, floor, and buttons, were not in their right positions. To fix this, I used windoWidth, windowHeight and resizecanvas to make the canvas adjust to the browser window. I used the professors example from class as well as AI to debug silly mistakes I made with the spelling. I also had to change how I positioned some of the elements to make sure everything stayed aligned. This took a lot of trial and error, but I eventually managed to make the game look better on different screen sizes.

The last major problem was with the background music in my game. At first, I wanted the music to play throughout the game, but I had some issues with it restarting and looping. I experimented with the audio functions and eventually decided that I didn’t want the music to loop continuously. Instead, I used bgm.play() to play the music once when the player starts the game and bgm.stop() to stop it when needed. I thought this was a clever way to fix my problem and create a better fitting system when it came to the bgm. I made sure the music would restart from the beginning if the player went back to the start screen and started playing again. This helped me understand how to control audio in p5.js and how important sound is to the overall experience of the game.

Another thing that bugged me was how long my code got because of all the elements I shaped myself. The whole witch room, the jars, the candles, locks,  flies, slime. I also decided to use vertex for the vine leaves on the shelves instead of creating just normal straight line, so it added more lines of code. So next time I’d definitely go around creating my code in a more efficient way.

If I had more time to work on my game, I would love to add more features to make it even more fun and interactive. One thing I would add is more ingredients and potion recipes so that the player has more combinations to memorize. I would also like to add different difficulty levels, where the player can choose between easy, medium, and hard depending on how challenging they want the game to be. Another idea I had was to add more animations, such as making the cauldron bubble when ingredients are added or having the potion explode when the player chooses the wrong ingredient. I think these additions would make the game feel more alive and give the player more reasons to keep playing.

Overall, I’m really proud of my project! I had a lot of trial and error, but at the end, I love how the outcome looked and I also learned many new features to coding.

Here’s a video on how it works:

I made sure to show the outcome of losing and winning!

potion perfect

 

Refrences:

Inspo : Friv, a game website I used to play on as a child, as long with everyone else in my generation. I wanted this game to feel like it would be in this website.

 

https://p5js.org/examples/Transformation-Translate/

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

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/cursor

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

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication

https://pixabay.com/sound-effects/search/cheering/

https://www.youtube.com/watch?v=76fiD5DvzeQ..

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_NOT

I got help from my sister who is majoring in IM for some feedback. When I got confused about how I could make features in my code hover, she gave me a lot of suggestions like using sin() and creating frameCounts.

I used AI to debug some codes and explain to me why my loop wasn’t working. It helped find my silly mistakes when it came to window width and height, and also helped me understand how I can do the game counts (rounds).

 

The concept I was going for was a potions game. The idea was, that the user enters the witches room and will have to make a potion according to what ingredients they are assigned. They will be given a list of ingredients but the catches that they only see it for a few seconds and then it disappears. The game is, they have to see if they memorise the ingredients and created the correct potion in order to pass the game. If they collected the correct ingredients, then they made the potion correctly, however, if they accidentally use the wrong ingredient or put it in the wrong order, then the potion explodes and they have to start all over again. So the user interaction is basically creating the potion and memorizing the ingredients. I made a vision board in order to see how the aesthetics will look like together.

The most frightening part of my project was initially the sound. The reason is because every time I try to add it, it usually goes through an errors first. That is why I wanted to test it and get it over with from the beginning. At first I did struggle, every time I wanted to add the audio it just wouldn’t work.

I was using the wrong approach. I tried doing async and await first but then remembered that we used loadSound in class. It then later worked out but I still struggle to make the bgm a loop. Whenever I try to apply the code, it just cuts out the music, so that’s one thing I’ll focus on this week.

I was also panicking over how I’ll let the cards disappear after a certain amount of time, but I quickly reduced that risk by learning about millis(). It “Returns the number of milliseconds since a sketch started running.” and I got that from the reference p5 page.

Things to add: this is all just a rough draft and me experimenting so I haven’t finished the final project yet. I want to make the witches room using the shapes that we are used to, but also add images as the ingredients inside of the jars. For the ingredients cards, I will be using the skills that we learned last week about displaying texts and having them put into a words csv.

I will also continue to use classes for the ingredients, as well as OOP. I also will add more sound effects for the pouring and the boom if they got it wrong. I want to make some push effect when we click the start button too.

Before reading the chapter, I thought computer vision would basically be all about how computers are taught to see the same way as humans. But I quickly realised that it’s much more complicated than that. I found this very interesting because when humans view an image they see it as a general, full picture  thing. Us humans can understand what we are seeing and can identify it. Meanwhile a computer receives the image as pixels without knowing what they represent at first. The reading mentioned techniques that the computer programs. Some of those factors include frame referencing, to detect movement, background subtraction, to separate a person or object from the background, and brightness thresholding, to know the difference between lighter or darker things compared to their surroundings. By the end of the reading, I concluded that computer vision feels less like giving a computer human eyes and more like giving it specific rule for what it should pay attention to.

What caught my eye the most was how these tracking abilities can completely change interactive art. Computer vision can allow the viewers movement or position or even facial expressions to be become part of an artwork. Furthermore, someone can interact without using a mouse or keyboard. This reminded me of a field trip that I went to last year during comms lab. We went to team lab and interacted with so many exhibitions. One that came to mind is an artwork where it recognised our silhouettes and movements and made our bodies interact with the projected graphics on the wall or on the floor. I think this creates a much more immersive type of interaction because the artwork is technically communicating and responding to the person standing in front of it.

On the other hand, it’s still feels a bit uncomfortable thinking about how easily the same technology can become surveillance. The reading mentioned that computer vision can track people who willingly participate but can also observe people who may not even realise they’re being watched. A personal example that happens in our day-to-day life is our phones. Not only does it use face recognition to open our phones but some phones have the ability to see how close the phone is to your face, and will then notify the user to back away. So from what I gathered, computer vision can be either playful and creative but also makes me question privacy in a way. It makes me wonder how much information a computer should really be allowed to collect about us.

Concept

For this assignment I wanted to create something that generates an answer for the user rather than just displaying random pieces of text. I knew that I wanted to make some type of interactive answer giving experience for the user so I thought of making an affirmation box, or some type of fortuneteller and this eventually led me to the idea of a magic 8 ball, since its whole purpose is to answer questions with random responses. My assignment allows the user to think of a yes or no question and then after they click the magic 8 ball, it would give them an answer. The responses are stored in a CSV file and can either be positive, negative, or an unsure answer. I wanted this assignment to feel more alive and playful so I added a moving star background.

Highlight code

// generating answer
  function generateAnswer() {

  let singleRow = [];

  // choose one random row
  singleRow =
  splitTokens(strings[int(random(strings.length))], ",");

  // get the 3 parts from the SAME row
  let start = singleRow[START];
  let middle = singleRow[MIDDLE];
  let end = singleRow[END];

  // put sentence together
  answer = start + "\n" + middle + "\n" + end;
}

// CLICK THE BALL
function mouseClicked() {
  generateAnswer();
}

CSV:

definitely,yes,go for it
most likely,yes,signs look good
without a doubt,yes,you can count on it
probably,yes,things look promising
maybe,yes,but give it time
honestly,no,don't count on it
probably,no,try again later
definitely,no,not this time
unclear,maybe,ask again later
hard to tell,maybe,wait and see

The part of my code that I’m proud of the most has to be the generating answers. I especially enjoyed understanding how random() and splitTokens() work together, with the help of the professors presentations and p5’s reference pages. The program first randomly chooses one row from my CSV filed. SplitTokens() then separates that row wherever there is a comma, allowing me to access each part individually. I learned that this feature is a way to split strings into pieces. One thing I changed from the class example was how the randomness worked. In the poetry example, different rows could be randomly selected, and mixing unrelated words was part of the generation of the poem. But for my magic 8 ball, I didn’t really want to create answers that didn’t make sense and contradicted itself. For example, if I didn’t use split tokens, I could end up with a result saying

Definitely

No

You can count on it

And that wouldn’t have made sense. Instead, I randomly select one row and keep all three parts of that row. This allows the result to be random but still making sense as an answer. I think this was the part where I understood the purpose of the CSV and arrays the most.

Embedded sketch

How this was made

I started by drawing the magic eight ball using the basic P5.JS shapes. I used a reference photo from online to try to mimic the colors and shapes included. I also added a custom font from Google fonts for the title. At first, the font was not working and I wasn’t really sure why. I realized that the name I was using in P5 did not match the actual name of the font file I uploaded. So all I had to do was change the name to make sure both uploads are the same. Once I fix the file name, it worked. I also learned that after using textFont() for the title, P5 continued using that font for the other texts. I only wanted that font for the title so I had to change the font back to Ariel before displaying the magic 8 balls answer.

I wanted the background to have some movement and motion instead of being completely still, so I used everything that I learned last week about classes and raise to create the stars. Each star object has its own x and y position and speed and I stored the stars inside in array and used a loop to move and display all of them. It’s similar to my last assignment, where when it reaches the end of the canvas it returns to the bottom so the movement continues.

For the main text generation, I used loadStrings() to load the responses from a CSV file. Each rule contains three parts of one answer separated by commas and when the user clicks, random() selects a row and splitTokens() separates it into three parts. I then combine these parts with \n so they appear on separate lines inside the triangle. I used P5.JS and the code examples from class as references for the code structure, Google fonts for the title, and ChatGPT to clean up silly mistakes I made when it came to writing the code.

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

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

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

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

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

https://fonts.google.com/selection?lang=en_Latn&categoryFilters=Feeling:%2FExpressive%2FFuturistic&preview.script=Latn&preview.lang=en_Latn

Reflection 

I enjoyed this assignment because I initially thought generating text would mostly just be putting random words together, but this assignment showed me that text is organized in its own way, depending on how you decide to use it. One challenge was making sure the random answers actually made sense. At first I was selecting each section from a different random row, but that created contradicting answers. If I continue working on this project I would like to make the magic 8 ball to be more interactive. For example I could make it shake for a few seconds before reviewing the answer. Overall I’m very proud of how it turned out and how I use my creativity when it came to displaying text.

 

While reading the chapter I really enjoyed how conversational it felt. Instead of overwhelming me with a bunch of theories, the author used stories about everyday things that included confusing doors, and the hotel sink that he couldn’t figure out how to drain. I felt like those examples were funny and lighthearted but at the same time they made his ideas much easier to understand. Before reading this, I honestly thought that if I could not understand how to use something, it was probably just my fault. Something that drives me crazy is when I click a button on a website, and nothing happens, so I don’t know if my click actually worked or not. This could be improved by giving immediate feedback, like changing the button or showing a loading symbol. Norman made me realise that sometimes the design itself is failing to communicate with the user. The quote that really stuck with me was, “profound ideas are always obvious once they are understood.” This really emphasised how good design can feel obvious even though a lot of thought goes into making it that way. The whole point is for it to look effortless and feel like it’s easy to apply, in the users point of view. 

I wanted to connect this to my assignments that I’ve been doing on P5, I realise that I usually focus a lot on aesthetics, like colors, fonts, and how the layout looks like overall. Now I am thinking more about whether someone opening my project for the first time would actually know what to do. Norman explains that good designs should communicate what actions are possible and how to perform them. That made me really focus on how I want my assignment this week (and the rest of the weeks) to be shown. I want my instructions and interactive elements to feel natural instead of making the user guess. This reading changed how I think about design because now I see that the visual part isn’t always the most important part, even though it’s the first thing you see, it’s still needs to be understandable in order for the experience to be clear.

The reading was actually so much more interesting than I thought it would be. I like that Crawford included playful moments and examples throughout because it kept me more interested while he was trying to explain an idea that could have easily felt more technical. To me, there was one line that really stood out, and that was when he said “interaction is not reaction on a higher plane of existence.” At first I didn’t really think that there was even a difference between reacting to something and interacting with something. I assumed that if something made me feel involved or allowed me to do something, then that was already interactive. Crawford made me question all of that. This also changed my way of thinking about interactions with Code. A computer is not automatically interactive just because I can click something or because something on the screen gets a reaction out of me. Interaction is more like a conversation.

He says both sides need to listen, think and respond. This made me look at the assignments that I’ve been doing in a completely different way. Instead of only asking whether the user can click or move or control something, I started to think about how the computer responds to what the user does and whether there’s a real back and forth happening. I used to think adding something like mousePressed()  automatically made a project interactive because the user could affect it, but now I know it’s beyond all that. So my biggest takeaway from this reading is definitely that interaction is much less simple than I originally thought it was.

My concept:

When it came to thinking of what my concept should be this week, I wanted it to somehow relate it to current times. It might not be apparent in this country, but it is autumn season and I decided to portray the fall aesthetic to this assignment. Using classes and arrays, I wanted it to create an interactive scenery. My idea was, having leaves falling off a tree while also having the user have the ability to click the screen and add even more leaves. I wanted the overall code to give off warm and calm vibes in order to emphasize the true feeling of autumn. I used mostly brown, oranges, and yellows to achieve this. In my last assignment I said if I could do anything to elevate my code, it would be randomness, and that’s exactly what I did. The colors of the leaves are all random. I also added a windy motion in order for the falling to look more realistic.

Highlight of my code:

 //leaf class
class Leaf {

  constructor(x, y, size, speed) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.speed = speed;

    // random colors leaves
    this.leafColor = random([
      "#c85d3a",
      "#e58b3a",
      "#d9a441",
      "#a94432",
      "#7a4a00"
    ]);
  }


  move() {
    

    // fallinf down
    this.y = this.y + this.speed;


    // windy
    this.x = this.x + 0.5;


    // returning to the top
    if (this.y > height) {
      this.y = 0;
    }
  }


  show() {

I’d like to say that the highlight of my code is my leaf class. This was my first time working with classes, so I was defiently proud on how it all came together and how I made multiple leaves with their own size, color, and speed. I also used random() to choose between different autumn colors, which helped make the leaves look less repetitive. My favorite part is the move() function because it makes each leaf fall while slightly moving to the side to give it a windy effect. I also added an if statement so when a leaf reaches the bottom, it returns to the top and continues falling. I made it so if the leaf goes pass the canvas, it moves back to the top. As the leaf falls, the y gets bigger and bigger, until it becomes bigger than the height. That’s when it goes all the way back.

How this was made: 

I started off with just a tree branch and a bunch of leaves falling. It felt very dull and plain, and the opposite of what I wanted the viewer to feel. I went on Pinterest to get some autumn inspiration and got inspired by the pale orange sky and the clouds. So I decided to make some more leaves on the branches and on the ground to give a more alive look, as well as some clouds and a sun, all using ellipses. Besides the overall look, I also worked on creating the leaf class that controlled every leaf. Inside the class, I used a constructor to give each leaf its own position, size, speed, and color. I wanted the falling leaves to give me realism so I added the move and show functions. The move() function makes the leaves fall down while also slightly moving to the right to give the effect of wind. The show() function draws each leaf on the screen. I also used an array to store all the leaves object. And a loop that  goes through the array and moves and displays every leaf. I also used mouse pressed so that whenever the user clicks, a new leaf is created at the mouse position. I think a struggle I had was thinking about how I wanted the leaves to fall down. Having them fall all straight looked very unnatural, so I added a small change to their x position to make it look like the wind was pushing them sideways. ( this.x = this.x + 0.5; ). The references helped me significantly when it came to recalling some steps like loops and mouse pressed.

References:

https://www.pinterest.com/search/pins/?q=fall%20and%20autumn%20aesthetic&rs=ac&len=12&source_id=ac_hoiAF6sn&eq=fall%20and%20aut&etslf=5522

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

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

https://editor.p5js.org/Aya_Riad/sketches/Wky6-ythQ

Reflection:

I liked how the ending product ending up looking. It has a moving effect that I’m very proud of, and i’m glad I got to learn how to use class and arrays. I think using random colors, sizes, and speeds helped make the leaves feel less repetitive. I also feel like I paid more attention to the aesthetics in this assignment and I feel like the outcome was defiantly worth the effort of creativity. Maybe if I had to work more on this, I’d play around with the movement of the clouds as well. Or maybe learn how to make a more accurate looking leaf, and different types of leaves. Overall, proud.

Before finishing the video, I genuinely thought that randomness in code is something that simply makes the outcome unpredictable. I didn’t think of randomness as something that could be controlled by the artist, as for the name, random. But throughout watching the video, the idea that stood out to me the most was the relationship between rules and chance. In the middle of the video the lecturer included a quote. “Above all, it’s never a blind chance, it’s a chance that is always planned but always surprising.” I found this saying very interesting because it almost sounds like a contradiction at first. In the beginning I didn’t really get it because how can something planned be considered something with chance. However as the video went on I started to understand that an artist can plan the boundaries without actually planning the exact outcome. Even when a computer is producing different results, the artist is still the person who creates the system and decides what is allowed and what is not allowed.

This concept started to really make sense to me because I feel like it really connected with what I am doing in class the past few weeks. In my work I would want to incorporate randomness through things like colors, sizes, positions, or patterns. I personally would still not give up complete control because I would still have an idea of what I want my artwork to look like, however adding randomness can balance out into something more artistic than it seems. The video made me realise that randomness does not necessarily mean losing control. Instead I can control the rules while allowing the computer to surprise me with what happens within them. Overall, this video made me feel a sense of spontanousness with a balance of structure. All the examples given in the video really inspired me and opened my eyes to new forms of code and graphic designs.  

My concept: 

For this assignment, I wanted to create a simple yet impressive work of art. In order to make it visually interesting, I decided to emphasize the geometric patterns using different colors and shapes. I got inspired by a graphic design I found while searching for magazines. The reason why it stood out to me is because of how the simplicity of shapes created a complex looking outcome. I also incorporated what we learned in class, including loops, the circleSize pulses, and if/else statements. I decided to add the pulse effect to make my art work feel less flat. An interactive element was also used, where the user could click the screen to change the theme of colors. There are 4 different color themes, after it goes through all 4, it goes back to repeat.

Highlight of my code:

I’d like to say my favorite part of my code has to be the interactive element. Every time you click, the theme number increases and the colors of the artwork change. The reason why I’m proud of this specific part of my code is mainly because I got to incorporate something I learned in high school into my work. It’s a pretty simple code, yet it led to the most creative part of my project. I numbered every shape, and depending on how many times you click, decides what color theme is picked. Because I didn’t want to make the code confusing and overwhelming with a huge list of colors, I made some shapes set as a permanent color. I filled the half circles and a rectangle to a beige color to somehow still have a link or unity to all the themes.

// ORIGINAL COLORS
  if (theme == 0) {
    color1 = "#f45132";
    color2 = "#ffca28";
    color3 = "#0781b7";
    color4 = "#202236";
  }

  // PURPLE COLORS
  if (theme == 1) {
    color1 = "#74a7fe";
    color2 = "#874efe";
    color3 = "#b18cfe";
    color4 = "#7b219f";
  }

  // BURGUNDY COLORS
  if (theme == 2) {
    color1 = "#5c0700";
    color2 = "#791a3e";
    color3 = "#9a244f";
    color4 = "#00364a";
  }

  // B&W COLORS
  if (theme == 3) {
    color1 = "#d6d6d6";
    color2 = "#7a7a7a";
    color3 = "#444444";
    color4 = "#232323";
  }

function mousePressed() {
  theme = theme + 1;

  if (theme > 3) {
    theme = 0;
  }
}

 

Embedded sketch:

How was this made:

I started off my code by dividing the screen into 4 rows. I started creating my shapes, alternating between rectangles and ellipses, depending on which shape I want to be overlapped. When I decide to add the pulsing effect on the ellipse, I add the circleSize code into the coordinates. When it came to the third row, i wanted to add repeated lines. I thought that was the perfect time to practice my loop code. Instead of coding every line individually, i only had to coordinate the first line, and duplicate the rest. It moved 10 units to the right until I got all my lines in order. When it came to the clicking to switch the theme part, I had to google how to do. Fortunately, the first like I found was the reference page teaching me how to use mousePressed. https://p5js.org/reference/p5/mousePressed/ And of course, the whole inspiration to my art was an abstract patterned magazine design that immediately caught my eye. I tried my best to match the colors as well. https://www.dreamstime.com/bauhaus-seamless-pattern-abstract-square-tiles-circle-triangle-retro-print-minimal-style-geometric-figure-vector-image217690822 After some advice from my professor, I later added another loop to create the rectangles in the background. Instead of coding each rectangle individually, the loop automatically moves 100 pixels across and down the canvas, making my code shorter and more efficient.

 

Reflection:

I really enjoyed this assignment but if I had to change something, it  might be to change the shapes and experiment a bit more. I would decrease the size of the shapes in order to make it look more pixelated, and give it an old computer effect. I would also try to add a new moving effect that doesn’t require any input from the user. Like moving shapes or changing colors. After watching the video as well, I would’ve liked to incorporate more randomness. Overall, I’m very proud of my work and use of class material. I’m happy with how interesting it is to look at and how much effort i put in order for that to happen.

 

My Concept:

As this was my very first time coding in p5, I wanted to make sure I created a portrait that represented me but still simple enough to build with the coding skills I’m learning. I decided to incorporate my hijab in this assignment to really showcase my national identity. I wanted to emphasize on the shapes by making my portrait cartoon style. I’m pretty satisfied with the outcome and I’m glad it all came together at the end.

Highlight:

One of my favorite parts of my code has to be creating the eyeliner. Although it seems like a small detail, it took me a while to mirror it properly. I’m also not the best at triangles, so this really got me practicing. I really wanted to include the eyeliner into my portrait because it added some individuality to an otherwise simple portrait and made it feel more me. Anyone who knows me knows I love incorporating eyeliner into my look, so this made my portrait feel more personal. The lashes were also something I was proud of. Simply because I thought it elevated the eyes more.

// left lashes
line(151, 208, 145, 202);
line(156, 205, 153, 198);

// right lashes
line(249, 208, 255, 202);
line(244, 205, 247, 198);

//eyeliner
triangle (152,218,140,207,150,210);
triangle(248, 218, 260, 207, 250, 210);

 

Embedded Sketch:

How this was made: 

I mainly used what I learned in class to create my self portrait. I started with the ellipses to build the main parts, which include the body, the face, the eyes, and the hijab. I wanted the shapes to really be emphasized, so I tried my best to incorporate almost all of them. Sometimes I had to go back to p5’s reference page when I forgot how the coordinates go. (https://p5js.org/reference/)  I also looked at last years projects to help me better understand how to utilize the arc code. There was an error to my code which I couldn’t figure out, and that is when I used AI to help me fix it. Turns out I added one too many coordinates to one line. Overall, the portrait was built from what I learned and experminetd myself.

Reflection:

This assignment made me so much more comfortable with using coordinates and understanding how different shapes can come together. Something to reflect on is how time consuming mirroring can be. I wanted my portrait to be symmetrical and I tried my best to do so. In the future I’d like to experiment with a moving element and more complex shapes, and possibly some interaction. Overall, I am very satisfied with both the process and the final product.