Make and Feel Virtual Drawings

What if you could draw on your computer by feeling it ? Make such an interface!

Similar projects worth following
Learn to make a new haptic (Haptic perception is the process of recognizing objects through touch) device with Arduino! Here I can feel the slope of part of the drawing being touched using a servo motor. I made this for my blind friends...and for and to try out a new way of drawing! Here I used Servo motors and Arduino Uno and hacked a mouse to make our device.


While drawing blindfolded, a square in the haptic perception becomes radically different on paper. This is a problem in bridging the gap between haptic perception and the drawing interface we use. I've developed a device that gives tactile output of curvature of a drawing at a point by changing the slope of a servo motor fan. So, when drawn using this interface, the memory stores all the slopes at different points and accurately draws the shape imagined in our mind (or as we think it perceives it).

I need help to improve the program algorithm. Anyone up?

Also, I'm planning to make an interactive HapticBox- which is nothing but a more interactive and usable form of this project.

  • To Do List

    abhinavnowinew04/28/2014 at 02:50 0 comments

    PART I:

     Till now, I have built apparatus for 2D drawings.

    Need further improvement of motor rotation control (accuracy).

    Improve the algorithm for calculating slope of the drawing when we are 'touching' the drawing.

    Improve usability, ergonomics and product design.

    PART II (to be done):

    3D drawing interface implementation.

View project log

  • 1
    Step 1

    Start drawing on Processing

    Picture of Start drawing on Processing

    First lets create a code on Processing, which lets you draw freehand on the computer.

    Download Processing from .

    Here is the processing code:

    int prevX=mouseX, prevY=mouseY; //to record previous position of mouse pointer

    void setup() { size(800, 800);


    void draw() { if(mousePressed)




    line(prevX, prevY, mouseX, mouseY);



    } }

    Now you can start drawing using your own code!

  • 2
    Step 2

    Make Processing control Arduino

    Picture of Make Processing control Arduino


    So,you have started drawing on Processing. Now, you'll 'feel' the drawing!

    Imagine you are blind (remember, this device was invented for blind people to draw on computers):

    How would you feel a raised line drawing ( where you follow the thread with your finger )? See picture for example.

    At any point, the thread shows you an angle, that's how we'll make the servo motor act.

    For that, we need to find the slope of the drawing at the point where the mouse is.

    This angle will be sent to servo motor through Arduino.

    Now, to get Arduino and Processing to talk to each other we need to download libraries for both softwares.

    Import Arduino Library for Processing.

    Go to the link above and import Firmata library for Arduino.

    Now connect Arduino Uno to your computer.

    First, open Arduino software and upload Standard Firmata from Examples option.

    Upload this Processing code:

    import processing.serial.*;

    import cc.arduino.*;

    Arduino arduino;

    import ddf.minim.*;

    Minim minim; AudioPlayer player;

    int t=0;

    int nn=0, d=0, p=0;

    int prevX=mouseX, prevY=mouseY;

    float x,y,m,atx=0, a=0;

    void setup()


    minim = new Minim(this);

    player = minim.loadFile("Kenny G - Miracles The Holiday Album - 04 - Silent Night .mp3"); // instead of this music file, you can load your own by writing the file name and putting the music file in the processing sketch folder

    size(800, 800); // change the size of the screen where you draw background(255);


    arduino = new Arduino(this, Arduino.list()[0], 57600); //Modify this line, by changing the "0" to the index of the serial port corresponding to your Arduino board (as it appears in the list printed in the black screen at the bottom).

    arduino.pinMode(4, Arduino.SERVO); // change the pin number if you want to attach the servo to another one }

    void draw()








    if (nn==10) {

    line(prevX, prevY, mouseX, mouseY);

    x = (mouseX-prevX);

    y = (mouseY-prevY);

    if (x!=0)


    m = -y / x;


    else{ }


    if((x<0 && y<0) || (x>0 && y>0))



    } if((x>0 && y<0) || (x<0 && y>0))




    arduino.servoWrite(4,d ); //Write a value to the servos, telling them to go to the corresponding angle (for standard servos)

    println(d); nn = 0;

    prevX=mouseX; prevY=mouseY;




    color a = get(mouseX, mouseY);








    x = (mouseX-prevX);

    y = (mouseY-prevY);

    if (x!=0) { m = -y / x;



    { }


    if((x<0 && y<0) || (x>0 && y>0))




    if((x>0 && y<0) || (x<0 && y>0))




    arduino.servoWrite(4,d );

    println(d); p=0;



    else {}

    prevX=mouseX; prevY=mouseY;



  • 3
    Step 3

    Power to Servo motor

    Picture of Power to Servo motor

    So, we've written the code. Now start all wiring stuff:

    We have two options:

    Give 5V to servo motor from Arduino.Here, you can connect the servo motor ( attach a small fan to the motor ) to Arduino Uno. Servo motor has 3 wires: Connect Brown wire to GND pin. Yellow wire to digital pin 4. Red wire to 5V pin.


    As powering a servo motor through Arduino isn't always a good idea. As shown in the picture, we can supply 5 Volts to the servo, through external 5V DC Adapter.

View all 5 instructions

Enjoy this project?



abhinavnowinew wrote 04/28/2014 at 02:52 point
thanks niazangels for the support!!!

  Are you sure? yes | no

niazangels wrote 04/27/2014 at 17:17 point
Good going! Love that you hit a spot missed by a lot of hackers. Continue your efforts and keep us posted :)

  Are you sure? yes | no

Similar Projects

Does this project spark your interest?

Become a member to follow this project and never miss any updates