2D Computer Graphics Diego Nehab Summer 2020 IMPA 1 Gradients in - PowerPoint PPT Presentation

2D Computer Graphics Diego Nehab Summer 2020 IMPA 1

Gradients in SVG [SVG, 2011]

Defjned by a list of n stops t i c i 0 1 with i 1 n t i t i 1 c t is linear by parts t i t c i t t i c i 1 1 c t t i t t i 1 t i t i 1 sRGBA Color ramp A color ramp is a function c c : [ 0 , 1 ] → sRGBA that maps the interval [ 0 , 1 ] to colors with transparency 2

c t is linear by parts t i t c i t t i c i 1 1 c t t i t t i 1 t i t i 1 Color ramp A color ramp is a function c c : [ 0 , 1 ] → sRGBA that maps the interval [ 0 , 1 ] to colors with transparency Defjned by a list of n stops ( t i , c i ) ∈ [ 0 , 1 ] × sRGBA , with i ∈ { 1 , . . . , n } , t i < t i + 1 2

Color ramp A color ramp is a function c c : [ 0 , 1 ] → sRGBA that maps the interval [ 0 , 1 ] to colors with transparency Defjned by a list of n stops ( t i , c i ) ∈ [ 0 , 1 ] × sRGBA , with i ∈ { 1 , . . . , n } , t i < t i + 1 c ( t ) is linear by parts c ( t ) = ( t i + 1 − t ) c i + ( t − t i ) c i + 1 t i ≤ t < t i + 1 , t i + 1 − t i 2

repeat t t t 2 1 1 1 reflect t 2 t 2 t 2 E.g., pad (or clamp ), repeat (or wrap ), and refmect (or mirror ) pad t 1 0 t Wrapping function (or spread method) A wrapping function s s : R → [ 0 , 1 ] maps a real number to the domain of the color ramp 3

repeat t t t 2 1 1 1 reflect t 2 t 2 t 2 Wrapping function (or spread method) A wrapping function s s : R → [ 0 , 1 ] maps a real number to the domain of the color ramp E.g., pad (or clamp ), repeat (or wrap ), and refmect (or mirror ) pad ( t ) = min 1 , max( 0 , t ) � � 3

2 1 1 1 reflect t 2 t 2 t 2 Wrapping function (or spread method) A wrapping function s s : R → [ 0 , 1 ] maps a real number to the domain of the color ramp E.g., pad (or clamp ), repeat (or wrap ), and refmect (or mirror ) pad ( t ) = min 1 , max( 0 , t ) � � repeat ( t ) = t − ⌊ t ⌋ 3

Wrapping function (or spread method) A wrapping function s s : R → [ 0 , 1 ] maps a real number to the domain of the color ramp E.g., pad (or clamp ), repeat (or wrap ), and refmect (or mirror ) pad ( t ) = min 1 , max( 0 , t ) � � repeat ( t ) = t − ⌊ t ⌋ � 1 2 t − ⌊ 1 2 t + 1 reflect ( t ) = 2 � � 2 ⌋ � 3

p p 1 p 2 It computes the normalized projected length of p p 1 into p 2 p 1 p p 1 p 2 p 1 p p 2 p 1 p 2 p 1 Linear gradient mapping A linear gradient mapping is a function ℓ ℓ : R 2 → R parametrized by 2 control points p 1 , p 2 4

It computes the normalized projected length of p p 1 into p 2 p 1 p p 1 p 2 p 1 p p 2 p 1 p 2 p 1 Linear gradient mapping A linear gradient mapping is a function ℓ ℓ : R 2 → R parametrized by 2 control points p 1 , p 2 p p 1 p 2 4

Linear gradient mapping A linear gradient mapping is a function ℓ ℓ : R 2 → R parametrized by 2 control points p 1 , p 2 p p 1 p 2 It computes the normalized projected length of p − p 1 into p 2 − p 1 ℓ ( p ) = � p − p 1 , p 2 − p 1 � � p 2 − p 1 , p 2 − p 1 � 4

p f q c It computes the length ratio of from point p to f and q to f p f r p q f where q is the intersection between the ray from focal point f to point p and the circle centered at c with radius r Radial gradient mapping A radial gradient mapping is a function r r : R 2 → R parametrized by a center c , a radius r , and a focal point f 5

It computes the length ratio of from point p to f and q to f p f r p q f where q is the intersection between the ray from focal point f to point p and the circle centered at c with radius r Radial gradient mapping A radial gradient mapping is a function r r : R 2 → R parametrized by a center c , a radius r , and a focal point f p f q c 5

Radial gradient mapping A radial gradient mapping is a function r r : R 2 → R parametrized by a center c , a radius r , and a focal point f p f q c It computes the length ratio of from point p to f and q to f r ( p ) = � p − f � � q − f � where q is the intersection between the ray from focal point f to point p and the circle centered at c with radius r 5

