A PRELIMINARY MINI PROJECT REPORT ON

“Mobile Pattern Tracking System Using Greedy Algorithm”

SUBMITTED TOWARDS THE PARTIAL FULFILLMENT OF THE

REQUIREMENTS OF

BACHELOR OF ENGINEERING (T.Y. B. Tech.)

Academic Year: 2024-25

By:

Name PRN

Aaditesh Anil Kadu 122B1B122

Ashirwad Rajeshwar Katkamwar 122B1B133

Nayan Gajanan Keote 122B1B137

Under The Guidance of

Dr. Sarika Deokate

DEPARTMENT OF COMPUTER ENGINEERING,

PIMPRI CHINCHWAD COLLEGE OF ENGINEERING
SECTOR 26, NIGDI, PRADHIKARAN
 Pimpri Chinchwad Education Trust’s

Pimpri Chinchwad College of Engineering

Department of Computer Engineering

CERTIFICATE
This is to certify that

Nayan Gajanan Keote

of class Third Year (2024-2025) have successfully completed the project on

“Mobile Pattern Tracking System Using Greedy Algorithm”

under the guidance of “Dr. Sarika Deokate” in the requirement for the award of BTech
in

Computer Engineering from Pimpri Chinchwad College of Engineering.

 Dr. Sarika Deokate
(Project Guide)

Table of Contents
Sr. No. Content Page No.
1 Title Page 1

2 Table of Contents 2

3 Introduction 3

3.1 Background 3

3.2 Objective 4

3.3 Scope 5

4 Related Work 6

4.1 Previous Work 6

4.2 Technological Background 7

4.2.1 Greedy Algorithm 7

4.2.2 Visualization Tools 8

5 Methodology/Implementation 9

5.1 Tools Used 9

5.2 Implementation Details 10

5.3 Algorithm & Logic 11

5.4 Code Explanation 12

6 Results 13

7 Conclusion 14

7.1 Summary 14

7.2 Future Scope 15

8 References 16
3. Introduction
Smartphones are equipped with many security features and one of them is mobile pattern lock
systems which are used for authentication of the users. This paper presents a modern and
engaging technique for aspect of designing and monitoring user generated patterns that
mimics a mobile pattern lock system. In the project that uses a greedy algorithm in the same
purpose there is achieved a good responsive pattern formation that focus on real-time
working performance which is primarily important in most mobile applications. The main
aim to design an interactive grid where users can draw patterns by connecting the appropriate
dots in right order. This involves constructing the grid of the size defined by the user,
capturing the drawn pattern and at last drawing the pattern with the help of dot tracking for
better understanding. The project is front-end only, and makes use of JavaScript to enable
design interactivity and pattern rendering without any back-end dependency. The grid could
be as small as 3x3 grids, to as large as 20x20 grids giving users a certain amount of freedom
but also making the application user-friendly to other needs. This prototype is sleeker and
does not have system security systems in place, however it is an early stage of developing
mobile pattern tracking systems.

4. Related Work
• Related Work
Mobile security systems have experienced different developments regarding
the pattern recognition process. Some of these systems apply optimization
dynamic programming techniques while others enhance their algorithms with
backtracking for complex patterns or use the greedy algorithm for easier
patterns. For instance, lock patterns on mobile devices are often built using the
greedy approach since it allows a perfect combination of speed and precision
without creating a negative user experience. This is of great importance for
mobile devices because the greedy algorithm provides a fast, iterative method,
which is less time-consuming in operation.

• Technical Background
The greedy algorithm mentioned in this case works because at every possible
point of making a decision, it always makes the decision which is the most
optimal at that point in time without going back to the previous decisions
which would have been made simple therefore effective. JavaScript is a good
choice based on the fact that it has a rich front end for pattern tracking due to
the fact of providing Dynamic HTML which supports document wide changes
on the fly and interactive elements which are integral features in such user
centric applications as this one.

5. Methodology/Implementation/Algorithm
Tools and Technologies Used
The following tools and technologies are utilized to build the interactive pattern lock system,
each serving a specific purpose in creating a functional, visually appealing, and responsive
application:
 • HTML: Establishes the fundamental structure of the web page, defining key
interactive elements such as the grid and input fields. Each element is marked with
attributes for easy selection and manipulation via JavaScript.
• CSS:
o Applies styling to the grid and its elements, distinguishing between unselected,
selected, and highlighted dots, enhancing user interaction and visual feedback.
o Dynamic CSS rules control grid layout responsiveness based on the chosen
grid size, ensuring consistency in display across devices.
o Provides visual cues, such as transitions and color changes, to indicate
selection, enhancing the UX.
• JavaScript:
o JavaScript handles grid creation, pattern selection, pattern visualization, and
the underlying algorithm.
o It manages dynamic events (e.g., dot selection) in real-time, enabling seamless
interaction and ensuring user inputs are captured immediately.
o This interactivity enables pattern recording and visualization without requiring
server-side processing, making the application light and responsive.
• Development Tools: Browser tools are used to test cross-device compatibility,
ensuring consistent performance and appearance on both desktop and mobile
interfaces.

