Final Project Update: Half-Live Fruit Ninja

To be honest, I still don’t have a super clear idea of what I want to do with my project because I keep changing my mind, but currently I have the bare minimum elements working. For my project, I want to create a live version of Fruit Ninja, a classic mobile game that requires finger swiping interactions. For the live version, I will be using 4 different colored buttons, each button corresponding with the color of the fruit that appears on the screen. For example, if a red fruit shows up, the player should press the red button.

So far I have one of the 4 buttons working, just to test, but it doesn’t work the way it’s supposed to. It took me quite a while to figure out how to do the serial communication, but I realized that I need to send to Arduino the same amount of data that I want to receive on p5 (at least that’s what worked). At first I was only sending one thing, because technically I don’t use any information from p5 yet), but when I was receiving Arduino data it wasn’t working.

Physical Components

The physical components for my project are 4 buttons, a distance sensor, and one LED. The LED lights up when the distance is less than 10 cm. One thing I noticed is that the LED does not light up as bright sometimes when using the distance sensor, whereas when I used it to test if the buttons worked it was very bright (the testing was all in one program). So this is something to think about, because I tested both analog and digital write.

Screen/Digital Components

Here is a link to my work in progress p5 code. As I said earlier, I tested just the red button. Good news is that it removes the fruit when it is pressed, but the difficult thing to figure out is 1) how to remove only one fruit when it is pressed and 2) remove the fruit that corresponds with the button color. When I figure out these two issues, the rest of the project is mainly fine tuning.

I am still debating on whether or not I should add the distance sensor or not now. One idea that I came up with is to mark the floor where the player should stand and give then a “sword” to hit the buttons with. That will maybe make the game more challenging and eliminates the distance sensor.

Things I still need to work on:

    • Getting the color of the button to correspond with the color of the fruit.
    • Remove one fruit at a time when pressing a button.
    • Distance sensor to create an invisible barrier (maybe?).
    • Animate the fruit to look like it’s being thrown.
    • Aesthetics (but this is the very last thing to worry about).

 

 

Final – Update

I have admittedly fallen behind in terms of progress (in comparison to the current date), but I fortunately do have some updates to share! I have been able to commit to my chosen concept and start working on the primary components of the project.

The Concept, Revisited and Given Life

The base concept for my project involves an Arduino-based musical instrument of sorts that 1) the user can interact with to play notes and 2) is able to trigger a certain change in the p5js sketch when a correct tune—so a correct combination of notes—is played. As the general idea and its essential components were set in stone, I set out to first make the instrument itself. The plan was to have a device with five buttons that each play a different note through a speaker when pressed (D4, F4, A4, B4, D5). After some tinkering, I settled on a circuit that worked, the diagram of which looks like:

The actual circuit:

And now, the most prominent milestone so far: I was able to construct the code that I needed to achieve the desired effect from Arduino! Using arrays, I was able to simplify much of the repetitive code and condition checks, with the final result being:

#include "pitches.h"

int buttonPins[] = {
  2, 3, 4, 5, 6
};
int pinCount = 5;
int buttonStates[5];
int notes[] = {
  NOTE_D4, NOTE_F4, NOTE_A4, NOTE_B4, NOTE_D5
};
const int BUZZER_PIN = 8;
bool counter = false;

void setup() {
  Serial.begin(9600); // Initialize Serial
  for (int buttonPin = 0; buttonPin < pinCount; buttonPin++){
    pinMode(buttonPins[buttonPin], INPUT_PULLUP);
  }

  pinMode(BUZZER_PIN, OUTPUT); // Set Arduino Pin to Output Mode
  pinMode(13, OUTPUT);
}

