├── .gitignore
└── docs
    ├── 404.html
    ├── CNAME
    ├── Gemfile
    ├── Gemfile.lock
    ├── _config.yml
    ├── _includes
        └── head.html
    ├── _layouts
        └── chapter.html
    ├── about.md
    ├── assets
        ├── main.scss
        └── round.svg
    ├── book
        ├── color.md
        ├── compositing.md
        ├── contents.md
        ├── gpu_rendering.md
        ├── gradients.md
        ├── images.md
        ├── intro.md
        ├── shapes.md
        └── text.md
    └── index.md


/.gitignore:
--------------------------------------------------------------------------------
1 | _site
2 | .sass-cache
3 | .jekyll-metadata
4 | 


--------------------------------------------------------------------------------
/docs/404.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: default
 3 | ---
 4 | 
 5 | <style type="text/css" media="screen">
 6 |   .container {
 7 |     margin: 10px auto;
 8 |     max-width: 600px;
 9 |     text-align: center;
10 |   }
11 |   h1 {
12 |     margin: 30px 0;
13 |     font-size: 4em;
14 |     line-height: 1;
15 |     letter-spacing: -1px;
16 |   }
17 | </style>
18 | 
19 | <div class="container">
20 |   <h1>404</h1>
21 | 
22 |   <p><strong>Page not found :(</strong></p>
23 |   <p>The requested page could not be found.</p>
24 | </div>
25 | 


--------------------------------------------------------------------------------
/docs/CNAME:
--------------------------------------------------------------------------------
1 | 2d.graphics


--------------------------------------------------------------------------------
/docs/Gemfile:
--------------------------------------------------------------------------------
 1 | source "https://rubygems.org"
 2 | 
 3 | # Hello! This is where you manage which Jekyll version is used to run.
 4 | # When you want to use a different version, change it below, save the
 5 | # file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
 6 | #
 7 | #     bundle exec jekyll serve
 8 | #
 9 | 
10 | # This is the default theme for new Jekyll sites. You may change this to anything you like.
11 | gem "minima", "~> 2.0"
12 | 
13 | # If you want to use GitHub Pages, remove the "gem "jekyll"" above and
14 | # uncomment the line below. To upgrade, run `bundle update github-pages`.
15 |  gem "github-pages", group: :jekyll_plugins
16 | 
17 | # If you have any plugins, put them here!
18 | group :jekyll_plugins do
19 |   gem "jekyll-feed", "~> 0.6"
20 | end
21 | 
22 | # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
23 | gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]
24 | 
25 | # Performance-booster for watching directories on Windows
26 | gem "wdm", "~> 0.1.0" if Gem.win_platform?
27 | 
28 | # Added to get rid of a security alert.
29 | gem "activesupport", ">= 4.1.11"
30 | gem "redcarpet", ">= 3.5.1"
31 | gem "kramdown", ">= 2.3.1"
32 | gem "jekyll", ">= 3.6.3"
33 | gem "yajl-ruby", ">= 1.3.1"
34 | 


--------------------------------------------------------------------------------
/docs/Gemfile.lock:
--------------------------------------------------------------------------------
  1 | GEM
  2 |   remote: https://rubygems.org/
  3 |   specs:
  4 |     activesupport (6.1.7.5)
  5 |       concurrent-ruby (~> 1.0, >= 1.0.2)
  6 |       i18n (>= 1.6, < 2)
  7 |       minitest (>= 5.1)
  8 |       tzinfo (~> 2.0)
  9 |       zeitwerk (~> 2.3)
 10 |     addressable (2.8.0)
 11 |       public_suffix (>= 2.0.2, < 5.0)
 12 |     coffee-script (2.4.1)
 13 |       coffee-script-source
 14 |       execjs
 15 |     coffee-script-source (1.11.1)
 16 |     colorator (1.1.0)
 17 |     commonmarker (0.23.10)
 18 |     concurrent-ruby (1.2.2)
 19 |     dnsruby (1.61.5)
 20 |       simpleidn (~> 0.1)
 21 |     em-websocket (0.5.2)
 22 |       eventmachine (>= 0.12.9)
 23 |       http_parser.rb (~> 0.6.0)
 24 |     ethon (0.14.0)
 25 |       ffi (>= 1.15.0)
 26 |     eventmachine (1.2.7)
 27 |     eventmachine (1.2.7-x64-mingw32)
 28 |     execjs (2.8.1)
 29 |     faraday (1.4.1)
 30 |       faraday-excon (~> 1.1)
 31 |       faraday-net_http (~> 1.0)
 32 |       faraday-net_http_persistent (~> 1.1)
 33 |       multipart-post (>= 1.2, < 3)
 34 |       ruby2_keywords (>= 0.0.4)
 35 |     faraday-excon (1.1.0)
 36 |     faraday-net_http (1.0.1)
 37 |     faraday-net_http_persistent (1.1.0)
 38 |     ffi (1.15.0)
 39 |     ffi (1.15.0-x64-mingw32)
 40 |     forwardable-extended (2.6.0)
 41 |     gemoji (3.0.1)
 42 |     github-pages (228)
 43 |       github-pages-health-check (= 1.17.9)
 44 |       jekyll (= 3.9.3)
 45 |       jekyll-avatar (= 0.7.0)
 46 |       jekyll-coffeescript (= 1.1.1)
 47 |       jekyll-commonmark-ghpages (= 0.4.0)
 48 |       jekyll-default-layout (= 0.1.4)
 49 |       jekyll-feed (= 0.15.1)
 50 |       jekyll-gist (= 1.5.0)
 51 |       jekyll-github-metadata (= 2.13.0)
 52 |       jekyll-include-cache (= 0.2.1)
 53 |       jekyll-mentions (= 1.6.0)
 54 |       jekyll-optional-front-matter (= 0.3.2)
 55 |       jekyll-paginate (= 1.1.0)
 56 |       jekyll-readme-index (= 0.3.0)
 57 |       jekyll-redirect-from (= 0.16.0)
 58 |       jekyll-relative-links (= 0.6.1)
 59 |       jekyll-remote-theme (= 0.4.3)
 60 |       jekyll-sass-converter (= 1.5.2)
 61 |       jekyll-seo-tag (= 2.8.0)
 62 |       jekyll-sitemap (= 1.4.0)
 63 |       jekyll-swiss (= 1.0.0)
 64 |       jekyll-theme-architect (= 0.2.0)
 65 |       jekyll-theme-cayman (= 0.2.0)
 66 |       jekyll-theme-dinky (= 0.2.0)
 67 |       jekyll-theme-hacker (= 0.2.0)
 68 |       jekyll-theme-leap-day (= 0.2.0)
 69 |       jekyll-theme-merlot (= 0.2.0)
 70 |       jekyll-theme-midnight (= 0.2.0)
 71 |       jekyll-theme-minimal (= 0.2.0)
 72 |       jekyll-theme-modernist (= 0.2.0)
 73 |       jekyll-theme-primer (= 0.6.0)
 74 |       jekyll-theme-slate (= 0.2.0)
 75 |       jekyll-theme-tactile (= 0.2.0)
 76 |       jekyll-theme-time-machine (= 0.2.0)
 77 |       jekyll-titles-from-headings (= 0.5.3)
 78 |       jemoji (= 0.12.0)
 79 |       kramdown (= 2.3.2)
 80 |       kramdown-parser-gfm (= 1.1.0)
 81 |       liquid (= 4.0.4)
 82 |       mercenary (~> 0.3)
 83 |       minima (= 2.5.1)
 84 |       nokogiri (>= 1.13.6, < 2.0)
 85 |       rouge (= 3.26.0)
 86 |       terminal-table (~> 1.4)
 87 |     github-pages-health-check (1.17.9)
 88 |       addressable (~> 2.3)
 89 |       dnsruby (~> 1.60)
 90 |       octokit (~> 4.0)
 91 |       public_suffix (>= 3.0, < 5.0)
 92 |       typhoeus (~> 1.3)
 93 |     html-pipeline (2.14.3)
 94 |       activesupport (>= 2)
 95 |       nokogiri (>= 1.4)
 96 |     http_parser.rb (0.6.0)
 97 |     i18n (1.14.1)
 98 |       concurrent-ruby (~> 1.0)
 99 |     jekyll (3.9.3)
