SlideShare a Scribd company logo
SketchADoodle
Engineering Touch-surface Multi-strokeGestures by Bézier Curves
Donatien Grolaux, Thanh-Diane Nguyen, Jean Vanderdonckt, Iyad
Kaddham
EICS 2020-2021, Eindhoven, Netherlands
What is this about ?
How can one create a drawing application for mobile devices...
• ... that is intuitive to use ...
• ... and works well despite the fat fingers problem ?
Drawing applications in
general
Typical solutions for drawing applications are either:
Bitmap based, i.e. the application manipulates a matrix of
pixels, à la Photoshop.
• There exists many smartphone bitmap drawing
applications.
• However, there is no notion of shapes in the drawing,
juste pixels.
• If you draw a face, you cannot move, rotate or scale
it afterwards.
• Not in a straigthforward way with no visual
artifacts.
• Multi-touch interfaces naturally invite for these
sort of interactions.
Drawing application in
general
Typical solutions for drawing applications are either:
Vector based, ie the application manipulates mathematical
objects representing shapes, à la Corel Draw.
• There exists some smartphone vector drawing
applications:
• Some are artists oriented and their interaction is
very close to bitmap based drawing applications.
• Some are technical oriented and use a select first-
manipulate after approach.
• This approach works well using a mouse, but
are not very pratical on smartphones due to
the fat finger problem.
What do we propose ?
Let's create a new type of interaction for drawing...
• ...that is based on an experience shared by most in the real world:
How do young children use their school materials to create drawings ?
Drawing metaphor
Real world manipulation Application manipulation
Pen drawing Freehand drawing an a surface
Area coloring Bucket fill enclosed areas
Scissor cuts Cut drawings according to a line
Glue parts together Glue drawings that intersects a line
Rotate and move parts Idem, add scaling because we can
easily achieve it on a computer.
How can we achieve it ?
• The scaling/rotating/moving impose a vector-based approach.
• The direct manipulation metaphor forbids the select then modify
approach typical to vector-based.
• The bucket fill can be achieved by using the flood fill algorithm, but this
is a bitmap-based algorithm.
Our solution:
• Everything in the drawing is a quadratic B-Spline.
• All tools use a direct manipulation approach.
• Requires adaptation of existing algorithms and creations of new
ones.
• The direct manipulation is as close as possible to the real world
manipulation.
Quadratic B-Splines
• A Bézier curve of degree n is defined by n+1 control points.
• A quadratic Bézier curve is defined by 3 points defining two segments.
• For t ∈ [0,1], take each corresponding point on each segment.
• Recursively, take the corresponding point on the segment defined
by the two points above. This point is the t point on the Bézier
curve.
• A B-Spline is a succession of quadratic Bézier curves where the end
point of a curve is the starting point of the next one.
Tool: freehand drawing
• A sampling of points is generated by the movement of the finger.
• A quadratic B-Spline is created on the fly by curve fitting these points.
• For efficiency, we use a streaming approach:
• As new points are coming in, we fit these points to a quadratic
Bézier curve.
• A distance function decides if the curve is a good enough
approximation to the sampled points.
• If not, the last good quadratic curve is added to the B-Spline and the
corresponding points are removed from the sampling.
Tool: move/rotate/scale
• By placing a single finger on an item, displacing the finger moves the
item along with it.
• By placing two fingers on an item, moving the fingers ensures the item
follow the same displacement, rotation, and scaling.
By moving two
fingers from A,B
to C,D, the shape
is moved, rotated,
and scaled.
Tool: cut
• By drawing a straight line, a cut is decided by the user.
• This line is intersected with all splines in the drawing.
• When an intersection is met, we use De Casteljau's algorithm to
split the Bézier curve in two, which allows to cut the B-Spline in two.
Tool: glue
• By drawing a straight line, a glue is decided by the user.
• This line is intersected with all splines in the drawing.
• A composite is created that contains all the intersected B-Splines.
• From now on, all move/scale/rotate/transformations applied on the
composite are applied on all B-Splines of the composite
Tool: bucket tool
• By touching a pixel, the enclosed area is painted by the current color.
• Further, the neighbooring B-Splines that define this area are also glued
together.
• We achieve this effect by:
1. Using the floodfill algorithm on a bitmap representation of the current drawing.
2. Identifying all B-Splines that delimit the flooded area.
3. Walking around these B-Splines, identifying when a jump occurs between them.
4. Stitching together a new B-Spline from this information.
5. Finally, gluing everything together.
Implementation:
SketchADoodle
This Android application is available on the Play Store:
https://play.google.com/store/apps/details?id=com.grayswindle.sketchadoodle
The algorithms described in the paper are available for JavaScript:
https://github.com/GrolauxDonatien/SketchADoodleJS
User Study
Conclusion
• By mimicking a real world experience, we created a new type of direct
manipulation for drawing on a smartphone.
• The user study shows a global positive view for the application.
• The specifics for the algorithms are described in the paper.
Thank you for your attention.