void loop() {
  for (int buttonPin = 0; buttonPin < pinCount; buttonPin++){
    buttonStates[buttonPin] = digitalRead(buttonPins[buttonPin]);
  }
  for (int buttonPin = 0; buttonPin < pinCount; buttonPin++){
    if (buttonStates[buttonPin] == LOW) {
      if (counter == false) {
      Serial.println(buttonPin); //Sends Number of Button Being Pressed to p5js
      counter = true;
    }
    digitalWrite(13, HIGH);
    tone(BUZZER_PIN, notes[buttonPin], 500);
    delay(500);
    noTone(BUZZER_PIN); // Stop the tone playing:
  }
  else if (buttonStates[0] == HIGH) {
    digitalWrite(BUZZER_PIN, LOW);  // Turn off
    counter = false;
  }
  }
}

The use of for() loops in tandem with the buttonPins[] and notes[] arrays facilitates much of the input and output management here, with a notable line of code being Serial.println(buttonPin), which is used to send the “number” of the button being pressed to p5js. As I continue working on my project, I will be able to gather these outputs and run condition checks on p5js that determine whether the “correct” string of buttons (notes) has been played. Again, this will then trigger certain effects depending on the song. With the base Arduino-instrument completed, I can now move onto the next stages of the project—I look forward to what I can make of this vision!

Aisha Design Meet Disability Reading

The reading talks about how the design of products aids people with disability. It was really interesting as I never really thought of how certain designs do accommodate people with disabilities – I’m usually unaware of it.

The author mentions that the traditional views on design for disability have been to hide the disability which creates a negative connotation. Not only does it hide a part of the person, but it may also tell the person that they should be ashamed to publicly show and express their disability which could actually be a part of what makes them who they are.

An example of a design for the disabled they gave is eyewear. Glasses have shown the way some people may divert from this traditional view. There are many ranges and styles for eyeglasses giving people the choice to pick out what seems more comfortable and fashionable to them. There are also many people nowadays buying eyeglasses just for the aesthetic even if they have no prescription for them. However, if we look at another design they mentioned such as a prosthetic leg many people may associate negative connotations with it and may hide it due to it ‘not being goodlooking’ even though it is totally functional. I definitely think this needs to change. I don’t think anyone should have to feel that they are ashamed of their disability.

The last thing I want to mention is that I definitely agree with the fact that these designs should be as simple as possible. The main point of these designs is to help people who are disabled. The designs should be simple enough for the users to be able to use them to their full potential without stressing them out.

Serial Communication Assignments

This was my hardest project yet. i spent a lot of time with my code and having a bunch of errors that I didn’t understand. after i tried to get some help from the internet i got a bit of a better understanding. what really helped is when I remembered what the professor said about old students records being on the WordPress site. this is my best attempt that kind of worked.

Task 1    

For the first task we were instructed to use a sensor on Arduino to make an ellipse in p5 move horizontally. And to have nothing on Arduino being controlled by p5.

After looking thru projects i decided to use a potentiometer to control the axis of the ellipse.

This was my p5 code.

function setup() {
  createCanvas(640, 480);
  textSize(18);
}

function draw() {
  background(54);
  map(100,0,1023,0,width);
  ellipse(100,height/2,100,37);
  
 

  if (!serialActive) {
    text("Press Space Bar to select Serial Port", 20, 30);
  } else {
    text("Connected", 20, 30);
  }

  
}

function keyPressed() {
  if (key == " ") {
    // important to have in order to start the serial connection!!
    setUpSerial();
  }
}

function readSerial(data) {
  ////////////////////////////////////
  //READ FROM ARDUINO HERE
  ////////////////////////////////////

  if (data != null) {
    ellipseXPos=data;
    }

  
}

My Arduino code:

I used it to just connect the sensor to the p5 sketch

void setup() {
  Serial.begin(9600);
}

void loop() {
  // wait for data from p5 before doing something
 
    
  
      int sensor = analogRead(A0);
      delay(1);
      Serial.println(sensor);
    
  
}

Task 2

For the second task we were initially asked to control the LED brightness. When i first took a stab at it i had no idea how to start. I initially tried to do it with mouse press but after looking at others projects  For inspiration I saw people used diffrent keys to control the brightness so i decided to do the same.

