Math

Draw

Insert..

Undo

Redo

Docs..

Save

Share

Login

How to create a graph

Write a math equation with strokes directly on the page.

Then, draw the FluidMath *graphing gesture*.

Additional topics:

*Graphing gesture*:

- Start graphing gesture on equal symbol
- Draw a looping stroke passing through the bottom of yellow rectangle
- End the stroke on an empty area of the page and a graph will appear

## Welcome to FluidMath!

*Bring your Handwritten Math to Life!*™

Click an example below:

**Highlight Equivalence**

Turn on this feature to set the background color of equivalent expressions or equations to be the same color.

*Examples:*

**Simplifying an expression.**
On the left side of the image, the student first tries to simplify, but makes a mistake in the first
step and the student gets feedback because the expressions are different colors. On
the right side of the image the student corrects the mistake and continues. The student gets feedback that
no mistake has been made because all three expressions have the same background color.

**Solving an equation.**
On the left side of the image the student tries to solve the equation, but makes a mistake in the
first step and the student gets feedback because the expressions are different colors.
On the right side of the image the student corrects the mistake and continues. The student gets feedback
that no mistake has been made because all three equations have the same background color.

### Background content

By default FluidMath pages have a blank background. You can set background content on your FluidMath pages. For example, a specific math problem or a diagram.

#### To add background content:

- Paste clipboard content onto the page by pressing CTRL + V
- Drag a file onto the page
- Insert picture from camera
^{NEW}

#### Edit background content

Right-click on the content and select the "Edit" menu item.

#### Delete background content

Right-click on the content and select the "Delete" menu item.

# Introduction

Welcome to FluidMath!

FluidMath provides a *fluid* user interface to
mathematics. It brings computations and interactive visualizations to
your math writing surface.

FluidMath's features currently include:

- recognition of handwritten math
- fluid user interface
- computer algebra system (CAS)
- graphing
- sliders

**The tutorial.** This tutorial will get you up and running
quickly through a series of basic lessons. It should take about 5-10
minutes.

**Live practice area.** Note to the right of the tutorial is
a "live", interactive FluidMath region in which you can try
out concepts presented in this tutorial.

**Which devices?** FluidMath is designed for use on iPads,
Interactive Whiteboards, and Tablet PC's. It may also work on other
devices. If it doesn't work on your device, please
contact us and let us know.

You can visit the FluidMath forum to learn more or post questions about FluidMath.

Continue to Getting Started.

# User Interface Overview

At first your page will be blank, like a piece of paper.

Notice the menubar at the top of the page which offers various options and controls.

Buttons

- The "Draw" and "Math" buttons toggles whether strokes are interpreted as annotations or math.
- The "Clear" button clears the page.

Links

- The "Tutorial" link brings you to this tutorial.
- The "Examples" link provides a list of FluidMath examples you can open.
- The "Add" link provides a menu-based method to add content to the page.

Continue to Writing symbols.

# Writing your first symbol

This lesson will teach you how to write a single symbol.

The right half of this page is a "live" FluidMath page. In it, write the number "2".

In general, when you finish writing a math stroke several things happen. First, strokes close to each other will be grouped into a single math expression. Each math expression will have a yellow box drawn around it.

The expected result from drawing a "2". The yellow box contains the expression's strokes. The blue typeset indicates the system's recognition of the strokes. And the green box is a drag handle for moving the expression.

Also, when you stop writing, a green progress bar is shown below the math expression. When it completes, the recognition result will appear in blue typeset below your writing. As you use FluidMath more, you will just glance at the blue typeset as you work to verify your strokes were recognized correctly, or to know there is a problem that needs correcting.

Notice too the green square at the top-left of each yellow-box. You can move a math expression by clicking and dragging the green square.

Returning to our goal of writing and recognizing a "2", if the recognition is wrong press the "Clear" link (at the top-right of the page) and try again.

**Practice:** Once you get a "2" recognized, please try writing a
few more individual symbols — maybe a "3", "8", and "y". At
first write one symbol at a time and push the "Clear" link after each
is recognized.

Next try writing multiple symbols on the same page. Notice if you write symbols near each other that they are grouped into a single math expression (visually indicated by a yellow box that contains neighboring symbols) and if you write symbols far apart there will be multiple yellow boxes, each containing the strokes of separate expressions.

Continue to Basic symbols.

# Examples of basic symbols