More Related Content

What's hot

Draw 111- mechanical drawing and orthographic drawing
Draw 111- mechanical drawing and orthographic drawingDraw 111- mechanical drawing and orthographic drawing
Draw 111- mechanical drawing and orthographic drawing
zamboanga city state polytechnic college
 
Polygon mesh
Polygon  meshPolygon  mesh
Polygon mesh
Farah M. Altufaili
 
Geometry Softwares
Geometry SoftwaresGeometry Softwares
Geometry Softwares
Alvin Obligacion
 
Ch 3
Ch 3Ch 3
Class 9 presentation
Class 9 presentationClass 9 presentation
Class 9 presentationlaura_gerold
 
Isometric sketching lect 07 OF CIVIL ENGINEERING DRAWING
Isometric sketching lect 07 OF CIVIL ENGINEERING DRAWINGIsometric sketching lect 07 OF CIVIL ENGINEERING DRAWING
Isometric sketching lect 07 OF CIVIL ENGINEERING DRAWING
Safiullah Khan
 
5- pictorial sketching Graphic and geometric graphics engineering.
5- pictorial sketching Graphic and geometric graphics engineering.5- pictorial sketching Graphic and geometric graphics engineering.
5- pictorial sketching Graphic and geometric graphics engineering.
Abo Talak Al-wayli
 
Projection Models
Projection Models Projection Models
Projection Models
Iram Toqeer
 
Lesson 6_Prepare and Interpret Technical Drawing (LO1)
Lesson 6_Prepare and Interpret Technical Drawing (LO1)Lesson 6_Prepare and Interpret Technical Drawing (LO1)
Lesson 6_Prepare and Interpret Technical Drawing (LO1)
Judie T
 
Types of projections
Types of projectionsTypes of projections
Types of projections
Muhammad Umair Akram
 
Machine parts orthographic projections
Machine parts orthographic projections Machine parts orthographic projections
Machine parts orthographic projections
Mohd Mujahid Nasir
 
Multiview drawing
Multiview drawingMultiview drawing
Multiview drawing
Assosa University
 
Auxiliary views
Auxiliary viewsAuxiliary views
Auxiliary views
Assosa University
 
Isometric views
Isometric viewsIsometric views
Isometric views
Surashmie Kaalmegh
 
GeoGebra 10
GeoGebra 10GeoGebra 10
GeoGebra 10
Boyd Hamulondo
 
1291 fa13 assign4_digitizing_folded_models
1291 fa13 assign4_digitizing_folded_models1291 fa13 assign4_digitizing_folded_models
1291 fa13 assign4_digitizing_folded_modelsNYCCTfab
 
Geogebra 9
Geogebra 9Geogebra 9
Geogebra 9
Boyd Hamulondo
 