I was initially trying to use the B key for brightness and D for dull. for some reason i got an error. but after i tried the arrow keys like one of my colleges it seemed to work.  This is part of my code

let brightness = 0; 
let value=50;



function setup() {
  createCanvas(600, 600);

 
}

function draw() {
  background(255);
  
  if(value>255){
    value=255;
  }
  if(value<0){
    value=0;
  }
 
  
  brightness = value;

Arduino code:

int LED = 11;
void setup() {
 Serial.begin(9600);
 pinMode(LED, OUTPUT);
 while (Serial.available() <= 0) {
  Serial.println("Wait");  // send a starting message
   delay(300);               // wait 1/3 second
  }
 }
 void loop() {
  // wait for data from p5 before doing something
 while (Serial.available()) {
   int brightness = Serial.parseInt(); 
    if (Serial.read() == '\n') {
     analogWrite(LED, brightness); // turn on LED and adjusts brightness
     Serial.println("LIT"); 
    }
  }
 }

Task 3

This task started off as the easiest one but ended up being the most confusing.  I started of by looking at others projects like i did previously and i saw people using  the gravity wind example  so i took a look at that. I created. a p5 Code and didn’t get an error but when i hooked it up to Arduino it didn’t work.

 if (!serial Active) {
    text("Press Space Bar to select Serial Port", 20, 30);
  } else {
    text("Connected", 20, 30);
  }
  
  
  ellipse(position.x,position.y,mass);
  if (position.y > height-mass/2) {
      velocity.y *= -0.9;  // A little dampening when hitting the bottom
      position.y = height-mass/2;
      LEDbrightness=1;
      
    
    }
  else{
  LEDbrightness=0;
  }
  if(windSpeed<500){
  wind.x =-1;
  }
  else if(windSpeed>600){
    wind.x=1;
  }
  else{
    wind.x=0;
  }
  print(windSpeed);
  
  
}

Arduino

void setup() {
  Serial.begin(9600);
  pinMode(2, OUTPUT);
  // start the handshake
  while (Serial.available() <= 0) {
    Serial.println("0,0"); // send a starting message
    delay(300);            // wait 1/3 second
  }
}

void loop() {
  // wait for data from p5 before doing something
  while (Serial.available()) {
    int LEDstate = Serial.parseInt();
      
    
      digitalWrite(2, LEDstate);
      int sensor=analogRead(A0);
      
      
      Serial.println(sensor);
      
    
  }
}

Conclusion 

Although i spent a bunch of time with this project and it wasn’t perfect in the end I think I learned a lot out of it. This really helped me get coding on another level. Especially when it comes to Interactive Media. It humbled the level that i thought i was at( in a good way)

 

Final Project Progess Update

I decided for the final project to improve on my midterm project game, which is the pac-man game. In this post, I will discuss the role of p5.js and Arduino in my project and how the communications happen between them. Moreover, I will talk about the hardware stuff that I am using for this project.

Hardware devices

To build an interactive system that can control the pacman game in my laptop I will use an arduino Uno and a breadboard with wires. The major hardware component for my game is a joystick that I will attach to the breadboard to control the game. You can see this joystick attached below.

Monster Joysticks BASIC Arcade Joystick - Red

Furthermore, I want to add few indicators that will show the user their progress in the game. For example if the user needs 15 points to win the game then I will have three indicators and each indicator will light up if the user reaches 5 points. The three indicators will all light up together and start blinking when the user wins the game.

The role of p5.js

In my interactive system p5.js will contain all the commands needed to run my game on p5.js interface, which I have done for my midterm project. In addition to this p5.js should also read 4 different values from arduino which will be the UP position, DOWN position, LEFT position and RIGHT position. If any of these values is zero then in p5.js I will write if statements to move the pacman towards this direction. For instance, if UP is zero then pacman moves towards the up direction. In addition to this  p5.js should send the current score value to arduino so that the arduino IDE will deal with this value and light up the different indicators accordingly.

