Drawing On the Screen

name: inverse
layout: true
class: center, middle, inverse
---
# Introduction to Drawing

Jennifer Mankoff

CSE 340 Spring 2019 
---
layout: false

.title[Hall of Shame]
.body[
![:img  picture of a dialog box with a check box that MUST be checked
to continue on (why!?), 80%](img/bad-defaults.gif)
]
.footnote[Credit to [GP Design
Partners](http://hallofshame.gp.co.at/controls.html)]

???
notes
---

[//]: # (Outline Slide)
.left-column[# Today's goals]
.right-column[
- Abstractions for drawing on the screen
- Drawing in Android
- Clipping and other transformations
]
---
# Drawing on the Screen
- What is a Graphics object and how do you draw on it?
- Importance of pixel vs stroke model
- Making it pretty: Buffering & Anti Aliasing
???
- Discuss raster graphics and where coordinates are (00 at top left)
- Discuss pixel, frame buffer, reading quiz q1: What internal data structure (abstraction) is used to represent a picture for display on a color display screen?

A frame buffer (2D array)	(correct)
A pixel (R,G,B), (Incorrect answer -- wrong level of abstraction)
A number from 0 to 255, (wrong level of abbstraction)
A sampling of light frequency values at R, G and B, (Incorrect answer)

---
# Drawing in Android

- `Canvas` is an object level abstraction for performing drawing operations

- All drawing should be done in `protected void onDraw(Canvas canvas) {...}`
---
# How does Canvas work?

- Drawing is done by calling methods for different kinds of objects
--

- For example: `drawRect`, `drawOval`, `drawLine`, `drawPath` ...

[Full List in the API Documentation](https://developer.android.com/reference/android/graphics/Canvas.html)

---
# How does Canvas work?

- Drawing is done by calling methods for different kinds of objects

- Keeps track of other related operations

--
  - Links drawing operations to a `Bitmap` (Frame Buffer of pixels)

---
# Advanced Canvas: Coordinate Transformations

Linear (“affine”) transformation

– Translate, Scale, Rotate, Shear (and any combination thereof)

- Translate: Move origin (and everything else) in x and y

???
used extensively in GUIS because child objects just draw themselves
at *their* origin, so a component doesn't have to calculate how to draw
itself based on its position

- Scale: change size (negative == flip)
![:img a large and small moon, 15%](img/scale.png)

- Rotate and Shear
![:img a rotated and angled moon, 30%](img/shear.png)

---
# Exercise: How to rotate about the center of an object

[raise your hands]

- A: Translate, rotate, translate
- B: Rotate, Translate, Rotate
- C: Scale, Rotate, Scale
- D: Rotate

???
XX define exercise
maybe put this after android stuff?
---

# Coordinate Transformations

Can modify any shape, including text

To fully understand, need matrix algebra

But Android helps with this by providing methods in the [Canvas](https://developer.android.com/reference/android/graphics/Canvas) object such as
```java
scale(float, float)
translate(float, float)
rotate(float)
```
and to combine matrices:
```java
concat(Matrix)
```

???
– Affine transformations are based on two-dimensional matrices of the
following form:

P' = T*P where P is 1x3 and T is the transform matrix (3x3) with the
bottom row 0 0 1

Thus, x' = ax + cy + t_x and y' = bx + dy + t_y

*Note* Any sequence of transform, rotate and shear can be represented
in a single matrix of this form (just multiple the matrices together)
---

# What is the [Paint](https://developer.android.com/reference/android/graphics/Paint.html) Object?

- Abstraction that determines how drawing operations should look
```java
drawPaint = new Paint();
drawPaint.setColor(Color.BLUE);
drawPaint.setAntiAlias(true);
drawPaint.setStrokeWidth(5);
drawPaint.setStyle(Paint.Style.STROKE);
drawPaint.setStrokeJoin(Paint.Join.ROUND);
drawPaint.setStrokeCap(Paint.Cap.ROUND);
canvas.drawCircle(50, 50, 20, drawPaint);
drawPaint.setColor(Color.GREEN);
canvas.drawCircle(50, 150, 20, drawPaint);
```

---

# What is the [Paint](https://developer.android.com/reference/android/graphics/Paint.html) Object?

- Abstraction that determines how drawing operations should look
  - Drawing style: stroked, filled
  - Line Characteristics: color, line width, join, cap styles
  - Fill Characteristics (color)

![:img example dotted line--unfilled,15%](img/dotted.png)
![:img example solid filled,15%](img/filled.png)
![:img example solid unfilled,15%](img/unfilled.png)

---

# Other Paint properties

- Text Characteristics: font family, style, size, alignment settings, etc.

--
- font: shapes for chars (called *glyphs*) plus layout
  - family or typeface

![:img examples of different types of fonts,60%](img/fonts.png)

---
# Other Paint properties

- Text Characteristics: font family, style, size, alignment settings,
etc.
- font: shapes for chars (called *glyphs*) plus layout
  - family or typeface
  - style: plain, *italic*, **bold**, **_both_**, ~strikethrough~,  *etc.*
--

- points: 72.27 points per inch
???
because french inches were different (72 per inch)
Really just a guideline these days
It is the *width* of a capital M (no height specified)

---
# Text quirks

- Each glyph has a reference point that defines a baseline
- Each glyph has an advance width (distance to next glyph's reference point)

![:img examples of reference point and advance width,40%](img/reference.png)
---
# Text quirks

- Each glyph has a reference point that defines a baseline
- Each glyph has an advance width (distance to next glyph's reference point)
- font has standard ascent and descent

![:img letter p with ascent and descent marked,60%](img/ascent.png)
---
# Text quirks

- Each glyph has a reference point that defines a baseline
- Each glyph has an advance width (distance to next glyph's reference point)
- Font has standard ascent and descent
- Font has 'leading' (distance between lines)

--
# Why am I telling you all this?

- Where is (0,0) of text when you call [drawText()](https://developer.android.com/reference/android/graphics/Canvas.html#drawText(java.lang.CharSequence,%20int,%20int,%20float,%20float,%20android.graphics.Paint)? 
- What should you set up in [Paint](https://developer.android.com/reference/android/graphics/Paint)? 
---
# Other Paint properties

- Transparency and composition characteristics: Alpha value and `xfermode`([Porter-Duff](https://developer.android.com/reference/android/graphics/PorterDuffXfermode))
???
When the alpha channel is 1, the image is fully there, when it is 0,
the image isn’t there at all, and when it is in between, the image is
partially there. In other words, the alpha channel describes the shape
of the image, it does not describe opacity. The way to think of images
with an alpha channel is as irregularly shaped pieces of cardboard,
not as colored glass.

--
<br>![:img source image with triangle on transparent background,10%](img/source.png)
![:img destination image with & on transparent background,10%](img/dest.png)
![:img diagram of pixel relationships,10%](img/diagram.png)
--

- Each type of pixel can be treated differently.

--
<br>![:img Both should be blue and source red, 10%](img/destatop-diagram.png)
![:img result: just part shows,10%](img/destatop.png)
![:img Both should be pink and source orange and dest red, 10%](img/colordodge-diagram.png)
![:img result: pink triangle with blue and,10%](img/colordodge-both.png)
???
Dest blend mode, atop source, limited to pixels in dest, colors blue and orange
Color Dodge blend mode, pixels from both kept, colors pink and blue and orange

The general formula is an area weighted average:

Asrc⋅[s]+Adest⋅[d]+Aboth⋅B(s,d)

where [s] and [d] are the source and destination colors respectively
or 0, and B(s,d) can be chosen from a set of formulas

alpha channel is
Asrc⋅[as]+Adest⋅[ad]+Aboth⋅[ab]

where [ab] is determined by the blend mode. 
---
# The Path Object

- Canvas supports drawing primitive shapes _and_ arbitrary paths
```java
  void drawPath(Path p, Paint paint);
```

- Declaring a `Path` can be done by combining basic primitive shapes (e.g rectangles, circles, ovals, curves like arc, cubic, etc.)

- What drawing model does this correspond to?
 - A (Pixel model)
 - B (Path model)

- Which is more scalable?
 - A (Pixel model)
 - B (Path model)

???
XXXX could do in-class [drawing
exercise](https://github.com/mriveralee/ssui-mobile-exercises-2016/tree/master/exercises/lab05/CustomDrawing)
IF time XXXX needs updating

---
# Animation becoming core pillar of UX design

Greater awareness of role for communicating UI behavior
Guide, provide context, delight, engage

.quote[‘Animation is increasingly becoming an important part of the UI
design experience. Google’s material design guidelines are a good
illustration of this. Expect to see even more tools and optimisations
made to improve the production workflow and performance in browsers
and on devices.’ (Weareathlon)]
---
# Using Animation Well

- Used sparingly and understandingly, animation can enhance the interface … otherwise can distract!
- Need to mimic real world
- Observing motion tells us about size, weight, rigidity
- No abrupt changes in velocity!

---
# Main implementation approach

Frame-based 
- Redraw scene at regular intervals
- Developer defines redraw function

Transition-based (Hudson & Stasko '93)
- Specify property values of animation transition speed and process
 - Uses 'pacing' functions to stylize animation, e.g. slow-in
slow-out (see [easings.net](http://easings.net))
- Typically computed via __interpolation__
```java
step(fraction){x_now = x_start + fraction*(x_end - x_start);}
```
- Timing and redraw managed by toolkit
---
# Summary & revisiting learning goals for this week

- Pixel & stroke models
- Rotating around an object 
- Canvas & Paint & Paths in Android
- Text Quirks
- Animation Implementation
---

layout: true