link to concept in more detail: link
link to Arduino and physical structure updates in more detail: link

concept:

My project is an interactive kid’s recipe book. I tried to mimic an interactive kid’s book where children get to interact with the story they are reading.

How does the implementation work?

interaction design

I wanted the user to interact with the project in a similar way that they would interact with an interactive book in those ways:

• • • • the user should be able to to interact with the current page as many times as they wish. ex a child can keep mixing the batter as long as they want. I might improve the game in the future to include a bar on the side of the screen that monitors the mixing/pouring progress and would indicate when the batter has been mixed enough for example. this could make the game more interesting for older people since this would introduce a challenge)
    • user should be able to move through the page on their own pace (so I added a “next” button, but perhaps in the future I can add a back button)

Arduino code

The Arduino code sends the data from all the sensors to P5js, and would receive the state of the oven LED from p5js. Here are some of the sensors and their uses:

• • force sensor – detect mixing motion
  • tilt sensor – detect pouring
  • ultrasonic sensor – detect person picking up ingredients
  • limit switch – to detect the oven door opening and closing

one things that I hope to implement in the future is to implement code that prevents the button from continuously returning 1 if it continuously pressed(I’m currently using a work around in p5js)(Joonha has a snippet of code that handles that that I could possibly use).
I detailed the arduino process and the creation of the structure that houses it in my previous documentation progress post, but at that point I still havn’t connected the arduino to the structure and it took way longer than I expected. I reorganized the wires and used shorter ones to reduce the clutter and make it easier for me to handle them:

–>

I also realized that my button and the wires soldered to it was too long for the Arduino slot in the structure. I wanted to resolder the wires to the button diagonally so that it fits, but I tried to fold the legs of the LED and it worked and ended up fitting in.

p5.js code

code

P5js handles all the game screens, logic and mapping of sensor values…etc.

• • to handle the user running through the pages if the button is continuously pressed I created a “done” variable that is only assigned to true if the user has gone through the page’s task, or if a specific number of frames has gone by.
  • One challenge was to make the pages as intuitive as possible for a young child. I tried to limit the text in the pages and try to use graphics to indicate what should be done in each page. Someone at the IM showcase suggested using audio that reads out the instructions which I think would be helpful!
  • animation was challenging because  I was trying to slow down the switching between img frames. One thing I tried was to slow down the framerate, and then use framCount%2 ==0 however, that also slowed down the button animation. so I tried to use other values in place of the 2 so that, that the img switches every mutliple of 10 for example. but I also wanted the image to be displayed on the screen for a few seconds before being switched again and not only appear for the millisecond where the framecount is a multiple of 10. So I added another if statement that assigns the value of 1 to a variable “other_img” if the framecount is a multiple of 3. if other_img == 1 then the image would be switched.

if (frameCount % 10 == 0)
{
  print(frameCount);
  image(dry_ing_page_2, 0,0);
  other_img = 0;
  if (frameCount%3 == 0)
  {
    image(dry_ing_page_2, 0,0);
    other_img = 1;
  }
}
else{
  if(other_img)
  {
    image(dry_ing_page_1, 0,0);
  }
  else{
    image(dry_ing_page_2, 0,0);
  }
}

• • I also used a few js files in p5js to organize the code. I had a page for variable definitions, classes, page_functions…ect
  • here are a few of the pages:

Final project:

Overall I’m proud of the final project. It turned out a lot neater than I expected.

future improvements

• • I noticed that sometimes people were unsure what to use for this page’s activity. I think that I could add an LED plate(if that’s a thing) that lights up under the object that needs to be used.
  • I think that if I got a chance to redo the structure it would greatly improved
    • • I could the Arduino slot more easily accessible, the back is currently removable to allow me to access the the Arduino when needed but it’s too small
      • I’m not sure how this could be solved but the wire attached to the measuring cup is limiting and might not be a good options for kids who might want to move things around freely. I think that there is an Arduino Wi-Fi module but I’m not sure how that would work with the serial connection between the Arduino and p5js and if that is the best solution to get rid of the wire.

