1size 960 600
2background #050817
3timeline 30 300
4
5// Relier les sept étoiles de la Grande Ourse. `trace` suit le doigt le long du tracé : avec `step`, il ne
6// compte que le chemin vraiment parcouru (pas de raccourci), `both ends` laisse partir d'un bout comme de
7// l'autre, et `point` donne la pointe du stylo. L'encre (`draw`) mesure la même longueur : elle tombe pile
8// sous le doigt. Quand tout est relié, l'ours se dessine autour.
9def P = "M220 210 L330 190 L430 220 L530 260 L570 370 L740 370 L740 240 L552 257"
10
11var progres = 0
12var tipX = 220
13var tipY = 210
14var sx = [220, 330, 430, 530, 570, 740, 740]
15var sy = [210, 190, 220, 260, 370, 370, 240]
16var vue = [0, 0, 0, 0, 0, 0, 0]
17var quand = [-99, -99, -99, -99, -99, -99, -99]
18var fini = 0
19var ax = 220
20var ay = 210
21var tfin = -99
22
23// Distance d'un point au segment parcouru par la pointe depuis le pas précédent : une étoile est vue même
24// quand le doigt va vite et que la pointe saute par-dessus.
25fn proj(px, py, x0, y0, x1, y1) = clamp(((px - x0) * (x1 - x0) + (py - y0) * (y1 - y0)) / max(0.0001, (x1 - x0) * (x1 - x0) + (y1 - y0) * (y1 - y0)), 0, 1)
26fn dseg(px, py, x0, y0, x1, y1) = hypot(px - (x0 + (x1 - x0) * proj(px, py, x0, y0, x1, y1)), py - (y0 + (y1 - y0) * proj(px, py, x0, y0, x1, y1)))
27
28symbol "Etoile"(n) {
29 layer "c" {
30 circle 0 0 26 fill radial(0.5, 0.5, 0.5, 0:#fff6d055, 1:#fff6d000)
31 path "M0 -11 L3 -3 L11 0 L3 3 L0 11 L-3 3 L-11 0 L-3 -3 Z" fill #fff6d0
32 circle 0 0 3 fill #ffffff
33 }
34}
35
36scene {
37 layer "Ciel" {
38 rect 0 0 960 600 fill radial(0.5, 0.4, 0.8, 0:#121a46, 1:#03040d)
39 repeat i from 0 to 120 { circle $(mod(i * 433, 960)) $(mod(i * 257, 600)) $(0.4 + mod(i, 3) * 0.45) fill #ffffff opacity $(0.12 + mod(i, 5) * 0.1) }
40 path "M0 560 C220 530 420 552 640 540 C800 532 900 548 960 544 L960 600 L0 600 Z" fill #02030a
41 }
42 layer "Ours" {
43 group "Ours" at 0,0 nohit {
44 layer "c" {
45 path "M220 210 C300 190 380 196 440 206 C520 220 600 214 690 204 C730 200 760 196 785 200 C796 180 818 174 832 188 C848 184 862 196 862 212 C884 220 898 240 886 256 C868 268 838 264 818 272 C806 300 806 340 812 400 C816 430 806 446 786 446 C768 446 762 428 762 402 C740 406 700 408 660 406 C630 405 610 406 598 406 C600 432 592 448 572 448 C552 448 546 430 548 402 C524 372 500 332 486 302 C462 268 420 242 360 228 C300 216 250 218 220 210 Z" nofill stroke #8fb0ff 2 join round dash 6,8 draw "fini * clamp((clock - tfin - 0.4) * 0.45, 0, 1)"
46 group "Oeil" at 852,220 nohit { layer "c" { circle 0 0 4 fill #8fb0ff } }
47 }
48 }
49 }
50 layer "Guide" {
51 path "$(P)" nofill stroke #ffffff14 24 cap round join round nohit
52 path "$(P)" nofill stroke #ffffff38 2 dash 2,10 cap round nohit
53 }
54 layer "Encre" {
55 path "$(P)" nofill stroke #7fb2ff40 16 cap round join round draw "progres" nohit
56 path "$(P)" nofill stroke #e6f0ff 4 cap round join round draw "progres" nohit
57 }
58 layer "Etoiles" {
59 repeat i from 0 to 6 { instance "Etoile"($(i)) as "S$(i)" at $([220, 330, 430, 530, 570, 740, 740][i]),$([210, 190, 220, 260, 370, 370, 240][i]) pivot 0,0 nohit }
60 }
61 layer "Chemin" {
62 group "Chemin" at 0,0 {
63 layer "c" { path "$(P)" nofill stroke #ffffff01 40 cap round join round }
64 }
65 }
66 layer "Stylo" {
67 group "Stylo" at 220,210 pivot 0,0 nohit {
68 layer "c" { circle 0 0 22 fill radial(0.5, 0.5, 0.5, 0:#9fc4ff88, 1:#9fc4ff00) circle 0 0 6 fill #ffffff }
69 }
70 }
71 layer "Textes" {
72 text "LA GRANDE OURSE" at 32,28 font "Geist, system-ui, sans-serif" size 26 bold align left line 1.2 color #e6f0ff box 400 34
73 text "relie les sept étoiles sans lever le doigt… ou presque" at 32,62 font "Geist, system-ui, sans-serif" size 15 align left line 1.2 color #8f9cc8 box 460 22
74 text "{} %" as "Pourcent" at 790,28 font "Geist Mono, ui-monospace, monospace" size 22 bold align right line 1.2 color #9fc4ff box 140 30 bind "round(progres * 100)"
75 group "Effacer" at 870,560 hitbox 130 40 {
76 layer "c" { rect -60 -17 120 34 17 fill #ffffff10 stroke #ffffff40 1.5 text "effacer" at -60,-17 font "Geist, system-ui, sans-serif" size 15 bold align center line 1.2 color #c9d6ff box 120 34 valign middle }
77 }
78 group "Bravo" at 480,520 pivot 0,0 nohit {
79 layer "c" { text "Tu as dessiné la Grande Ourse !" at -300,-18 font "Geist, system-ui, sans-serif" size 28 bold align center line 1.2 color #fff6d0 box 600 36 }
80 }
81 }
82}
83
84object "Chemin" {
85 trace progres along Chemin {
86 tolerance 34
87 step 70
88 both ends
89 point tipX, tipY
90 }
91}
92object "Stylo" {
93 x = tipX
94 y = tipY
95 opacity = fini ? 0 : 1
96}
97each "Etoile" as i {
98 scaleX = 0.55 + 0.45 * vue[i] + 0.6 * pulse(quand[i], 0.8)
99 scaleY = 0.55 + 0.45 * vue[i] + 0.6 * pulse(quand[i], 0.8)
100 opacity = 0.45 + 0.55 * vue[i]
101}
102object "Effacer" {
103 focusable
104 feedback lift
105 when clicked {
106 progres = 0
107 vue = fill(7, 0)
108 fini = 0
109 }
110}
111object "Oeil" { opacity = fini * clamp((clock - tfin - 2.2) * 2, 0, 1) }
112object "Bravo" {
113 opacity = fini * clamp((clock - tfin - 0.2) * 2, 0, 1)
114 dy = 3 * sin(clock * 1.6)
115}
116
117// Une étoile s'allume quand la pointe du stylo passe dessus, dans un sens comme dans l'autre.
118every frame {
119 if progres > 0 {
120 repeat i from 0 to 6 {
121 if vue[i] == 0 {
122 if dseg(sx[i], sy[i], ax, ay, tipX, tipY) < 16 {
123 vue[i] = 1
124 quand[i] = clock
125 }
126 }
127 }
128 }
129 ax = tipX
130 ay = tipY
131 if progres >= 0.995 {
132 if fini == 0 {
133 fini = 1
134 tfin = clock
135 send "constellation"
136 }
137 }
138}