this repo has no description
:memo: Improve figures
+105
-85
+1
Justfile
+1
Justfile
···
32
32
./shapemaker examples dna-analysis-machine --resolution 1920 paper/dna-analysis-machine.png
33
33
./shapemaker examples shapeshed --resolution 1920 paper/shapeshed.svg
34
34
./shapemaker examples colors-shed --resolution 1920 paper/colorshed.svg
35
+
./shapemaker examples grid --resolution 1920 paper/grid.svg
35
36
typst compile --root . paper/main.typ
36
37
37
38
readme:
+32
-50
paper/colorshed.svg
+32
-50
paper/colorshed.svg
···
1
-
<svg height="150" viewBox="0 0 200 150" width="200" xmlns="http://www.w3.org/2000/svg">
2
-
<rect fill="black" height="150" width="200" x="0" y="0"/>
1
+
<svg height="150" viewBox="0 0 150 150" width="150" xmlns="http://www.w3.org/2000/svg">
2
+
<rect fill="black" height="150" width="150" x="0" y="0"/>
3
3
<g class="layer" data-layer="root">
4
-
<g data-object="--pink_bg" style="fill: green;transform-box: fill-box;" transform-origin="125 125">
5
-
<rect height="50" width="50" x="100" y="100"/>
4
+
<g data-object="--orange_bg" style="fill: red;transform-box: fill-box;" transform-origin="25 75">
5
+
<rect height="50" width="50" x="0" y="50"/>
6
6
</g>
7
-
<g data-object="--orange_bg" style="fill: red;transform-box: fill-box;" transform-origin="125 75">
7
+
<g data-object="--brown_bg" style="fill: purple;transform-box: fill-box;" transform-origin="125 75">
8
8
<rect height="50" width="50" x="100" y="50"/>
9
9
</g>
10
-
<g data-object="--gray_bg" style="fill: black;transform-box: fill-box;" transform-origin="25 25">
11
-
<rect height="50" width="50" x="0" y="0"/>
12
-
</g>
13
-
<g data-object="--yellow_bg" style="fill: orange;transform-box: fill-box;" transform-origin="75 75">
14
-
<rect height="50" width="50" x="50" y="50"/>
15
-
</g>
16
-
<g data-object="--blue_bg" style="fill: cyan;transform-box: fill-box;" transform-origin="125 25">
10
+
<g data-object="--yellow_bg" style="fill: orange;transform-box: fill-box;" transform-origin="125 25">
17
11
<rect height="50" width="50" x="100" y="0"/>
18
12
</g>
19
-
<g data-object="--purple_bg" style="fill: pink;transform-box: fill-box;" transform-origin="75 125">
13
+
<g data-object="--pink_bg" style="fill: green;transform-box: fill-box;" transform-origin="75 125">
20
14
<rect height="50" width="50" x="50" y="100"/>
21
15
</g>
22
-
<g data-object="--white_bg" style="fill: yellow;transform-box: fill-box;" transform-origin="25 75">
23
-
<rect height="50" width="50" x="0" y="50"/>
24
-
</g>
25
-
<g data-object="--brown_bg" style="fill: purple;transform-box: fill-box;" transform-origin="25 125">
26
-
<rect height="50" width="50" x="0" y="100"/>
16
+
<g data-object="--blue_bg" style="fill: cyan;transform-box: fill-box;" transform-origin="25 25">
17
+
<rect height="50" width="50" x="0" y="0"/>
27
18
</g>
28
-
<g data-object="--green_bg" style="fill: gray;transform-box: fill-box;" transform-origin="175 125">
29
-
<rect height="50" width="50" x="150" y="100"/>
19
+
<g data-object="--cyan_bg" style="fill: yellow;transform-box: fill-box;" transform-origin="75 25">
20
+
<rect height="50" width="50" x="50" y="0"/>
30
21
</g>
31
-
<g data-object="--red_bg" style="fill: brown;transform-box: fill-box;" transform-origin="175 75">
32
-
<rect height="50" width="50" x="150" y="50"/>
22
+
<g data-object="--green_bg" style="fill: blue;transform-box: fill-box;" transform-origin="125 125">
23
+
<rect height="50" width="50" x="100" y="100"/>
33
24
</g>
34
-
<g data-object="--cyan_bg" style="fill: white;transform-box: fill-box;" transform-origin="175 25">
35
-
<rect height="50" width="50" x="150" y="0"/>
25
+
<g data-object="--purple_bg" style="fill: pink;transform-box: fill-box;" transform-origin="25 125">
26
+
<rect height="50" width="50" x="0" y="100"/>
36
27
</g>
37
-
<g data-object="--black_bg" style="fill: blue;transform-box: fill-box;" transform-origin="75 25">
38
-
<rect height="50" width="50" x="50" y="0"/>
28
+
<g data-object="--red_bg" style="fill: brown;transform-box: fill-box;" transform-origin="75 75">
29
+
<rect height="50" width="50" x="50" y="50"/>
39
30
</g>
40
31
</g>
41
32
<g class="layer" data-layer="circles">
42
-
<g data-object="--gray" style="fill: gray;transform-box: fill-box;" transform-origin="25 25">
33
+
<g data-object="--blue" style="fill: blue;transform-box: fill-box;" transform-origin="25 25">
43
34
<circle cx="25" cy="25" r="25"/>
44
35
</g>
45
-
<g data-object="--brown" style="fill: brown;transform-box: fill-box;" transform-origin="25 125">
46
-
<circle cx="25" cy="125" r="25"/>
36
+
<g data-object="--cyan" style="fill: cyan;transform-box: fill-box;" transform-origin="75 25">
37
+
<circle cx="75" cy="25" r="25"/>
47
38
</g>
48
-
<g data-object="--purple" style="fill: purple;transform-box: fill-box;" transform-origin="75 125">
49
-
<circle cx="75" cy="125" r="25"/>
39
+
<g data-object="--yellow" style="fill: yellow;transform-box: fill-box;" transform-origin="125 25">
40
+
<circle cx="125" cy="25" r="25"/>
50
41
</g>
51
-
<g data-object="--white" style="fill: white;transform-box: fill-box;" transform-origin="25 75">
52
-
<circle cx="25" cy="75" r="25"/>
53
-
</g>
54
-
<g data-object="--green" style="fill: green;transform-box: fill-box;" transform-origin="175 125">
55
-
<circle cx="175" cy="125" r="25"/>
56
-
</g>
57
-
<g data-object="--cyan" style="fill: cyan;transform-box: fill-box;" transform-origin="175 25">
58
-
<circle cx="175" cy="25" r="25"/>
59
-
</g>
60
-
<g data-object="--black" style="fill: black;transform-box: fill-box;" transform-origin="75 25">
61
-
<circle cx="75" cy="25" r="25"/>
62
-
</g>
63
-
<g data-object="--yellow" style="fill: yellow;transform-box: fill-box;" transform-origin="75 75">
42
+
<g data-object="--red" style="fill: red;transform-box: fill-box;" transform-origin="75 75">
64
43
<circle cx="75" cy="75" r="25"/>
65
44
</g>
66
-
<g data-object="--blue" style="fill: blue;transform-box: fill-box;" transform-origin="125 25">
67
-
<circle cx="125" cy="25" r="25"/>
45
+
<g data-object="--pink" style="fill: pink;transform-box: fill-box;" transform-origin="75 125">
46
+
<circle cx="75" cy="125" r="25"/>
68
47
</g>
69
-
<g data-object="--pink" style="fill: pink;transform-box: fill-box;" transform-origin="125 125">
48
+
<g data-object="--green" style="fill: green;transform-box: fill-box;" transform-origin="125 125">
70
49
<circle cx="125" cy="125" r="25"/>
71
50
</g>
72
-
<g data-object="--orange" style="fill: orange;transform-box: fill-box;" transform-origin="125 75">
51
+
<g data-object="--purple" style="fill: purple;transform-box: fill-box;" transform-origin="25 125">
52
+
<circle cx="25" cy="125" r="25"/>
53
+
</g>
54
+
<g data-object="--brown" style="fill: brown;transform-box: fill-box;" transform-origin="125 75">
73
55
<circle cx="125" cy="75" r="25"/>
74
56
</g>
75
-
<g data-object="--red" style="fill: red;transform-box: fill-box;" transform-origin="175 75">
76
-
<circle cx="175" cy="75" r="25"/>
57
+
<g data-object="--orange" style="fill: orange;transform-box: fill-box;" transform-origin="25 75">
58
+
<circle cx="25" cy="75" r="25"/>
77
59
</g>
78
60
</g>
79
61
<defs/>
paper/dna-analysis-machine.png
paper/dna-analysis-machine.png
This is a binary file and will not be displayed.
+33
paper/grid.svg
+33
paper/grid.svg
···
1
+
<svg height="170" viewBox="-10 -10 170 170" width="170" xmlns="http://www.w3.org/2000/svg">
2
+
<rect fill="white" height="170" width="170" x="-10" y="-10"/>
3
+
<g class="layer" data-layer="root">
4
+
<g data-object="--(1, 0)" style="fill: black;transform-box: fill-box;" transform-origin="75 25">
5
+
<circle cx="50" cy="0" r="2"/>
6
+
</g>
7
+
<g data-object="--(2, 0)" style="fill: black;transform-box: fill-box;" transform-origin="125 25">
8
+
<circle cx="100" cy="0" r="2"/>
9
+
</g>
10
+
<g data-object="--(0, 1)" style="fill: black;transform-box: fill-box;" transform-origin="25 75">
11
+
<circle cx="0" cy="50" r="2"/>
12
+
</g>
13
+
<g data-object="--(0, 2)" style="fill: black;transform-box: fill-box;" transform-origin="25 125">
14
+
<circle cx="0" cy="100" r="2"/>
15
+
</g>
16
+
<g data-object="--(0, 0)" style="fill: black;transform-box: fill-box;" transform-origin="25 25">
17
+
<circle cx="0" cy="0" r="2"/>
18
+
</g>
19
+
<g data-object="--(1, 1)" style="fill: black;transform-box: fill-box;" transform-origin="75 75">
20
+
<circle cx="50" cy="50" r="2"/>
21
+
</g>
22
+
<g data-object="--(2, 2)" style="fill: black;transform-box: fill-box;" transform-origin="125 125">
23
+
<circle cx="100" cy="100" r="2"/>
24
+
</g>
25
+
<g data-object="--(1, 2)" style="fill: black;transform-box: fill-box;" transform-origin="75 125">
26
+
<circle cx="50" cy="100" r="2"/>
27
+
</g>
28
+
<g data-object="--(2, 1)" style="fill: black;transform-box: fill-box;" transform-origin="125 75">
29
+
<circle cx="100" cy="50" r="2"/>
30
+
</g>
31
+
</g>
32
+
<defs/>
33
+
</svg>
paper/main.pdf
paper/main.pdf
This is a binary file and will not be displayed.
+12
-21
paper/main.typ
+12
-21
paper/main.typ
···
81
81
caption: "Vocabulaire visuel des premières ébauches: grille de placement à 9 points, formes et couleurs",
82
82
grid(
83
83
columns: (1fr, 1fr, 1fr),
84
-
gutter:3em,
85
-
grid.cell(
86
-
align: center,
87
-
grid(
88
-
columns: (2em, 2em, 2em),
89
-
rows: (2em, 2em, 2em),
90
-
gutter: 1em,
91
-
..range(9).map(it => circle(radius: 0.2em, fill: black))
92
-
)
93
-
),
84
+
gutter: 3em,
85
+
grid.cell(image("./grid.svg"), align: center),
94
86
grid.cell(image("./shapeshed.svg"), align: center),
95
87
grid.cell(image("./colorshed.svg"), align: center)
96
88
)
···
134
126
135
127
En exportant la _crate_ shapemaker en bibliothèque Javascript via wasm-bindgen @wasmbindgen, il est donc possible d'exoser à une balise #raw("<script>", lang: "html") les fonctions de la bibliothèque, et brancher donc celles-ci à des _callbacks_ donnés par l'API WebMIDI:
136
128
137
-
#grid(
129
+
#figure(
130
+
caption: "Exposition de fonctions à WASM depuis Rust, et utilisation de celles-ci dans un script Javascript",
131
+
grid(
138
132
columns: (1fr, 1fr),
139
133
gutter: 2em,
140
-
figure(caption: "Exposition de fonctions à WASM depuis Rust", text(size: 0.7em, [
134
+
text(size: 0.8em, [
141
135
```rust
142
136
#[wasm_bindgen]
143
137
pub fn render_image(opacity: f32, color: Color) -> Result<(), JsValue> {
···
149
143
Ok(())
150
144
}
151
145
```
152
-
])),
153
-
figure(caption: "Utilisation des fonctions exposées dans un script Javascript", text(size: 0.7em, [
146
+
]),
147
+
text(size: 0.8em, [
154
148
```js
155
149
import init, { render_image } from "./shapemaker.js"
156
150
157
151
void init()
158
152
159
-
navigator.requestMIDIAccess().then((midiAccess) => {
160
-
Array.from(midiAccess.inputs).forEach((input) => {
153
+
navigator.requestMIDIAccess().then((midi) => {
154
+
Array.from(midi.inputs).forEach((input) => {
161
155
input[1].onmidimessage = (msg) => {
162
156
const [cmd, ...args] = [...msg.data]
163
157
if (cmd !== 144) return
164
158
165
-
// Touche enfoncée
166
159
const [pitch, velocity] = args
167
-
168
-
// get octave from pitch
169
160
const octave = Math.floor(pitch / 12) - 1
170
161
171
162
if (velocity === 0) {
···
177
168
})
178
169
})
179
170
```
180
-
]))
181
-
)
171
+
])
172
+
))
182
173
183
174
Au final, on peut arriver à une performance live interactive @pianowasmdemo intéréssante, et assez réactive pour ne pas avoir de latence (et donc de désynchronisation audio/vidéo) perceptible.
184
175
+9
-9
paper/shapeshed.svg
+9
-9
paper/shapeshed.svg
···
4
4
<g data-object="--7" style="fill: black;transform-box: fill-box;" transform-origin="25 125">
5
5
<rect height="50" width="50" x="0" y="100"/>
6
6
</g>
7
-
<g data-object="--5" style="stroke: black; fill: transparent;transform-box: fill-box;" transform-origin="100 100">
8
-
<line stroke-width="5" x1="50" x2="100" y1="50" y2="100"/>
9
-
</g>
10
7
<g data-object="--4" style="fill: black;transform-box: fill-box;" transform-origin="25 75">
11
8
<circle cx="0" cy="50" r="5"/>
12
-
</g>
13
-
<g data-object="--3" style="stroke: black; fill: transparent;transform-box: fill-box;" transform-origin="150 50">
14
-
<path d="M100,50 Q100,0,150,0" stroke-width="5"/>
15
-
</g>
16
-
<g data-object="--2" style="stroke: black; fill: transparent;transform-box: fill-box;" transform-origin="100 50">
17
-
<path d="M50,50 Q100,50,100,0" stroke-width="5"/>
18
9
</g>
19
10
<g data-object="--6" style="fill: black;transform-box: fill-box;" transform-origin="150 100">
20
11
<path d="M100,50 L150,50 L150,100 z"/>
···
22
13
<g data-object="--8" style="fill: black;transform-box: fill-box;" transform-origin="125 175">
23
14
<circle cx="100" cy="150" r="2"/>
24
15
</g>
16
+
<g data-object="--5" style="stroke: black; fill: transparent;transform-box: fill-box;" transform-origin="100 100">
17
+
<line stroke-width="5" x1="50" x2="100" y1="50" y2="100"/>
18
+
</g>
19
+
<g data-object="--3" style="stroke: black; fill: transparent;transform-box: fill-box;" transform-origin="150 50">
20
+
<path d="M100,50 Q100,0,150,0" stroke-width="5"/>
21
+
</g>
25
22
<g data-object="--1" style="fill: black;transform-box: fill-box;" transform-origin="25 25">
26
23
<circle cx="25" cy="25" r="25"/>
24
+
</g>
25
+
<g data-object="--2" style="stroke: black; fill: transparent;transform-box: fill-box;" transform-origin="100 50">
26
+
<path d="M50,50 Q100,50,100,0" stroke-width="5"/>
27
27
</g>
28
28
</g>
29
29
<defs/>
+2
-1
src/cli/mod.rs
+2
-1
src/cli/mod.rs
···
14
14
15
15
Usage: shapemaker (image|video) [options] [--color <mapping>...] <file>
16
16
shapemaker beacon start [options] [--color <mapping>...] <file>
17
-
shapemaker examples (dna-analysis-machine|shapeshed|colors-shed) [options] <file>
17
+
shapemaker examples (dna-analysis-machine|shapeshed|colors-shed|grid) [options] <file>
18
18
shapemaker --help
19
19
shapemaker --version
20
20
···
84
84
pub cmd_dna_analysis_machine: bool,
85
85
pub cmd_shapeshed: bool,
86
86
pub cmd_colors_shed: bool,
87
+
pub cmd_grid: bool,
87
88
pub arg_file: String,
88
89
pub flag_version: bool,
89
90
pub flag_color: Vec<String>,
+14
-4
src/examples.rs
+14
-4
src/examples.rs
···
60
60
61
61
pub fn colors_shed() -> Canvas {
62
62
let mut canvas = Canvas::new(vec!["circles"]);
63
-
canvas.set_grid_size(4, 3);
63
+
canvas.set_grid_size(3, 3);
64
64
canvas.canvas_outter_padding = 0;
65
65
66
66
let all_colors = vec![
67
-
Color::Gray,
68
-
Color::Black,
69
67
Color::Blue,
70
68
Color::Cyan,
71
-
Color::White,
72
69
Color::Yellow,
73
70
Color::Orange,
74
71
Color::Red,
···
96
93
);
97
94
}
98
95
96
+
canvas
97
+
}
98
+
99
+
pub fn grid() -> Canvas {
100
+
let mut canvas = Canvas::new(vec![]);
101
+
canvas.set_grid_size(3, 3);
102
+
canvas.set_background(Color::White);
103
+
for point in canvas.world_region.iter() {
104
+
canvas.root().add_object(
105
+
point.to_string(),
106
+
Object::Dot(point).color(Fill::Solid(Color::Black)),
107
+
);
108
+
}
99
109
canvas
100
110
}
101
111