Geometry 1-7 Constructions
Geometry 1-7 ConstructionsGeometry 1-7 Constructions
Geometry 1-7 Constructionsjtentinger
 

What's hot (18)

Draw 111- mechanical drawing and orthographic drawing
Draw 111- mechanical drawing and orthographic drawingDraw 111- mechanical drawing and orthographic drawing
Draw 111- mechanical drawing and orthographic drawing
 
Polygon mesh
Polygon  meshPolygon  mesh
Polygon mesh
 
Geometry Softwares
Geometry SoftwaresGeometry Softwares
Geometry Softwares
 
Ch 3
Ch 3Ch 3
Ch 3
 
Class 9 presentation
Class 9 presentationClass 9 presentation
Class 9 presentation
 
Isometric sketching lect 07 OF CIVIL ENGINEERING DRAWING
Isometric sketching lect 07 OF CIVIL ENGINEERING DRAWINGIsometric sketching lect 07 OF CIVIL ENGINEERING DRAWING
Isometric sketching lect 07 OF CIVIL ENGINEERING DRAWING
 
5- pictorial sketching Graphic and geometric graphics engineering.
5- pictorial sketching Graphic and geometric graphics engineering.5- pictorial sketching Graphic and geometric graphics engineering.
5- pictorial sketching Graphic and geometric graphics engineering.
 
Projection Models
Projection Models Projection Models
Projection Models
 
Lesson 6_Prepare and Interpret Technical Drawing (LO1)
Lesson 6_Prepare and Interpret Technical Drawing (LO1)Lesson 6_Prepare and Interpret Technical Drawing (LO1)
Lesson 6_Prepare and Interpret Technical Drawing (LO1)
 
Types of projections
Types of projectionsTypes of projections
Types of projections
 
Machine parts orthographic projections
Machine parts orthographic projections Machine parts orthographic projections
Machine parts orthographic projections
 
Multiview drawing
Multiview drawingMultiview drawing
Multiview drawing
 
Auxiliary views
Auxiliary viewsAuxiliary views
Auxiliary views
 
Isometric views
Isometric viewsIsometric views
Isometric views
 
GeoGebra 10
GeoGebra 10GeoGebra 10
GeoGebra 10
 
1291 fa13 assign4_digitizing_folded_models
1291 fa13 assign4_digitizing_folded_models1291 fa13 assign4_digitizing_folded_models
1291 fa13 assign4_digitizing_folded_models
 
Geogebra 9
Geogebra 9Geogebra 9
Geogebra 9
 
Geometry 1-7 Constructions
Geometry 1-7 ConstructionsGeometry 1-7 Constructions
Geometry 1-7 Constructions
 

Similar to Sketch a doodle - EICS 2020

Using a Mobile Phone as a 2D Virtual Tracing Tool: Static Peephole vs. Magic ...
Using a Mobile Phone as a 2D Virtual Tracing Tool: Static Peephole vs. Magic ...Using a Mobile Phone as a 2D Virtual Tracing Tool: Static Peephole vs. Magic ...
Using a Mobile Phone as a 2D Virtual Tracing Tool: Static Peephole vs. Magic ...
Klen Čopič Pucihar
 
SketchUp For Beginners - Feb 2015
SketchUp For Beginners - Feb 2015SketchUp For Beginners - Feb 2015
SketchUp For Beginners - Feb 2015Jan Liu
 
Dwg 106 module 2 part 1
Dwg 106 module 2 part 1Dwg 106 module 2 part 1
Dwg 106 module 2 part 1
AnneKryshelMurillo2
 
Straightedge & Compass Constructions: Modern Geometry
Straightedge & Compass Constructions: Modern GeometryStraightedge & Compass Constructions: Modern Geometry
Straightedge & Compass Constructions: Modern Geometry
Myrrhtaire Castillo
 