The role of Arduino Software

The arduino software will be the main bridge connecting my hardware stuff to the game on p5.js. The arduino should read 4 different values based on the joystick movements. After testing the joystick motions I figured out that the joystick returns 4 values and whenever I move it to one end, then one of the four values will return 0. Based on this observation I will be able to control the game on p5.js.

Furthermore, the arduino software will read value of score from p5.js and update the state of the indicators based on these lights.

I am very excited to complete this project but I am still a bit confused about how the physical structure for my project will look like and I hope to be able to figure out this challenging thing soon.

 

 

final project progress update

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.
potentiometer testing
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!

Week 12 Final Project Progress – Ahmed & Abigail

For this final project, I will be working with Ahmed as a group. We decided to go with our initial idea of making an interactive art piece. However, we considered what Professor Shiloh advised us during class when we shared our idea and started thinking about how we can make it more interactive and not lose the attention of our audience in 5 seconds. Before we started thinking more creatively, we were set on just making an art piece inspired by graphic art. Ahmed’s first post on this concept is linked here.

The art piece looks as if you are looking from above into a room filled with interactive walls. This digital art interacts with the user through mouse or sound control. Initially, we just wanted to replicate this same idea using p5.js and Arduino and make it come to life with materials in the IM Lab.

However, after taking into consideration what Professor Shiloh told us, which was that it would only keep the user entertained for a maximum of five seconds and need to come up with a way to make it more engaging, we did just that.

First, no more boring colorful blocks that look like walls. To be more aligned with our initial theme of depicting a living, breathing, organisms that reacts to different inputs, we have a more specific theme now: Stranger Things. If you are not familiar with stranger things, below is a trailer to season 1.

There are 4 seasons of stranger things now. The monsters that the group of kids fight are living, breathing organisms of some kind. The main things you and the user need to know is that one of the monsters on the show is called a Demogorgon. Below is a picture. The picture shows how it looks when it’s head is closed versus when it is open.

Closed Head vs Open Head (middle guy)

It kinds of looks like a very scary version of the Venus Flytrap plant.

At first, we were thinking of a plant/nature theme where we would depict some type of garden or collection of ferns or Venus Flytraps interacting with each other. It would have been more on the pretty nature side of things, but we thought Stranger Things could spice things up a little. We started looking for inspiration and we found this 3-D printed Demogorgon. We will only 3-D print the head and it would sit upright on the board we built. We plan on having the heads open and close as the user interacts with them through different mediums.

3-D printed Demogorgon. Inspiration.

Our interactive Demogorgon project will include speakers playing ominous music, flex sensors, an ultrasonic sensor, and big flaps of the monster’s head being controlled with Servo motors. Using these components, the user will be able to interact with the living, breathing Demogorgons and have a little fun with them.

To make the whole project even more immersive we created a narrative behind the Demogorgon and the user being able to choose to interact with it as the protagonist or the antagonist.

 

Description of Arduino program will do with each input and output and what it will send to and/or receive from P5

Using Adruino, we will be controlling the Servo Motors, and checking for any analog inputs from the flex and ultrasonic sensors. The sensor values are mapped to (0, 180) using the following section of code:

  OutsideFlexValue = analogRead(OutsideFlexPin);
  delay(15); //adding slight delays to make it stable

  InnerFlexValue = analogRead(InsideFlexPin);
  delay(15);

  servoPositionOutside = map(OutsideFlexValue, 24, 48, 45, 180);  // need it to rest at a midwards position

// int round10(int servoPositionOutside);

  servoPositionInside = map(InnerFlexValue, 24, 48, 45, 180);

 

It will send out a signal to the p5js program every time it hits a pre-determined threshold value. The out-sent value is to let the P5Js code know to play a growling sound along with the petals opening wide.

Description of what the P5 program will do and what it will send to and/or receive from Arduino

