Tootles
By: Richard Dorta, Henry Hoare,
Shilian Li, Issac Young

Research Summary​...​...................................................................................................1
Project Summary​………....​...............................................................................................1
Future Plan​......................................................................................................................1
Flow Chart.. ........................................................................................................................2
Initial Sketch​……..​.................................................................................................................2
Code/Comments​…..​.............................................................................................................3
Images………….​…..​............................................................................................................11
 

Doodling App

Research Summary
The research found out that our user is an urban dweller who was often distracted by
other factors that surround them, such as phone apps and the smell or sound of the
environment. We have designed the doodling app to keep their attention on the phone
in a non-obstructive way while listening to podcasts during their commute.

Project Summary
The full edition of our app will be a functional drawing board that allows users to draw
freely with different tools. The app can let them choose types of brushes, shape tools
and a color picker. The users can also choose to save their progress on the app.
The first version of the app have circles and squares ready to use, users can switch to
the shape that they want to use by press the keys. The color of all shapes is set to
change randomly while the user inputs a new shape on the background.

Future Plan
We are considering to add the function to adjust the size, color and stroke weight of the
shape. Then expand the toolkit and produce different shapes, then complete the color
picker, also add the undo function for a previous shape. Lastly, we would want to make
a preview function to let the users preview what the shape would look like before the
actual placement.

Pseudocode
1. Tap to enter the app=> blank canvas => instructions lead to the toolkit
2. Follow the instruction=> pick shape/ brush & color
3. Set stroke value=>or no stroke
4. Move on the screen to draw && press the screen and hold to preview
5. Release to set shape at the position after the preview
6. Press the “clear” or “Undo” to clear up the mistake
7. Edit the drawing to save or upload the result
 

Flow Chart

Initial Sketch
 

Code
//https://processing.org/examples/ referenced
// Richard Dorta, Henry Hoare, Shilian Li, Issac Young

ArrayList<Circle> circles; // an arraylist (an array whose size can change dynamically),
which has a type of the Circle class and is called circles
ArrayList<Square> squares; // an arraylist (an array whose size can change
dynamically), which has a type of the Square class and is called squares

int CircleWidth = 48; //int called CircleWidth set to a value of 48 and is used for the
width(and height) of ellipses in the Circle class
int SquareWidth = 48; //int called SquareWidth set to a value of 48 and is used for the
width(and height) of rectangles in the Square class

int shapeSelected = 1; //An integer variable called shapeSelected, initialized to a value

of 1, and is used to signify which shape is selected to be drawn (1 is circle, 2 is square)

boolean drawing = false; //a boolean variable called drawing set to false, used to tell if a
shape has been created, but not set to a locked location yet

void setup() {
size(1200, 800); // set the size of the canvas to 1200 by 800
rectMode(CENTER); //set the drawing mode for rectangles to be based on the center
(rather than the top left corner)
// Create an empty ArrayList (will store Circle objects)
circles = new ArrayList<Circle>(); //create an array list of the type Circle called circles
squares = new ArrayList<Square>(); //create an array list of the type Square called
square
}

