De Ensiwiki
Aller à : navigation, rechercher
Project schedule.png
Titre du projet Interaction with Digital Water Painting
Cadre Projets de spécialité
Page principale Interaction with Digital Water Painting

Encadrants Céline Coutrix,



Water painting is a painting method in which the paints are made of pigments suspended in a water-based solution and the canvas is the water. The artists handle their works based on the properties of paints spreading on the water canvas. Watercolor refers to both the medium and the resulting artwork. Nowadays, there are many popular digital tools used to support the artists for creation pictures. They provide robust tools in large scale of school of art but not focus on any special types of painting. Instead of modeling the dynamic of watercolor behavior itself, they usually show only the final result as the final shapes, colors. This can lead to boring work and lack of real artistic inspiration.

In order to give the users, especially the beginners, a feeling of real water painting, I propose a prototype focused on the interaction with water painting. My goal is to increase their creativity by simulating the process of painting but still well control some important properties of this interesting arts.


In traditional water painting, artists can easily control their technical brushstrokes because of the totally handle brushes, paints and canvas in all the process. In digital painting, trying to control a perfect final result while still taking the whole process of spreading into account is really difficult due to the lack of the knowledge of spreading properties, especially with newbies.

Figure 1 - Real water painting

This screenshot come from Video 1

In fact, user with professional level prefer usually the original effects of spreading, but the beginner want to have some options to help them define the appropriate customize. Generally, the most important property of paints on water canvas is arbitrary spreading in all directions. To get the most desired shape after the process of spreading, we need to well control this property. Instead of using brushes to handle the flow of paint, user's pressure is the main interaction we focused on. The more powerful the pressure is, the larger the paint spreading will be. I capture the time-to-click of user on mouse to represent the pressure.

Figure 2 - Digital water painting

I propose a model of spreading based on the speed and the vector direction. By splitting these two parameters, we concentrate on the effect of each parameters and therefore, find the most appropriate customize depend on user's own styles. Besides, with the capability of controlling vector spreading in all directions, user will create various shapes faster, especially some strange shapes without respecting to the normally circular spreading.


Using the vector of directions, I define the way how paints are spreading. Vector of directions are the vectors indicating the direction of spreading. Their magnitudes represent the width of spreading. Their start point is the initial point when user click on the canvas. Normally, paints will circularly spread around initial point. Then, the best way to simulation this properties is consider more and more vector of directions. In my prototype, I define 8 main directions as the figure 3 below.

Let the user set the initial magnitude of each vectors and the speed of spreading. If M_i is the initial magnitude of vector i, S is the speed of spreading and T is the time-to-click, V_i is the final magnitude of vector i, we have:

V_i = M_i * T * S

After generating all the vector directions, the boundary of these vectors is the shape of the spreading. I use cubic Bézier curves to create the boundary by using the endpoint of 8 vectors.

Figure 4 - Cubic Bézier curve with four control points - https://en.wikipedia.org/wiki/B%C3%A9zier_curve

Starting at P_0, then the curve go toward P_1 and arrives at P_3 corresponding the direction of P_2. Normally, P_1 or P_2 are not on the curve; they are only there to provide directional information. Using the distance between P_1 and P_2, we represent "how far" and "how fast" the curve turns towards P_2 after moving towards P_1.

The form of the curve is:


System overview

Graphic User Interface

I proposed 3 option: Choose color, set the speed and initialize the vector of directions

Figure 5 - GUI of prototype

Implement Tool

Language: HTML5, Javascript, CSS (Web)

Library: - jQuery: Common javascript library

- Fabricjs: Render 2D graphic

- Rangeslider: Slider element

- Spectrum: Color picker

Class structures

  • WaterPaintingCanvas:

- Properties:

+ canvas : HTML5 Canvas Object

+ fabricCanvas : Fabricjs Canvas Object

+ paintingPoints : List of PaintingPoint

- Methods:

+ constructor(canvas,options) : Initialize canvas and option

+ start() : Init fabricCanvas and start listening the input signal of user

  • PaintingPoint:


+ point : coordinates of points

+ vectors : array of vectors around the initial point

+ curvePath : Bezier curve


