1size 800 480
2background #e9f6fb
3timeline 24 96
4
5// Un vrai coloriage : choisis un pot, touche une partie du poisson. Chaque partie existe en cinq couleurs
6// (un symbole paramétré posé une fois par couleur) et seule celle choisie est visible (`each` règle
7// l'opacité). Quand les quatre parties sont coloriées, le poisson se met à nager.
8var pinceau = 0
9var couleur = [-1, -1, -1, -1]
10var fini = 0
11var tfin = -99
12
13symbol "Teinte"(forme, teinte) {
14 layer "c" { path "$(forme)" fill $(teinte) }
15}
16
17scene {
18 layer "Eau" {
19 rect 0 0 800 480 fill linear(90, 0:#e9f6fb, 1:#bfe3f2)
20 path "M0 420 C120 404 240 430 400 414 C560 398 680 426 800 410 L800 480 L0 480 Z" fill #f2dfb0
21 path "M90 420 C80 380 100 350 92 320 M110 420 C116 390 104 360 118 334" nofill stroke #5ab08a 6 cap round
22 path "M700 416 C690 380 710 352 702 318 M720 414 C728 384 714 356 730 330" nofill stroke #5ab08a 6 cap round
23 }
24 layer "Poisson" {
25 group "Poisson" at 0,0 pivot 380,250 {
26 layer "c" {
27 group "Base0" at 0,0 { layer "c" { path "M520 250L630 170L610 250L630 330Z" fill #ffffff } }
28 instance "Teinte"("M520 250L630 170L610 250L630 330Z", "#ff7a2f") as "Z0C0" at 0,0
29 instance "Teinte"("M520 250L630 170L610 250L630 330Z", "#ffc14d") as "Z0C1" at 0,0
30 instance "Teinte"("M520 250L630 170L610 250L630 330Z", "#4aa3ff") as "Z0C2" at 0,0
31 instance "Teinte"("M520 250L630 170L610 250L630 330Z", "#ef5aa0") as "Z0C3" at 0,0
32 instance "Teinte"("M520 250L630 170L610 250L630 330Z", "#5ad18a") as "Z0C4" at 0,0
33 group "Base1" at 0,0 { layer "c" { path "M530 250C530 302.47 462.85 345 380 345C297.15 345 230 302.47 230 250C230 197.53 297.15 155 380 155C462.85 155 530 197.53 530 250Z" fill #ffffff } }
34 instance "Teinte"("M530 250C530 302.47 462.85 345 380 345C297.15 345 230 302.47 230 250C230 197.53 297.15 155 380 155C462.85 155 530 197.53 530 250Z", "#ff7a2f") as "Z1C0" at 0,0
35 instance "Teinte"("M530 250C530 302.47 462.85 345 380 345C297.15 345 230 302.47 230 250C230 197.53 297.15 155 380 155C462.85 155 530 197.53 530 250Z", "#ffc14d") as "Z1C1" at 0,0
36 instance "Teinte"("M530 250C530 302.47 462.85 345 380 345C297.15 345 230 302.47 230 250C230 197.53 297.15 155 380 155C462.85 155 530 197.53 530 250Z", "#4aa3ff") as "Z1C2" at 0,0
37 instance "Teinte"("M530 250C530 302.47 462.85 345 380 345C297.15 345 230 302.47 230 250C230 197.53 297.15 155 380 155C462.85 155 530 197.53 530 250Z", "#ef5aa0") as "Z1C3" at 0,0
38 instance "Teinte"("M530 250C530 302.47 462.85 345 380 345C297.15 345 230 302.47 230 250C230 197.53 297.15 155 380 155C462.85 155 530 197.53 530 250Z", "#5ad18a") as "Z1C4" at 0,0
39 group "Base2" at 0,0 { layer "c" { path "M350 192L420 140L414 196Z" fill #ffffff } }
40 instance "Teinte"("M350 192L420 140L414 196Z", "#ff7a2f") as "Z2C0" at 0,0
41 instance "Teinte"("M350 192L420 140L414 196Z", "#ffc14d") as "Z2C1" at 0,0
42 instance "Teinte"("M350 192L420 140L414 196Z", "#4aa3ff") as "Z2C2" at 0,0
43 instance "Teinte"("M350 192L420 140L414 196Z", "#ef5aa0") as "Z2C3" at 0,0
44 instance "Teinte"("M350 192L420 140L414 196Z", "#5ad18a") as "Z2C4" at 0,0
45 group "Base3" at 0,0 { layer "c" { path "M480 288C480 314.51 430.75 336 370 336C309.25 336 260 314.51 260 288C260 261.49 309.25 240 370 240C430.75 240 480 261.49 480 288Z" fill #ffffff } }
46 instance "Teinte"("M480 288C480 314.51 430.75 336 370 336C309.25 336 260 314.51 260 288C260 261.49 309.25 240 370 240C430.75 240 480 261.49 480 288Z", "#ff7a2f") as "Z3C0" at 0,0
47 instance "Teinte"("M480 288C480 314.51 430.75 336 370 336C309.25 336 260 314.51 260 288C260 261.49 309.25 240 370 240C430.75 240 480 261.49 480 288Z", "#ffc14d") as "Z3C1" at 0,0
48 instance "Teinte"("M480 288C480 314.51 430.75 336 370 336C309.25 336 260 314.51 260 288C260 261.49 309.25 240 370 240C430.75 240 480 261.49 480 288Z", "#4aa3ff") as "Z3C2" at 0,0
49 instance "Teinte"("M480 288C480 314.51 430.75 336 370 336C309.25 336 260 314.51 260 288C260 261.49 309.25 240 370 240C430.75 240 480 261.49 480 288Z", "#ef5aa0") as "Z3C3" at 0,0
50 instance "Teinte"("M480 288C480 314.51 430.75 336 370 336C309.25 336 260 314.51 260 288C260 261.49 309.25 240 370 240C430.75 240 480 261.49 480 288Z", "#5ad18a") as "Z3C4" at 0,0
51 group "Traits" at 0,0 nohit {
52 layer "c" {
53 path "M520 250L630 170L610 250L630 330Z" nofill stroke #2b3a4a 5 cap round join round
54 path "M350 192L420 140L414 196Z" nofill stroke #2b3a4a 5 cap round join round
55 path "M530 250C530 302.47 462.85 345 380 345C297.15 345 230 302.47 230 250C230 197.53 297.15 155 380 155C462.85 155 530 197.53 530 250Z" nofill stroke #2b3a4a 5 cap round join round
56 path "M480 288C480 314.51 430.75 336 370 336C309.25 336 260 314.51 260 288C260 261.49 309.25 240 370 240C430.75 240 480 261.49 480 288Z" nofill stroke #2b3a4a 5 cap round join round
57 circle 285 228 13 fill #2b3a4a
58 circle 281 224 4 fill #ffffff
59 path "M240 262 C252 270 262 270 272 266" nofill stroke #2b3a4a 4 cap round
60 }
61 }
62 }
63 }
64 }
65 layer "Palette" {
66 rect 220 404 360 60 30 fill #ffffffd0 stroke #b9d6e2 2
67 group "P0" at 260,434 pivot 0,0 hitbox 56 56 { layer "c" { circle 0 0 21 fill #ff7a2f stroke #2b3a4a 2 } }
68 group "P1" at 330,434 pivot 0,0 hitbox 56 56 { layer "c" { circle 0 0 21 fill #ffc14d stroke #2b3a4a 2 } }
69 group "P2" at 400,434 pivot 0,0 hitbox 56 56 { layer "c" { circle 0 0 21 fill #4aa3ff stroke #2b3a4a 2 } }
70 group "P3" at 470,434 pivot 0,0 hitbox 56 56 { layer "c" { circle 0 0 21 fill #ef5aa0 stroke #2b3a4a 2 } }
71 group "P4" at 540,434 pivot 0,0 hitbox 56 56 { layer "c" { circle 0 0 21 fill #5ad18a stroke #2b3a4a 2 } }
72 group "Choix" at 260,434 pivot 0,0 nohit { layer "c" { circle 0 0 27 nofill stroke #2b3a4a 3 } }
73 }
74 layer "Textes" {
75 text "LE COLORIAGE MAGIQUE" at 24,20 font "Geist, system-ui, sans-serif" size 24 bold align left line 1.2 color #1f4a63 box 400 32
76 text "choisis une couleur, puis touche le poisson" at 24,52 font "Geist, system-ui, sans-serif" size 15 align left line 1.2 color #4f7f99 box 400 22
77 }
78}
79
80object "P0" {
81 when clicked { pinceau = 0 }
82 scaleX = self.hovered ? 1.12 : 1
83 scaleY = self.hovered ? 1.12 : 1
84}
85object "P1" {
86 when clicked { pinceau = 1 }
87 scaleX = self.hovered ? 1.12 : 1
88 scaleY = self.hovered ? 1.12 : 1
89}
90object "P2" {
91 when clicked { pinceau = 2 }
92 scaleX = self.hovered ? 1.12 : 1
93 scaleY = self.hovered ? 1.12 : 1
94}
95object "P3" {
96 when clicked { pinceau = 3 }
97 scaleX = self.hovered ? 1.12 : 1
98 scaleY = self.hovered ? 1.12 : 1
99}
100object "P4" {
101 when clicked { pinceau = 4 }
102 scaleX = self.hovered ? 1.12 : 1
103 scaleY = self.hovered ? 1.12 : 1
104}
105object "Choix" {
106 smooth x = 260 + pinceau * 70 { k 0.3 }
107}
108object "Base0" {
109 when clicked { colorie(0) }
110}
111object "Base1" {
112 when clicked { colorie(1) }
113}
114object "Base2" {
115 when clicked { colorie(2) }
116}
117object "Base3" {
118 when clicked { colorie(3) }
119}
120each "Teinte" as i {
121 opacity = couleur[floor(i / 5)] == mod(i, 5) ? 1 : 0
122 when clicked { colorie(floor(i / 5)) }
123}
124object "Poisson" {
125 dx = fini * 26 * sin((clock - tfin) * 1.6)
126 dy = fini * 10 * sin((clock - tfin) * 3.2)
127 rotationDeg = fini * 4 * cos((clock - tfin) * 1.6)
128}
129
130fn colorie(z) {
131 couleur[z] = pinceau
132 if couleur[0] >= 0 && couleur[1] >= 0 && couleur[2] >= 0 && couleur[3] >= 0 {
133 if fini == 0 {
134 fini = 1
135 tfin = clock
136 send "colorie"
137 }
138 }
139}