Using this example code in Xcode, please help with this project wher.pdf
Using this example code in Xcode, please help with this project wher.pdfUsing this example code in Xcode, please help with this project wher.pdf
Using this example code in Xcode, please help with this project wher.pdf
amirthagiftsmadurai
 
Tutorial 1 - Computer Aided Design (Final Release)
Tutorial 1 - Computer Aided Design (Final Release)Tutorial 1 - Computer Aided Design (Final Release)
Tutorial 1 - Computer Aided Design (Final Release)Charling Li
 
Producing basic engineering graphics.pdf
Producing basic engineering graphics.pdfProducing basic engineering graphics.pdf
Producing basic engineering graphics.pdf
Danilign Mekonnen
 
Presentation on bezier curve
Presentation on bezier curvePresentation on bezier curve
Presentation on bezier curve
Satyendra Rajput
 
Producing basic engineering graphics
Producing basic engineering graphicsProducing basic engineering graphics
Producing basic engineering graphics
Danilign Mekonnen
 
Google sketchup8
Google sketchup8Google sketchup8
Google sketchup8Trianz King
 
Google sketchup8
Google sketchup8Google sketchup8
Google sketchup8Trianz King
 
Sketching Tips From A CAPINC SOLIDWORKS Gure
Sketching Tips From A CAPINC SOLIDWORKS GureSketching Tips From A CAPINC SOLIDWORKS Gure
Sketching Tips From A CAPINC SOLIDWORKS Gure
CAPINC
 
Silhouettes and Outlines
Silhouettes and OutlinesSilhouettes and Outlines
Silhouettes and Outlinesrascalfats
 
Sketchup basic course by Eng. Khalid A. Mter
Sketchup basic course by Eng. Khalid A. MterSketchup basic course by Eng. Khalid A. Mter
Sketchup basic course by Eng. Khalid A. Mter
khalid mter
 
Week 3 Polygonal Modelling
Week 3   Polygonal ModellingWeek 3   Polygonal Modelling
Week 3 Polygonal Modelling
ScottRoberts37
 

Similar to Sketch a doodle - EICS 2020 (20)

Chapter3
Chapter3Chapter3
Chapter3
 
Chapter 3
Chapter 3Chapter 3
Chapter 3
 
Using a Mobile Phone as a 2D Virtual Tracing Tool: Static Peephole vs. Magic ...
Using a Mobile Phone as a 2D Virtual Tracing Tool: Static Peephole vs. Magic ...Using a Mobile Phone as a 2D Virtual Tracing Tool: Static Peephole vs. Magic ...
Using a Mobile Phone as a 2D Virtual Tracing Tool: Static Peephole vs. Magic ...
 
SketchUp For Beginners - Feb 2015
SketchUp For Beginners - Feb 2015SketchUp For Beginners - Feb 2015
SketchUp For Beginners - Feb 2015
 
Dwg 106 module 2 part 1
Dwg 106 module 2 part 1Dwg 106 module 2 part 1
Dwg 106 module 2 part 1
 
Straightedge & Compass Constructions: Modern Geometry
Straightedge & Compass Constructions: Modern GeometryStraightedge & Compass Constructions: Modern Geometry
Straightedge & Compass Constructions: Modern Geometry
 
Using this example code in Xcode, please help with this project wher.pdf
Using this example code in Xcode, please help with this project wher.pdfUsing this example code in Xcode, please help with this project wher.pdf
Using this example code in Xcode, please help with this project wher.pdf
 
Tutorial 1 - Computer Aided Design (Final Release)
Tutorial 1 - Computer Aided Design (Final Release)Tutorial 1 - Computer Aided Design (Final Release)
Tutorial 1 - Computer Aided Design (Final Release)
 
Chap22
Chap22Chap22
Chap22
 
Lessonrevolve
Lessonrevolve Lessonrevolve
Lessonrevolve
 
