Source
1size 820 540
2background #060a1e
3use "gesture"
4
5// `link` : on tire un fil de chaque étiquette vers une planète (un enfant nommé du groupe Planetes). Pendant
6// le geste, ex/ey suivent le doigt. Au relâchement, `cible` vaut l'index de la planète touchée (0 = aucune)
7// et le bout du fil s'y accroche. Les trois étiquettes sont un seul symbole paramétré, et `each` leur donne
8// à chacune le même comportement.
9// Le fil est une courbe (`polyline`) dont le milieu est une masse sur un ressort (`every frame`) : tiré, il
10// pend et traîne derrière le doigt ; accroché, il se tend d'un coup et vibre comme une corde pincée.
11def N = 16
12var ex = [236, 236, 236]
13var ey = [150, 270, 390]
14var cible = [0, 0, 0]
15var bon = [3, 1, 2]
16var ok = [0, 0, 0]
17var tire = [0, 0, 0]
18var rate = [-99, -99, -99]
19var mx = [236, 236, 236]
20var my = [150, 270, 390]
21var vx = [0, 0, 0]
22var vy = [0, 0, 0]
23var f0x = fill($(N), 236)
24var f0y = fill($(N), 150)
25var f1x = fill($(N), 236)
26var f1y = fill($(N), 270)
27var f2x = fill($(N), 236)
28var f2y = fill($(N), 390)
29var nb = 0
30var fini = 0
31var tfin = -99
32
33symbol "Etiquette"(nom, i) {
34 layer "c" {
35 rect -86 -26 172 52 26 fill #ffffff10 stroke #7f93d6 2
36 text "$(nom)" at -86,-26 font "Geist, system-ui, sans-serif" size 22 bold align center line 1.2 color #e6ebff box 172 52 valign middle
37 circle 86 0 7 fill #9fb4ff
38 }
39}
40symbol "Fil"(i) {
41 layer "c" {
42 polyline f$(i)x f$(i)y nofill stroke #9fb4ff33 9 cap round join round
43 polyline f$(i)x f$(i)y nofill stroke #b8c8ff 2.5 cap round join round
44 }
45}
46
47// Un point j de la courbe : la corde droite de l'étiquette au bout du fil, déportée en arche (sin) de
48// l'écart entre la masse du milieu et le milieu de la corde.
49fn ax(i) = 236
50fn ay(i) = 150 + i * 120
51fn cx(i, j) = ax(i) + (ex[i] - ax(i)) * j / $(N - 1) + (mx[i] - (ax(i) + ex[i]) / 2) * sin(PI * j / $(N - 1))
52fn cy(i, j) = ay(i) + (ey[i] - ay(i)) * j / $(N - 1) + (my[i] - (ay(i) + ey[i]) / 2) * sin(PI * j / $(N - 1))
53
54scene {
55 layer "Fond" {
56 rect 0 0 820 540 fill radial(0.5, 0.4, 0.8, 0:#101840, 1:#04050f)
57 repeat i from 0 to 70 { circle $(mod(i * 331, 820)) $(mod(i * 173, 540)) $(0.5 + mod(i, 3) * 0.5) fill #ffffff opacity $(0.15 + mod(i, 4) * 0.12) }
58 }
59 layer "Fils" {
60 repeat i from 0 to 2 { instance "Fil"($(i)) as "Fil$(i)" at 0,0 pivot 0,0 nohit }
61 }
62 layer "Cibles" {
63 group "Planetes" pivot 0,0 {
64 layer "c" {
65 group "Terre" at 650,110 pivot 0,0 hitbox 120 120 {
66 layer "c" {
67 circle 0 0 62 fill radial(0.5, 0.5, 0.5, 0:#4aa3ff40, 1:#4aa3ff00)
68 circle 0 0 46 fill radial(0.4, 0.35, 0.7, 0:#8fd0ff, 0.6:#2f7fd8, 1:#123c7a)
69 path "M-26 -20 C-10 -30 6 -22 4 -8 C2 4 -16 6 -22 -4 Z" fill #4fb36a
70 path "M8 6 C22 0 34 10 28 24 C20 34 6 28 8 16 Z" fill #4fb36a
71 path "M-38 12 C-30 8 -24 16 -30 22 Z" fill #4fb36a
72 }
73 }
74 group "Neptune" at 690,270 pivot 0,0 hitbox 120 120 {
75 layer "c" {
76 circle 0 0 62 fill radial(0.5, 0.5, 0.5, 0:#5a7dff40, 1:#5a7dff00)
77 circle 0 0 46 fill radial(0.4, 0.35, 0.7, 0:#bcd0ff, 0.55:#4766e0, 1:#1d2a8a)
78 path "M-44 -10 C-20 -4 20 -4 44 -10" nofill stroke #ffffff2a 6
79 path "M-44 12 C-20 18 20 18 44 12" nofill stroke #00000022 5
80 }
81 }
82 group "Mars" at 650,430 pivot 0,0 hitbox 120 120 {
83 layer "c" {
84 circle 0 0 62 fill radial(0.5, 0.5, 0.5, 0:#ff6b4a40, 1:#ff6b4a00)
85 circle 0 0 46 fill radial(0.4, 0.35, 0.7, 0:#ffc2a0, 0.55:#d9573a, 1:#7a2212)
86 circle -14 -10 7 fill #00000026
87 circle 16 12 10 fill #00000020
88 circle 8 -22 4 fill #00000022
89 }
90 }
91 }
92 }
93 }
94 layer "Etiquettes" {
95 instance "Etiquette"("Mars", 0) as "E0" at 150,150 pivot 0,0 hitbox 200 64
96 instance "Etiquette"("Terre", 1) as "E1" at 150,270 pivot 0,0 hitbox 200 64
97 instance "Etiquette"("Neptune", 2) as "E2" at 150,390 pivot 0,0 hitbox 200 64
98 }
99 layer "Textes" {
100 text "RELIE LES PLANÈTES" at 30,26 font "Geist, system-ui, sans-serif" size 24 bold align left line 1.2 color #e6ebff box 400 32
101 text "tire un fil de chaque nom vers sa planète" at 30,58 font "Geist, system-ui, sans-serif" size 15 align left line 1.2 color #8b9ad0 box 400 22
102 text "{} / 3" as "Compte" at 30,486 font "Geist Mono, ui-monospace, monospace" size 22 bold align left line 1.2 color #9fb4ff box 120 30 bind "nb"
103 group "Bravo" at 400,490 pivot 0,0 nohit {
104 layer "c" { text "Bravo, le système est complet !" at -230,-16 font "Geist, system-ui, sans-serif" size 24 bold align center line 1.2 color #ffe7a8 box 460 32 }
105 }
106 }
107}
108
109each "Etiquette" as i {
110 link ex[i], ey[i], cible[i] to Planetes {
111 enabled ok[i] == 0
112 }
113 when pressed { tire[i] = 1 }
114 when released {
115 tire[i] = 0
116 if cible[i] == bon[i] {
117 ok[i] = 1
118 vy[i] = vy[i] - 700
119 nb = ok[0] + ok[1] + ok[2]
120 } else {
121 if cible[i] > 0 {
122 rate[i] = clock
123 }
124 cible[i] = 0
125 }
126 }
127 dx = 7 * sin(clock * 45) * pulse(rate[i], 0.45)
128 opacity = ok[i] ? 0.7 : 1
129}
130each "Fil" as i {
131 opacity = max(tire[i], ok[i])
132}
133object "Bravo" {
134 opacity = fini * clamp((clock - tfin) * 2, 0, 1)
135}
136
137// Tiré, le fil est mou (ressort faible, il pend d'autant plus qu'il est long) ; accroché, il se tend
138// (ressort raide, peu amorti : il vibre quelques instants) et garde un léger creux.
139every frame {
140 repeat i from 0 to 2 {
141 vx[i] = vx[i] + ((ok[i] ? 1600 : 140) * ((ax(i) + ex[i]) / 2 - mx[i]) - (ok[i] ? 3 : 8) * vx[i]) * DT
142 vy[i] = vy[i] + ((ok[i] ? 1600 : 140) * ((ay(i) + ey[i]) / 2 + (ok[i] ? 0.05 : 0.16) * hypot(ex[i] - ax(i), ey[i] - ay(i)) - my[i]) - (ok[i] ? 3 : 8) * vy[i]) * DT
143 mx[i] = mx[i] + vx[i] * DT
144 my[i] = my[i] + vy[i] * DT
145 }
146 repeat j from 0 to $(N - 1) {
147 f0x[j] = cx(0, j)
148 f0y[j] = cy(0, j)
149 f1x[j] = cx(1, j)
150 f1y[j] = cy(1, j)
151 f2x[j] = cx(2, j)
152 f2y[j] = cy(2, j)
153 }
154 if nb >= 3 {
155 if fini == 0 {
156 fini = 1
157 tfin = clock
158 send "relie"
159 }
160 }
161}
Galerie
FR
FrançaisEnglish

Relie les planètes

Scène animée · 820×540 · 24 img/s
FlatInk
InteractifAssociationFil
Gérer (admin)
Informations
Type
Scène animée
Dimensions
820 × 540
Cadence
24 img/s
Durée
2.5 s · 60 images
Téléchargements
Page web autonome Ouvrir dans l'éditeur
FlatInk