Group: Erman & Jing


  • 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 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.



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 build with HTML, p5 javascript and ml5 javascript. It will change your skin tone using the colour and shape in that painting. What paint to use is a matter of personal preference and style. Mix your face with art pieces you choose and you don’t need to use photoshop this time.



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.


(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:


(syntax for input.part)

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


(experience with creatiability 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 birthday filter.

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


(Filter image1: birthday hat)


(Filter image2: background)


(Filter image3: boy1)


(Filter image4: boy2)


(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. Other is Abhinav Kumar’s colorDrawing. 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. Motion appears in white colour and turns to black when motion stops. A created object follows the motion. After seeing this application we decided to 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 colour, shape, speed of the object.

ColorDrawing: This application was basically had the feature of what we could not make with Motion Detection app. After selecting a colour by clicking on it it starts making lines with colour and follows the same coloured images in the view. If you click on another colour it starts colour with that colour and keeps the previous line the same. It was hard to draw or write a synchronized camera because switching sides, but with some experience, it could be succeeded.  



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 colouring with motion. We focused on motion detection and tried to modify its codes; however, codes did not match and gave an error for each attempt.


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


  • Insights:  

I imagined this tool could be used also for video calling. As we use emojis in our chats, we can create instant and live emojis while we are using our camera. We can combine features of the codes we found. When we use the camera, our creation can follow our body parts and can appear when other people or another object appears. You can create a mask or a make-up on your face and can keep it while you are seen on camera. Digital game design is also a possibility. There are many possibilities for CV for colour, motion, face tracking; however, lack of experience and knowledge with coding was a drawback.   

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 for 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=”” 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:

Next Steps:

It would be nice to make an app or web page 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 colour 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.



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.


ERM Motor

Beginning with a single ERM motor, I have done a few experiments to remember these motors strengths, weaknesses, and unique qualities.

Our first test was simply to observe and record my reactions to a motor turning on and turning off. The particular Arduino code I used was repurposed from the  Blink Test code. My main takeaway from this was that haptic feedback mechanisms need to be felt organic. Otherwise, the sensation will be kind of unpleasant and numb.

Then, I lowered the intensity of the motor. It was less unpleasant but my sensation was not also good. Changing the frequency of turning it on and off did not help my senses too.

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


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 concerned 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 the helped to create the impression that the vibration is gliding across the skin instead of each motor vibrating separately.


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:

As a sprint to create a feasible application for haptics, I wanted to design a product again for people with diabetes.

This design aimed to facilitate reliable and efficient night-time management. It can be a wrist band that warns its user by vibration.  It can be wear during the sleep and this band can warn the user if the heartbeat gets higher. ( I wish I could connect this band to their glucose monitor). This device is preventatively alerting the wearer before the hypoglycaemic episode occurred speeding the wake-up process, so they did not have to calculate their insulin dosage while drowsy. Moreover, some of the people, especially who have diabetes from their early ages, do not wake up by noises. So, vibration can be used to wake-up the user.


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.


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

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 feel it.

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 lipoly battery and charger



Snack-time describes a speculative ambient body-centric design project in which people can use it as a reminder.  I am again doing this project for people with diabetes. I know they sometimes forget their snack time in their fast-paced working/ studying environment.  The purposes of this project I imagined working with shape-memory alloys) that highlights when it is time for a snack.

Why this project:

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

attachment-1Above you can see a sketch of my concept.

I have learnt how to shape a shape- memory alloys. You have to give it shape and heat at a high temperature. When it gets colder you can change its shape, When the system works again, the wire gets warmer because it is also a resistor, and gets its original shape again.

Below you can see the low-fidelity prototype of my concept.

I discovered “Fritzing” software. It was my first time using it and found it very useful because I did not have some of the components for the circuit. I

In the image below you can see the sketch of the circuit. The red spring is representing the flexinol (shape-memory alloy).


  • 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)




  • 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.


  • 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:


Next step:

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

Low Blood Sugar Tracking with PulseSensor (Pulsewear)


Following in the footsteps of trendy wearable fitness bands, Pulsewear is one specifically designed for diabetics.

Insufficient blood sugar levels can cause a rapid heartbeat and heart palpitations. It happens when you experience low blood sugar so often that it changes your body’s response to it. Normally, low blood sugar causes your body to release stress hormones, such as epinephrine. Sometimes, people do not realize their low blood sugar level, or it can fall down suddenly. Going low during sleep is one of the biggest fear of people with diabetes. They can enter a coma, or even die during their sleep. So, most of them prefer staying high, wake up at night. This is also parents worry on their child that they check on their child often during their sleep.

My device will warn the person when he/she has a rapid heartbeat in order to inform his/her low blood sugar level.

I want to design an appealing wristband, which does not look like a medical device and fits and adolescents’ lifestyle.  It changes colour with LEDs and gives a signal by vibrating as well.

You can see the mages of my concept.



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. (


Image 2: Arduino and circuit setting

Your resting heart rate is when your heart is pumping the minimal amount of blood that your body needs because you’re at rest. Normal resting heart rate can vary from person to person, but for most adults, it’s between 60 and 100 beats per minute.

Children’s heart rates are normally faster than those of adults. According to Cleveland Clinic, the normal resting heart rate for a child aged six to 15 is between 70 to 100 beats per minute.

Continuous heartbeats over 100 and lower 60 may be a sign of a medical condition. I primarily want to use heartbeats over 100 because of my concept on lower blood sugar level of the users.

Because of these ranges, I added conditionals and texts for the warning.

if (myBPM >= 100) {

digitalWrite(LED13, LOW);

if (myBPM <= 100) {

digitalWrite(LED13, LOW);

if (myBPM <= 60) {

digitalWrite(LED13, LOW);
else {


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


Image 4: Plotter readings

What is expected of my low-fidelity prototype:


Image 5: PulseSensor on low fidelity prototypes.

I expect it to light up light up when the pulse is over 100.

I hope to develop another version of the prototype with a continuous heartbeat in a dangerous zone may cause a warning, sending a message to your family, friends or caregivers. Moreover, it can call 911 if it really goes high and the user does not turn it off.  Turning off will be a sign for the consciousness of the user.


I am happy about learning new sensors. Each week, I am learning more about what can be done with Arduino. Still, I have some limitations about using Arduino.  For example, I wanted to create a voice alert; however, for a reason, I could not make it work. I also could not create a conditional for time tasks. For example, I wanted to write do something if this situation continues more than  60 seconds.

Next steps:

  • I still want to work on in and make more complex operations with it.
  • I want to add a voice alert to my concept.
  • I want to create a wearable version of this and hope to make it work remotely with fewer visible cables.
  • The unit also supposed to 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 reading) and an easier way to manage their logbooks and analyze health patterns.

You can see the image of the worksheet below.


Image6: Worksheet workshop-3-worksheet_erman

Finger Dynamometer

1- Results from Voltmeter testing


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

Active: 1015
Passive: 900

Eonyx Pressure sensing fabric
Active: 182

Eonyx Stretch sensing Fabric
Active: 650

Eonyx StaTex conductive fibre
Active: 1015
Passive: 650

3- Finger Dynamometer:

I generated a concept for called “finger scanner”. Despite its name, it does not scan your fingers but measure the strength of your fingers. It can be used just to measure your strength or to exercise and strengthen your fingers or just for fun or stress reduction. I thought it can be used by people with arthrosis or paralysis. I know some people with some of the genetic disorders may have low strength on the fingers and it is an issue for these kids’ motor development in order to keep up with their peers. This interactive product can help them to have better grip.  You can see the concept images below.


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


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.



I cut the nonconductive fabric considering ball’s size. They were two almost identical pieces. I cut the velostat fabric a little bit larger than two other pieces pieces in order to block any short contact of the conductor fabric.  I taped the conductor fabric on the nonconductive pieces. I stitched them with the velostat fabric in the middle nonconductive fabric pieces.

img_3379img_3381 img_3404

I cut the ball in two and placed the sensor between two pieces. I added two polyurethane pieces to stop the two half pieces of the ball pressing the sensor. I glued the ball’s pieces, polyurethane pieces and sensor together. After that,  It looked like a ball again. It was ready to connect and be tested with Arduino.


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


 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.



I could get data after I set the whole system.


You can see the video to see it is working.


It is my first time using Arduino. I need to practice it some more. I followed a tutorial to build the system for this time.

After making the sensor, I placed it inside the ball. I did not cut it into two at first in order to keep in one piece.  After activating Arduino I realized that value was not changing. I realized that the ball was making a big pressure onto the velostat already. Therefore, I cut the ball and added two pieces of polyurethane foams in order to stop the pressure done by the ball.  Then, I glued them together.

Values were not zero because of the pressure on the velostat done by covering eenoyx pieces and stitches holding these pieces together. Even after I loosened the stitches the high values did not change so much.

The highest value was 1023, and somehow I could not change the make it higher with coding in Arduino.

Information sources:   I used the tutorial “Analog serial sketch” at the link below. I find this website very useful.

Next Steps: In my concept, it is working with Bluetooth. If I want to continue this project I want to make it work with Bluetooth. I also want to use permanent components and materials for realistic look and usage.


Workshop Notes #1_A watch for bungee jumpers_Erman

My goal was to design a watch which can help to relax a person who wants to bungee jump. This watch will be worn on a hand (especially on the left hand) and squeezed to be relaxed a little bit.

My keywords were: A watch- Bungee jumping – Nervously

About Bungee jumping:

It is an activity that involves jumping from a tall structure while connected to a large elastic cord. The tall structure is usually a fixed object, such as a building, bridge or crane. When the person jumps, the cord stretches and the jumper flies upwards again as the cord recoils and continues to oscillate up and down until all the kinetic energy is dissipated.

Although it looks like fun, it is also a very difficult activity to accomplish- especially for those who have fear of heights. Some of them who are getting ready to jump, cannot overcome their anxiety and turn back to their safety zones and step onto the ground again.

I wanted to help those who are getting ready to jump by designing a watch/hand band. It is very simple, but maybe an effective product to relax people and release their nerves.

Why hands:

I wanted to design a product for hands, especially for the left hand. I knew that there are acupressure points on hands (including fingers and palms) to relax someone. I found that left palm includes heart, lungs, stomach, and adrenal (see image 1).


Image 1: Acupressure points in palms

A user of this product may put some pressure over there areas in the palm by squeezing the watch/hand band. If s/he presses and complete the circuit, a led lights up. S/he may play with it by lights it up and relaxes; or if s/he is very nervous s/he can squeeze it hard that it just lights up constantly. S/he also may not need to use it, if s/he feels fine about jumping of is concentrated on jumping.

Even if there were no acupressure points in palms, we feel better if we hold something in our hands, squeezing our hands, or shaking them. I am giving an interactive tool to these people to hold on, taking it with their journey with.


This watch/band is worn on hands and covers the palm, back of the hand. It is slotted over the thumb and wrapped around the hand.  If the two ends of the band touch each other circuit completes and the led lights up. It is activated in the palm. The user has to squeeze these ends in order to make them touch each other. You can watch the video here about its usage and how it works.


Image 2: Design features and views

The slot and bands are wide and long enough to adjust the product to users’ various hand sizes. I decided the dimensions considering in hand size and comfort of usage.  You can see the dimensions below.


Image 3: Dimensions and views

A battery is also located in the palm and it is covered with another knitted layer. Led is located the outer surface of the band, where it can be seen easily. You can see the led and how the watch is worn on a hand below.


Image 4: How it is worn and used

I have complete your e-textile controller/ badge using 2 techniques. One is knitting other is French Knitting.  French knitting was used for the sensor, and the knitting was used for the circuit. It controls/ turns on an LED and battery to demonstrate that the circuit functions.

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


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


Two techniques I chose are French knitting and knitting.


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


After reaching a square shape, I divided the loops into two groups. One group included six and other group included four loops. I tied the four loops with a wire not to lose them. I also stop using conductive thread at that step. Then, I knitted the six loops to individual size.


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.


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.


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


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


I sewed snaps for the LED.


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


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


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


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


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


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:


  • I learned how to make sensors and push button.
  • 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 to decide where you locate the components before starting, otherwise, you can strive unnecessarily.

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

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 with different patterns, colors;
  • Add more LEDs;
  • Make the watch/band wearable.