This repository has no description
:bug: Fix citations, format code a bit
author
Gwenn Le Bihan
date
(Mar 22, 2025, 8:50 PM +0100)
commit
de7af48e
de7af48ea219cee1825846fdc787c507bd8ddc6b
parent
da869966
da869966a34f5dcac11ec379aafe125e5a0c6344
+51
-45
+6
-6
paper/bibliography.yaml
+6
-6
paper/bibliography.yaml
···
10
10
type: reference
11
11
title: Web MIDI API
12
12
url: https://developer.mozilla.org/en-US/docs/Web/API/Web_MIDI_API
13
-
date: 2025-03-22
13
+
# date: 2025-03-22
14
14
organization: Mozilla Developer Network
15
15
author: MDN Authors
16
16
···
25
25
type: book
26
26
title: The `wasm-bindgen` Guide
27
27
url: https://rustwasm.github.io/wasm-bindgen/introduction.html
28
-
date: 2025-03-22
28
+
# date: 2025-03-22
29
29
author: Rust and WebAssembly Working Group
30
30
31
31
wasm:
32
32
title: WebAssembly
33
33
type: web
34
34
url: https://webassembly.org/
35
-
date: 2025-03-22
35
+
# date: 2025-03-22
36
36
author: WebAssembly Community Group
37
37
38
38
svginhtml:
···
52
52
title: WebAssembly — Le langage de programmation Rust
53
53
type: web
54
54
url: https://www.rust-lang.org/fr/what/wasm
55
-
date: 2025-03-22
55
+
# date: 2025-03-22
56
56
author: Rust authors
57
57
language: fr-FR
58
58
···
60
60
title: "Go Wiki: WebAssembly"
61
61
type: web
62
62
url: https://go.dev/wiki/WebAssembly
63
-
date: 2025-03-22
63
+
# date: 2025-03-22
64
64
author: Go language authors
65
65
66
66
planetary-folklore-period:
67
67
title: Planetary Folklore Period
68
68
type: web
69
69
url: https://www.fondationvasarely.org/en/planetary-folklore-period/
70
-
date: 2025-03-22
70
+
# date: 2025-03-22
71
71
author: Fondation Vasarely
72
72
73
73
vasarely-majus:
paper/main.pdf
paper/main.pdf
This is a binary file and will not be displayed.
+45
-39
paper/main.typ
+45
-39
paper/main.typ
···
8
8
date: "22 Mars 2025",
9
9
keywords: ("audiovisuel", "procédural", "SVG", "Rust", "WASM", "WebMIDI", "VST"),
10
10
)
11
-
#set cite(style: "chicago-author-date")
11
+
12
+
#let citeauthor(label) = cite(label, style: "chicago-author-date")
13
+
#let imagefigure(path, caption) = figure(image(path, width: 100%), caption: caption)
14
+
12
15
#show link: underline
13
16
14
17
#align(center, pad(y: 2em, image("./dna-analysis-machine.png", width: 75%)))
···
31
34
#grid(
32
35
columns: (1fr, 1.5fr),
33
36
gutter: 2em,
34
-
figure(image("./majus.png", width: 100%), caption: [MAJUS @vasarely-majus]),
37
+
imagefigure("./majus.png", [MAJUS #citeauthor(<vasarely-majus>)]),
35
38
[
36
39
Fascinée depuis longtemps par les œuvres du plasticien et artiste Op-Art _Victor Vasarely_, j'ai été saisie par une de ses périodes, la période "Planetary Folklore", pendant laquelle il a expérimenté à travers plusieurs œuvres autour de l'idée d'un alphabet universel employant des séries combinaisons simples de formes et couleurs. D'apparence très simple, ces combinaisons sont d'une manières assez fascinantes uniques, d'où l'idée d'alphabet @planetary-folklore-period.
37
40
···
44
47
#grid(
45
48
columns: (1fr, 1fr),
46
49
gutter: 1em,
47
-
figure(image("./alphabetdesformes.png", width: 100%), caption: "Un “alphabet” incomplet"),
48
-
figure(image("./alphabetdesformes.svg", width: 100%), caption: "Une vectorisation")
50
+
imagefigure("./alphabetdesformes.png", "Un “alphabet” incomplet"),
51
+
imagefigure("./alphabetdesformes.svg", "Une vectorisation")
49
52
)
50
53
51
54
Principalement par simple intérêt esthétique, je vectorise cette page via Illustrator. Vectoriser signifie convertir une image bitmap, représentée par des pixels, en une image vectorielle, qui est décrite par une série d'instructions permettant de tracer des vecteurs (d'où le nom), leur ajouter des attributs comme des couleurs, des règles de remplissage (Even-Odd, Non-Zero, etc.), des effets de dégradés, etc.
···
102
105
103
106
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:
104
107
105
-
#figure(caption: "Exposition de fonctions à WASM depuis Rust", [
106
-
```rust
107
-
#[wasm_bindgen]
108
-
pub fn render_image(opacity: f32, color: Color) -> Result<(), JsValue> {
109
-
let mut canvas = /* ... */
110
-
111
-
*WEB_CANVAS.lock().unwrap() = canvas;
112
-
render_canvas_at(String::from("body"));
108
+
#grid(
109
+
columns: (1fr, 1fr),
110
+
gutter: 2em,
111
+
figure(caption: "Exposition de fonctions à WASM depuis Rust", text(size: 0.7em, [
112
+
```rust
113
+
#[wasm_bindgen]
114
+
pub fn render_image(opacity: f32, color: Color) -> Result<(), JsValue> {
115
+
let mut canvas = /* ... */
113
116
114
-
Ok(())
115
-
}
116
-
```
117
-
])
117
+
*WEB_CANVAS.lock().unwrap() = canvas;
118
+
render_canvas_at(String::from("body"));
118
119
119
-
#figure(caption: "Utilisation des fonctions exposées dans un script Javascript", [
120
-
```js
121
-
import init, { render_image } from "./shapemaker.js"
120
+
Ok(())
121
+
}
122
+
```
123
+
])),
124
+
figure(caption: "Utilisation des fonctions exposées dans un script Javascript", text(size: 0.7em, [
125
+
```js
126
+
import init, { render_image } from "./shapemaker.js"
122
127
123
-
void init()
128
+
void init()
124
129
125
-
navigator.requestMIDIAccess().then((midiAccess) => {
126
-
Array.from(midiAccess.inputs).forEach((input) => {
127
-
input[1].onmidimessage = (msg) => {
128
-
const [cmd, ...args] = [...msg.data]
129
-
if (cmd !== 144) return
130
+
navigator.requestMIDIAccess().then((midiAccess) => {
131
+
Array.from(midiAccess.inputs).forEach((input) => {
132
+
input[1].onmidimessage = (msg) => {
133
+
const [cmd, ...args] = [...msg.data]
134
+
if (cmd !== 144) return
130
135
131
-
// Touche enfoncée
132
-
const [pitch, velocity] = args
136
+
// Touche enfoncée
137
+
const [pitch, velocity] = args
133
138
134
-
// get octave from pitch
135
-
const octave = Math.floor(pitch / 12) - 1
139
+
// get octave from pitch
140
+
const octave = Math.floor(pitch / 12) - 1
136
141
137
-
if (velocity === 0) {
138
-
fadeOutElement(frameElement(color))
139
-
} else {
140
-
render_image(velocity / 128, octave)
141
-
}
142
-
}
143
-
})
144
-
})
145
-
```
146
-
])
142
+
if (velocity === 0) {
143
+
fadeOutElement(frameElement(color))
144
+
} else {
145
+
render_image(velocity / 128, octave)
146
+
}
147
+
}
148
+
})
149
+
})
150
+
```
151
+
]))
152
+
)
147
153
148
154
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.
149
155