100 |       addressable (~> 2.4)
101 |       colorator (~> 1.0)
102 |       em-websocket (~> 0.5)
103 |       i18n (>= 0.7, < 2)
104 |       jekyll-sass-converter (~> 1.0)
105 |       jekyll-watch (~> 2.0)
106 |       kramdown (>= 1.17, < 3)
107 |       liquid (~> 4.0)
108 |       mercenary (~> 0.3.3)
109 |       pathutil (~> 0.9)
110 |       rouge (>= 1.7, < 4)
111 |       safe_yaml (~> 1.0)
112 |     jekyll-avatar (0.7.0)
113 |       jekyll (>= 3.0, < 5.0)
114 |     jekyll-coffeescript (1.1.1)
115 |       coffee-script (~> 2.2)
116 |       coffee-script-source (~> 1.11.1)
117 |     jekyll-commonmark (1.4.0)
118 |       commonmarker (~> 0.22)
119 |     jekyll-commonmark-ghpages (0.4.0)
120 |       commonmarker (~> 0.23.7)
121 |       jekyll (~> 3.9.0)
122 |       jekyll-commonmark (~> 1.4.0)
123 |       rouge (>= 2.0, < 5.0)
124 |     jekyll-default-layout (0.1.4)
125 |       jekyll (~> 3.0)
126 |     jekyll-feed (0.15.1)
127 |       jekyll (>= 3.7, < 5.0)
128 |     jekyll-gist (1.5.0)
129 |       octokit (~> 4.2)
130 |     jekyll-github-metadata (2.13.0)
131 |       jekyll (>= 3.4, < 5.0)
132 |       octokit (~> 4.0, != 4.4.0)
133 |     jekyll-include-cache (0.2.1)
134 |       jekyll (>= 3.7, < 5.0)
135 |     jekyll-mentions (1.6.0)
136 |       html-pipeline (~> 2.3)
137 |       jekyll (>= 3.7, < 5.0)
138 |     jekyll-optional-front-matter (0.3.2)
139 |       jekyll (>= 3.0, < 5.0)
140 |     jekyll-paginate (1.1.0)
141 |     jekyll-readme-index (0.3.0)
142 |       jekyll (>= 3.0, < 5.0)
143 |     jekyll-redirect-from (0.16.0)
144 |       jekyll (>= 3.3, < 5.0)
145 |     jekyll-relative-links (0.6.1)
146 |       jekyll (>= 3.3, < 5.0)
147 |     jekyll-remote-theme (0.4.3)
148 |       addressable (~> 2.0)
149 |       jekyll (>= 3.5, < 5.0)
150 |       jekyll-sass-converter (>= 1.0, <= 3.0.0, != 2.0.0)
151 |       rubyzip (>= 1.3.0, < 3.0)
152 |     jekyll-sass-converter (1.5.2)
153 |       sass (~> 3.4)
154 |     jekyll-seo-tag (2.8.0)
155 |       jekyll (>= 3.8, < 5.0)
156 |     jekyll-sitemap (1.4.0)
157 |       jekyll (>= 3.7, < 5.0)
158 |     jekyll-swiss (1.0.0)
159 |     jekyll-theme-architect (0.2.0)
160 |       jekyll (> 3.5, < 5.0)
161 |       jekyll-seo-tag (~> 2.0)
162 |     jekyll-theme-cayman (0.2.0)
163 |       jekyll (> 3.5, < 5.0)
164 |       jekyll-seo-tag (~> 2.0)
165 |     jekyll-theme-dinky (0.2.0)
166 |       jekyll (> 3.5, < 5.0)
167 |       jekyll-seo-tag (~> 2.0)
168 |     jekyll-theme-hacker (0.2.0)
169 |       jekyll (> 3.5, < 5.0)
170 |       jekyll-seo-tag (~> 2.0)
171 |     jekyll-theme-leap-day (0.2.0)
172 |       jekyll (> 3.5, < 5.0)
173 |       jekyll-seo-tag (~> 2.0)
174 |     jekyll-theme-merlot (0.2.0)
175 |       jekyll (> 3.5, < 5.0)
176 |       jekyll-seo-tag (~> 2.0)
177 |     jekyll-theme-midnight (0.2.0)
178 |       jekyll (> 3.5, < 5.0)
179 |       jekyll-seo-tag (~> 2.0)
180 |     jekyll-theme-minimal (0.2.0)
181 |       jekyll (> 3.5, < 5.0)
182 |       jekyll-seo-tag (~> 2.0)
183 |     jekyll-theme-modernist (0.2.0)
184 |       jekyll (> 3.5, < 5.0)
185 |       jekyll-seo-tag (~> 2.0)
186 |     jekyll-theme-primer (0.6.0)
187 |       jekyll (> 3.5, < 5.0)
188 |       jekyll-github-metadata (~> 2.9)
189 |       jekyll-seo-tag (~> 2.0)
190 |     jekyll-theme-slate (0.2.0)
191 |       jekyll (> 3.5, < 5.0)
192 |       jekyll-seo-tag (~> 2.0)
193 |     jekyll-theme-tactile (0.2.0)
194 |       jekyll (> 3.5, < 5.0)
195 |       jekyll-seo-tag (~> 2.0)
196 |     jekyll-theme-time-machine (0.2.0)
197 |       jekyll (> 3.5, < 5.0)
198 |       jekyll-seo-tag (~> 2.0)
199 |     jekyll-titles-from-headings (0.5.3)
200 |       jekyll (>= 3.3, < 5.0)
201 |     jekyll-watch (2.2.1)
202 |       listen (~> 3.0)
203 |     jemoji (0.12.0)
204 |       gemoji (~> 3.0)
205 |       html-pipeline (~> 2.2)
206 |       jekyll (>= 3.0, < 5.0)
207 |     kramdown (2.3.2)
208 |       rexml
209 |     kramdown-parser-gfm (1.1.0)
210 |       kramdown (~> 2.0)
211 |     liquid (4.0.4)
212 |     listen (3.8.0)
213 |       rb-fsevent (~> 0.10, >= 0.10.3)
214 |       rb-inotify (~> 0.9, >= 0.9.10)
215 |     mercenary (0.3.6)
216 |     mini_portile2 (2.8.6)
217 |     minima (2.5.1)
218 |       jekyll (>= 3.5, < 5.0)
219 |       jekyll-feed (~> 0.9)
220 |       jekyll-seo-tag (~> 2.1)
221 |     minitest (5.19.0)
222 |     multipart-post (2.1.1)
223 |     nokogiri (1.16.5)
224 |       mini_portile2 (~> 2.8.2)
225 |       racc (~> 1.4)
226 |     nokogiri (1.16.5-arm64-darwin)
227 |       racc (~> 1.4)
228 |     nokogiri (1.16.5-x86_64-linux)
229 |       racc (~> 1.4)
230 |     octokit (4.21.0)
231 |       faraday (>= 0.9)
232 |       sawyer (~> 0.8.0, >= 0.5.3)
233 |     pathutil (0.16.2)
234 |       forwardable-extended (~> 2.6)
235 |     public_suffix (4.0.6)
236 |     racc (1.7.3)
237 |     rb-fsevent (0.11.0)
238 |     rb-inotify (0.10.1)
239 |       ffi (~> 1.0)
240 |     redcarpet (3.6.0)
241 |     rexml (3.3.9)
242 |     rouge (3.26.0)
243 |     ruby2_keywords (0.0.4)
244 |     rubyzip (2.3.0)
245 |     safe_yaml (1.0.5)
246 |     sass (3.7.4)
247 |       sass-listen (~> 4.0.0)
248 |     sass-listen (4.0.0)
249 |       rb-fsevent (~> 0.9, >= 0.9.4)
250 |       rb-inotify (~> 0.9, >= 0.9.7)
251 |     sawyer (0.8.2)
252 |       addressable (>= 2.3.5)
253 |       faraday (> 0.8, < 2.0)
254 |     simpleidn (0.2.1)
255 |       unf (~> 0.1.4)
256 |     terminal-table (1.8.0)
257 |       unicode-display_width (~> 1.1, >= 1.1.1)
258 |     typhoeus (1.4.0)
259 |       ethon (>= 0.9.0)
260 |     tzinfo (2.0.6)
261 |       concurrent-ruby (~> 1.0)
262 |     tzinfo-data (1.2021.1)
263 |       tzinfo (>= 1.0.0)
264 |     unf (0.1.4)
265 |       unf_ext
266 |     unf_ext (0.0.7.7)
267 |     unf_ext (0.0.7.7-x64-mingw32)
268 |     unicode-display_width (1.7.0)
269 |     yajl-ruby (1.4.3)
270 |     zeitwerk (2.6.11)
271 | 
272 | PLATFORMS
273 |   universal-darwin-21
274 |   x64-mingw32
275 |   x86_64-linux
276 | 
277 | DEPENDENCIES
278 |   activesupport (>= 4.1.11)
279 |   github-pages
280 |   jekyll (>= 3.6.3)
281 |   jekyll-feed (~> 0.6)
282 |   kramdown (>= 2.3.1)
283 |   minima (~> 2.0)
284 |   redcarpet (>= 3.5.1)
285 |   tzinfo-data
286 |   yajl-ruby (>= 1.3.1)
287 | 
288 | BUNDLED WITH
289 |    2.3.4
290 | 