In order for the user to control or choose the interaction they would like to have with the Demogorgon, we will use p5.js. We will display an instruction screen followed by a digital button screen where the user can select presets and change between modes. For instance, the user will be able to choose between using the flex sensors with the glove or with the ultrasonic distance sensors to have different interactions with each.

From arduino it will receive the aforementioned serial communication to let it know when to play certain sounds.

Future Improvements:

  1. Need to work on the mechanical aspect of the project more. The initial testing has shown that the servo motors cannot be used with a large armature due to force constraints.
  2. Need to streamline the code to reduce input delay

 

Sources We Used for Inspiration and Resources:

  1. For the fonts: https://www.dafontfree.net/play-regular/f157734.htm
  2. For the coin animation: https://gifer.com/en/gifs/coin
  3. For the background music:
  4. For the Flex-Servo control: https://www.youtube.com/watch?v=iNmdfKcG9E0

Problems and Solutions:

  1. The main problem we had from the start was that there was a lot of interference from the 5v pin on the Arduino which was causing the motors connected in parallel to jitter even when they were not being activated. We tried changing wires, changing components, making the digital pins far away as possible, and even using a different board but none of it worked.

Solution: The solution as the professor suggested was to use a separate battery to operate the servos with only digital PWM pins being connected to the board itself. This reduced the jitter to negligible.

Some Progress Pictures:

Preliminary flex component testing: flexsensor

A demonstration of the fitted component moving:

Progress Pictures Google Drive link

Final Project: Progress

Finalized Concept

The finalized concept of my project is 3D Etch-a-Sketch, with dimension being 31 x 31 x 31.

Breakdown: Arduino & Circuit

      • Direct Input (+processed): 8 potentiometers and 2 switches (buttons)
        • 3 potentiometers: x, y, z coordinate of the drawing block (0-30)
        • 3 potentiometers: R, G, B value of the drawing block (0-255)
        • 2 potentiometers: x, y angle of rotation of entire drawing (0-360)
        • 1 switch: choose among displayAll/disableIndicators/disableAll
          • displayAll: display 3D space indicators and block outline
          • disableIndicators: disable 3D space indicators
          • disableAll: disable 3D space indicators and block outline
        • 1 switch: toggle eraser mode & long press to reset all
          • Build: normal drawing block
          • Remove: invisible drawing block (erase blocks)
          • Reset Warning: press 3 seconds to enter, warn that if pressing is continued, entire drawing will be removed
          • Reset: continued press (total 6 seconds) to enter, clear all blocks
      • Direct Output: None. p5.js will take this part.
      • Serial Input: reset
        • reset: receive value 1 when the blocks are cleared. Resets some variables, including display mode and eraser mode.
      • Serial Output: All values generated by direct input
        • x, y, z coordinate of the drawing block (0-30)
        • R, G, B value of the drawing block (0-255)
        • x, y angle of rotation of entire drawing (0-360)
        • displayAll/disableIndicators/disableAll (0-2)
        • build/remove/reset warning/reset (0-3)

Breakdown: P5.js

      • Direct Input: serial communication setup & test inputs
        • Click canvas to trigger setUpSerial()
        • Basic keyboard controls for testing.
          • Will likely be disabled in final product
      • Direct Output: displaying of 3D Etch-a-Sketch
        • (many are already described in Breakdown: Arduino & Circuit)
        • On setup, a 31 x 31 x 31 block space will be created
        • Convert x, y, z values into 3D space coordinates
        • Convert R, G, B values into a color of the drawing block
        • Convert px, py values into a 3D perspective (view angle)
        • displayAll/disableIndicators/disableAll
        • toggle eraser mode & reset warning/reset all
      • Serial Input: All values coming from Arduino
        • (already described in Breakdown: Arduino & Circuit)
        • x, y, z
        • R, G, B
        • px, py
        • displayAccessoryMode
        • eraserMode
      • Serial Output: reset
        • (already described in Breakdown: Arduino & Circuit)

Summary