For your reference, below are demonstrations of the allographs supported in FluidMath for each of the basic symbols. Strokes have been exaggerated to show when one, two, or three strokes were used.

FluidMath will recognize additional math symbols as well, but the most common ones are shown here.

If FluidMath has trouble recognizing a symbol in your handwriting, consider writing the symbol in the style shown here. If you continue to have recognition problems, please contact us.

Continue to Erasing

# Scribble erase

The "Clear" button is useful but it erases *everything* on
the screen. Sometimes you just want to edit a few strokes.

FluidMath provides a "scribble-erase gesture" that can erase just a few strokes. A gesture is a stroke that is interpreted as a command rather than a stroke that is left on the page.

To erase a stroke, scribble over it. In this example, the scribble and the "3" symbol will disappear leaving just the "2" symbol.

**Let's try it!** First click "Clear" to erase the page. Then
write the number "23". Next, draw a "scribble-like" stroke back and
forth several times over the "3", as shown in the image to the right.
The "3" should disappear.

Be sure to touch the ink of the stroke you want to erase. Also, be sure to go back-and-forth several times (3-4 times) or the stroke may be interpreted as math rather than an erase gesture.

**Tip:** If the scribble stroke and the target strokes
*do not* disappear and the scribble mark is added to the page,
then just try again. Draw another scribble stroke in the same place
but try adding more "back-and-forths" and/or sharper turns as
illustrated in the figure to the left.

**Practice:** Now practice writing some multi-symbol math
expressions and then scribbling out one or more symbols. For example,
try writing "y = x + 2" and then change the math expression to
"y = x - 4".

Continue to Writing expressions.

# Writing a math expression

You now know the techniques needed to write and edit math expressions:

- writing math symbols
- reviewing a recognition (the blue typeset math)
- editing

**Practice:** Try writing some increasingly complex math
expressions. First try writing some numbers or simple assignments like
"a=12". Then move on to simple and complicated expressions like
fractions, exponents, square roots, etc.

1) A "plus" symbol was recognized as an "f". 2) To correct the problem, scribble erase the misrecognized strokes and rewrite them. 3) The plus symbol is recognized correctly.

**Editing expressions**. At times, you will want to modify an
expression. This is a powerful feature of FluidMath because all
calculations and graphs on the page will update in response to the
change. You can perform the modification by simply scribbling out the
symbols you want to change and then writing new symbols.

**Correcting a misrecognition.** Sometimes, FluidMath will not
recognize a part of an expression correctly. As an example, see the
top image to the right. Although the handwritten strokes look somewhat
like a "plus", it was recognized instead as a "f".

If this happens, you do not need to erase the whole expression. Instead, first find the incorrect symbol in the blue typeset and then locate the strokes associated with that symbol. Scribble erase those strokes as shown in the middle image, and then rewrite the symbol as shown in the bottom image.

Continue to Evaluating.

# Approximating and simplifying

FluidMath provides computation and computer algebra system (CAS) support.

In general, to numerically approximate an expression, write a "double arrow" to the right of the expression.

To simplify an expression, write a "single arrow" to the right of the expression.

See the image to the right for examples.

**Try it!** Try writing a few expressions and numerically
approximating and simplifying them now.

**Practice:** What is the numeric approximation of
$\frac{7}{3}$? What does
$\frac{72}{9}$ simplify to?

Continue to Solving.

# Solving

FluidMath can solve for one or more variables.

To solve for a variable, first write some math that uses the variable and then write a new expression consisting only of the variable you want to solve for. Next write a single-arrow or double-arrow to the right of the variable and the solution will be shown.

In the example to the right, 'x' is being solved for on the top and 'a' and 'b' are being solved for on the bottom.

**Try it!** Try writing a few math expressions and solving for
one or more variables now.

Continue to Graphing.

# Graphing

Graphing is easy with FluidMath!

To graph an expression, first write the expression, and then draw the graphing gesture. Plot a point by writing a coordinate pair and then graphing it.

The sequence of images below demonstrate the process. (To zoom in on the illustration, click it and then click 'back' to return to this page.)

1) Start graph gesture inside yellow box near equal sign. 2) Graph gesture should have looping-curve to it, as shown. 3) End graph gesture on existing graph or empty part of page to create a new graph.

The graphing gesture is a stroke that **starts inside** the
yellow bounding box and **ends on an empty part of the page**. See
for example the orange stroke in the second image from the top to the
right.