--------------------------------------------------------------------------------
/docs/_config.yml:
--------------------------------------------------------------------------------
 1 | # Welcome to Jekyll!
 2 | #
 3 | # This config file is meant for settings that affect your whole blog, values
 4 | # which you are expected to set up once and rarely edit after that. If you find
 5 | # yourself editing this file very often, consider using Jekyll's data files
 6 | # feature for the data you need to update frequently.
 7 | #
 8 | # For technical reasons, this file is *NOT* reloaded automatically when you use
 9 | # 'bundle exec jekyll serve'. If you change this file, please restart the server process.
10 | 
11 | # Site settings
12 | # These are used to personalize your new site. If you look in the HTML files,
13 | # you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
14 | # You can create any custom variable you would like, and they will be accessible
15 | # in the templates via {{ site.myvariable }}.
16 | title: Principles of 2D Graphics
17 | email: raph@levien.com
18 | description: >- # this means to ignore newlines until "baseurl:"
19 |   Gathering resources for possibly becoming a book on 2D graphics.
20 | baseurl: "" # the subpath of your site, e.g. /blog
21 | url: "https://2d.graphics" # the base hostname & protocol for your site, e.g. http://example.com
22 | twitter_username: raphlinus
23 | github_username:  raphlinus
24 | 
25 | # Build settings
26 | markdown: kramdown
27 | kramdown:
28 |   math_engine: mathjax
29 | theme: minima
30 | plugins:
31 |   - jekyll-feed
32 | 
33 | header_pages:
34 |   - about.md
35 |   - book/contents.md
36 | 
37 | # Exclude from processing.
38 | # The following items will not be processed, by default. Create a custom list
39 | # to override the default setting.
40 | # exclude:
41 | #   - Gemfile
42 | #   - Gemfile.lock
43 | #   - node_modules
44 | #   - vendor/bundle/
45 | #   - vendor/cache/
46 | #   - vendor/gems/
47 | #   - vendor/ruby/
48 | 


