Drawing App - Project Report

Outlining the project

I have chosen the first template as my starting point since I am an illustrator outside my study life and have an
understanding about the drawing apps. Template already has the freehand, line, spray can and mirror tools, also
we already designed a stamp tool with our tutors.

First I extended the stamp tool. Stamp tool can be changed by clicking the shape we want to stamp. I haven’t
added this tool in the app yet but will be in the app and stamp categories can be chosen according the drawing
composition (plants, animals, emojis etc.) from a drop down menu.

Other extensions have planned for the app are,

-color wheel
-different brushes for freehand tool
-color picker
-new canvas tool
-size and opacity tool
-eraser tool
-more symmetry options and symmetry on/of button
-stamp categories
-saving options

Tools (color picker, size & opacity, eraser) will be programmed by creating new constructor functions in different .js
files.
“New canvas” tool will be in the Helper functions and works with the save image handler. When you click the “New
canvas”, app will ask you if you want to save the previous one. And gets the input from user for the new canvas
size. There can be a challenge about bigger canvas sizes to mapping around the canvas while drawing. Canvas size
should be limited because of the memory limitations.

Color palette will be updated as a color wheel and there will be hue, saturation and brightness sliders. RGB data
will be collected from the cursor and chosenColor variable will assigned. After a color selected, chosenColor
function can be used with all the tools.
This method will also similar to size and opacity tools. There will be a challenge since once you change the size, all
other tools’ sizes will be assigned that size. We can reset the size and opacity once you change the tool.

Eraser tool will also compatible with size and opacity values, and this method will decrease the opacity of the
clicked area to erase things.

Other things like different brushes, save image types or additional symmetry options will be extentions of the
current tools. Symmetry will not be a tool anymore but a activate/deactivate choice. Also a cyclic symmetry option
will add for all the symmetry types.
Progress so far

I listed all the extensions I planned for the project and decide which ones needs to be in my app. Some of them
completely cancelled and some of them updated before adding to plan.
Curve tool is cancelled because I could not decide how to adjust curve slopes and seemed a little bit confusing.
Paint bucket tool also cancelled. How to tell a computer a shape is ended? I had some ideas while writing this
report so this tool can be add later.
Shape tool included inside the stamp tool’s categories. There is no need for two different tool the perform the
same basic action.
Brush opacity and size tool extended as an interface choices and decided to affect all the tools like spray can,
freehand brushes, eraser and stamps. Not only the brushes.
Updated the code and app diagram according to these plans. Red ones will be added to program and the blue ones
already added. Stamp tool’s .js file created and working as a separate program which you can stamp different
shapes in a canvas. But it will extended for different stamp categories and will occure in the app itself.
Created a rough interface design for the app. So I will know which extension will be where. There will be drop
down menus for freehand and stamp tools. Also a pop-up for new canvas which you need to chose the save
previous canvas and new canvas size.

I want to upgrade the interface design to make visuals more efficient and friendly. Also have a strong desire to add
a paint bucket tool too. Planned to choose the pixels around the clicked point and the color of chosen area.
Function will extend it until the color changes. If color changed at that pixel, loop will stop. Loop can check the 8
pixels around the chosen one.

Time Planning

Gantt chart can be seen below until now and the rest of the project. Yellow parts represents the planning, blue for
programming and coding, pink for designing, green for testing and the red ones are the reports.

I have seven main parts for the project. First part (Dec 16- Dec 22) generally about understanding the general
scope of the project and brainstorming about what I can do.
Second part (Dec 16-Jan 6) is three week long since this part is about the designs. Creating the app diagrams,
planning the interfaces, preparing the mood boards and collecting data from other apps.

Third main part (Dec 30-Jan 6), is generally about the deep planning the rest of the project and preparing the
midterm report.

Fourth part (Jan 6-Jan 27) is the actual programming time. In this timeline extensions will be implemented and will
be add to app inside.

Fifth and sixth parts devoted for the perfecting the interface design and testing. I will send my app to friends and
family and get their feedbacks. According to those feedbacks, app will be updated or not.

Feb 24-March 3 for writing the final report of the project.

I gave myself an extra week in case of any unpleasing setback.

Design inspirations and ideas: Procreate App, Zbrush App

Stamp tool code: Intro to programming II course - Week 9