Similarly, every paint includes a transformation T p that maps points from paint coordinates (where the color is computed) to scene coordinates (where the color is painted) If you want to apply a transformation T to a shape and want its paint to move with it, simply compose T o T T o T p T T p Paint transforms Every shape includes a transformation T o that maps it from object coordinates (where the object is defjned) to scene coordinates (where the object is placed on a scene) 6

If you want to apply a transformation T to a shape and want its paint to move with it, simply compose T o T T o T p T T p Paint transforms Every shape includes a transformation T o that maps it from object coordinates (where the object is defjned) to scene coordinates (where the object is placed on a scene) Similarly, every paint includes a transformation T p that maps points from paint coordinates (where the color is computed) to scene coordinates (where the color is painted) 6

Paint transforms Every shape includes a transformation T o that maps it from object coordinates (where the object is defjned) to scene coordinates (where the object is placed on a scene) Similarly, every paint includes a transformation T p that maps points from paint coordinates (where the color is computed) to scene coordinates (where the color is painted) If you want to apply a transformation T to a shape and want its paint to move with it, simply compose T ′ o = T ◦ T o T ′ p = T ◦ T p 6

Show in Inkscape Gradient paints A linear gradient is a function R 2 → sRGBA formed by the composition of a paint transform T p , a linear gradient mapping ℓ , a wrapping function s , and a color ramp c ℓ ( T − 1 p �→ c � � � s � p p ) 7

Gradient paints A linear gradient is a function R 2 → sRGBA formed by the composition of a paint transform T p , a linear gradient mapping ℓ , a wrapping function s , and a color ramp c ℓ ( T − 1 p �→ c � � � s � p p ) Show in Inkscape 7

Examples 8

Show in Inkscape Gradient paints A radial gradient is a function R 2 → sRGBA formed by by the composition of a paint transform T p , a radial gradient mapping r , a wrapping function s , and a color ramp c r ( T − 1 p �→ c � � � s � p p ) 9

Gradient paints A radial gradient is a function R 2 → sRGBA formed by by the composition of a paint transform T p , a radial gradient mapping r , a wrapping function s , and a color ramp c r ( T − 1 p �→ c � � � s � p p ) Show in Inkscape 9

Examples 10

How to effjciently evaluate linear and radial mappings? • How many parameters are really needed? Evaluating gradient paints How to effjciently evaluate a ramp • Linear search, binary search, uniform sampling 11

Evaluating gradient paints How to effjciently evaluate a ramp • Linear search, binary search, uniform sampling How to effjciently evaluate linear and radial mappings? • How many parameters are really needed? 11

Gradients in PostScript and PDF

Type 2: Axial shading • Same as linear gradient • Show EPS fjle Shading types Type 1: Function-dictionary-based shading • Basically texture mapping • Show EPS fjle • Will discuss in following classes 12

Shading types Type 1: Function-dictionary-based shading • Basically texture mapping • Show EPS fjle • Will discuss in following classes Type 2: Axial shading • Same as linear gradient • Show EPS fjle 12

Examples 13

Examples 14

• Defjne p r to be the circle centered at p with radius r • Inputs are centers and radii for 2 circles p 1 r 1 p 2 r 2 • Maps the “interpolated” circle to the color from a ramp c 1 t p 1 r 1 t p 2 r 2 c t • Show EPS fjle Shading types Type 3: Radial shading • Not the same radial gradient 15

• Inputs are centers and radii for 2 circles p 1 r 1 p 2 r 2 • Maps the “interpolated” circle to the color from a ramp c 1 t p 1 r 1 t p 2 r 2 c t • Show EPS fjle Shading types Type 3: Radial shading • Not the same radial gradient • Defjne γ ( p , r ) to be the circle centered at p with radius r 15

• Maps the “interpolated” circle to the color from a ramp c 1 t p 1 r 1 t p 2 r 2 c t • Show EPS fjle Shading types Type 3: Radial shading • Not the same radial gradient • Defjne γ ( p , r ) to be the circle centered at p with radius r • Inputs are centers and radii for 2 circles ( p 1 , r 1 ) , ( p 2 , r 2 ) 15

• Show EPS fjle Shading types Type 3: Radial shading • Not the same radial gradient • Defjne γ ( p , r ) to be the circle centered at p with radius r • Inputs are centers and radii for 2 circles ( p 1 , r 1 ) , ( p 2 , r 2 ) • Maps the “interpolated” circle to the color from a ramp c ( 1 − t ) ( p 1 , r 1 ) + t ( p 2 , r 2 ) �→ c ( t ) � � γ 15

Shading types Type 3: Radial shading • Not the same radial gradient • Defjne γ ( p , r ) to be the circle centered at p with radius r • Inputs are centers and radii for 2 circles ( p 1 , r 1 ) , ( p 2 , r 2 ) • Maps the “interpolated” circle to the color from a ramp c ( 1 − t ) ( p 1 , r 1 ) + t ( p 2 , r 2 ) �→ c ( t ) � � γ • Show EPS fjle 15

Examples 16