Body-Centric Design Concepts and Experiments

Workshop Notes #1_A watch for bungee jumpers_Erman

I aimed to create a unique watch that caters to individuals seeking relaxation while engaging in the exhilarating activity of bungee jumping. This specialized timepiece is intended to be worn on the wrist, particularly the left hand, and features a unique squeezing mechanism designed to induce a sense of calmness.

By integrating the keywords of “watch,” “bungee jumping,” and “nervously,” my objective was to develop a product that addresses the specific needs of individuals who experience nervousness or anxiety during bungee jumping. Through careful design and consideration, this watch aims to provide a soothing effect to enhance the overall experience.

About Bungee jumping:

Bungee jumping is an exhilarating activity that entails leaping from a considerable height while secured to a robust elastic cord. The jump typically takes place from a fixed structure like a building, bridge, or crane. As the individual plunges downward, the cord stretches, propelling them upwards once again as it recoils and continues its oscillating motion until all the kinetic energy is dissipated.

While bungee jumping may appear thrilling, it can also pose significant challenges, particularly for those afflicted with acrophobia or fear of heights. Many individuals find themselves unable to overcome their anxiety as they prepare to leap, ultimately retreating to their safety zones and stepping back onto solid ground.

With the intention of assisting those on the cusp of bungee jumping, I embarked on designing a watch or wristband. This seemingly simplistic yet potentially impactful product aims to instill a sense of relaxation and alleviate nervousness in individuals, thereby empowering them to conquer their fears and embrace the exhilaration of the jump.

Why hands:

I envisioned creating a hand-centric product, specifically tailored for the left hand. Recognizing that the hands, encompassing the fingers and palms, harbor acupressure points capable of inducing relaxation, I sought to leverage this knowledge. Further exploration led me to discover that the left palm houses crucial acupressure points linked to the heart, lungs, stomach, and adrenal glands (refer to image 1).

hand-chartjpg

Image 1: Acupressure points in palms

Users of this innovative product can apply gentle pressure to specific areas on their palms by squeezing the watch or hand band. Upon exerting the pressure and completing the circuit, an LED will illuminate. This interactive feature allows users to engage with the device by illuminating the LED and fostering a sense of relaxation. In moments of heightened nervousness, individuals have the option to exert stronger pressure, causing the LED to remain constantly lit.

It’s worth noting that even in the absence of specific acupressure points on the palms, the act of holding something in our hands, squeezing them, or engaging in movements can provide a comforting sensation. By providing an interactive tool, I offer individuals facing bungee jumping with something tangible to grasp onto during their journey, granting them a sense of security and support.

Design:

The watch/band is designed to be worn on the hand, providing coverage to both the palm and the back of the hand. It is conveniently slotted over the thumb and securely wrapped around the hand. To activate the device, the user needs to bring the two ends of the band into contact with each other, completing the circuit and causing the LED to illuminate. The activation process primarily takes place within the palm area, requiring the user to exert pressure and squeeze the ends together. To gain a visual understanding of its usage and functionality, I invite you to watch the instructional video available at this link: [video link].

screen-shot-2019-01-23-at-11-42-28-pm

Image 2: Design features and views

The slot and bands have been designed to offer ample width and length, ensuring that the product can be adjusted to accommodate users with varying hand sizes. The dimensions of the product were thoughtfully determined, taking into account considerations such as hand size and user comfort during usage. For your reference, please find the detailed dimensions provided below:

  • Slot Width: [insert specific measurement]
  • Band Length: [insert specific measurement]

These dimensions have been carefully chosen to provide a versatile and comfortable fit for a wide range of users.

attachment-1-11

Image 3: Dimensions and views

Inside the palm of the watch/band, there is a discreetly placed battery, which is further protected by an additional knitted layer. The LED indicator is positioned on the outer surface of the band, ensuring easy visibility for the user. To gain a visual undaerstanding of the placement of the LED and how the watch is worn on the hand, please refer to the images provided below:

img_1555

Image 4: How it is worn and used

I have successfully crafted an e-textile controller/badge utilizing two distinct techniques. The first technique employed was knitting, while the second technique involved French knitting. French knitting was utilized for the sensor component, whereas knitting was utilized for creating the circuit. This intricately designed controller enables the control and activation of an LED and battery, effectively demonstrating the functionality of the circuit.

Conclusion: A watch/hand band may be used to relax someone who wants to bungee jump.

Documentation:

I started my project with sketches. You can see the initial sketches of my e-textile sensor/controllers.

screen-shot-2019-01-24-at-12-13-04-am

Two techniques I chose are French knitting and knitting.

img_3215

Starting the first loop. After a few trials, I decided to make 10 loops in a row. I also added a conductive thread into the yarn.

img_3224

Upon achieving a square shape, I proceeded to divide the loops into two distinct groups. One group comprised six loops, while the other consisted of four loops. To ensure their security, I securely tied the four loops with a wire to prevent any accidental unraveling. Additionally, at this stage, I ceased using conductive thread. Following this, I continued knitting the remaining six loops, tailoring them to their individual sizes.

img_3226

I tied the six loops with a wire and started knitting four loops. I knitted them till reaching the same length with 6 loops.

img_3228
img_3229

I started knitting two groups together and combined the rows together.

img_3235

I added conductive thread into the yard again and knitted the other end of the band with it.

img_3236
img_3238

I knitted French knitting till I have enough length of it to make a button.

img_3241

I create a circle on the one at the end of the cord.

img_3250

I saw the circular French knitting onto the body with a regular thread.

img_3275
img_3277

I sewed snaps for the LED.

img_3278
img_3279

I also sewed snaps for the battery and placed the battery case on it.

img_3285

I disconnected the snaps from each other and connected them with the rest of the circuit.

img_3251

I also connected two ends of the watch/band with athe conductive thread.

img_3243
img_3244

I knitted another square piece to cover the battery and create another layer between the palm and the device.

img_3332

I sewed the new layer and covered the battery. It looks like a pocket for the battery.

img_3329

I also knitted and sewed a small piece onto the end of the band where fingers are located. I thought it can be a sign of the button and shows the real button underneath.

How it works:

https://youtube.com/watch?v=J46Akw4LzYs%3Ffeature%3Doembed

Insights:

  • I learned how to make sensors and push buttons.
  • I learned and practice two kinds of knitting.
  • I practiced how to complete a circuit.
  • I learned another method for quick and effective brainstorming.
  • I placed the batter after knitting and the area where I located the battery was on the conductive thread. It took some time to clean the threads between the snap because it looped a lot between snaps. I recommend deciding where you locate the components before starting, otherwise, you can strive unnecessarily.

Information sources: I used this video to learn how to end knitting the last row.

https://youtube.com/watch?v=hM5M2Fu0RtY%3Ffeature%3Doembed

Next steps:

  • See other products of my classmates done;
  • Get feedback from instructors;
  • Learn if I need to learn and apply Arduino;
  • Learn different knitting techniques, and try different patterns and colors;
  • Add more LEDs;
  • Make the watch/band wearable.

Finger Dynamometer

1- Results from Voltmeter testing

img_3406

2- Results from Arduino testing (all with 1K resistor)

Velostat
Active: 1015
Passive: 900

Eonyx Pressure sensing fabric
Active: 182
Passive:1002

Eonyx Stretch sensing Fabric
Active: 650
Passive:100

Eonyx StaTex conductive fibre
Active: 1015
Passive: 650

3- Finger Dynamometer:

I developed a concept known as the “finger scanner,” although its name might be misleading as it doesn’t actually scan your fingers but rather measures the strength of your grip. This innovative device serves multiple purposes: it can be utilized to assess your grip strength, serve as an exercise tool to strengthen your fingers, provide entertainment, or aid in stress reduction. Additionally, I recognized its potential to benefit individuals dealing with conditions such as arthrosis or paralysis.

