pixelflow_canvas 0.7.3 → 0.7.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/LICENSE +674 -0
- data/docs/.gitignore +15 -0
- data/docs/Gemfile +7 -0
- data/docs/Gemfile.lock +92 -0
- data/{LICENSE.txt → docs/LICENSE} +6 -6
- data/docs/README.md +174 -0
- data/docs/_config.yml +11 -0
- data/docs/advanced_use.md +37 -0
- data/docs/drawing_things.md +296 -0
- data/docs/images/4x6.png +0 -0
- data/docs/images/6x10.png +0 -0
- data/docs/images/7x13.png +0 -0
- data/docs/images/7x13B.png +0 -0
- data/docs/images/8x13.png +0 -0
- data/docs/images/8x13B.png +0 -0
- data/docs/images/9x15.png +0 -0
- data/docs/images/9x15B.png +0 -0
- data/docs/images/code/0ba813cd6b7e0ae0.png +0 -0
- data/docs/images/code/30c5ac94e5fa22ba.png +0 -0
- data/docs/images/code/3871051301832e44.png +0 -0
- data/docs/images/code/40acf0284459aa0e.png +0 -0
- data/docs/images/code/4eb9d4f97e05c739.png +0 -0
- data/docs/images/code/584e2ee3b7526718.png +0 -0
- data/docs/images/code/7fa15cea8c83a542.png +0 -0
- data/docs/images/code/809d9ce7d7a8ce6c.png +0 -0
- data/docs/images/code/85abc3576f6d78b1.png +0 -0
- data/docs/images/code/ec32331b354119d2.png +0 -0
- data/docs/images/code/ef667cfe7ff65c27.png +0 -0
- data/docs/index.md +126 -0
- data/docs/palettes.md +3192 -0
- data/docs/render-docs.rb +98 -0
- data/lib/pixelflow_canvas/palettes.yaml +257 -0
- data/lib/pixelflow_canvas/version.rb +1 -1
- data/lib/pixelflow_canvas.rb +28 -13
- metadata +33 -9
- data/sig/pixelflow_canvas.rbs +0 -4
- data/test-anaglyph.rb +0 -15
- data/test-sirds.rb +0 -46
- data/test-triangle.rb +0 -25
- data/test-turtle.rb +0 -14
- data/test.rb +0 -36
data/docs/.gitignore
ADDED
@@ -0,0 +1,15 @@
|
|
1
|
+
# Not sure what a .gitignore is?
|
2
|
+
# See: https://git-scm.com/docs/gitignore
|
3
|
+
|
4
|
+
# These are directly copied from Jekyll's first-party docs on `.gitignore` files:
|
5
|
+
# https://jekyllrb.com/tutorials/using-jekyll-with-bundler/#commit-to-source-control
|
6
|
+
|
7
|
+
# Ignore the default location of the built site, and caches and metadata generated by Jekyll
|
8
|
+
_site/
|
9
|
+
.sass-cache/
|
10
|
+
.jekyll-cache/
|
11
|
+
.jekyll-metadata
|
12
|
+
|
13
|
+
# Ignore folders generated by Bundler
|
14
|
+
.bundle/
|
15
|
+
vendor/
|
data/docs/Gemfile
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
source 'https://rubygems.org'
|
2
|
+
|
3
|
+
gem "jekyll", "~> 4.3.4" # installed by `gem jekyll`
|
4
|
+
# gem "webrick" # required when using Ruby >= 3 and Jekyll <= 4.2.2
|
5
|
+
|
6
|
+
gem "just-the-docs", "0.10.0" # pinned to the current release
|
7
|
+
# gem "just-the-docs" # always download the latest release
|
data/docs/Gemfile.lock
ADDED
@@ -0,0 +1,92 @@
|
|
1
|
+
GEM
|
2
|
+
remote: https://rubygems.org/
|
3
|
+
specs:
|
4
|
+
addressable (2.8.7)
|
5
|
+
public_suffix (>= 2.0.2, < 7.0)
|
6
|
+
bigdecimal (3.1.8)
|
7
|
+
colorator (1.1.0)
|
8
|
+
concurrent-ruby (1.3.4)
|
9
|
+
em-websocket (0.5.3)
|
10
|
+
eventmachine (>= 0.12.9)
|
11
|
+
http_parser.rb (~> 0)
|
12
|
+
eventmachine (1.2.7)
|
13
|
+
ffi (1.17.0)
|
14
|
+
ffi (1.17.0-arm64-darwin)
|
15
|
+
forwardable-extended (2.6.0)
|
16
|
+
google-protobuf (4.28.1-arm64-darwin)
|
17
|
+
bigdecimal
|
18
|
+
rake (>= 13)
|
19
|
+
google-protobuf (4.28.1-x86_64-linux)
|
20
|
+
bigdecimal
|
21
|
+
rake (>= 13)
|
22
|
+
http_parser.rb (0.8.0)
|
23
|
+
i18n (1.14.6)
|
24
|
+
concurrent-ruby (~> 1.0)
|
25
|
+
jekyll (4.3.4)
|
26
|
+
addressable (~> 2.4)
|
27
|
+
colorator (~> 1.0)
|
28
|
+
em-websocket (~> 0.5)
|
29
|
+
i18n (~> 1.0)
|
30
|
+
jekyll-sass-converter (>= 2.0, < 4.0)
|
31
|
+
jekyll-watch (~> 2.0)
|
32
|
+
kramdown (~> 2.3, >= 2.3.1)
|
33
|
+
kramdown-parser-gfm (~> 1.0)
|
34
|
+
liquid (~> 4.0)
|
35
|
+
mercenary (>= 0.3.6, < 0.5)
|
36
|
+
pathutil (~> 0.9)
|
37
|
+
rouge (>= 3.0, < 5.0)
|
38
|
+
safe_yaml (~> 1.0)
|
39
|
+
terminal-table (>= 1.8, < 4.0)
|
40
|
+
webrick (~> 1.7)
|
41
|
+
jekyll-include-cache (0.2.1)
|
42
|
+
jekyll (>= 3.7, < 5.0)
|
43
|
+
jekyll-sass-converter (3.0.0)
|
44
|
+
sass-embedded (~> 1.54)
|
45
|
+
jekyll-seo-tag (2.8.0)
|
46
|
+
jekyll (>= 3.8, < 5.0)
|
47
|
+
jekyll-watch (2.2.1)
|
48
|
+
listen (~> 3.0)
|
49
|
+
just-the-docs (0.10.0)
|
50
|
+
jekyll (>= 3.8.5)
|
51
|
+
jekyll-include-cache
|
52
|
+
jekyll-seo-tag (>= 2.0)
|
53
|
+
rake (>= 12.3.1)
|
54
|
+
kramdown (2.4.0)
|
55
|
+
rexml
|
56
|
+
kramdown-parser-gfm (1.1.0)
|
57
|
+
kramdown (~> 2.0)
|
58
|
+
liquid (4.0.4)
|
59
|
+
listen (3.9.0)
|
60
|
+
rb-fsevent (~> 0.10, >= 0.10.3)
|
61
|
+
rb-inotify (~> 0.9, >= 0.9.10)
|
62
|
+
mercenary (0.4.0)
|
63
|
+
pathutil (0.16.2)
|
64
|
+
forwardable-extended (~> 2.6)
|
65
|
+
public_suffix (6.0.1)
|
66
|
+
rake (13.2.1)
|
67
|
+
rb-fsevent (0.11.2)
|
68
|
+
rb-inotify (0.11.1)
|
69
|
+
ffi (~> 1.0)
|
70
|
+
rexml (3.3.7)
|
71
|
+
rouge (4.3.0)
|
72
|
+
safe_yaml (1.0.5)
|
73
|
+
sass-embedded (1.80.5)
|
74
|
+
google-protobuf (~> 4.28)
|
75
|
+
rake (>= 13)
|
76
|
+
sass-embedded (1.80.5-arm64-darwin)
|
77
|
+
google-protobuf (~> 4.28)
|
78
|
+
terminal-table (3.0.2)
|
79
|
+
unicode-display_width (>= 1.1.1, < 3)
|
80
|
+
unicode-display_width (2.6.0)
|
81
|
+
webrick (1.8.1)
|
82
|
+
|
83
|
+
PLATFORMS
|
84
|
+
arm64-darwin
|
85
|
+
x86_64-linux
|
86
|
+
|
87
|
+
DEPENDENCIES
|
88
|
+
jekyll (~> 4.3.4)
|
89
|
+
just-the-docs (= 0.10.0)
|
90
|
+
|
91
|
+
BUNDLED WITH
|
92
|
+
2.5.9
|
@@ -1,6 +1,6 @@
|
|
1
|
-
|
1
|
+
MIT License
|
2
2
|
|
3
|
-
Copyright (c)
|
3
|
+
Copyright (c) 2022 just-the-docs
|
4
4
|
|
5
5
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
6
|
of this software and associated documentation files (the "Software"), to deal
|
@@ -9,13 +9,13 @@ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
9
|
copies of the Software, and to permit persons to whom the Software is
|
10
10
|
furnished to do so, subject to the following conditions:
|
11
11
|
|
12
|
-
The above copyright notice and this permission notice shall be included in
|
13
|
-
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
13
|
+
copies or substantial portions of the Software.
|
14
14
|
|
15
15
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
16
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
17
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
18
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
19
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
21
|
-
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
21
|
+
SOFTWARE.
|
data/docs/README.md
ADDED
@@ -0,0 +1,174 @@
|
|
1
|
+
# just-the-docs-template
|
2
|
+
|
3
|
+
This is a *bare-minimum* template to create a [Jekyll] site that:
|
4
|
+
|
5
|
+
- uses the [Just the Docs] theme;
|
6
|
+
- can be built and published on [GitHub Pages];
|
7
|
+
- can be built and previewed locally, and published on other platforms.
|
8
|
+
|
9
|
+
More specifically, the created site:
|
10
|
+
|
11
|
+
- uses a gem-based approach, i.e. uses a `Gemfile` and loads the `just-the-docs` gem;
|
12
|
+
- uses the [GitHub Pages / Actions workflow] to build and publish the site on GitHub Pages.
|
13
|
+
|
14
|
+
To get started with creating a site, simply:
|
15
|
+
|
16
|
+
1. click "[use this template]" to create a GitHub repository
|
17
|
+
2. go to Settings > Pages > Build and deployment > Source, and select GitHub Actions
|
18
|
+
|
19
|
+
If you want to maintain your docs in the `docs` directory of an existing project repo, see [Hosting your docs from an existing project repo](#hosting-your-docs-from-an-existing-project-repo).
|
20
|
+
|
21
|
+
After completing the creation of your new site on GitHub, update it as needed:
|
22
|
+
|
23
|
+
## Replace the content of the template pages
|
24
|
+
|
25
|
+
Update the following files to your own content:
|
26
|
+
|
27
|
+
- `index.md` (your new home page)
|
28
|
+
- `README.md` (information for those who access your site repo on GitHub)
|
29
|
+
|
30
|
+
## Changing the version of the theme and/or Jekyll
|
31
|
+
|
32
|
+
Simply edit the relevant line(s) in the `Gemfile`.
|
33
|
+
|
34
|
+
## Adding a plugin
|
35
|
+
|
36
|
+
The Just the Docs theme automatically includes the [`jekyll-seo-tag`] plugin.
|
37
|
+
|
38
|
+
To add an extra plugin, you need to add it in the `Gemfile` *and* in `_config.yml`. For example, to add [`jekyll-default-layout`]:
|
39
|
+
|
40
|
+
- Add the following to your site's `Gemfile`:
|
41
|
+
|
42
|
+
```ruby
|
43
|
+
gem "jekyll-default-layout"
|
44
|
+
```
|
45
|
+
|
46
|
+
- And add the following to your site's `_config.yml`:
|
47
|
+
|
48
|
+
```yaml
|
49
|
+
plugins:
|
50
|
+
- jekyll-default-layout
|
51
|
+
```
|
52
|
+
|
53
|
+
Note: If you are using a Jekyll version less than 3.5.0, use the `gems` key instead of `plugins`.
|
54
|
+
|
55
|
+
## Publishing your site on GitHub Pages
|
56
|
+
|
57
|
+
1. If your created site is `YOUR-USERNAME/YOUR-SITE-NAME`, update `_config.yml` to:
|
58
|
+
|
59
|
+
```yaml
|
60
|
+
title: YOUR TITLE
|
61
|
+
description: YOUR DESCRIPTION
|
62
|
+
theme: just-the-docs
|
63
|
+
|
64
|
+
url: https://YOUR-USERNAME.github.io/YOUR-SITE-NAME
|
65
|
+
|
66
|
+
aux_links: # remove if you don't want this link to appear on your pages
|
67
|
+
Template Repository: https://github.com/YOUR-USERNAME/YOUR-SITE-NAME
|
68
|
+
```
|
69
|
+
|
70
|
+
2. Push your updated `_config.yml` to your site on GitHub.
|
71
|
+
|
72
|
+
3. In your newly created repo on GitHub:
|
73
|
+
- go to the `Settings` tab -> `Pages` -> `Build and deployment`, then select `Source`: `GitHub Actions`.
|
74
|
+
- if there were any failed Actions, go to the `Actions` tab and click on `Re-run jobs`.
|
75
|
+
|
76
|
+
## Building and previewing your site locally
|
77
|
+
|
78
|
+
Assuming [Jekyll] and [Bundler] are installed on your computer:
|
79
|
+
|
80
|
+
1. Change your working directory to the root directory of your site.
|
81
|
+
|
82
|
+
2. Run `bundle install`.
|
83
|
+
|
84
|
+
3. Run `bundle exec jekyll serve` to build your site and preview it at `localhost:4000`.
|
85
|
+
|
86
|
+
The built site is stored in the directory `_site`.
|
87
|
+
|
88
|
+
## Publishing your built site on a different platform
|
89
|
+
|
90
|
+
Just upload all the files in the directory `_site`.
|
91
|
+
|
92
|
+
## Customization
|
93
|
+
|
94
|
+
You're free to customize sites that you create with this template, however you like!
|
95
|
+
|
96
|
+
[Browse our documentation][Just the Docs] to learn more about how to use this theme.
|
97
|
+
|
98
|
+
## Hosting your docs from an existing project repo
|
99
|
+
|
100
|
+
You might want to maintain your docs in an existing project repo. Instead of creating a new repo using the [just-the-docs template](https://github.com/just-the-docs/just-the-docs-template), you can copy the template files into your existing repo and configure the template's Github Actions workflow to build from a `docs` directory. You can clone the template to your local machine or download the `.zip` file to access the files.
|
101
|
+
|
102
|
+
### Copy the template files
|
103
|
+
|
104
|
+
1. Create a `.github/workflows` directory at your project root if your repo doesn't already have one. Copy the `pages.yml` file into this directory. GitHub Actions searches this directory for workflow files.
|
105
|
+
|
106
|
+
2. Create a `docs` directory at your project root and copy all remaining template files into this directory.
|
107
|
+
|
108
|
+
### Modify the GitHub Actions workflow
|
109
|
+
|
110
|
+
The GitHub Actions workflow that builds and deploys your site to Github Pages is defined by the `pages.yml` file. You'll need to edit this file to that so that your build and deploy steps look to your `docs` directory, rather than the project root.
|
111
|
+
|
112
|
+
1. Set the default `working-directory` param for the build job.
|
113
|
+
|
114
|
+
```yaml
|
115
|
+
build:
|
116
|
+
runs-on: ubuntu-latest
|
117
|
+
defaults:
|
118
|
+
run:
|
119
|
+
working-directory: docs
|
120
|
+
```
|
121
|
+
|
122
|
+
2. Set the `working-directory` param for the Setup Ruby step.
|
123
|
+
|
124
|
+
```yaml
|
125
|
+
- name: Setup Ruby
|
126
|
+
uses: ruby/setup-ruby@v1
|
127
|
+
with:
|
128
|
+
ruby-version: '3.1'
|
129
|
+
bundler-cache: true
|
130
|
+
cache-version: 0
|
131
|
+
working-directory: '${{ github.workspace }}/docs'
|
132
|
+
```
|
133
|
+
|
134
|
+
3. Set the path param for the Upload artifact step:
|
135
|
+
|
136
|
+
```yaml
|
137
|
+
- name: Upload artifact
|
138
|
+
uses: actions/upload-pages-artifact@v1
|
139
|
+
with:
|
140
|
+
path: "docs/_site/"
|
141
|
+
```
|
142
|
+
|
143
|
+
4. Modify the trigger so that only changes within the `docs` directory start the workflow. Otherwise, every change to your project (even those that don't affect the docs) would trigger a new site build and deploy.
|
144
|
+
|
145
|
+
```yaml
|
146
|
+
on:
|
147
|
+
push:
|
148
|
+
branches:
|
149
|
+
- "main"
|
150
|
+
paths:
|
151
|
+
- "docs/**"
|
152
|
+
```
|
153
|
+
|
154
|
+
## Licensing and Attribution
|
155
|
+
|
156
|
+
This repository is licensed under the [MIT License]. You are generally free to reuse or extend upon this code as you see fit; just include the original copy of the license (which is preserved when you "make a template"). While it's not necessary, we'd love to hear from you if you do use this template, and how we can improve it for future use!
|
157
|
+
|
158
|
+
The deployment GitHub Actions workflow is heavily based on GitHub's mixed-party [starter workflows]. A copy of their MIT License is available in [actions/starter-workflows].
|
159
|
+
|
160
|
+
----
|
161
|
+
|
162
|
+
[^1]: [It can take up to 10 minutes for changes to your site to publish after you push the changes to GitHub](https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/creating-a-github-pages-site-with-jekyll#creating-your-site).
|
163
|
+
|
164
|
+
[Jekyll]: https://jekyllrb.com
|
165
|
+
[Just the Docs]: https://just-the-docs.github.io/just-the-docs/
|
166
|
+
[GitHub Pages]: https://docs.github.com/en/pages
|
167
|
+
[GitHub Pages / Actions workflow]: https://github.blog/changelog/2022-07-27-github-pages-custom-github-actions-workflows-beta/
|
168
|
+
[Bundler]: https://bundler.io
|
169
|
+
[use this template]: https://github.com/just-the-docs/just-the-docs-template/generate
|
170
|
+
[`jekyll-default-layout`]: https://github.com/benbalter/jekyll-default-layout
|
171
|
+
[`jekyll-seo-tag`]: https://jekyll.github.io/jekyll-seo-tag
|
172
|
+
[MIT License]: https://en.wikipedia.org/wiki/MIT_License
|
173
|
+
[starter workflows]: https://github.com/actions/starter-workflows/blob/main/pages/jekyll.yml
|
174
|
+
[actions/starter-workflows]: https://github.com/actions/starter-workflows/blob/main/LICENSE
|
data/docs/_config.yml
ADDED
@@ -0,0 +1,11 @@
|
|
1
|
+
title: Pixelflow Canvas
|
2
|
+
description: A virtual CRT for old school graphics programming in Visual Studio Code.
|
3
|
+
theme: just-the-docs
|
4
|
+
|
5
|
+
url: https://github.com/specht/pixelflow_canvas_ruby
|
6
|
+
|
7
|
+
aux_links:
|
8
|
+
Github: https://github.com/specht/pixelflow_canvas_ruby
|
9
|
+
callouts:
|
10
|
+
info:
|
11
|
+
color: yellow
|
@@ -0,0 +1,37 @@
|
|
1
|
+
---
|
2
|
+
title: Advanced use
|
3
|
+
layout: page
|
4
|
+
nav_order: 3
|
5
|
+
---
|
6
|
+
|
7
|
+
# Using masks
|
8
|
+
|
9
|
+
Masks can be used to specify which parts of the image should be affected by drawing operations.
|
10
|
+
|
11
|
+
To set a mask, use the `set_mask` method:
|
12
|
+
|
13
|
+
```ruby
|
14
|
+
canvas.set_mask do
|
15
|
+
add_color(5)
|
16
|
+
end
|
17
|
+
```
|
18
|
+
|
19
|
+
In the example above, the mask is set to all pixels that currently have a color of 5. This means that any drawing operation will only affect pixels that have a color of 5 until the mask is removed.
|
20
|
+
|
21
|
+
Remove a mask by calling the `remove_mask` method:
|
22
|
+
|
23
|
+
```ruby
|
24
|
+
canvas.remove_mask
|
25
|
+
```
|
26
|
+
# Saving the canvas
|
27
|
+
|
28
|
+
You can save the canvas to a file using the `save_as_png` method.
|
29
|
+
|
30
|
+
```ruby
|
31
|
+
canvas.save_as_png("output.png")
|
32
|
+
```
|
33
|
+
|
34
|
+
# Event polling
|
35
|
+
|
36
|
+
The Pixelflow Canvas is not just a canvas for drawing, it also has built-in event polling capabilities. You can use the `fetch_events` method to get the next event from the event queue.
|
37
|
+
|
@@ -0,0 +1,296 @@
|
|
1
|
+
---
|
2
|
+
title: Drawing things
|
3
|
+
layout: page
|
4
|
+
nav_order: 2
|
5
|
+
---
|
6
|
+
|
7
|
+
<style>
|
8
|
+
img.full {
|
9
|
+
width: 100%;
|
10
|
+
max-width: 100%;
|
11
|
+
margin: 0;
|
12
|
+
padding: 0;
|
13
|
+
image-rendering: pixelated;
|
14
|
+
border-radius: 1em;
|
15
|
+
box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
|
16
|
+
padding: 1em;
|
17
|
+
}
|
18
|
+
</style>
|
19
|
+
|
20
|
+
# Drawing things
|
21
|
+
|
22
|
+
The `Canvas` class provides a number of methods for drawing things on the canvas. These methods are used to draw pixels, lines, rectangles, circles, ellipses, arcs, Bézier curves, triangles, and text.
|
23
|
+
|
24
|
+
## Drawing and reading pixels
|
25
|
+
|
26
|
+
The `set_pixel` method sets the color of a single pixel on the canvas.
|
27
|
+
|
28
|
+
```ruby
|
29
|
+
canvas.set_pixel(160, 90, 10) # in palette mode
|
30
|
+
canvas.set_pixel(160, 90, 0, 255, 0) # in RGB mode
|
31
|
+
```
|
32
|
+
|
33
|
+
To read the color of a pixel, use the `get_pixel` method.
|
34
|
+
|
35
|
+
```ruby
|
36
|
+
color = canvas.get_pixel(160, 90)
|
37
|
+
```
|
38
|
+
|
39
|
+
Depending on the color mode, the `get_pixel` method returns either a palette index or an array of RGB values.
|
40
|
+
|
41
|
+
## Setting the current color
|
42
|
+
|
43
|
+
The `set_color` method sets the color that will be used by all subsequent drawing operations.
|
44
|
+
|
45
|
+
```ruby
|
46
|
+
canvas.set_color(10)
|
47
|
+
```
|
48
|
+
|
49
|
+
You can omit the color argument in the `set_pixel` method if you have previously set the color using the `set_color` method.
|
50
|
+
|
51
|
+
```ruby
|
52
|
+
canvas.set_color(10)
|
53
|
+
canvas.set_pixel(160, 90)
|
54
|
+
```
|
55
|
+
|
56
|
+
## Drawing lines
|
57
|
+
|
58
|
+
Use the `draw_line` method to draw a line between two points.
|
59
|
+
|
60
|
+
```ruby
|
61
|
+
canvas.set_color(10)
|
62
|
+
canvas.draw_line(10, 10, 100, 50)
|
63
|
+
```
|
64
|
+
|
65
|
+
<!-- code begin
|
66
|
+
Pixelflow::Canvas.new(64, 18, :palette) do
|
67
|
+
set_color(15)
|
68
|
+
fill_rect(0, 0, 63, 17)
|
69
|
+
set_color(8)
|
70
|
+
draw_line(0, 0, 63, 17)
|
71
|
+
end
|
72
|
+
code end --><img class='full' src='images/code/0ba813cd6b7e0ae0.png'>
|
73
|
+
|
74
|
+
## Drawing rectangles
|
75
|
+
|
76
|
+
Use the `draw_rect` and `fill_rect` methods to draw rectangles. Specify the coordinates of the upper-left corner and the lower-right corner of the rectangle.
|
77
|
+
|
78
|
+
```ruby
|
79
|
+
canvas.set_color(3)
|
80
|
+
canvas.fill_rect(10, 10, 100, 50)
|
81
|
+
canvas.set_color(10)
|
82
|
+
canvas.draw_rect(10, 10, 100, 50)
|
83
|
+
```
|
84
|
+
|
85
|
+
<!-- code begin
|
86
|
+
Pixelflow::Canvas.new(64, 18, :palette) do
|
87
|
+
set_color(15)
|
88
|
+
fill_rect(0, 0, 63, 17)
|
89
|
+
set_color(7)
|
90
|
+
fill_rect(0, 0, 63, 17)
|
91
|
+
set_color(8)
|
92
|
+
draw_rect(0, 0, 63, 17)
|
93
|
+
end
|
94
|
+
code end --><img class='full' src='images/code/584e2ee3b7526718.png'>
|
95
|
+
|
96
|
+
## Drawing circles
|
97
|
+
|
98
|
+
Use the `draw_circle` and `fill_circle` methods to draw circles. Specify the center and the radius of the circle.
|
99
|
+
|
100
|
+
```ruby
|
101
|
+
canvas.set_color(3)
|
102
|
+
canvas.fill_circle(160, 90, 50)
|
103
|
+
canvas.set_color(10)
|
104
|
+
canvas.draw_circle(160, 90, 50)
|
105
|
+
```
|
106
|
+
|
107
|
+
<!-- code begin
|
108
|
+
Pixelflow::Canvas.new(64, 19, :palette) do
|
109
|
+
set_color(15)
|
110
|
+
fill_rect(0, 0, 63, 18)
|
111
|
+
set_color(7)
|
112
|
+
fill_circle(32, 9, 9)
|
113
|
+
set_color(8)
|
114
|
+
draw_circle(32, 9, 9)
|
115
|
+
end
|
116
|
+
code end --><img class='full' src='images/code/809d9ce7d7a8ce6c.png'>
|
117
|
+
|
118
|
+
## Drawing ellipses
|
119
|
+
|
120
|
+
Use the `draw_ellipse` and `fill_ellipse` methods to draw ellipses. Specify the center, the horizontal radius, and the vertical radius of the ellipse.
|
121
|
+
|
122
|
+
```ruby
|
123
|
+
canvas.set_color(3)
|
124
|
+
canvas.fill_ellipse(160, 90, 50, 30)
|
125
|
+
canvas.set_color(10)
|
126
|
+
canvas.draw_ellipse(160, 90, 50, 30)
|
127
|
+
```
|
128
|
+
<!-- code begin
|
129
|
+
Pixelflow::Canvas.new(64, 19, :palette) do
|
130
|
+
set_color(15)
|
131
|
+
fill_rect(0, 0, 63, 18)
|
132
|
+
set_color(7)
|
133
|
+
fill_ellipse(32, 9, 16, 9)
|
134
|
+
set_color(8)
|
135
|
+
draw_ellipse(32, 9, 16, 9)
|
136
|
+
end
|
137
|
+
code end --><img class='full' src='images/code/3871051301832e44.png'>
|
138
|
+
|
139
|
+
## Drawing circular arcs
|
140
|
+
|
141
|
+
Use the `draw_arc` and `fill_arc` methods to draw arcs. Specify the center, the radius, the start angle, and the end angle of the arc.
|
142
|
+
|
143
|
+
```ruby
|
144
|
+
canvas.set_color(3)
|
145
|
+
canvas.fill_arc(160, 90, 50, 0, 180)
|
146
|
+
canvas.set_color(10)
|
147
|
+
canvas.draw_arc(160, 90, 50, 0, 180)
|
148
|
+
```
|
149
|
+
|
150
|
+
<!-- code begin
|
151
|
+
Pixelflow::Canvas.new(64, 18, :palette) do
|
152
|
+
set_color(15)
|
153
|
+
fill_rect(0, 0, 63, 17)
|
154
|
+
set_color(7)
|
155
|
+
fill_arc(32, 0, 18, 30, 150)
|
156
|
+
set_color(8)
|
157
|
+
draw_arc(32, 0, 18, 30, 150)
|
158
|
+
end
|
159
|
+
code end --><img class='full' src='images/code/4eb9d4f97e05c739.png'>
|
160
|
+
|
161
|
+
## Drawing Bézier curves
|
162
|
+
|
163
|
+
Use the `draw_quadratic_bezier` and `draw_cubic_bezier` methods to draw quadratic and cubic Bézier curves, respectively.
|
164
|
+
|
165
|
+
```ruby
|
166
|
+
canvas.set_color(10)
|
167
|
+
canvas.draw_quadratic_bezier(10, 10, 50, 50, 100, 10)
|
168
|
+
canvas.draw_cubic_bezier(10, 10, 50, 50, 100, 50, 150, 10)
|
169
|
+
```
|
170
|
+
|
171
|
+
<!-- code begin
|
172
|
+
Pixelflow::Canvas.new(64, 18, :palette) do
|
173
|
+
set_color(15)
|
174
|
+
fill_rect(0, 0, 63, 17)
|
175
|
+
set_color(8)
|
176
|
+
draw_quadratic_bezier(0, 17, 16, -8, 63, 17)
|
177
|
+
end
|
178
|
+
code end --><img class='full' src='images/code/ec32331b354119d2.png'>
|
179
|
+
|
180
|
+
<!-- code begin
|
181
|
+
Pixelflow::Canvas.new(64, 18, :palette) do
|
182
|
+
set_color(15)
|
183
|
+
fill_rect(0, 0, 63, 17)
|
184
|
+
set_color(8)
|
185
|
+
draw_cubic_bezier(0, 17, 16, -8, 47, 30, 63, 0)
|
186
|
+
end
|
187
|
+
code end --><img class='full' src='images/code/40acf0284459aa0e.png'>
|
188
|
+
|
189
|
+
## Drawing triangles
|
190
|
+
|
191
|
+
Use the `draw_triangle` and `fill_triangle` methods to draw triangles. Specify the coordinates of the three vertices of the triangle.
|
192
|
+
|
193
|
+
```ruby
|
194
|
+
canvas.set_color(3)
|
195
|
+
canvas.fill_triangle(10, 10, 100, 50, 50, 100)
|
196
|
+
canvas.set_color(10)
|
197
|
+
canvas.draw_triangle(10, 10, 100, 50, 50, 100)
|
198
|
+
```
|
199
|
+
|
200
|
+
<!-- code begin
|
201
|
+
Pixelflow::Canvas.new(64, 18, :palette) do
|
202
|
+
set_color(15)
|
203
|
+
fill_rect(0, 0, 63, 17)
|
204
|
+
set_color(7)
|
205
|
+
fill_triangle(10, 0, 52, 6, 31, 17)
|
206
|
+
set_color(8)
|
207
|
+
draw_triangle(10, 0, 52, 6, 31, 17)
|
208
|
+
end
|
209
|
+
code end --><img class='full' src='images/code/85abc3576f6d78b1.png'>
|
210
|
+
|
211
|
+
## Flood filling
|
212
|
+
|
213
|
+
The `flood_fill` method fills an area of the canvas with the current color. Specify the starting point of the fill operation.
|
214
|
+
|
215
|
+
```ruby
|
216
|
+
canvas.set_color(10)
|
217
|
+
canvas.draw_circle(110, 90, 50)
|
218
|
+
canvas.draw_circle(210, 90, 40)
|
219
|
+
canvas.flood_fill(160, 90)
|
220
|
+
```
|
221
|
+
|
222
|
+
<!-- code begin
|
223
|
+
Pixelflow::Canvas.new(64, 18, :palette) do
|
224
|
+
set_color(15)
|
225
|
+
fill_rect(0, 0, 63, 17)
|
226
|
+
set_color(8)
|
227
|
+
draw_circle(25, 12, 12)
|
228
|
+
draw_circle(39, 12, 8)
|
229
|
+
set_color(7)
|
230
|
+
flood_fill(25, 14)
|
231
|
+
flood_fill(39, 14)
|
232
|
+
end
|
233
|
+
code end --><img class='full' src='images/code/ef667cfe7ff65c27.png'>
|
234
|
+
|
235
|
+
## Drawing text
|
236
|
+
|
237
|
+
Use the `draw_text` method to draw text on the canvas. Specify the position, the text to draw, the font name, and the scale factor.
|
238
|
+
|
239
|
+
```ruby
|
240
|
+
canvas.set_color(10)
|
241
|
+
canvas.draw_text(10, 10, "Hello, world!", "4x6", 2)
|
242
|
+
```
|
243
|
+
|
244
|
+
<!-- code begin
|
245
|
+
Pixelflow::Canvas.new(64, 14, :palette) do
|
246
|
+
set_color(15)
|
247
|
+
fill_rect(0, 0, 63, 13)
|
248
|
+
set_color(8)
|
249
|
+
draw_text(7, 4, "Hello, world!", "4x6", 1)
|
250
|
+
end
|
251
|
+
code end --><img class='full' src='images/code/30c5ac94e5fa22ba.png'>
|
252
|
+
|
253
|
+
|
254
|
+
Use `text_width` to get the width and height of a given text string in pixels.
|
255
|
+
|
256
|
+
```ruby
|
257
|
+
width = canvas.text_width("Hello, world!", "4x6", 2)
|
258
|
+
```
|
259
|
+
|
260
|
+
There are several built-in fonts available:
|
261
|
+
|
262
|
+
<!-- fonts start -->
|
263
|
+
|
264
|
+
#### 4x6
|
265
|
+
|
266
|
+
<img src='images/4x6.png' alt='4x6'>
|
267
|
+
|
268
|
+
#### 6x10
|
269
|
+
|
270
|
+
<img src='images/6x10.png' alt='6x10'>
|
271
|
+
|
272
|
+
#### 7x13
|
273
|
+
|
274
|
+
<img src='images/7x13.png' alt='7x13'>
|
275
|
+
|
276
|
+
#### 7x13B
|
277
|
+
|
278
|
+
<img src='images/7x13B.png' alt='7x13B'>
|
279
|
+
|
280
|
+
#### 8x13
|
281
|
+
|
282
|
+
<img src='images/8x13.png' alt='8x13'>
|
283
|
+
|
284
|
+
#### 8x13B
|
285
|
+
|
286
|
+
<img src='images/8x13B.png' alt='8x13B'>
|
287
|
+
|
288
|
+
#### 9x15
|
289
|
+
|
290
|
+
<img src='images/9x15.png' alt='9x15'>
|
291
|
+
|
292
|
+
#### 9x15B
|
293
|
+
|
294
|
+
<img src='images/9x15B.png' alt='9x15B'>
|
295
|
+
|
296
|
+
<!-- fonts end -->
|
data/docs/images/4x6.png
ADDED
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|