Arduino will take care of all inputs. P5.js will take care of all outputs. All interactions have one-to-one direct outcomes.

Progress (Dec 3, 2022): p5.js

Since the sketch will not work without Arduino side being set up, the sketch will be linked: https://editor.p5js.org/ob2sd/sketches/2C81Ie2p_

As of now, the test mode can be enabled with the below modification:

function draw() {
  if (!serialActive) {   // serialActive  -->  !serialActive
    ...
  }
}

Use wheel click or right click + Esc to interact with the canvas. Left click will trigger setUpSerial(). Use arrow keys to change perspective (rotation angle of entire drawing). Use numpad (123  789) to control x, y, z coordinate of the drawing block.

Progress (Dec 6, 2022): p5.js

Test mode can be enabled with the following modification:

let debug = true;

Use Ctrl + F and find variable debug to see which interactions are implemented in debug mode.

The physical controller is in the process of being built.

Group

I will be likely working as solo, although I am open to anyone who can help me with the physical side of the project.

Project Update (abigail and ahmed’s project)

Finalized Concept and Design

For this final project, I will be working with Abigail as a group. We decided to go with our initial idea of making an interactive art piece. However, we considered what Professor Shiloh advised us during class when we shared our idea and started thinking about how we can make it more interactive and not lose the attention of our audience in 5 seconds. Before we started thinking more creatively, we were set on just making an art piece inspired by graphic art. My first post on this concept is linked here.

The art piece looks as if you are looking from above into a room filled with interactive walls. This digital art interacts with the user through mouse or sound control. Initially, we just wanted to replicate this same idea using p5.js and Arduino and make it come to life with materials in the IM Lab.

However, after taking into consideration what Professor Shiloh told us, which was that it would only keep the user entertained for a maximum of five seconds and need to come up with a way to make it more engaging, we did just that.

First, no more boring colorful blocks that look like walls. To be more aligned with our initial theme of depicting a living, breathing, organisms that reacts to different inputs, we have a more specific theme now: Stranger Things. If you are not familiar with stranger things, below is a trailer to season 1.

There are 4 seasons of stranger things now. The monsters that the group of kids fight are living, breathing organisms of some kind. The main things you and the user need to know is that one of the monsters on the show is called a Demogorgon. Below is a picture. The picture shows how it looks when it’s head is closed versus when it is open.

Closed Head vs Open Head (middle guy)

It kinds of looks like a very scary version of the Venus Flytrap plant.

At first, we were thinking of a plant/nature theme where we would depict some type of garden or collection of ferns or Venus Flytraps interacting with each other. It would have been more on the pretty nature side of things, but we thought Stranger Things could spice things up a little. We started looking for inspiration and we found this 3-D printed Demogorgon. We will only 3-D print the head and it would sit upright on the board we built. We plan on having the heads open and close as the user interacts with them through different mediums.

3-D printed Demogorgon. Inspiration.

Our interactive Demogorgon project will include speakers playing ominous music, flex sensors, an ultrasonic sensor, and big flaps of the monster’s head being controlled with Servo motors. Using these components, the user will be able to interact with the living, breathing Demogorgons and have a little fun with them.

To make the whole project even more immersive we created a narrative behind the Demogorgon and the user being able to choose to interact with it as the protagonist or the antagonist.

 

Description of Arduino program will do with each input and output and what it will send to and/or receive from P5

Using Adruino, we will be controlling the Servo Motors, and checking for any analog inputs from the flex and ultrasonic sensors. The sensor values are mapped to (0, 180) using the following section of code:

  OutsideFlexValue = analogRead(OutsideFlexPin);
  delay(15); //adding slight delays to make it stable

  InnerFlexValue = analogRead(InsideFlexPin);
  delay(15);

  servoPositionOutside = map(OutsideFlexValue, 24, 48, 45, 180);  // need it to rest at a midwards position

// int round10(int servoPositionOutside); 

  servoPositionInside = map(InnerFlexValue, 24, 48, 45, 180);

 