Producing basic engineering graphics.pdf
Producing basic engineering graphics.pdfProducing basic engineering graphics.pdf
Producing basic engineering graphics.pdf
 
Presentation on bezier curve
Presentation on bezier curvePresentation on bezier curve
Presentation on bezier curve
 
Producing basic engineering graphics
Producing basic engineering graphicsProducing basic engineering graphics
Producing basic engineering graphics
 
Google sketchup8
Google sketchup8Google sketchup8
Google sketchup8
 
Google sketchup8
Google sketchup8Google sketchup8
Google sketchup8
 
Core Animation
Core AnimationCore Animation
Core Animation
 
Sketching Tips From A CAPINC SOLIDWORKS Gure
Sketching Tips From A CAPINC SOLIDWORKS GureSketching Tips From A CAPINC SOLIDWORKS Gure
Sketching Tips From A CAPINC SOLIDWORKS Gure
 
Silhouettes and Outlines
Silhouettes and OutlinesSilhouettes and Outlines
Silhouettes and Outlines
 
Sketchup basic course by Eng. Khalid A. Mter
Sketchup basic course by Eng. Khalid A. MterSketchup basic course by Eng. Khalid A. Mter
Sketchup basic course by Eng. Khalid A. Mter
 
Week 3 Polygonal Modelling
Week 3   Polygonal ModellingWeek 3   Polygonal Modelling
Week 3 Polygonal Modelling
 

Recently uploaded

Cosmetic shop management system project report.pdf
Cosmetic shop management system project report.pdfCosmetic shop management system project report.pdf
Cosmetic shop management system project report.pdf
Kamal Acharya
 
block diagram and signal flow graph representation
block diagram and signal flow graph representationblock diagram and signal flow graph representation
block diagram and signal flow graph representation
Divya Somashekar
 
在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样
在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样
在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样
obonagu
 
Nuclear Power Economics and Structuring 2024
Nuclear Power Economics and Structuring 2024Nuclear Power Economics and Structuring 2024
Nuclear Power Economics and Structuring 2024
Massimo Talia
 
Halogenation process of chemical process industries
Halogenation process of chemical process industriesHalogenation process of chemical process industries
Halogenation process of chemical process industries
MuhammadTufail242431
 
MCQ Soil mechanics questions (Soil shear strength).pdf
MCQ Soil mechanics questions (Soil shear strength).pdfMCQ Soil mechanics questions (Soil shear strength).pdf
MCQ Soil mechanics questions (Soil shear strength).pdf
Osamah Alsalih
 
H.Seo, ICLR 2024, MLILAB, KAIST AI.pdf
H.Seo,  ICLR 2024, MLILAB,  KAIST AI.pdfH.Seo,  ICLR 2024, MLILAB,  KAIST AI.pdf
H.Seo, ICLR 2024, MLILAB, KAIST AI.pdf
MLILAB
 
The role of big data in decision making.
The role of big data in decision making.The role of big data in decision making.
The role of big data in decision making.
ankuprajapati0525
 
J.Yang, ICLR 2024, MLILAB, KAIST AI.pdf
J.Yang,  ICLR 2024, MLILAB, KAIST AI.pdfJ.Yang,  ICLR 2024, MLILAB, KAIST AI.pdf
J.Yang, ICLR 2024, MLILAB, KAIST AI.pdf
MLILAB
 
Forklift Classes Overview by Intella Parts
Forklift Classes Overview by Intella PartsForklift Classes Overview by Intella Parts
Forklift Classes Overview by Intella Parts
Intella Parts
 
Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...
Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...
Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...
Dr.Costas Sachpazis
 
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdf
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdfHybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdf
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdf
fxintegritypublishin
 
Vaccine management system project report documentation..pdf
Vaccine management system project report documentation..pdfVaccine management system project report documentation..pdf
Vaccine management system project report documentation..pdf
Kamal Acharya
 