--------------------------------------------------------------------------------
/docs/_includes/head.html:
--------------------------------------------------------------------------------
 1 | <head>
 2 |     <meta charset="utf-8">
 3 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 4 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 5 |     {%- seo -%}
 6 |     <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
 7 |     {%- feed_meta -%}
 8 |     {%- if jekyll.environment == 'production' and site.google_analytics -%}
 9 |       {%- include google-analytics.html -%}
10 |     {%- endif -%}
11 |     <script type="text/javascript" async
12 |     src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">
13 |     </script>
14 |     <link href="https://fonts.googleapis.com/css?family=EB+Garamond:400,400i,700,700i|Source+Sans+Pro:400,700&display=swap" rel="stylesheet">
15 |     <link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700&display=swap" rel="stylesheet">
16 |   </head>
17 | 


--------------------------------------------------------------------------------
/docs/_layouts/chapter.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: default
 3 | ---
 4 | <article class="post">
 5 | 
 6 |   <header class="post-header">
 7 |     <h1 class="post-title">{{ page.title | escape }}</h1>
 8 |   </header>
 9 | 
10 |   <div class="post-content">
11 |     {{ content }}
12 |   </div>
13 | 
14 | </article>
15 | 


--------------------------------------------------------------------------------
/docs/about.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: page
 3 | title: About
 4 | permalink: /about/
 5 | ---
 6 | 
 7 | I dream of writing a book on 2D graphics, but it's probably unrealistic. In the meantime, here are some resources that might be useful.
 8 | 
 9 | The content of this book is licensed under [CC BY 4.0]. Feel free to quote and adapt freely, as long as you give attribution. All source code, including example code, code to generate figures, and any interactive demos, is licensed under [Apache 2.0].