Notably, some individuals with genetic disorders may experience decreased finger strength, posing challenges in their motor development and hindering their ability to keep pace with their peers. The finger scanner concept offers an interactive solution to address this concern by facilitating improved grip strength. I invite you to view the concept images below, which illustrate the vision and potential of this innovative product.

finger-scanner

It may also be used with a plastic case to make it easier to hold.  attachment-1-1

holding

Strategy: My strategy was to make a sensor in the middle of the ball using the resistor material, velositat. I placed the velostat between nonconductive material pieces. It is basically button and pressure sensor in the ball. It registers as you put some pressure on the ball. Because the ball is full (polyurethane) it reflects the pressure onto the sensor. It connects to Arduino and it shows the data of your pressure. Data is recorded to detect the strength by time as well.

Documentation

img_3367
img_3368

To ensure precise fitting, I carefully cut two pieces of nonconductive fabric to match the size of the ball. These fabric pieces were nearly identical in shape and dimensions. Additionally, I cut the velostat fabric slightly larger than the other two pieces to prevent any inadvertent contact between the conductive fabric surfaces.

To secure the conductive fabric, I utilized tape and affixed it onto the nonconductive fabric pieces. Next, I proceeded to stitch the nonconductive fabric pieces together, sandwiching the velostat fabric securely in the middle. This stitching process effectively integrated the velostat fabric into the assembly, ensuring proper alignment and functionality of the sensor mechanism.

By following these steps, I successfully assembled the sensor within the ball, establishing a reliable interface between the conductive and nonconductive fabric layers. This construction method ensures the accuracy and sensitivity of the pressure sensor, allowing for precise measurement and detection of applied force.

img_3379
img_3381
img_3404

I divided the ball into two parts and positioned the sensor between them. Additionally, I introduced two polyurethane pieces to prevent the two halves of the ball from exerting pressure on the sensor. Subsequently, I securely glued together the pieces of the ball, along with the polyurethane inserts and the sensor. Once the adhesive had set, the assembled components resembled a complete ball once again. At this point, the ball was ready to be connected and tested with Arduino.

img_3387

I wrote the code and uploaded the code inside the Arduino. You can see the code up, and reach the doc here. 

screen-shot-2019-01-30-at-9-30-49-pm

I set analogInPin to pin A0. I set the AnalogOutPin to pin 9.I worked with 5V. I set the other end to + (red) of the bread. I set the GRD to -(blue)

You can see the other settings in the images below.

img_3401
img_3400

I could get data after I set the whole system.

img_3402

You can see the video to see it is working.

Insights:

It was my first experience using Arduino, and I realized that I still need to practice and familiarize myself with it further. To get started, I followed a tutorial to construct the system for this project.

Once I completed making the sensor, I initially placed it inside the ball without cutting it into two parts, aiming to keep it as a single piece. However, upon activating Arduino, I noticed that the sensor value remained constant without any change. It became apparent that the ball was already exerting significant pressure on the velostat material. To address this issue, I decided to cut the ball and inserted two pieces of polyurethane foam to mitigate the pressure from the ball. Subsequently, I securely glued the components together.

Even after this modification, I observed that the sensor values were not zero due to the pressure exerted on the velostat caused by the presence of the covering material and stitches holding them together. Despite loosening the stitches, the high values did not change significantly. The highest recorded value remained at 1023, and I encountered difficulty in increasing it further through coding in Arduino.

As for information sources, I found the tutorial titled “Analog serial sketch” at the following link: http://arduinotogo.com/category/chapter-6/. This website has proven to be a valuable resource throughout my project.

Looking ahead, I envision expanding this concept to incorporate Bluetooth functionality. If I decide to pursue this project further, I aim to integrate permanent components and materials to achieve a more realistic appearance and enhance usability.