void draw() {
background(255); //set the background to white
 

shapeSelected = CheckNumberForShape(shapeSelected); // sets the current shape

(circle or square) equal to 1 or 2 based on which key was last pressed

cursorShape(); //calls the cursorShape method

for (int i = 0; i < circles.size(); i++) { // a for loop to do the following block of code for
every circle in the circles arraylist
// An ArrayList doesn't know what it is storing so we have to cast the object coming
out
Circle circle = circles.get(i); //current circle is equal to the current place in the arraylist
the for loop is at
circle.display(); //calls the display function from the Circle class which draws the circle
on the screen
}
for (int i = 0; i < squares.size(); i++) { // a for loop to do the following block of code for
every square in the squares arraylist
// An ArrayList doesn't know what it is storing so we have to cast the object coming
out
Square square = squares.get(i); //current square is equal to the current place in the
arraylist the for loop is at
square.display(); //calls the display function from the Square class which draws the
circle on the screen
}

if (shapeSelected == 1) { //if you're currently drawing with circles

if (circles.size()>0 && circles.get(0)!=null && drawing == true) { //if you have at least
one circle already and the first circle actually exists and you're currently drawing
(haven't released the mouse yet)
Circle circle = circles.get(circles.size()-1); //the current circle is equal to the last
circle placed int the circles arraylist
circle.reDraw(mouseX, mouseY, CircleWidth); //continue to draw the current circle
at the location of the mouse on the x and y axis, with the preset circle width
}
}

if (shapeSelected == 2) { //if you're currently drawing with squares

 

if (squares.size()>0 && squares.get(0)!=null && drawing == true) { //if you have at

least one square already and the first square actually exists and you're currently
drawing (haven't released the mouse yet)
Square square = squares.get(squares.size()-1); //the current square is equal to the
last square placed int the squares arraylist
square.reDraw(mouseX, mouseY, SquareWidth); //continue to draw the current
circle at the location of the mouse on the x and y axis, with the preset circle width
}
}

textSize(32); //sets the textsize to 32

fill(0); //sets the fill color to black
text("'1' for circles, '2' for squares", width/2-250, 50); //writes the text in quotes at 250
pixels to the left of the center of the canvas and 50 pixels down
text("'ENTER' to clear drawing", width/2-200, 750); //writes the text in quotes at 200
pixels to the left of the center of the canvas and 750 pixels down

if (keyPressed) //if a key has been pressed

{
if (key == ENTER) //if that key was the ENTER key
{
for (int i = circles.size() - 1; i >= 0; i--) { //for every circle in the circles arraylist
circles.remove(i); //remove the circle
}
for (int i = squares.size() - 1; i >= 0; i--) { //for every square in the squares arraylist
squares.remove(i); //remove the square
}
}
}
}

void mousePressed() //method automatically called if any mousebutton has been

pressed
{
drawing = true; //set the drawing boolean variable to true
if (shapeSelected == 1) //if the current drawing mode is circles
 

circles.add(new Circle(mouseX, mouseY, CircleWidth)); //add a new circle to the

circles arraylist at the location of the mouse with the preset circle width

if (shapeSelected == 2) //if the current drawing mode is squares

squares.add(new Square(mouseX, mouseY, SquareWidth)); //add a new square to
the squares arraylist at the location of the mouse with the preset square width
}

void mouseReleased() { //method automatically called if any mousebutton has been

released
if (shapeSelected == 1) { //if the current drawing mode is circles
for (int i = 0; i < circles.size(); i++) { //for every circle in the circles arraylist
// An ArrayList doesn't know what it is storing so we have to cast the object coming
out
Circle circle = circles.get(circles.size()-1); //current circle is the last one created
circle.reDraw(mouseX, mouseY, CircleWidth); // call the reDraw method from the
Circle class, setting the final location for the circle to the mouse location at the time of
the mousebutton being released
}
}
if (shapeSelected == 2) { //if the current drawing mode is squares
for (int i = 0; i < squares.size(); i++) { //for every square in the squares arraylist
// An ArrayList doesn't know what it is storing so we have to cast the object coming
out
Square square = squares.get(squares.size()-1); //current square is the last one
created
square.reDraw(mouseX, mouseY, SquareWidth); // call the reDraw method from the
Square class, setting the final location for the square to the mouse location at the time
of the mousebutton being released
}
}
drawing = false; //sets the drawing boolean to false
}

int CheckNumberForShape(int x) //method to check which drawing mode is currently

being used, returns an integer (1 if '1' key was pressed, 2 if '2' key was pressed)
{
int val = x; //creates an int variable named val and sets it equal to x, the value being
passed into the method when it is called
 

if (keyPressed) { //if a key was pressed

if (key == '1') { //if the key was 1
val = 1; //val equals 1
}
if (key == '2') { //if the key was 2
val = 2; //val equals 2
}
}
return val; //return the current value of val
}

void cursorShape() //method to draw the cursor shape

{
if (drawing == false) //if you're not currently drawing, execute following code block
{
stroke(0); //stroke color is black
strokeWeight(3); //stroke weight is 3
fill(0, 0); //fill is black with an alpha value of 0
} else //else
{
noStroke(); //no stroke
}
if (shapeSelected == 1) { //if currently drawing the circles
ellipse(mouseX, mouseY, 50, 50); //draw an ellipse at cursor location with a width and
height of 50
}
if (shapeSelected == 2) { //if currently drawing the squares
rect(mouseX, mouseY, 50, 50); //draw a square at cursor location with a width and
height of 50
}
}

class Circle //create a class called Circle

{

float x; //float variable called x for x location

float y; //float variable called y for y location
float w; //float variable called w for width
 

int r; //int variable called r for RED rgb value

int g; //int variable called g for GREEN rgb value
int b; //int variable called b for BLUE rgb value

Circle(float tempX, float tempY, float tempW) { //constructor method for Circle class,
passing in three floats
x = tempX; //set x = tempX which was passed in
y = tempY; //set y = tempY which was passed in
w = tempW; //set w = tempW which was passed in
r = int(random(0, 255)); //set r equal to a random number between 0 and 255 and
convert it to an int
g = int(random(0, 255)); //set g equal to a random number between 0 and 255 and
convert it to an int
b = int(random(0, 255)); //set b equal to a random number between 0 and 255 and
convert it to an int
}

void reDraw(float tempX, float tempY, float tempW) { //redraw method passing in three
floats (method used to set final location of circle
x = tempX; //set x = tempX which was passed in
y = tempY; //set y = tempY which was passed in
w = tempW; //set w = tempW which was passed in
display(); //call the display method
}

void display() { // Display the circle

noStroke(); //turn off stroke
fill(r, g, b); //set fill to rgb values
ellipse(x, y, w, w); //draw the ellipse at x and y, with w as the width and height
}
}

class Square //create a class called Square

{
 

float x; //float variable called x for x location

float y; //float variable called y for y location
float w; //float variable called w for width

int r; //int variable called r for RED rgb value

int g; //int variable called g for GREEN rgb value
int b; //int variable called b for BLUE rgb value

Square(float tempX, float tempY, float tempW) { //constructor method for Square class,
passing in three floats
x = tempX; //set x = tempX which was passed in
y = tempY; //set y = tempY which was passed in
w = tempW; //set w = tempW which was passed in
r = int(random(0, 255)); //set r equal to a random number between 0 and 255 and
convert it to an int
g = int(random(0, 255)); //set g equal to a random number between 0 and 255 and
convert it to an int
b = int(random(0, 255)); //set b equal to a random number between 0 and 255 and
convert it to an int
}

void reDraw(float tempX, float tempY, float tempW) { //redraw method passing in three
floats (method used to set final location of circle
x = tempX; //set x = tempX which was passed in
y = tempY; //set y = tempY which was passed in
w = tempW; //set w = tempW which was passed in
display(); //call the display method
}

void display() { // Display the square

noStroke(); //turn off stroke
fill(r, g, b); //set fill to rgb values
rect(x, y, w, w); //draw the square at x and y, with w as the width and height
}
}
 

Images