It will send out a signal to the p5js program every time it hits a pre-determined threshold value.  The out-sent value is to let the P5Js code know to play a growling sound along with the petals opening wide.

Description of what the P5 program will do and what it will send to and/or receive from Arduino

In order for the user to control or choose the interaction they would like to have with the Demogorgon, we will use p5.js. We will display an instruction screen followed by a digital button screen where the user can select presets and change between modes. For instance, the user will be able to choose between using the flex sensors with the glove or with the ultrasonic distance sensors to have different interactions with each.

From arduino it will receive the aforementioned serial communication to let it know when to play certain sounds.

Future Improvements:

  1. Need to work on the mechanical aspect of the project more. The initial testing has shown that the servo motors cannot be used with a large armature due to force constraints.
  2. Need to streamline the code to reduce input delay

 

Sources We Used for Inspiration and Resources:

  1. For the fonts: https://www.dafontfree.net/play-regular/f157734.htm
  2. For the coin animation: https://gifer.com/en/gifs/coin
  3. For the background music:
  4. For the Flex-Servo control: https://www.youtube.com/watch?v=iNmdfKcG9E0

Problems and Solutions:

  1. The main problem we had from the start was that there was a lot of interference from the 5v pin on the Arduino which was causing the motors connected in parallel to jitter even when they were not being activated. We tried changing wires, changing components, making the digital pins far away as possible, and even using a different board but none of it worked.

Solution: The solution as the professor suggested was to use a separate battery to operate the servos with only digital PWM pins being connected to the board itself. This reduced the jitter to negligible.

Some Progress Pictures:

Preliminary flex component testing: flexsensor

A demonstration of the fitted component moving:

Progress Pictures Google Drive link

Music Assignment

I worked with Ahmed and his post is here: https://intro.nyuadim.com/2022/11/17/musical-instrument-9/

Concept

In this assignment I worked with Mohamed to design a musical instrument using the arduino and breadboard. We used two main devices which are the piezo speaker and the servo motor. We decided to play the song “We will we will rock you” on the piezo buzzer, and then provide sound effects after that using the servo motor, by rotating it clockwise and counter-clockwise. The code to do this is shown below. Here is a schematic for our implementation.

 

 

#include "pitches.h"
#include <Servo.h>
// notes in the melody:
int melody[] = {
  NOTE_C4, NOTE_A3, NOTE_C4, NOTE_A3, 0, NOTE_G3, NOTE_G3,NOTE_G3
};
// note durations: 4 = quarter note, 8 = eighth note, etc.:
int noteDurations[] = {
  2, 2, 2, 2, 4, 4,4
};
Servo myservo; 
int pos = 0; 
void setup() {
  // iterate over the notes of the melody:
  
}
void loop() {
  bool switchState=digitalRead(A3);
  if(switchState){
  for (int thisNote = 0; thisNote < 8; thisNote++) {
    int noteDuration = 1000 / noteDurations[thisNote];
    tone(8, melody[thisNote], noteDuration);
    myservo.attach(9);
    int pauseBetweenNotes = noteDuration * 1.30;
    delay(pauseBetweenNotes);
    // stop the tone playing:
    noTone(8);
  }
    myservo.write(180);              // tell servo to go to position in variable 'pos'
    delay(1000*1.3);                       // waits 15ms for the servo to reach the position
    myservo.write(0);              // tell servo to go to position in variable 'pos'
    delay(1000*1.3);                       // waits 15ms for the servo to reach the position
}
}

As seen in the above code, we tried to make the sound effects that come from the servo motor sound better, by making the delay time between the rotations equal to the pause time between the notes. To control the musical instrument, we used a digital input which is a switch that should be pressed each time to play the sounds again

We really liked how the output looked like, but we believe that we can improve on it by making the servo motor be controlling an object like a drum stick when it is rotating to make it sound as a better musical instrument. Here is a video that shows our implementation.