Low Blood Sugar Tracking with PulseSensor (Pulsewear)

Pulsewear:

In line with the current trend of wearable fitness bands, I have developed Pulsewear, a wristband specifically designed for individuals with diabetes.

Insufficient blood sugar levels can lead to rapid heartbeat and heart palpitations. This response occurs when low blood sugar levels become so frequent that they alter the body’s normal reaction. Typically, low blood sugar prompts the release of stress hormones like epinephrine. However, individuals may not always be aware of their low blood sugar levels, or it can suddenly drop without warning. The fear of experiencing hypoglycemia during sleep is particularly prevalent among people with diabetes. This concern arises from the potential risks of slipping into a coma or even dying during sleep. As a result, many individuals with diabetes tend to keep their blood sugar levels higher during the night, frequently waking up to monitor their condition. This concern is also shared by parents who regularly check on their children during their sleep.

To address these challenges, my device aims to alert the wearer when they experience a rapid heartbeat, indicating low blood sugar levels. The goal is to provide timely information and help individuals take appropriate action.

In terms of design, I intend to create an aesthetically appealing wristband that does not resemble a typical medical device. It will seamlessly blend into the lifestyle of both adults and adolescents. The wristband will incorporate LED lights that change color and employ vibration as a signal for alerts.

To gain a better understanding of my concept, please refer to the accompanying images.

image1
image-2

Image 1: Concept sketches and features

In order to develop its prototype, I am using a pulse sensor.

Code: “heart_rate_LED” with delay set to 100ms
Hardware: PulseSensor circuit and Arduino-UNO
Software: Arduino (Arduino code) 
Spreadsheet Data: workshop-3-worksheet_erman