Event Management System Vb Net Project Report.pdf
Event Management System Vb Net  Project Report.pdfEvent Management System Vb Net  Project Report.pdf
Event Management System Vb Net Project Report.pdf
Kamal Acharya
 
TECHNICAL TRAINING MANUAL GENERAL FAMILIARIZATION COURSE
TECHNICAL TRAINING MANUAL   GENERAL FAMILIARIZATION COURSETECHNICAL TRAINING MANUAL   GENERAL FAMILIARIZATION COURSE
TECHNICAL TRAINING MANUAL GENERAL FAMILIARIZATION COURSE
DuvanRamosGarzon1
 
Immunizing Image Classifiers Against Localized Adversary Attacks
Immunizing Image Classifiers Against Localized Adversary AttacksImmunizing Image Classifiers Against Localized Adversary Attacks
Immunizing Image Classifiers Against Localized Adversary Attacks
gerogepatton
 
Courier management system project report.pdf
Courier management system project report.pdfCourier management system project report.pdf
Courier management system project report.pdf
Kamal Acharya
 
Planning Of Procurement o different goods and services
Planning Of Procurement o different goods and servicesPlanning Of Procurement o different goods and services
Planning Of Procurement o different goods and services
JoytuBarua2
 
ethical hacking in wireless-hacking1.ppt
ethical hacking in wireless-hacking1.pptethical hacking in wireless-hacking1.ppt
ethical hacking in wireless-hacking1.ppt
Jayaprasanna4
 
一比一原版(SFU毕业证)西蒙菲莎大学毕业证成绩单如何办理
一比一原版(SFU毕业证)西蒙菲莎大学毕业证成绩单如何办理一比一原版(SFU毕业证)西蒙菲莎大学毕业证成绩单如何办理
一比一原版(SFU毕业证)西蒙菲莎大学毕业证成绩单如何办理
bakpo1
 

Recently uploaded (20)

Cosmetic shop management system project report.pdf
Cosmetic shop management system project report.pdfCosmetic shop management system project report.pdf
Cosmetic shop management system project report.pdf
 
block diagram and signal flow graph representation
block diagram and signal flow graph representationblock diagram and signal flow graph representation
block diagram and signal flow graph representation
 
在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样
在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样
在线办理(ANU毕业证书)澳洲国立大学毕业证录取通知书一模一样
 
Nuclear Power Economics and Structuring 2024
Nuclear Power Economics and Structuring 2024Nuclear Power Economics and Structuring 2024
Nuclear Power Economics and Structuring 2024
 
Halogenation process of chemical process industries
Halogenation process of chemical process industriesHalogenation process of chemical process industries
Halogenation process of chemical process industries
 
MCQ Soil mechanics questions (Soil shear strength).pdf
MCQ Soil mechanics questions (Soil shear strength).pdfMCQ Soil mechanics questions (Soil shear strength).pdf
MCQ Soil mechanics questions (Soil shear strength).pdf
 
H.Seo, ICLR 2024, MLILAB, KAIST AI.pdf
H.Seo,  ICLR 2024, MLILAB,  KAIST AI.pdfH.Seo,  ICLR 2024, MLILAB,  KAIST AI.pdf
H.Seo, ICLR 2024, MLILAB, KAIST AI.pdf
 
The role of big data in decision making.
The role of big data in decision making.The role of big data in decision making.
The role of big data in decision making.
 
J.Yang, ICLR 2024, MLILAB, KAIST AI.pdf
J.Yang,  ICLR 2024, MLILAB, KAIST AI.pdfJ.Yang,  ICLR 2024, MLILAB, KAIST AI.pdf
J.Yang, ICLR 2024, MLILAB, KAIST AI.pdf
 
Forklift Classes Overview by Intella Parts
Forklift Classes Overview by Intella PartsForklift Classes Overview by Intella Parts
Forklift Classes Overview by Intella Parts
 
Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...
Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...
Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...
 
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdf
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdfHybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdf
Hybrid optimization of pumped hydro system and solar- Engr. Abdul-Azeez.pdf
 