10 | 
11 | The [github repo](https://github.com/linebender/2d.graphics) for this book is open source and welcomes pull requests and issues.
12 | 
13 | [CC BY 4.0]: https://creativecommons.org/licenses/by/4.0/
14 | [Apache 2.0]: https://www.apache.org/licenses/LICENSE-2.0
15 | 


--------------------------------------------------------------------------------
/docs/assets/main.scss:
--------------------------------------------------------------------------------
 1 | ---
 2 | # Only the main Sass file needs front matter (the dashes are enough)
 3 | ---
 4 | 
 5 | $base-font-family: "EB Garamond", serif;
 6 | $base-line-height: 1.3;
 7 | 
 8 | @import "minima";
 9 | 
10 | // Override stuff in the minima theme. I'm sure I'll end up writing
11 | // my own CSS, but this fine for prototyping.
12 | 
13 | .site-title {
14 |     letter-spacing: 0;
15 |     font-family: "Source Sans Pro", sans-serif;
16 | }
17 | 
18 | .post-title {
19 |     letter-spacing: 0;
20 |     font-family: "Source Sans Pro", sans-serif;
21 | }
22 | 
23 | h1, h2, h3, h4, h5, h6 {
24 |     font-family: "Source Sans Pro", sans-serif;
25 | }
26 | 
27 | pre, code {
28 |     background-color: $background-color;
29 |     font-family: Inconsolata;
30 |     border: 0;
31 | }
32 | 
33 | code {
34 |     padding: 0;
35 | }
36 | 


--------------------------------------------------------------------------------
/docs/assets/round.svg:
--------------------------------------------------------------------------------
1 | <svg width="640" height="480" viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M100 380 L200 50 540 300" stroke="#6a6" stroke-width="50" stroke-linecap="round" stroke-linejoin="round" fill="none" />
3 | <path d="M100 380 L200 50 540 300" stroke="#000" fill="none" />
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/docs/book/color.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: chapter
 3 | title: Color
 4 | ---
 5 | * CIE XYZ values
 6 | * sRGB color space
 7 | * larger-gamut color spaces
 8 | * perceptual color spaces
 9 |   - Cover some similar ground as [Oklab blog post]
10 |   - Probably introduce luma / chroma / hue model & Munsell history
11 |     - perceptual color space is noneuclidean
12 |   - CIELab is standard perceptual color space but has bad hue shift
13 |   - [IPT] (family) has excellent hue
14 |   - CIECAM is sophisticated
15 |     - but performs poorly on gradient task because of chroma compression
16 | * gamut compression
17 | 
18 | ## Resources
19 | 
20 | * [Poynton Color FAQ](https://poynton.ca/ColorFAQ.html). A classic resource but missing information on more recent developments such as sRGB.
21 | 
22 | * [Colour Appearance Issues in Digital Video, HD/UHD, and D‑cinema](https://poynton.ca/PDFs/Poynton-2018-PhD.pdf). This is Poynton's 2018 PhD, with very rich information on modern digital video formats.
23 | 
24 | * [color vision](https://handprint.com/LS/CVS/color.html) by Bruce MacEvoy. A comprehensive resource, arguably the best on the web.
25 | 
26 | * The [Wikipedia article on sRGB](https://en.wikipedia.org/wiki/SRGB) is ok and links to other resources.
27 | 
28 | Color science has been a mature topic for some time. Here are a number of books on the topic, sorted by date:
29 | 
30 | * [Color in Business, Science, and Industry](https://www.amazon.com/dp/0471452122/), Judd and Wyszecki, 1975.
31 | 
32 | * [Color Science: Concepts and Methods, Quantitative Data and Formulae](https://www.amazon.com/dp/0471399183/), Wyszecki and Stiles, 2000.
33 | 
34 | * [A Field Guide to Digital Color](https://www.amazon.com/dp/1568811616), Maureen Stone, 2003. (Also see [A Survey of Color for Computer Graphics](http://graphics.stanford.edu/courses/cs448b-02-spring/04cdrom.pdf), SIGGRAPH 2001 course notes)
35 | 
36 | * [The Reproduction of Colour](https://www.amazon.com/dp/0470024259), RWG Hunt, 2004.
37 | 
38 | * [Colorimetry: Understanding the CIE System](https://www.amazon.com/dp/0470049049), Janos Schanda (ed), 2007.
39 | 
40 | * [Color: An Introduction to Practice and Principles](https://www.amazon.com/dp/1118173848), Rolf Kuehni, 2012.
41 | 
42 | * [Color Appearance Models](https://www.amazon.com/dp/1119967031), Mark Fairchild, 2013.
43 | 
44 | * [Billmeyer and Saltzman's Principles of Color Technology](https://www.amazon.com/dp/1119367220), Roy Berns, 2019.
45 | 
46 | [Oklab blog post]: https://bottosson.github.io/posts/oklab/
47 | 
48 | [IPT]: https://www.researchgate.net/publication/221677980_Development_and_Testing_of_a_Color_Space_IPT_with_Improved_Hue_Uniformity
49 | 


--------------------------------------------------------------------------------
/docs/book/compositing.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: chapter
 3 | title: Compositing
 4 | ---
 5 | * Alpha compositing
 6 |   + Porter-Duff
 7 |     - [Compositing Digital Images]
 8 |   + [Premultiplied][Premultiplied alpha] vs separated alpha
 9 | 
10 | $$ r = r_0 + (r_1 - r_0) \cdot \alpha_1 $$
11 | 
12 | * Clipping and soft masking
13 | * Maybe affine transformation belongs here?
14 | * Blend modes
15 |   - W3C spec on [Compositing and blending]
16 | 
17 | [Alpha Compositing] is a very in-depth, interactive exposition by the legendary Bartosz Ciechanowski.
18 | 
19 | [Alpha Compositing]: https://ciechanow.ski/alpha-compositing/
20 | 
21 | [Premultiplied alpha]: https://nigeltao.github.io/blog/2022/premultiplied-alpha.html
22 | 
23 | [Compositing and blending]: https://www.w3.org/TR/compositing-1/
24 | 
25 | [Compositing Digital Images]: https://keithp.com/~keithp/porterduff/p253-porter.pdf
26 | 


--------------------------------------------------------------------------------
/docs/book/contents.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | # Feel free to add content and custom Front Matter to this file.
 3 | # To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
 4 | 
 5 | layout: default
 6 | title: Contents
 7 | ---
 8 | * [Introduction](intro.html)
 9 | 
10 | * [Color](color.html)
11 | 
12 | * [Images](images.html)
13 | 
14 | * [Shapes](shapes.html)
15 | 
16 | * [Gradients](gradients.html)
17 | 
18 | * [Compositing](compositing.html)
19 | 
20 | * [Text](text.html)
21 | 
22 | * [GPU Rendering](gpu_rendering.html)
23 | 


--------------------------------------------------------------------------------
/docs/book/gpu_rendering.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: chapter
 3 | title: GPU Rendering
 4 | ---
 5 | Good academic papers on existing GPU-accelerated rendering:
 6 | 
 7 | * [GPU Accelerated Path Rendering]
 8 | * [Loop-Blinn Curve Rendering]
 9 | * [Random Access Vector Graphics]
10 | * [Massively-Parallel Vector Graphics]
11 | * [Efficient GPU Path Rendering Using Scanline Rasterization]
12 | 
13 | 
14 | Blog posts for piet-gpu:
15 |   * [piet-metal blog post]
16 |   * [piet-gpu progress report]
17 |   * [A sort-middle architecture for 2D graphics]
18 |   * [Fast 2D rendering on GPU]
19 | 
20 | An overview of the piet-gpu project is also given in the [piet-gpu vision] document.
21 | 
22 | [piet-metal blog post]: https://raphlinus.github.io/rust/graphics/gpu/2019/05/08/modern-2d.html
23 | 
24 | [Random Access Vector Graphics]: http://hhoppe.com/proj/ravg/
25 | [Massively-Parallel Vector Graphics]: http://w3.impa.br/~diego/projects/GanEtAl14/
26 | [Efficient GPU Path Rendering Using Scanline Rasterization]: http://kunzhou.net/zjugaps/pathrendering/
27 | [piet-gpu progress report]: https://raphlinus.github.io/rust/graphics/gpu/2020/06/01/piet-gpu-progress.html
28 | [A sort-middle architecture for 2D graphics]: https://raphlinus.github.io/rust/graphics/gpu/2020/06/12/sort-middle.html
29 | [Fast 2D rendering on GPU]: https://raphlinus.github.io/rust/graphics/gpu/2020/06/13/fast-2d-rendering.html
30 | 
31 | [piet-gpu vision]: https://github.com/linebender/piet-gpu/blob/master/doc/vision.md
32 | [GPU Accelerated Path Rendering]: https://developer.nvidia.com/gpu-accelerated-path-rendering
33 | [Loop-Blinn Curve Rendering]: https://www.microsoft.com/en-us/research/wp-content/uploads/2005/01/p1000-loop.pdf
34 | 


--------------------------------------------------------------------------------
/docs/book/gradients.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: chapter
 3 | title: Gradients
 4 | ---
 5 | * Linear gradients
 6 | * Radial gradients
 7 |   - Center offset
 8 | * Extend modes
 9 | * Advanced topic: what colorspace for interpolation?
10 | 


--------------------------------------------------------------------------------
/docs/book/images.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: chapter
 3 | title: Images
 4 | ---
 5 | * [A Pixel Is Not a Little Square](http://alvyray.com/Memos/CG/Microsoft/6_pixel.pdf)
 6 | 
 7 | Should sampling and reconstruction be a separate chapter? It's intimately tied to images.
 8 | 
 9 | [Prefilters for Sharp Image Display] is a fantastic resource for sampling and reconstruction. Rocha's masters thesis, [Optimal prefilters for display enhancement], covers the same material and provides even more background. Some points we definitely want to cover:
10 | 
11 | * Tradeoff between aliasing, ringing, and sharpness
12 |   - Pure sinc filter is wrong; prioritizes aliasing and sharpness, ringing is bad
13 |   - Box filter is good for sharpness but bad on aliasing
14 | * Oblique projections
15 |   - First filter determines aliasing vs ringing tradeoff
16 |   - Second filter improves sharpness
17 | * Clamping
18 |   - Serious issue for text, less so natural images
19 |   - HDR may reduce need for clamping positive light
20 | 
21 | [A Fresh Look at Generalized Sampling] is a deep theoretical exploration into filtering and reconstruction.
22 | 
23 | [Prefilters for Sharp Image Display]: https://www.inf.ufrgs.br/~eslgastal/SBS3/Rocha_Oliveira_Gastal_EG2020_Sharp_Filter_SBS3.pdf
24 | [A Fresh Look at Generalized Sampling]: http://hhoppe.com/filtering.pdf
25 | [Optimal prefilters for display enhancement]: https://lume.ufrgs.br/handle/10183/213511


--------------------------------------------------------------------------------
/docs/book/intro.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: chapter
3 | title: Introduction
4 | ---
5 | The introduction goes here. It should sound very grandiose.
6 | 
7 | The topics covered here overlap considerably with the [2D Vector Graphics Course] by Diego Nehab.
8 | 
9 | [2D Vector Graphics Course]: http://w3.impa.br/~diego/teaching/vg/


--------------------------------------------------------------------------------
/docs/book/shapes.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | layout: chapter
  3 | title: Shapes
  4 | ---
  5 | Shapes are at the heart of 2D graphics. All user interfaces are built on a foundation of rectangles, a simple but important shape. Text rendering is composed of glyphs, each of which is a shape on its own. And of course filled and stroked shapes are important in vector illustration applications as well as charts and other data visualization.
  6 | 
  7 | At its most general and abstract, a shape is a function from a point on the plane to a Boolean indicating whether the point is in the interior of the shape, so mathematically can be represented as $$\boldsymbol{R}^2 \rightarrow \{0, 1\}$$.
  8 | 
  9 | As a particularly simple example, the circle centered at $$(x_0, y_0)$$ with radius $$r$$ can be represented with the following predicate:
 10 | 
 11 | $$
 12 | (x - x_0)^2 + (y - y_0)^2 \leq r^2
 13 | $$
 14 | 
 15 | It's even simpler when using vector notation rather than writing out individual coordinates:
 16 | 
 17 | $$
 18 | |\boldsymbol{x} - \boldsymbol{x}_0|^2 \leq r^2
 19 | $$
 20 | 
 21 | Most commonly, though, in 2D graphics, shapes are represented as *paths.* A point is on the interior of a filled path when its winding number is either nonzero or odd, depending on the fill rule. A path can also be stroked, basically the result of drawing a pen with a given radius along the path, though there are subtleties.
 22 | 
 23 | ## Paths
 24 | 
 25 | A path is represented as a sequence of path segments. Each path segment is most commonly represented as a parametric curve $$(x(t), y(t))$$ or $$\boldsymbol{x}(t)$$, with the parameter $$t$$ conventionally ranging from $$[0..1]$$.
 26 | 
 27 | The simplest curve segment is a line, which is represented a pair of points $$(\boldsymbol{x}_0,\boldsymbol{x_1})$$. Then the formula is:
 28 | 
 29 | $$
 30 | \boldsymbol{x}(t) = (1 - t)\boldsymbol{x}_0 + t\boldsymbol{x}_1
 31 | $$
 32 | 
 33 | Paths consisting entirely of line segments are common, and are called *polylines.* For curves, there are choices of curve representations. The most common are definitely Bézier curves, though many systems also admit other primitives such as circular or elliptical arcs.
 34 | 
 35 | A quadratic Bézier is represented as three points, and its parametric formula is:
 36 | 
 37 | $$
 38 | \boldsymbol{x}(t) = (1 - t)^2\boldsymbol{x}_0 + 2(1-t)t\boldsymbol{x}_1 + t^2\boldsymbol{x}_2
 39 | $$
 40 | 
 41 | Similarly, a cubic Bézier is defined as:
 42 | 
 43 | $$
 44 | \boldsymbol{x}(t) = (1 - t)^3\boldsymbol{x}_0 + 3(1-t)^2t\boldsymbol{x}_1 + 3(1-t)t^2\boldsymbol{x}_2 + t^3\boldsymbol{x}_3
 45 | $$
 46 | 
 47 | The general equation for an order $n$ Bézier is:
 48 | 
 49 | $$
 50 | \boldsymbol{x}(t) = \sum_{i=0}^n \binom{n}{i} (1 - t)^{n - i} t^i \boldsymbol{x}_i
 51 | $$
 52 | 
 53 | However, orders greater than 3 are rarely used. Note that $$\boldsymbol{x}(0) = \boldsymbol{x}_0$$ and $$\boldsymbol{x}(1) = \boldsymbol{x}_n$$. The points $$\boldsymbol{x}_i$$ where $$1 \leq i < n$$ are called *control points* or sometimes *off-curve points.* The endpoints are, of course, *on-curve points.*
 54 | 
 55 | Bézier curves have many advantages for 2D graphics. One special strength is that they are closed under affine transformation - the affine transform of a Bézier curve is the affine transformation of each of its points.
 56 | 
 57 | ### Winding number
 58 | 
 59 | How do we determine whether a point is on the inside or outside of a closed path? The systematic way is in terms of the *winding number* of the curve with respect to the point.
 60 | 
 61 | For winding number to be meaningful, the path must be a sequence of closed subpaths. For a subpath to be closed, the end point of each segment must coincide with the start point of the next (in cyclic order, so the "next" segment after the last in a subpath is the fist in the subpath).
 62 | 
 63 | Thus, the subpath taken as a whole is $G0$ continuous. It can be rewritten in polar coordinates, $$r(t), \theta(t)$$, where $$0 \leq t \leq n$$. Here is is convenient to take $$n$$, the number of segments in the subpath, as the upper bound for $$t$$, so the $$t$$ parameter for any segment is simply the fractional part.
 64 | 
 65 | Then, the winding number is:
 66 | 
 67 | $$
 68 | \frac{\theta(n) - \theta(0)}{2\pi}
 69 | $$
 70 | 
 71 | <!-- \tau? -->
 72 | 
 73 | In a y-up coordinate system, anticlockwise rotation is considered a positive winding number, with clockwise negative. Since y-down is more common in graphics, we'll use the opposite convention, so clockwise is positive, and this will let use use the same math.
 74 | 
 75 | Winding numbers are closely related to contour integrals, and a more direct definition is as follows:
 76 | 
 77 | $$
 78 | \frac{1}{2\pi} \oint_C \,\frac{(\boldsymbol{x}(t) - \boldsymbol{x}_0) \times \boldsymbol{x}'(t)}{|\boldsymbol{x}(t) - \boldsymbol{x}_0|^2}\,dt
 79 | $$
 80 | 
 81 | <!-- sum of contributions from segments? -->
 82 | 
 83 | <!-- not liking the overloading of _0 here -->
 84 | 
 85 | #### Ray casting
 86 | 
 87 | While the contour integral formulation is a fine mathematical definition, it is not particularly easy or efficient to calculate directly. For that, *ray casting* is a better technique.
 88 | 
 89 | The essence of the technique is to cast a ray from $$(-\infty, y)$$ to $$(x, y)$$ and count all crossings with the path. In a y-down coordinate system, any crossing with the path going upward, in other words $$dy/dt < 0$$ counts as +1, and downward counts as -1.
 90 | 
 91 | This technique is more efficient, but requires some care with edge conditions. Here is the more detailed algorithm for line segments.
 92 | 
 93 | The total winding number is simply the sum of the contribution from each segment.
 94 | 
 95 | The first step is to reject the segment based on $$y$$. More precisely, the segment is rejected if $$y < \min(y_0, y_1)$$ or $$y \geq \max(y_0, y_1)$$, in which case its winding number contribution is 0. Note that the edge cases are carefully constructed so that a ray through a closed path always has an even number of crossings. In addition, horizontal line segments are rejected.
 96 | 
 97 | Then the line segment is solved for $$x$$ given $$y$$. There is a winding number contribution if $$x$$ is to the right of the line:
 98 | 
 99 | $$
100 | x > x_0 + (y - y_0)\frac{x_1 - x_0}{y_1 - y_0}
101 | $$
102 | 
103 | In that case, the winding number contribution is $$\text{signum}(y_0 - y_1)$$.
104 | 
105 | The technique generalizes to curves. The curve segment is split into y-monotonic subsegments, then for each subsegment the same technique is used, solving the curve for $$x$$ given $$y$$.
106 | 
107 | * [A Primer on Bézier Curves](https://pomax.github.io/bezierinfo/)
108 | * Winding number
109 |   - Mathematical interpretation
110 |   - Even/odd and nonzero winding number rules
111 | 
112 | ## Stroking
113 | 
114 | The two main ways that paths become images are filling, discussed above, and stroking. Informally, stroking can be understood as sweeping a pen, with some thickness, along the stroke. Unlike filling, which is well defined (winding number rule is the only relevant parameter other than the path itself), there is considerable variation in stroking, both in *stroke style* and in variations among implementations. On the other hand, while filling requires closed paths, stroking works for open paths as well.
115 | 
116 | There is no single clear mathematical definition of stroking. Existing systems tend to be defined by their implementations, though there are efforts to define it more systematically. There are (at least) three relevant definitions: Minkowski sum, swept line, and offset curve.
117 | 
118 | ### Minkowski sum
119 | 
120 | The mathematically simplest form of stroking can be expressed as the Minkowski sum of a disc with the set of points on the path. Expanding that out, the predicate can be written:
121 | 
122 | $$
123 | \exists\, i, t: |\text{path}[i](t) - \boldsymbol{x}| < r
124 | $$
125 | 
126 | This style of stroking is certainly simplest from the mathematical perspective, but is not generally the default or the most common. It results in strokes with round ends, and round joins at angled corners, the outline defined by circular arcs.
127 | 
128 | ![Example of round line styles](../assets/round.svg)
129 | 
130 | One advantage of the Minkowski sum formuation is that it generalizes to other pen shapes than a circle. For example, affine transformation of a stroked outline is equivalent to stroking the affine transformed source path with an elliptical pen.
131 | 
132 | ### Stroke styles
133 | 
134 | In the base set, caps are round, butt, and square, and joins are round, miter, and bevel. Traditionally, there is also "miter limit" setting, so that if the angle is more acute than the limit, the join is bevel, otherwise miter.
135 | 
136 | TODO: show examples. In the meantime, [MDN tutorial](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes) is a reasonable source.
137 | 
138 | The [SVG 2 draft spec] proposes additional styles, but these are not in widespread use.
139 | 
140 | ### Swept line
141 | 
142 | The main limitation of the Minkowski sum approach is that it can only express round ends and joins, while designers prefer a wider range of styles. These other styles are generally expressed as the stroke of each continuous path segment, plus additional elements applied to the ends and joins at corners.
143 | 
144 | The stroke of a single continuous curve segment is defined by sweeping a line along the path, centered on that path, and normal to it.
145 | 
146 | In general, when round caps and joins are specified, the swept line definition is equivalent to Minkowski sum, but as [Nehab 2020] points out, there is one edge case, namely a cubic Bézier containing a cusp, where the swept line definition gives a flat cap.
147 | 
148 | When paths have extremes of curvature, the outline can have complex shapes, defined in [Nehab 2020] as evolutes. Computing these shapes is nontrivial.
149 | 
150 | The [SVG 2 draft spec] is defined in terms of swept line. That said, it is rare for implementations to rigorously follow this spec.
151 | 
152 | ### Offset curves
153 | 
154 | A third definition is offset curves, otherwise known as parallel curves. Swept along a continuous curve, a line normal to that curve traces a parallel curve offset by the half-width of the line in either direction. Joins can be defined by stitching together the endpoints of these parallel curves, with additional path segments for the different join types (TODO: be more precise). Butt caps can be defined as drawing line segments from the endpoints.
155 | 
156 | The main motivation for this definition is to enable performant implementations. Efficient algorithms for parallel curve are known, but not so much for the evolutes as defined in [Nehab 2020].
157 | 
158 | For paths that do not have extremes of curvature (relative to the line width), the results are the same as the swept line definition.
159 | 
160 | When authoring vector content, it is best not to depend on handling of these edge cases, as implementations may vary. One way to achieve robustness is to specify round joins and caps. Another is to avoid excessive curvature, or, failing that, perform stroke to fill expansion during authoring.
161 | 
162 | TODO: another challenge in computing offset curves is the presence of cusps.
163 | 
164 | At the time of writing, the popular Skia library renders strokes consistent with the offset curve definition.
165 | 
166 | #### Computation of offset curves
167 | 
168 | There is a large literature on computing offset curves, as there are applications in computer aided design and manufacturing, path planning in robotics, and other domains. Yet, quality implementions are elusive.
169 | 
170 | [Tiller and Hanson] is commonly cited and frequently implemented, but its results for cubic Béziers are poor. In fact, they have only $$O(n^2)$$ scaling. The results for quadratic Béziers are better, with $$O(n^4)$$ scaling, and discerning implementors (including [Nehab 2020]) often use the quadratic version.
171 | 
172 | A new algorithm based on quartic curve fitting is given in [Parallel curves of cubic Béziers]. This algorithm as $$O(n^6)$$ scaling, good robustness, and good performance. It may not be as suitable for implementation on GPU, as it relies on recursive subdivision for finding cusps, and the quartic solver may be difficult to adapt to 32 bit floating point precision while retaining good numerical robustness. Another choice is to use [Euler spirals][Cleaner parallel curves with Euler spirals].
173 | 
174 | ### Dashing
175 | 
176 | Another optional variation on style is *dashing.*
177 | 
178 | Note that determining the parameter $$t$$ for the start and end of each dash is an inverse arc length problem.
179 | 
180 | <!-- If we're going to use this pseudo-programming notation, do the same for winding number / filling. Ie write out the sum -->
181 | 
182 | ## References
183 | 
184 | * Nehab 2020: [Converting stroked primitives to filled primitives][Nehab 2020]
185 | * Kilgard 2020: [Polar Stroking][Kilgard 2020]
186 | * [Parallel curves of cubic Béziers]
187 | * [Cleaner parallel curves with Euler spirals]
188 | * Tiller and Hanson: [Offsets of Two-Dimensional Profiles][Tiller and Hanson]
189 | * [Shader-Based Antialiased, Dashed, Stroked Polylines]
190 | 
191 | [Kilgard 2020]: https://arxiv.org/abs/2007.00308
192 | [Nehab 2020]: http://w3.impa.br/~diego/projects/Neh20/
193 | [Shader-Based Antialiased, Dashed, Stroked Polylines]: https://jcgt.org/published/0002/02/08/paper.pdf
194 | [SVG 2 draft spec]: https://www.w3.org/TR/SVG2/
195 | [Tiller and Hanson]: https://ieeexplore.ieee.org/iel5/38/4055906/04055919
196 | [Cleaner parallel curves with Euler spirals]: https://raphlinus.github.io/curves/2021/02/19/parallel-curves.html
197 | [Parallel curves of cubic Béziers]: https://raphlinus.github.io/curves/2022/09/09/parallel-beziers.html
198 | 


--------------------------------------------------------------------------------
/docs/book/text.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: chapter
 3 | title: Text
 4 | ---
 5 | Hoo boy!
 6 | 
 7 | * Unicode
 8 | * Text + font + markup -> layout
 9 | * Shaping
10 | * Fonts
11 |   + This is probably a separate chapter
12 | * So much stuff
13 | 
14 | ## Resources
15 | 
16 | * [Text Rendering Hates You]: https://gankra.github.io/blah/text-hates-you/
17 | 


--------------------------------------------------------------------------------
/docs/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | # Feel free to add content and custom Front Matter to this file.
 3 | # To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
 4 | 
 5 | layout: home
 6 | ---
 7 | This is a dream of a book I would really like to write, covering at least the basics of most topics in 2D graphics. There are many excellent textbooks for 3D graphics, and cources are widely taught, but there's really nothing comprehensive for 2D out there.
 8 | 
 9 | It's very difficult to find enough time as it is, much less adding writing a book, but I'm hoping I will have bursts of energy, especially as I dig deep into one topic or other. I also use this repo to collect references to high quality resources, and that alone is something that may be helpful to some people.
10 | 
11 | This project is open source, and pull requests and issues are welcome. Just head to the [github repo](https://github.com/linebender/2d.graphics).
12 | 
13 | And if you'd like to take a look at what's here, go through to the [contents.](/book/contents.html)
14 | 
15 | -- Raph Levien
16 | 


--------------------------------------------------------------------------------