To set the Arduino and codes I followed the tutorial. (https://pulsesensor.com/pages/code-and-guide)

img_3411

Image 2: Arduino and circuit setting

Your resting heart rate refers to the minimal amount of blood your heart pumps while your body is at rest. The normal range for resting heart rate can vary among individuals, but for most adults, it typically falls between 60 and 100 beats per minute.

It’s important to note that children generally have higher resting heart rates compared to adults. According to the Cleveland Clinic, a normal resting heart rate for children aged six to 15 is typically between 70 and 100 beats per minute.

When the heart rate consistently exceeds 100 or drops below 60 beats per minute, it may indicate an underlying medical condition. In the context of my concept, I primarily focus on heart rates exceeding 100 as a potential indicator of lower blood sugar levels among users.

Considering these heart rate ranges, I have incorporated conditional checks and relevant text prompts to provide appropriate warnings and alerts as needed. This ensures that the device can effectively monitor and notify users based on their specific heart rate thresholds

if (myBPM >= 100) {

digitalWrite(LED13, LOW);
Serial.print(“High!”);
}

if (myBPM <= 100) {

digitalWrite(LED13, LOW);
Serial.print(“Normal”);
}

if (myBPM <= 60) {

digitalWrite(LED13, LOW);
Serial.print(“Low!”);
}
else {

screen-shot-2019-02-07-at-12-03-45-am

Image 3: Monitor readings “High!” and “Normal!”

screen-shot-2019-02-07-at-12-15-15-am

Image 4: Plotter readings

What is expected of my low-fidelity prototype:

img_3460
img_3462

Image 5: PulseSensor on low-fidelity prototypes.

I expect the device to illuminate when the pulse exceeds 100 beats per minute.

My goal is to create an enhanced version of the prototype that includes a feature where a continuous high heartbeat within a dangerous range triggers a warning. This warning can be sent as a message to the user’s family, friends, or caregivers. In extreme cases, if the heartbeat remains dangerously high and the user fails to turn off the device, it can automatically initiate a call to emergency services (911). The act of turning off the device will serve as an indicator of user consciousness and intention to deactivate the alert system.

Insights:

I am excited about the opportunity to learn about new sensors. Each week, I expand my knowledge of the capabilities of Arduino and discover what can be achieved with it. However, I have encountered certain limitations in my use of Arduino. For instance, I attempted to create a voice alert, but unfortunately, I faced difficulties that prevented me from successfully implementing it. Similarly, I encountered challenges when trying to create conditional statements for time-based tasks. Specifically, I wanted to execute a certain action if a particular situation persisted for more than 60 seconds. Regrettably, I was unable to develop this functionality within the Arduino framework. Despite these challenges, I remain enthusiastic and motivated to continue working with Arduino. My goal is to overcome these limitations, explore more advanced operations, and further enhance my understanding and skills with Arduino.

Next steps:

  • I still want to work on it and make more complex operations with it.
  • I want to add a voice alert to my concept.
  • I want to create a wearable version and hope to make it work remotely with fewer visible cables.
  • The unit should also feature a handy app, accessible on any smart device, or an insulin pump that pairs with the device to provide the user with real-time pulse readings (or even glucose readings) and an easier way to manage their logbooks and analyze health patterns.

You can see the image of the worksheet below.

screen-shot-2019-02-06-at-8-40-43-pm

Image6: Worksheet workshop-3-worksheet_erman

Snack-time

Strategy:

Snack-time is a conceptual ambient body-centric design project aimed at serving as a reminder for individuals, particularly those with diabetes. In fast-paced working or studying environments, it is not uncommon for individuals to forget their designated snack times. The main objective of this project is to develop a solution, potentially utilizing shape-memory alloys, that can visually indicate when it is time for a snack.

Why this project:

  • We can set alarms on our phones, but lots of people got bored of getting digital notes. Who wants to see another alarm?
  • This product allows them to get some creative input into their own treatment.
  • This note- Snack– can vary, and be customized.

Above, you can observe a sketch representing my concept.

Throughout my journey, I have acquired knowledge on shaping shape-memory alloys. To shape them, they must be heated at high temperatures. Once cooled, their shape can be modified. When the system is activated, the wire functions as a resistor and warms up, causing it to revert to its original shape.

Below, you will find a low-fidelity prototype showcasing my concept.

https://youtube.com/watch?v=i53tCoLQke8%3Ffeature%3Doembed

I discovered the software called “Fritzing” during this project. It was my first time using it, and I found it extremely useful since I didn’t have all the required components for the circuit.

In the image below, you can observe the circuit sketch. The red spring represents the flexinol, which is the shape-memory alloy used in the design.

Documentation:

  • Spreadsheet Data: You can find  here:
  • Hardware: Circuit and Arduino-UNO
  • Software: Arduino
  • Breadboard 
  • Shape Memory Alloy (Flexinol)
  • Batteries (I used a 9V. Don’t forget you need a way to connect it to your breadboard)
  • 1 Voltage Regulator 
  • 1 Rectifier Diode 
  • 1 Resistor
  • Connector Wires (I use alligator clips and jumper wires)
untitled-sketch-3_bb

Codes:

  • Heating code ( here to download): I used it to apply heat on the alloy. I tried to customize it with the code below

int springPin = A1;

void setup()
{

pinMode(springPin, OUTPUT); // Set the mode of springPin to output.

}

void loop()
{

digitalWrite(springPin, HIGH); // Turns on spring.

}

  • Timer (here to download): I also tried to customize the code by this DTime.ino code. The code itself did not work. I tried to fix it and apply it onto the heating code as well.  I also tried the codes that I found at the library as Arduino-timer, ArduinoThreads, LightDimmer.

Insights:

  • Learned about how we shape memory-alloy and how it works.
  • Alloy gets its shape by higher heat and voltage.
  • Learned about and used Fritzing for the first time.
  • My knowledge in using Arduino, and reaching the sources still give me a disadvantage.

Information sources:

  • http://fritzing.org/home/
  • https://io.adafruit.com/

Next step:

  • I could not make LEDs, and memory alloy work (together) with Arduino. Still, I have to work on coding. I am investigating Adafruit, GitHub etc.

Haptic experiments and wristband

I experimented with a few different haptic mechanisms and record my findings.

Haptic feedback or haptic interaction works with the sense of touch. Whereas most computer interfaces rely on a monitor to convey visual information through pixels and light, haptic interfaces are quite varied. At the moment, the most common sort of haptic mechanisms is vibrating motors.  Silent mode on cell-phones or vibration on video game controller is some of the applications of this haptic feedback.

During the last week, I ran a number of an experiment looking into how to work with this tool. The main motor I used was an eccentric rotating mass (ERM) motor.

I set out to gain a better understanding of how haptics might be utilized in future projects. I checked web sites to see what has already done by others. I have also done the previous exercises that we have done in class. You can see it below.

img_3612

ERM Motor

I conducted a series of experiments to explore the characteristics and effects of an ERM motor.

In the initial test, I observed and documented my reactions to the motor’s activation and deactivation. I utilized Arduino code adapted from the Blink Test code for this purpose. From this experiment, I concluded that haptic feedback mechanisms should provide a natural and organic sensation to avoid unpleasant and numbing experiences.

In the subsequent experiment, I reduced the motor’s intensity, which resulted in a less unpleasant but still suboptimal sensation. Adjusting the frequency of activation and deactivation did not significantly improve the sensory experience.

Haptic Motor Controller

This little device of Adafruit has built-in effects. Using its library, I wanted to create a pleasant and organic haptic vibration. In order to create it, I used the Adafruit DVR2605 library’s complex version of the code and same circuit diagram for Arduino and its components as we did in the class.

It was a combination of a series of effects. This was roughly translated into the following effects:
89: Transition ramp up long sharp 2 — 0 to 100%
1: Strong click — 100%
94: Transition ramp down long smooth 1 — 50 to 0%
44: Long double sharp tick 1 — 100%
83: Transition ramp up long smooth 2 — 0 to 100%
1: Strong click — 100%
100: Transition ramp down long sharp 1 — 50 to 0%
0: End

screen-shot-2019-02-26-at-7-31-49-pm

Motor arrays

My final experiment is about an array of motors. Wiring up several motors could give me other opportunities and possibilities for a product concept. I tried with two motors to replicate the same effects. However, there were some limitations that I had.

  • If the motors are close to each other I felt they are one motor. If they were far away they were tow motors but not related. So, distance should be a concern in a design.
  • The time gap between vibrations should be related to each other. Otherwise, it will be like two unrelated vibrations.

The gaps between motors and time give helped to create the impression that the vibration is gliding across the skin instead of each motor vibrating separately.

Conclusion:

Haptic feedback is a very powerful tool for interactive design. I wanted to use this feature on some of my previous concepts. Even one motor can create information and give feedback. Because we use visual and audial versions more often, it is a different way of transmitting information. I think it can be a very useful feedback tool in some particular design approaches.

Design Concept with Haptic Sensors:

I aimed to create a practical haptic application for individuals with diabetes, specifically addressing night-time management challenges.

The design concept involves a wristband that provides reliable and efficient assistance during sleep. The wristband utilizes vibration as a warning mechanism, alerting the user if their heartbeat becomes elevated. Ideally, this wristband would be connected to a glucose monitor to enhance its functionality. By preemptively notifying the wearer before a hypoglycemic episode occurs, the device facilitates a quicker wake-up process and prevents the need to calculate insulin dosages while still drowsy. Additionally, as some individuals with diabetes do not wake up easily to auditory cues, vibration serves as an effective means of waking them up.

attachment-1

In this iteration, a heart rate sensor was introduced. There will be several motors on the prototype. The vibrations of the motors were hard-coded into the prototype.

I introduced transistors to provide a more consistent power feed to the motors. This allowed each motor to have relatively the same amount of potential strength.

You can see the sketch of the circuit with multiple motors.

circuit

You can see the video of the working circuit with multiple motors.

https://youtube.com/watch?v=dzVxjNl2iIQ%3Ffeature%3Doembed

The final product can be used as an assistive device with the understanding that once we have access to information about how the passive functions of our bodies operate, we can then affect those functions. A normal human’s resting heart rate is between 60-75 beats per minute. When one’s heart rate is greater than 100 beats per minute, the user can put on the hand band (bracer) which pulses in waves. This provides enough vibration to make its user awake. When the user’s heart rate lowers to a resting rate range of  60-75 beats per minute or after the user turns it off, the vibrations will stop.

Bracelets can create a wave-feeling vibration and sequences can change and be stronger to make sure the user feels it.

The codes below can be used and customized for the project.

Code for Pulse sensor: PulseSensor_Servo

Code for wave: VibrationWave

Next Steps:

The next major steps are the start working on a working prototype. For now, I know that it will work. I just needed to have a pulse sensor and several motors. I wanted to build a portable version of it; therefore I bought an Arduino Gemma. For that project, I will need:

  • Gemma M0 or Gemma v2 or Gemma v1 (discontinued)
  • vibrating mini disc motors
  • Pulse sensor
  • 100mAh li-poly battery and charger

Group: Erman & Jing

Web: https://webspace.ocad.ca/~3173625/wush/

  • Strategy:  

Project 1: Birthday Filter.

March 6th is one of my best friends’ birthday. She lives in China. I always want to come up with a way to celebrate the unbreakable friendship bond with a very special gift for friends. She lives in China. I thought the best and most memorable gift to give her is a birthday filter I made. We used p5 javascript and HTML to build a computation visualization experience based on Kyle McDonald’s CV examples.

screen-shot-2019-03-07-at-11-02-51-am

Video: https://youtu.be/nfZkZgaMI0o

Project 2: Mixing Face

Try mixing traditional art skills with your digital painting process for unique-looking imagery, says illustrator Jean-Sébastien Rossbach. Mixing Face is a filter mixing your face and traditional art pieces built with HTML, p5 javascript, and ml5 javascript. It will change your skin tone using the color and shape in that painting. What paint to use is a matter of personal preference and style. Mix your face with the art pieces you choose and you don’t need to use Photoshop this time.

screen-shot-2019-03-07-at-11-05-09-am

Video: https://youtu.be/BKlFc3KGjzw

Software and libraries:

  • Text Editor
  • Download p5 javascript libraries.
  • Download ml5 javascript libraries.
  • Cyberduck

Documentation:

Project one is built based on Kyle McDonald’s CV examples

Experience 1: Kyle McDonald’s CV examples

We played with a collection of interactive examples using p5.js through the link(CV examples) Kate gave us. The examples are meant to serve as an introduction to CV and the libraries we can use. The examples in this link use p5.js to access live video. All examples are self-contained and can be run independently, so we tried all the examples and tried to learn the p5.js code.

The example I liked most is nose theremins and light painters that used our body as a pointer in p5.js. One key feature of this experiment allows people to use their body parts as pointers, instead of the mouse.

screen-shot-2019-03-07-at-11-06-14-am

(experiences of trying example code online)

Beyond the example code, I made a few changes:

To change the amplification

input.amplification = 2;

To track other body parts:

Change the code “input.part = ‘nose’;” to other part of body you want to track:

screen-shot-2019-03-07-at-11-06-55-am

(syntax for input.part)

The Creatability experiments include several musical instruments. Having multiple interaction modes can make creative coding projects more expressive and engaging.

screen-shot-2019-03-07-at-11-07-33-am

(experience with creditability musical instruments)

Instead of having body posts as input only, I want to have some output for the overall experiment.

(Things need to use when building this online project)

Then we found Tensorflow.js and Tone.js is beyond our capability that we couldn’t find example code for triggering music online. We decided to go back to our original idea of a birthday filter.

We used Photoshop to create the images we need for the filter. We downloaded 3 celebrities my friend loves and wrote some words.

screen-shot-2019-03-07-at-11-08-32-am

(Filter image1: birthday hat)

screen-shot-2019-03-07-at-11-09-13-am

(Filter image2: background)

screen-shot-2019-03-07-at-11-09-42-am

(Filter image3: boy1)

screen-shot-2019-03-07-at-11-11-10-am

(Filter image4: boy2)

screen-shot-2019-03-07-at-11-11-37-am

(Filter image4: boy3)

I also added a birthday song in p5 javascript.

Experience 2 with Processing

We have found two interesting codes. One of them is Daniell Shifman’s motion detection. Another is Abhinav Kumar’s color drawing. They both work with Processing.

These are the codes we used: ColorDrawing and Motion Detection.

Motion Detection: This application detects the motion in the camera. The motion appears in white color and turns to black when the motion stops. A created object follows the motion. After seeing this application we decided that if make some changes and make it leave a track behind we can draw on the screen with our motions.

We could make a few changes in the code, like changing the color, shape, and speed of the object.

ColorDrawing: This application essentially had the feature that we couldn’t achieve with the Motion Detection app. By selecting a color through a click, it would begin drawing lines with that color and follow similarly colored objects in the view. If another color was clicked, it would switch to that color for drawing while keeping the previous lines unchanged. Drawing or writing with a synchronized camera was challenging due to switching perspectives, but with some experience, it could be accomplished successfully.

screen-shot-2019-03-07-at-11-13-05-am

Video: https://www.youtube.com/watch?v=HO1x2gTZDRA&feature=youtu.be

We made a few changes in the code. It was easy to change the size and shape of the tracing object.

We also tried to combine two of the code and customize the motion-tracking app first. What we wanted was coloring with motion. We focused on motion detection and tried to modify its codes; however, the codes did not match and gave an error for each attempt.

screen-shot-2019-03-07-at-11-13-42-am

Image. One of our trials and errors. A red dot appears and does not move with motion. You can see its code here.

Insights:  

I envisioned this tool being utilized for video calling as well. Similar to how we use emojis in our chats, we could generate instant and live emojis while using our camera. By combining the features of the codes we discovered, our creations could track our body parts and appear alongside other people or objects. We could apply masks or makeup to our faces and maintain them while on camera. The potential for digital game design is also present. While there are numerous possibilities for computer vision involving color, motion, and face tracking, the lack of coding experience and knowledge posed a limitation.

Experience 1: Kyle McDonald’s CV examples_Nose theremins

  1. ml5.js does not depend on p5.js and you may also use it with other libraries.
  2. If you need to run the examples offline you must download the p5.js library and ml5 library or any other library you need.
  3. Attach the library you are using in html file. For example, the URL for the ml5.js library to copy into an index.html file is:<script src=”https://unpkg.com/ml5@0.1.3/dist/ml5.min.js” type=”text/javascript”></script>
  4. PoseNet on TensorFlow.js runs in the browser, no pose data ever leaves a user’s computer.
  5. PoseNet can be used to estimate either a single pose or multiple poses, meaning there is a version of the algorithm that can detect only one person in an image/video and one version that can detect multiple persons in an image/video.

Information sources:

https://medium.com/@luisa.ph/nose-theremins-and-light-painters-eb8731957827

https://github.com/black/Drawing-on-Live-Video/blob/master/colordrawing.pde

Next Steps:

It would be nice to make an app or web page in which people can draw pics. Their instant images can be used and they can just draw with their hand or body motions. The objects around them can be their color palette. Saving the images and stopping and activating the brush would be necessary. Different filters could give different art outcomes and create different experiences. With some practice, painting with motion, image filters, and additional images could be fun for video use.

Link: https://blog.ocad.ca/wordpress/digf6044-fw201803-01/author/3174249/