+ constructor(waterPaintingCanvas,point,options) : Initialize the objects

+ start() : When user click on the canvas, initialize the vectors

+ release() : When use release mouse, delete vectors and initialize curvePath

+ update() : update these elements

  • PaintingPointCurvePath


+ paintingPoint : Reference to PaintingPoint

+ pathObject : Fabricjs Path Object


+ constructor(paintingPoint,vectors,options) : Initialize paintingPoint

+ start() : When paintingPoint receive "release" signal, calculate pathObject based on vectors and update graphic

  • PaintingPointVector


+ paintingPoint : Reference to PaintingPoint

+ point : Initial point

+ initialLength : initial magnitude

+ angle : angle of vector respect to vertical axis

+ line : Fabricjs Line Object


+ constructor(paintingPoint,initialLength,angle,options) : Initialize paintingPoint, initialLength, angle

+ start() : When paintingPoint receive "start" signal, increase the magnitude of vector

+ stop() : When paintingPoint receive "release" signal, set the magnitude of vector

+ update() : Update when have real-time command

Processing step by step

  • User click on the canvas and hold:

1.Initilize PaintingPoint with propeties: coordinates of mouse on canvas, color chosen from colorpicker, initial magnitude of vector from textbox.

2.Call [WaterPaintingCanvas]

3. Add PaintingPoint into paintingPoints array

4. Call [PaintingPoint]

5. Create vectors corresponding to paintingPoint and increase their magnitudes each update times

  • User release mouse:

6. Call [WaterPaintingCanvas]

7. Stop the current paintingPoint

8. Call [PaintingPoint]

9. Delete vectors

10. Initialize and add a new PaintingPointCurvePath

11. Update graphic



While making my user test study, I do experiment with 20 beginner users in water painting. In order to comparing the advantage of controlling speed and vector spreading, I created another simple prototype without these two parameters: the speed is constant and the paints spreading is always circular around the initial point.

First, I asked them to draw a simple circle with R=5 and R=0.25 and calculate the number of times to approximately reach the demand (with bias of R less than 0.1).

Figure 6 - Average times in considering change of speed

Secondly, while keeping the same condition as first experiment, I calculated the bias at the first times they created the circle

Figure 7 - Bias (%) in considering change of speed

We can see that in case of the low speed, we got generally the best result and with the high speed, it is more difficult to control. But , with the large shape, we get advantage of time saving if we use high speed mode while the bias is acceptable. In case of keeping the constant speed, it provide usually the medium performance. Beside, we can find easier with the large destination.

Thirdly, I asked them to draw some strange shapes like clouds and comparing the time they spent to create a picture that they can accept these are clouds between two prototypes.

Figure 8 - Time (s) in considering vector of direction

We find that in case of using vector of directions, they might use a little time to set the parameters to draw a strange shape, but after this configuration step, they just draw one or two points to get the desired shapes. In opposite way, the circular spreading can not provide us the flexibility in case of strange shapes, so we need to combine many points to reach the acceptable ones.

Besides the quantitative evaluation, I also asked users which system they thought was better, almost agree with the prototype which provide them the possibilities to handle the property of paint spreading. They also interested in water painting by the way they can see and control all process. After several times, they can draw a simple picture like a sea with sunshine.


Generally, water painting is belong to art and still a challenge topic in arts so we need a lot of times to well control it even though have some technical supports. In fact, this prototype still miss many important options: delete, modify, capture the motion of spreading, ... so it can not adapt with various demand of user as another famous digital painting tools. But these difficulties come from my limitations of technical programming and can be improve without changing the main approach.

Conclusion and future work

The prototype I proposed will bring us some advantages in creating a digital environment for water painting. The approach of control all the process of spreading by taking speed and vector of directions into account not only provide an efficient way to simulation the spreading but also increase the performance of interactions with user's pressure.

I plan to add more options to improve this approach as further intervention during the process of spreading: pause the process to forward and backward changing parameters, create a video to capture whole process, increase the number of vector directions, ...


1. http://en.wikipedia.org/wiki/B%C3%A9zier_curve

2. https://www.w3.org/TR/SVG/paths.html