The graphing gesture is a stroke that starts inside an expression's yellow bounding box, has a looping shape like a "U", and ends on an empty part of the page.

FluidMath can graph inequality equations such as y > x or y ≤ 2x + 3.

**Try it!** Try graphing the expression "y = x + 1".

**NOTE:** If you draw a graphing gesture and do not get a graph,
then scribble erase the stroke left on the page and try drawing the
graphing gesture again. If you continue to not get a graph, try
starting your graphing gesture on top of the equal sign.

**Interacting with Graphs.** Graphs can be interactively
manipulated.

- To pan the graph, click on the background and drag.
- To zoom in or out on the graph, click and drag from the origin
of the graph to scale the x and y axes.
- If you are using a wheel mouse, you can roll the wheel to zoom in or out relative to the cursor position.
- iPad users can use the two-finger pinch-zoom gesture to zoom in or out of a graph.

- Move the graph by clicking and dragging the titlebar.
- Resize the graph by clicking and dragging the resize widget at the bottom-right of a graph.

**Deleting a graph.** To delete a graph, click the "X" button in
the top-right of the graph window. You can also scribble-delete a
graph.

**Table of Values.** Click the "Table" button to view a table
of values for the expressions in a graph. Click on the top-left cell
to change the min/max/step values for the table.

**Graph menu.** Click a graph's ▼
button for a list of additional graph commands including reset view,
edit/import data points, toggle features (intersections, intercepts, local
min/max), and axis style (e.g., radian tick marks).

**Import/Edit data points.** You can add or edit a graph's data points by clicking
the graph's menu ▼ and then "Edit Data".
Next, type or paste coordinate pairs into the pop-up window that appears. For
example, paste data from an Excel spreadsheet you access on your iPad.
Data must be in 2-column format and represent x, y coordinate pairs. To edit
data later, select the "Edit Data" menu item and you can edit the data points
you entered previously.

**Advanced - empty graph gesture.** Draw a large pair of axes ("+"-like shape)
to create an empty graph at a particular location and size.

Continue to Sliders.

# Sliders

Sliders provide a way to quickly vary the value of a parameter. One useful application of sliders is varying one or more parameters of a graphed math expression and observing how the plot responds.

To create a slider in FluidMath, first write a simple assignment
of the form "variable = value", such as "b = 3". Next, to create a
slider for "b" draw the "slider gesture". The slider gesture is a
stroke that **starts on the equals sign, extends directly down, and
ends outside the expression's yellow box**. The expression "b=3"
will be replaced with a slider.

The slider gesture is a stroke that starts on an equal sign, extends directly downwards, and ends outside an expression's yellow bounding box. The slider gesture only applies to expressions of the form "variable = value".

1) Start slider gesture inside yellow box on the equal symbol. 2) Draw slider gesture straight down from equal sign. 3) End slider gesture outside yellow box below math expression.

A slider widget replaces the math handwritten "b=3" math expression.

**Try it!** Press the "Clear" button and write "b=3" then draw
the slider gesture to create a slider for "b".

To vary the value, click on the tear-drop-shaped widget handle labeled with the variable name and drag it left or right.

To change the minimum and maximum of the slider's range, click and drag the axis background horizontally to offset the range. Click and drag the background vertically to scale the range.

Slider values can be continuous or constrained to discrete or values at tick marks. Click the slider's ▼ button and then the "Values" option to review the current mode (a checkmark will appear next to it) or to set the current mode.

To move the slider, click on the titlebar and drag it to the desired position.

To delete the slider, click on the "X" button in the top-right of the slider's window.

Continue to Animation.

# Animation

Bring your sketches to life by applying math expressions to sketches!

Example math sketch. Consider the following example problem:

**Car a is moving with constant velocity and car b is moving with
constant accelleration. At what time t will car b
catch up to car a?**

To setup the problem, two cars were drawn, labeled, and the math equations describing the motion of the two cars was written on the page. A slider for

*t*was created and then you can either run the animation or manually drag the

*t*slider widget to explore the state of the animation for various values of

*t*. Graphical and numeric representations of the equations can further help investigate this problem.

Open a live version of the above car animation page.

How to create your own animation:

- Go to "Options.." in the top menu and select "Math Sketching".
- Choose the "Draw" pen and draw an object and ground line (if you want to set the scale for your sketch).
- Switch back to the "Math" pen and label each object by drawing a variable name near it (e.g.,
*a*). - (Optional) Write a number near the ground line to specify how long the line is.
- Write an equation where the left-hand side is the variable and a subscript
*x*or*y*. E.g.,*a*and the label and equation should be shaded with the same color. This indicates the math expression has been associated with the labeled sketch._{x}= 80t - Create a slider for "
*t*". Change the view so "0" is at left side of the slider range and the maximum value you want for*t*is at the right of the slider range. - Click the "play" (▶) button to run the animation.
- Drag the slider for "
*t*" to vary*t*manually. - To change the math or page after running the animation, first tap anywhere on the background to return to editing mode.

Continue to Sharing.

# Sharing

**Sharing "live" documents**. If you have a FluidMath account and
are logged in then you can share a document with others easily. First,
create a document and then save
it by clicking on "My docs -> Save". Next select "My Docs -> Share"
and copy the URL displayed and send it to others (e.g., by email or in
a document). Need an account? Click here.

**iPad users**. You can send your FluidMath page to others as
bitmap images. Capture your FluidMath screen by pressing-and-holding
the iPad home button and then pressing the suspend button. An image
of the screen will be added to your Photos. You can then email or
share the image as you would any photo.

**Mac OS users**. You can capture the entire screen by pressing
Command-Shift-3. Or, you can capture a specific part of the screen
by pressing Command-Shift-4 and dragging a rectangle to surroung the
area you want to capture.

**Windows users**. Snipping Tool
is available on Windows 7. Pressing Alt-PrtScn will copy the active window
to your clipboard. Ctrl-PrtScn will capture the entire screen to your
clipboard.

Additional options for sharing FluidMath content are in the plans.

Continue to Advanced Topics.

# Advanced

This section describes several topics you may want to learn about after you have mastered the previous topics.

**"Shrinking Ink".** You may find you run out of space after adding
content to a page. You can shrink the size of math expressions by converting
them from hand-drawn math expressions to more compact typeset ones.

*How to shrink ink.* An expression must be recognized
(i.e., it must have blue typeset showing its recognition below it) before
you can shrink it. To shrink an expression click on the blue typeset button at
the lower-left of a handwritten math expression. Once converted, you can
click-and-drag to move the expression on the page or tap it to edit the math
strokes in a pop-up overlay. Scribble over the typeset math expression
to erase it.

*Shortcut.* Click on a letter symbol to create a slider for that symbol.

(Above) Click on blue typeset to convert handwritten math to a more compact form (see below).

Drag-and-drop the typeset math expression widget to move it or add it to a graph. Scribble over typeset math widget to erase it.

**Empty graph gesture.** Draw a large "+" on an empty part of the page
to create an empty graph.

Draw a large "+" on an empty part of the page (see above) to create an empty graph (see below).

Continue to End of tutorial.

# Congratulations!!!

**Congratulations!** You have finished the FluidMath tutorial.
You are ready to start using FluidMath. We hope that you enjoy
it!

If you have any comments or questions about this tutorial or FluidMath itself, please contact us.

If you are interested, there are additional FluidMath resources and related products.

# Additional Resources

There are also additonal FluidMath products

# Related Products

Fluidity Software also provides the following products, related to FluidMath.

- FluidEquation2014
- Use your laptop and iPad together to more easily create documents with typeset math expressions!
- Video demonstration
- FluidEquation2014 in Apple App Store

- FluidMath
*(for Microsoft Windows - released April 2011)*- A full-featured version of FluidMath designed for teachers and written for Microsoft Windows.
- See FluidMath in action on the FluidMath YouTube Channel
- FluidMath for Microsoft Windows
- FluidMath for Interactive Whiteboards

- FluidGrapher
*(for Microsoft Windows - released April 2012)*- A student-priced version of FluidMath featuring FluidMath's graphing functionality.
- FluidGrapher works on Windows Tablet PC's and Interactive Whiteboards
- Visit the FluidGrapher home page

- FluidArithmetic
*(for Microsoft Windows - pre-released available May 2012)*- A handwriting-based tool for practicing arithmetic with interactive feedback
- For Kindergarten through 4th grade
- Visit the FluidArithmetic home page

Return to FluidMath.

webFluidMath is always evolving. Please visit the tutorial periodically to learn about new features. You can also learn about changes by clicking the "News" link at the top of the page.

Math

Draw