Implementation Details
The project consists of three main stages that collectively handle the creation, selection, and
visualization of patterns:
1. Grid Creation:
o Dynamic Grid Size: Using the createGrid function, users can choose a grid
size between 3x3 and 20x20. The grid is dynamically generated based on the
specified size, accommodating both small and large patterns.
o Dot Elements: Each grid cell is represented as a clickable "dot," structured as
individual div elements, and assigned unique indexes for tracking user
selections.
o Interactive Click Function: Each dot is given an onclick event that triggers
the selectDot function upon selection. This function captures the dot’s index,
adds it to the selectedPattern array, and visually marks it as selected.
o Scalability: The grid layout uses CSS grid properties (grid-template-columns)
that adapt to any grid size, making the design flexible and responsive to
different user settings.
2. Pattern Selection:
o Tracking User Inputs: When a dot is clicked, the selectDot function logs the
dot index in selectedPattern, creating a unique sequence based on the user’s
interaction.
o Updating the Pattern: This pattern is displayed in a hidden input field,
allowing real-time updates on the current path for easy access and review.
o Selection Restriction: To prevent redundant selections, selectDot checks if a
dot has already been selected. If so, it avoids adding the dot again to ensure
each dot is included only once per pattern.
o Clear Pattern Functionality: To reset and start fresh, a clearPattern function
clears the selected pattern, resets the input field, and regenerates the grid,
ensuring users can redefine their pattern without reloading the page.
3. Pattern Visualization:
 o Sequential Highlighting: Once the pattern is selected, the visualize Pattern
function animates each selected dot sequentially with a delay, enhancing user
understanding of the chosen path.
o Intermediate Dots Highlighting: For each pair of selected dots, the visualize
All Intermediate Dots function highlights the intermediate points, creating a
continuous, connected path between nodes.
▪ Horizontal and Vertical Movement: The function calculates
intermediate dots for horizontal and vertical connections, highlighting
each relevant dot briefly to guide the user visually along the path.
▪ Diagonal Movement: For diagonal movements, it tracks the diagonal
path and highlights each dot along this line, ensuring that every
segment of the pattern is clearly visible.
o Temporary Highlighting of Dots: The highlightDotTemporarily function
briefly highlights each intermediate dot before marking it as visited. This
approach balances between guiding users and marking completion, keeping
the path visible but also clearly indicating previously visited dots.
o Pattern Completion: The final dot in the sequence is highlighted to indicate
the end of the visualization, providing clear feedback that the pattern is fully
traced.
Algorithm/Logic Flow with Time and Space Complexity
• Greedy Algorithm Logic: The project applies a greedy algorithmic approach for
efficient pattern formation. At each step, it selects the optimal path in real-time,
without requiring backtracking or revisiting dots.
• Time Complexity:
o O(n), where nnn is the number of dots in the selected pattern. The algorithm
processes each dot once per pattern selection, ensuring minimal computational
overhead.
o Pattern Visualization: The visualization sequence processes each selected dot
and intermediate dots linearly, maintaining overall time efficiency.
• Space Complexity:
o O(n), where nnn represents the length of the selected pattern. Each selected
dot is stored in an array (selectedPattern), allowing the pattern to be
dynamically updated and visualized.
o Temporary Highlighting: Intermediate nodes are highlighted temporarily,
occupying minimal memory, as each highlighted dot is cleared once marked as
visited, keeping space usage efficient for larger grids.

6. Results
Analysis of Results
The mobile pattern tracking system achieved the following:
• Real-time Responsiveness: The greedy algorithm effectively visualizes the selected
pattern in real-time without noticeable lag.
• Dynamic Pattern Visualization: By highlighting intermediate dots, the system
provides clear visual feedback, enhancing traceability.
• User-Friendly Interaction: The grid’s responsiveness and adaptability to different
sizes make it easy to use and customize.
Interpretation of Results
The results indicate that the greedy algorithm is highly effective for pattern-based
applications where real-time responsiveness is critical. The system performs consistently
across different grid sizes, demonstrating the scalability and adaptability of the algorithm.
7. Conclusion
Summary
The mobile pattern tracking project successfully implemented an interactive
system using JavaScript. By utilizing a greedy algorithm, the project ensured
efficient and responsive performance, making it ideal for applications requiring
real-time pattern recognition. The system allows users to create, select, and
visualize patterns within a dynamically generated grid.
Future Scope
Several areas can enhance the project in the future:
1. Security Enhancements: Implement backend integration with pattern
authentication and encryption for secure user data storage.
2. User Authentication Features: Incorporate biometric features, such as
fingerprint or facial recognition, as additional security layers.
3. Pattern Prediction: Implement pattern prediction using machine learning,
analyzing frequently used patterns and providing alternative suggestions.
8. References
List all the books, papers, websites, and other resources you consulted.