Vaccine management system project report documentation..pdf
Vaccine management system project report documentation..pdfVaccine management system project report documentation..pdf
Vaccine management system project report documentation..pdf
 
Event Management System Vb Net Project Report.pdf
Event Management System Vb Net  Project Report.pdfEvent Management System Vb Net  Project Report.pdf
Event Management System Vb Net Project Report.pdf
 
TECHNICAL TRAINING MANUAL GENERAL FAMILIARIZATION COURSE
TECHNICAL TRAINING MANUAL   GENERAL FAMILIARIZATION COURSETECHNICAL TRAINING MANUAL   GENERAL FAMILIARIZATION COURSE
TECHNICAL TRAINING MANUAL GENERAL FAMILIARIZATION COURSE
 
Immunizing Image Classifiers Against Localized Adversary Attacks
Immunizing Image Classifiers Against Localized Adversary AttacksImmunizing Image Classifiers Against Localized Adversary Attacks
Immunizing Image Classifiers Against Localized Adversary Attacks
 
Courier management system project report.pdf
Courier management system project report.pdfCourier management system project report.pdf
Courier management system project report.pdf
 
Planning Of Procurement o different goods and services
Planning Of Procurement o different goods and servicesPlanning Of Procurement o different goods and services
Planning Of Procurement o different goods and services
 
ethical hacking in wireless-hacking1.ppt
ethical hacking in wireless-hacking1.pptethical hacking in wireless-hacking1.ppt
ethical hacking in wireless-hacking1.ppt
 
一比一原版(SFU毕业证)西蒙菲莎大学毕业证成绩单如何办理
一比一原版(SFU毕业证)西蒙菲莎大学毕业证成绩单如何办理一比一原版(SFU毕业证)西蒙菲莎大学毕业证成绩单如何办理
一比一原版(SFU毕业证)西蒙菲莎大学毕业证成绩单如何办理
 