my idea: an imagine play interactive recipe.
current progress:

• • • • The basic structure is built
      • the communication between Arduino and p5js is done (all the information is sent back and forth as needed
      • The sensors and Arduino parts have been tested
    • An instructions page that uses all the sensors has been implemented(this is demonstrated later)

Arduino and Code

Data sent and received

Arduino would send the potentiometer, force sensor, tilt sensor, ultrasonic sensor, button, and limit switch data. The P5js would get that data and use it within the interactive recipe. p5js will also send whether the oven is on or off to the arduino so that it can turn the oven LED on.

force sensor – detect mixing motion
tilt sensor – detect pouring
ultrasonic sensor – detect person picking up ingredients
limit switch – to detect the oven door opening and closing

Testing sensors

I tested that the sensors did what I needed them to do.

I tried the force sensor and decided to use the square one but did the initial testing with the circle one because it was already soldered.

I also tested 2 tilt sensors(I’m not entirely sure what the difference between them is, but the first fit the use better fit my project in terms of it being easier to place on the prop).

then I tried to mimic how they would be used in the project. They seemed to work as intended. I implemented a simple p5js interface that displayed wether the sensor is triggered or not.

When I tried to add the ultrasonic sensor I couldn’t send the data to p5js. I checked that the ultrasonic sensor code works on it’s own and it did. I also checked that p5js was being sent a value and it was, except that value was always 0. I looked through the code line by line and realized that the pins I was using for the Ultrasonic sensor we’re being assigned as an output (but we’re never used as output, I think they we’re part of the initial code to test something but I never removed them). I removed this, and it worked.

Arduino assembly

I started with noting down the wires that need to be connected to each Arduino object so that the wire colors reflect that. (I did change a few wires later on, but those pictures were taken before that so they don’t reflect the changes)

I soldered the wires to the Arduino objects. (I used jumper wires to make the process quicker)

I 3D printed a knob to attach to the potentiometer.

I retested all the Arduino components together with the instructions p5js page.

The bread board looks a bit messy but I tried to keep all the components as neat as possible and ended up moving things around a bit later to make it neater.

also, the tilt sensor was not giving a constant value and kept moving between 1 and 0 when tilted, I realized that I wired the sensor the wrong way and forgot to add a resistor

Instructions page

I started with the instructions page because it would utilise all the Arduino functionalities which helps with the testing and would make the future pages easier to implement. The instructions page would have all the controls and allow the user to test them out to understand how to interact with the project. I thought that this way might be a better way to familiarize the user with the game controls, compared to only having text.
Here is how the screen looks like and the images change if the user interacts with the Arduino components.

building the physical structure

planning

I started to brainstorm the basic structure and decided that the main structure would be an oven with a door and a mixing bowl, a small container and a measuring cup on top. I also wanted to have a small compartment that would have the Arduino components.

I wanted to use wood for the structure. I created the design to cut the wood in and used the “finger joint” method(I believe this is what it is called based on what I found online) to make sure that the structure is strong. (the letters on the align with a sketch I did of the structure on paper and labeling a, b, c… helped me keep track of the measurements)

testing

I started with 1 cm between each comb and a 1 cm comb with a height of 0.3(the width of the material)

I tested that but it was a bit too loose(plot twist: it wasn’t, the little wiggle room is necessary). I settled for 1.03cm combs (with 1cm – 0.03/2 distance in between, not sure if this makes sense but this results in tighter fitting combs)

I also wanted to prepare the measurement for all the Arduino components that would be attached to the structure. I listed all the things that needed to be accounted for and measured all the components and their place on the structure.

All the testing was done a scrap piece of wood that was the same thickness as the wood I intend to use for the project. After I was done with the design and testing I tried to laser cut the design the wood I plan to use for the project. However, the laser cutter wasn’t cutting the wood, I realized that the wood had a different (“structure?”) than the wood I used for testing. I assumed that changing the laser cutter settings could help, but it either didn’t cut the wood, or burnt the edges to ashes.

I didn’t have more of the wood I used for testing but I did have acrylic sheets. I switched the material I was going to use(even though I reallyy wanted to used wood).
I cut the design on the acrylic but had a problem(I also changed the height of the combs to the width of the new material). Then I faced another problem, the pieces didn’t fit together, I think there was an error when I changed the width of the combs, because the acrylic fit in certain angles.

cutting and painting

I decided to redo the combs with the original measurements (1 cm between each comb and a 1cm comb). This worked!
since I was using transparent acrylic I decided to paint it since having all the walls of the structure being transparent might be confusing or too distracting for the user.
I tested out a few colors then painted the structure(I also painted the oven knob so I tested some colors for that too).


I also painted the oven door (the black part is a sticker to cover the parts I want to keep transparent.

assembly

I used super glue(and little white glue and glue gun in some parts) to stick all the parts together. There are a few structural things I would fix if I had time to make another prototype(for example I stuck the structure together in the “wrong” order, so it is slightly unaligned which affects the fit in some places.). I also used glue to add a hinge and stick some magnets to to the door. I also added magnets to the top back wall piece of the structure for easy access to the Arduino.

interface

I was not sure about how the interface would look like. I needed the task for each screen to be understandable with minimal text so that children who cannot yet read can still enjoy the game.

I decided to go with a front view, with a character that indicates what the current task is. I would also have the icons from the first instructions page to remind the child what to use for this task. Some of the pages also have  bars that indicate how long a task should be done for. I also need to consider that I have limited drawing skills, I tried to find game assets online, but didn’t find ones that I really liked. I started sketching a very basic representation of how I want each screen to look:

I tried this style but didn’t like it. I like the idea of the character wearing a Kandoora(Emirati traditional dress), but the eyes bordered on creepy and that was not the theme I was going for.

I asked my sister for input and she suggested a few things one of which is using colors without borders:

I liked this style more and I think I might stick with this style with a few adjustments.

Next steps

• • I will need to connect the arduino into the structure
  • I still need to finalize the p5js pages and find/make the graphics
  • user testing!

Task 1

For the first task, we used potentiometer on our circuit and controlled the X_pos of an ellipse in p5js. We also set up a port choosing thing, so the code requested port connection every time we start the program.
Link to our full code:
https://editor.p5js.org/Zhaniya/full/ft2iMvilF

 

Circuit:

result:

Task 2

We used aaron sherwood’s code code which sends and receive data to the arduino. We tried to move those two lines of code

let sendToArduino = LED_value + "\n";
writeSerial(sendToArduino);

In the draw function instead of the readSerial() function, but that resulted in a errors with the writeSerial function. We also tried to remove the code in the readSerial function that waits for input from the arduino before sending anything while keeping the two lines of code where it originally is, but that wasn’t working either. We ended up using the original code, but we sent random values to p5js from the arduino and sending the LED brightness value (which is based on where the mouse is horizontally) to the arduino.

LED_value = map(mouseX, 0, width, 0, 255, true);
print(LED_value);

Here is a link to the code: https://editor.p5js.org/Nouf-Alabbasi/sketches/gJtQGnh0w

circuit:

the video below shows the LED reacting to the mouse movement (the first video shows the LED and the second Shows the mouse moving)

 

Task 3

For the third exercise we followed similar to exercise 2 steps to complete it. We used with gravity wind example with bouncing ball (https://editor.p5js.org/aaronsherwood/sketches/I7iQrNCull) to send the data to the Arduino. After that, we initialized LED_value and set up serial connection.

Code:
https://editor.p5js.org/Nouf-Alabbasi/sketches/Eq7USk-wJ

 

circuit:

Problems that we faced:

Some of the problems we faced were simply fixed by uploading the code to the arduino microcontroller but others were a little more challenging to fix. One thing that was not going the way we expected was the LED not gradually changing from one value to another. It seemed to jump from on to off which is not what we were going for.
Here is the p5js code:

// define the LED brightness as the mouse movement
LED_value = map(mouseX, 0, width, 0, 255, true);
print(LED_value);
…
let sendToArduino = LED_value + "\n";
writeSerial(sendToArduino);

And here is the Arduino code:

…
int LED_val = Serial.parseInt();
if (Serial.read() == '\n') {
analogWrite(2, LED_val);
…

One hypothesis is perhaps parseInt doesn’t handle decimals in numbers, so we expect that it might’ve stopped at the first part of the decimal before the decimal. The numbers should still be usable though, so this doesn’t fully explain why the LED wasn’t being controlled in the way we wanted. (After searching online we found that using parseFloat would be a better fit for our code.

 

 

 

 

 

 

 

For the final project I wanted to create an interactive recipe book. I was in

spired by the interactive children’s books, where the child could move or

pull parts of the book to interact with the story. I would use Arduino to allow the user to interact with the story/recipe on the computer screen.

I started to brainstorm ways the user could interact with a story/recipe. (at this point I was just trying to find what sensors could be used and the possible ways, I didn’t know what the story would be or the scenes/interactions that I needed)

I then started to brainstorm ideas and decided that an interactive children’s cook book would be interesting. I think I would only create the interaction for one recipe (because of the limited time) but I hope to keep the idea of possible expansion when building the hardware to make sure that it is expandable.

I found some recipes that I liked and listed some of the main steps then tried to find sensors that could be used for the interaction.

I then started to think of the structure that would hold the Arduino parts. had two ideas for this project. I could either create a wooden structure(explained later) or a book like structure. I would use cardboard as the pages and would stick the buttons and so on between pieces of cardboard to make sure that the wires are hidden. There a few things I would need to resolve when it comes to this idea. for example I would need a lot of sensors and buttons (… etc) because each page has it’s own. I would also need to decide how I’ll store the microcontroller and where the wires would go. Another issue is scalability. To use the device to tell another store/ show another recipe I would need to create another book.

the second idea is to create a wooden structure that would hold the Arduino Uno microcontroller (I also plan to use a shell instead of a breadboard to connect all the things to the microcontroller).

• • • • I would use black acrylic for the stove (I might add a red LED in the middle that turns on when the oven is turned on).
      • I will also have a potentiometer on the front left side that would act as the stove knob.
      • I would have a bowl glued to the middle of the board. There would also be a measuring cup on the board too.
        • • The measuring cup would not be glued to the board because the user should be able to remove it and “pour” things into the bowl.
          • I might add an elastic string that connects the cup to the board so that it pulls the cup and wires back into place so the user doesn’t need to deal with putting the wires.
          • I might also use heater tubing around the title sensor’s wires so that they are not all over the place
      • I haven’t included this in the sketch below but I also want to include a cup that the user can scope ingredients from. I would glue it to the board with a distance sensor to detect the user’s hands are above the cup.
      • I would also add a button that would mainly be used to logistic reasons like moving to the next step or starting (haven’t decided the exact function yet)

There are still quite a few things to resolve but this is the current general idea. I plan to start the Arduino parts then build the structure to make sure I can fit all the things I want to include.

Our idea for the musical instrument was to use sounds that the servo motor created rather than incorporating the piezo buzzer. So, we decided to try and recreate a gumball machine and the sound it makes when the gumballs fall out of the machine.

The Physical Design Process

We built the structure using a box, water bottle and cardboard. We then prepared the servo motors and prepared a cardboard piece to act as a ball stopper to control the amount of balls that fall through the hole.

 

 

 

 

 

We attached the servo motor and started testing out the servo motor with balls made from different materials to see what sound they made. We also decided to create two ramps for the balls to slide on to make more sound. As for the materials, we used pipe-cleaners, paper, and marbles. We found that the marbles made the best sound and rolled nicely down the ramp. The paper balls made a decent sound, whereas the pipe-cleaners were almost silent when they fell.

 

We attached the servo motor and started testing out the servo motor with balls made from different materials to see what sound they made. We also decided to create two ramps for the balls to slide on to make more sound. As for the materials, we used pipe-cleaners, paper, and marbles. We found that the marbles made the best sound and rolled nicely down the ramp. The paper balls made a decent sound, whereas the pipe-cleaners were almost silent when they fell.

Here is the final version of the physical components:

And here is the schematic of our circuit:

Some things that didn’t work out as expected…

Our initial plan was to have the balls fall down one by one, but that didn’t work as expected. The balls either fell together when the ball stopper opened, or they would get stuck even when the stopper opened. When they do fall down, most of the time they wouldn’t roll down the ramps as intended. Usually, the balls would fall to the side, fall straight down, or when it does fall on the slide it wouldn’t roll all the way down and it would get stuck on the ramp. In this case, the marbles worked best since they were smooth spheres, but the marbles also had the problem with falling to the side. Additionally, at first we wanted the stopper to open and close continuously after one button press, but currently it just does the cycle once and you have to keep pressing the button for the continuous opening and closing.

The Coding Process

For implementing the sensors, we decided to use a push button and potentiometer. We used the button to control the servo motor, which either blocks or unblocks the hole where the balls fall out of. When it is open the balls fall out, and when it is closed the balls are stopped. To do this we used 2 if statements that checked if the button is clicked once, in which case the lever is opened, and if the button is clicked again then the lever is closed again.

 if(clicks%2 == 0)
 {
   pos = 0;
 }
 else{   
   if (pos <= 70)
   {
     pos += servoSpeed;
   }
}
 
myServo.write(pos);
delay(100);

Another variation of code was to have one press do both the opening and closing of the ball stopper. This was the code we used:

if (buttonState == 1){
   for (pos = 0; pos <= 160; pos += servoSpeed) {
      myServo.write(pos);             
      delay(15);                       
   }
   for (pos = 70; pos >= 0; pos -= servoSpeed) {
      myServo.write(pos);              
      delay(100);               
   }
  } else if (buttonState == 0) {
    myServo.write(70);
    delay(15);
  }

We experimented with the delay, and the number for the position of the servo motor. If we made the delay longer, the servo motor would take longer to reach the position. Moreover, since the potentiometer controls the speed of the servo motor, when the potentiometer is at the maximum number, the servo motor moves faster, but since the delay is longer it doesn’t seem as fast. When the delays were all set to 15 and the potentiometer was at the maximum, the servo motor didn’t sweep the full amount (i.e. it didn’t complete the number of degrees in the for loop). While this was experimental, we ended up liking the sound it created and the movements of it.

Finally, here are a few different videos of our music machine!

This one is the first code, where one press opens and the other press closes it:

 

This one all the delay amounts are the same. We didn’t experiment with the potentiometer for this version, but the sound was nice:

 

This one has one long delay:

 

And this final one we tested with just marbles and shortened the long delay, which was in the previous video:

 

for this project I used the potentiometer to control which LED is turned on. I used mapping to map the sensor’s values to values between 2-5 (the LED pin numbers)

I used this snippet to turn the current LED on and turn the surrounding LEDs off.

digitalWrite((aSensor-1)%6, LOW);
digitalWrite(aSensor, HIGH);
digitalWrite((aSensor+1)%6, LOW);

 

here is how the circuit looked like (I accidentally drew this with the output to the left and input to the right unlike the convention)

here is a video of the LEDs

This video shows the LEDs without turning off the previous LEDs ((aSensor-1)%6)

I also wanted to use a pushbutton and a potentiometer to control an LED. I used the potentiometer to control how often the LED flickers (I used an array of values to control the brightness of the LED to make it look like it’s flickering) and I used the pushbutton to control if the LED turns on or off.

analogWrite(LED, flicker[current_ficker_value]*LED_on);
delay(aSensor);

The previous code takes a value from the array called flicker and multiplies that by LED_on. LED_on is a viable that equals 1 after the button is clicked and is set to 0. the potentiometer then sets the delay value (which is mapped between 30-100).
here is a picture of the circuit

here is a video of it running:

some things I tried but didn’t work:

• • tried to change the brightness of the LED by multipling the brightness Array by a certain franction but the numbers did not vary enough to show (becuase the fraction I multiplied with was too small(1.5 which is number that when multiplied by the largest number in the array returns 255))
  • I also tried to use a fucntion that takes a variable; whether the LED is on or off, and runs through the flicker array but I realized that becuase the I used a for loop to go through the flicker “stages” the response to the push button wasn’t being processed until the end of that for loop. this made it look like it wasn’t responsive
  • I finally decided to use a variable I increment in the loop function using (current_ficker_value = (current_ficker_value+1)%7;)

I wanted to experiment with conductive substances and I remembered that I’ve seen that graphite is a conductive substance. Once the internet confirmed that I began testing and creating the switch. This is the first simple circuit I created. I used the arduino connected to some batters as an energy source. I also didn’t use a resistance because graphite is a poor conductor(apparently graphite is used in resistors(this is based on a quick google search, this information could be wrong))

Once I made sure that the graphite lines on the paper were acting as conductors and that the LED does light up I tested out the switch. I drew the circuit with a disconnect. I folded a paper and drew a circle that connects the two lines when the flap is pressed down.

I also realized that the LED legs are wires, hence if you keep twisting and folding the legs they will eventually break off.

Here is a video of the final switch.

 

I drew a moon and sun so that the light turns on when it’s night(and the moon is on the circuit) and off when it’s morning(when the sun is on the circuit).

Improvement

I think it would be interesting to test how long the circuit could be and still light up the LED. it would also be cool to build a more interesting circuit like an interactive story or something!!

The game:

link: here

inspiration:

There used to be this game called Purble Place by Oberon Games. This game was available on windows operating systems by was removed from the newer ones. The game has a collection of smaller games and the one I was most inspired by was called comfy cakes.

The goal of the game is to try and mimic the cake displayed in the top left corner while the conveyer belt moves the plate(papers in this case). The game has buttons to move the conveyer belt however the cake orders would keep coming so you would need to work fast.

what my version has:
I looked at the game version and picked the aspects I want to recreate and the ones I wanted to change. I watched a few videos of the game, and looked at pictures since I couldn’t play the game because it’s no longer available. I decided to simplify the graphics so I can focus on the code aspect. (Picture of notes on the side, not sure why it’s blurry)

I also had to decide on a game logic of how the players win and lose and so on. This would also help me decide on what classes would control which part. This is the logic I decided on:

• • • the player would first be presented with the main page the move to the instructions page after-which the player can start the game
    • the game it self would consist of a conveyer belt that moves the plates. once the cake is under one the dispensers the player must click the dispenser to add the cake part.
    • The player’s goal is to add as many cake parts correctly before running out of orders.
    • The player wins if the player gets at scores 80%.

things implemented successfully:

• • • a new cakes are being automatically recreated once the current one leaves the window
    • two classes are created (
      • • cake creator class
          • keeps track of the total score
          • number of cakes
          • creates new cakes
          • draws the cakes
      • single cake class
        • creates only one cake
        • adds parts to said cake
        • keeps track of only it’s score
        • check if said cake is under (within a certain range of) the dispenser
    • the cake parts are added once the user clicks on the dispensers

Features I didn’t plan to implement but would be cool:

• • • a score board (learned how to send and req data from APIs in connections lab, so I can use a google sheets API to store the user’s data and display them)
    • Different difficulty levels
    • add more cake features to make it more challenging

 

Design aspects

• • I also wanted to work on the design aspect and make sure that the design of each page is intuitive and also has a consistent theme.
    • The main page looks like this. I looked for free graphics online and cropped the ones I liked. the cake slices are rotated and “float”(move) a round a bit to make the page less static. The background has sprinkles which are randomly drawn lines.
    • there is a button that says start. if the user hovers over it it darkens to make it clearer that it is a button. the cursor also changes to a pointer.
    • 
    • the instruction page has the same sprinkles but has a translucent rectangle in front of it to make sure that the text is readable. this page also has a button
    • 
    • This is the game page. it shows the score and the number of orders left. It also shows what the cake should look like. It has an audio that indicates that a new cakes is created and another that plays when the dispensers are used.
    • One thing I would change is the way the dispensers look. I wanted to get better graphics for them and include the text better did not have time to do that.
    • This is the end game page. It offers the user the option to go to the home page or to restart the game. It also displays if the user won or lost and their score (the score here is there was only one cake order, I was only testing here)
    • The page also has the same translucent layer as the instructions page  but here I added some more graphics.
    • 

aspects that I am proud of:

I think that the code was neater than I expected it would turn out. I anticipating that this project would be a long one and that things might not be as intuitive looking back a few days later I tried to neaten the code as I went, keep the variable names descriptive, and create functions for things that I expect to use multiple times (like the buttons). But I usually say I’d do that and end up being lazy and picking unintuitive names for variables, but I stuck to it this time which I am proud of. I think that the code could still benefit from being spread on multiple js files (if that is possible).

challenges:

one of the challenges was handling all the different components of the game. The code got really long (like I assumed it would), I tried to prepare for that by making sure that my code is modular and by using many drafts with clearly stating the functions each draft achieves. Those two things made it easier for me to go back to previous versions, and also ensured that  if a feature did break, the code would be minimally affected and recovering would be easier. I changed the cursor when hovering over the navigation buttons, added an instructions page, and tried to keep the design simple. However, I believe that there are still some things that I didn’t anticipate the user would need. I’ll fix this gap by letting someone interact with the game and noting down where they struggled and what they didn’t understand on their own. I think that this would give me more insight into the user’s experience however I did not have the time to do this for this project.

some things that were helpful in p5js:

• • • • • you can use textWidth(“Text”) to get the width of the text. this helps when centering text
        • you can do random(list_name) to get a variable from the list instead of doing random( list_name[random(range)) and using a function to get random integers to get an index.

For our midterm project I wanted to recreate a game that I used to play as a kid. The game is called Purble Place and it has three game options within it.

I decided to recreate this one. The goal of the game is recreate the cake displayed in the small window at the top left. I believe that you have a maximum number of times you get the game wrong before you lose.

I started by brain storming the aspects of the game that I wanted to recreate and the classes I would use (I’m not sure why the images are blurry, could be because they are screenshots)

I then started to implement the game in p5js. I wanted to keep track of the functionalities that each draft of the game has and maybe what are the issues and what is to be done next. This would make it easier to remember what each draft does incase I need to go back and use something from it. To do this I added comments at the top of each draft outlining those things.

In the first draft I drew the cake(created a cake class to do this) and tried to add each aspect by clicking within a certain range.

In the second draft I tried to move the cake

In the third draft I made a class that creates new cakes after the current one leaves the window

In the forth draft I added graphics and implement the button clicking within the class. I also added the score at the top left

In the forth I added a conveyer belt.

to do:

• • • remove placeholder graphics and add actual  graphics
    • add more options for each aspect of the cake (more colors…)
    • display the expected cake(the cake that the user needs to try and mimic)
    • add audio
    • keep track of how many cakes were produced
    • figure out when to stop and start the game (timer?)
    • Implement restart mechanism

For this project we needed to create a data visualization. I wanted to explore Arabic text and how it could be displayed. I started by creating a list of the alphabet and playing around with how it looks with different transformations.

I started with some rotation and transformation

I then created a function that takes some of the alphabet and prints them, each would be rotated a little to create a circle and they would repeated across a line

I then added movement to the rotation to create a swirl like shape

 

I reversed the swirl and printed it on top. Then I experimented with colors, sizes and numbers.

I then tried to reprint the background in the draw

Then I thought it might be interesting to go back to the initial code and reverse the speed once the letters reach a certain position and re-add the background

This created something that was a little more readable. The next step would be to use Arabic text instead of random alphabets.