Sketch a doodle - EICS 2020

  • 1. SketchADoodle Engineering Touch-surface Multi-strokeGestures by Bézier Curves Donatien Grolaux, Thanh-Diane Nguyen, Jean Vanderdonckt, Iyad Kaddham EICS 2020-2021, Eindhoven, Netherlands
  • 2. What is this about ? How can one create a drawing application for mobile devices... • ... that is intuitive to use ... • ... and works well despite the fat fingers problem ?
  • 3. Drawing applications in general Typical solutions for drawing applications are either: Bitmap based, i.e. the application manipulates a matrix of pixels, à la Photoshop. • There exists many smartphone bitmap drawing applications. • However, there is no notion of shapes in the drawing, juste pixels. • If you draw a face, you cannot move, rotate or scale it afterwards. • Not in a straigthforward way with no visual artifacts. • Multi-touch interfaces naturally invite for these sort of interactions.
  • 4. Drawing application in general Typical solutions for drawing applications are either: Vector based, ie the application manipulates mathematical objects representing shapes, à la Corel Draw. • There exists some smartphone vector drawing applications: • Some are artists oriented and their interaction is very close to bitmap based drawing applications. • Some are technical oriented and use a select first- manipulate after approach. • This approach works well using a mouse, but are not very pratical on smartphones due to the fat finger problem.
  • 5. What do we propose ? Let's create a new type of interaction for drawing... • ...that is based on an experience shared by most in the real world: How do young children use their school materials to create drawings ?
  • 6. Drawing metaphor Real world manipulation Application manipulation Pen drawing Freehand drawing an a surface Area coloring Bucket fill enclosed areas Scissor cuts Cut drawings according to a line Glue parts together Glue drawings that intersects a line Rotate and move parts Idem, add scaling because we can easily achieve it on a computer.
  • 7. How can we achieve it ? • The scaling/rotating/moving impose a vector-based approach. • The direct manipulation metaphor forbids the select then modify approach typical to vector-based. • The bucket fill can be achieved by using the flood fill algorithm, but this is a bitmap-based algorithm. Our solution: • Everything in the drawing is a quadratic B-Spline. • All tools use a direct manipulation approach. • Requires adaptation of existing algorithms and creations of new ones. • The direct manipulation is as close as possible to the real world manipulation.
  • 8. Quadratic B-Splines • A Bézier curve of degree n is defined by n+1 control points. • A quadratic Bézier curve is defined by 3 points defining two segments. • For t ∈ [0,1], take each corresponding point on each segment. • Recursively, take the corresponding point on the segment defined by the two points above. This point is the t point on the Bézier curve. • A B-Spline is a succession of quadratic Bézier curves where the end point of a curve is the starting point of the next one.
  • 9. Tool: freehand drawing • A sampling of points is generated by the movement of the finger. • A quadratic B-Spline is created on the fly by curve fitting these points. • For efficiency, we use a streaming approach: • As new points are coming in, we fit these points to a quadratic Bézier curve. • A distance function decides if the curve is a good enough approximation to the sampled points. • If not, the last good quadratic curve is added to the B-Spline and the corresponding points are removed from the sampling.
  • 10. Tool: move/rotate/scale • By placing a single finger on an item, displacing the finger moves the item along with it. • By placing two fingers on an item, moving the fingers ensures the item follow the same displacement, rotation, and scaling. By moving two fingers from A,B to C,D, the shape is moved, rotated, and scaled.
  • 11. Tool: cut • By drawing a straight line, a cut is decided by the user. • This line is intersected with all splines in the drawing. • When an intersection is met, we use De Casteljau's algorithm to split the Bézier curve in two, which allows to cut the B-Spline in two.
  • 12. Tool: glue • By drawing a straight line, a glue is decided by the user. • This line is intersected with all splines in the drawing. • A composite is created that contains all the intersected B-Splines. • From now on, all move/scale/rotate/transformations applied on the composite are applied on all B-Splines of the composite
  • 13. Tool: bucket tool • By touching a pixel, the enclosed area is painted by the current color. • Further, the neighbooring B-Splines that define this area are also glued together. • We achieve this effect by: 1. Using the floodfill algorithm on a bitmap representation of the current drawing. 2. Identifying all B-Splines that delimit the flooded area. 3. Walking around these B-Splines, identifying when a jump occurs between them. 4. Stitching together a new B-Spline from this information. 5. Finally, gluing everything together.
  • 14. Implementation: SketchADoodle This Android application is available on the Play Store: https://play.google.com/store/apps/details?id=com.grayswindle.sketchadoodle The algorithms described in the paper are available for JavaScript: https://github.com/GrolauxDonatien/SketchADoodleJS
  • 16. Conclusion • By mimicking a real world experience, we created a new type of direct manipulation for drawing on a smartphone. • The user study shows a global positive view for the application. • The specifics for the algorithms are described in the paper. Thank you for your attention.

Editor's Notes

  1. To validate this work, we have performed an IBM CSUQ form with 26 participants (11 females, 15 males), aged between 19 and 66 years. We have begun with a set of demographic question like gender, computer habits and so on. Then, we have evaluated the application with the Computer Satisfaction Usability Questionnaire that enables participants to express their level of satisfaction with the usability domain. This 16 questions questionnaire has been empirically validated with a large number of participants on 4 categories: system usefulness, quality of the information , quality of the interaction, and system quality.   As we can see in the result of Usability evaluation, all categories are almost higher than 5, which is generally considered acceptable for a 7-point Likert scale in this case. The weak score is about the quality of the information. Indeed, for the error management, some users found it difficult to correct their errors because they could not find the correct information. Overall, participants did appreciate the ease of use and quality of the interaction they had. All values are beyond the threshold of 4 which represents a good score.