Le code à l’intérieur de cette fonction est exécuté à chaque frame de l’animation, autant de fois par seconde que défini par frameRate
.
À l’intérieur de cette fonction, une variable frameCount
(voir Constantes plus bas) permet d’accéder au nombre de frames écoulées depuis le lancement de l’animation.
L’exécution de cette fonction s’arrêtera après un nombre d’exécution défini dans l’interface.
export function draw () {
log(frameCount)
}
Le code à l’intérieur de cette fonction est exécuté une seule fois, avant le lancement de l’animation.
Utile pour une manipulation de données ou une tâche plus lente, et qui n’a pas besoin d’être effectuée à chaque frame.
export function setup () {
log('hello')
}
Toutes les couleurs sont définies et manipulées dans l’espace colorimétrique RVB (ou RGB en anglais).
Plusieurs utilitaires de l’API permettent de créer et manipuler les couleurs, et la bibliothèque chromajs
permet des manipulations plus avancées.
rgb(gray)
Défini une nuance de gris de 0
à 255
.
const white = rgb(255)
const black = rgb(0)
const gray50 = rgb(127)
rgb(red, green, blue)
Défini une couleur par ses canaux rouge, vert et bleu (de 0
à 255
chacun).
const red = rgb(255, 0, 0)
const green = rgb(0, 255, 0)
const blue = rgb(0, 0, 255)
const niceBlue = rgb(0, 215, 233)
hsl(hue, saturation, lightness)
Défini une couleur par sa teinte (hue
) sur une roue chromatique (de 0°
à 360°
), sa saturation (de 0
à 1
) et sa luminosité (de 0
à 1
).
const red = hsl(360, 1, 0.6)
const sadBlue= hsl(180, 0.3, 0.5)
chroma.*
Permet l’accès à la bibliothèque chromajs
pour effectuer des manipulations chromatiques avancées.
À noter également que chaque objet de couleur instancié avec les méthodes rgb
et hsl
est une instance valide de chroma, et qu'il est par conséquent possible d’utiliser ses méthodes associées :
const red = rgb(255, 0, 0)
const orange = red.brighten(2)
Plusieurs permettent de contrôler les LEDs du bandeau.
Lorsqu’une position est nécessaire, 0
représente toujours la première LED, et ledCount - 1
la dernière LED.
Toutes les fonctions suivantes peuvent prendre un dernier paramètre mixBlendMode
contrôlant le mode de fusion de la couleur sur une couleur existante. Les valeurs possibles sont multiply
, darken
, lighten
, screen
, overlay
, burn
et dodge
. Si aucune valeur n’est spécifiée, la nouvelle couleur écrasera la précédente.
fill(color, mixBlendMode)
Applique la couleur color
à toutes les LEDs du bandeau.
const red = rgb(255, 0, 0)
fill(red)
led(index, color, mixBlendMode)
Applique la couleur color
à la LED de la position index
.
// Allume la première LED en rouge
led(0, rgb(255, 0, 0))
line(from, to, color, mixBlendMode)
Applique la couleur color
à toutes les LEDs entre la position from
et la position to
.
// Une ligne bleue de 100 LEDs
line(0, 100, rgb(0, 0, 255))
gradient(from, to, color1, color2, colorSpace = 'rgb', mixBlendMode)
Applique un dégradé de la couleur color1
à la couleur color2
à toutes les LEDS entre la position from
et la position to
.
// Un dégradé de 50 LEDs du rouge au vert
const red = rgb(255, 0, 0)
const green = rgb(0, 255, 0)
gradient(0, 50, red, green)
Un cinquième argument optionnel permet de sélectionner l’espace colorimétrique de l’interpolation chromatique (par défault rgb
).
gradient(0, 50, rgb(255, 0, 0), rgb(0, 255, 0), 'rgb')
gradient(0, 50, rgb(255, 0, 0), rgb(0, 255, 0), 'hsl')
gradient(0, 50, rgb(255, 0, 0), rgb(0, 255, 0), 'hcl')
gradient(0, 50, rgb(255, 0, 0), rgb(0, 255, 0), 'oklab')
clear()
Éteint toutes les LEDs du bandeau. Équivalent de fill(rgb(0, 0, 0))
.
Important : le bandeau n’étant pas réinitialisé d’une frame à la suivante, il est recommandé d’utiliser la fonction clear()
au début du draw()
.
clear()
Certaines variables globales peuvent être utilisées afin d’accéder à des paramètres de l’interface ou du bandeau LED. Ces constantes sont accessibles uniquement en lecture, et ne peuvent pas être altérées.
data
Objet contenant les données importées dans l’onglet data
de l’interface.
frameCount
Nombre de frames passées depuis le début de l’animation.
export function draw () {
clear()
led(frameCount, rgb(255))
}
frameRate
Nombre de frames par seconde (ou fps). Réglée depuis l’interface.
frames
Nombre total de frames de l’animation. Réglée depuis l’interface.
ledCount
Nombre de LEDs présentes sur le bandeau.
En plus des fonctions arithmétiques basiques et de l’objet natif Math, cette API propose des méthodes mathématiques supplémentaires extraites de la bibliothèque missing-math
.
clamp(value, min, max)
Bloque une valeur entre un minimum et un maximum.
clamp(10, 0, 5) // → 5
clamp(-10, 0, 5) // → 0
wrap(value, min, max)
Bloque une vlauer entre un minimum et un maximum en revenant au point de départ.
for (let angle = 0; angle < 1080; angle++) {
wrap(angle, 0, 360) // angle fera des tours de 0 à 360
}
normalize(value, min, max[, clamp = false])
Force une valeur entre 0
et 1
.
Si l’argument clamp
est true
, la valeur sera également bloquée entre min
et max
(assure que la valeur normalisée ne sorte pas du domaine [0;1]
).
normalize(50, 0, 100) // → 0.5
map(value, in_min, in_max, out_min, out_max[, clamp = false])
Transforme proportionnellement une valeur d’un domaine à un autre.
Si l’argument clamp
est true
, la valeur d’entrée sera également bloquée entre in_min
et in_max
.
map(50, 0, 100, -10, 10) // → 0
lerp(a, b, t)
Applique une interpolation linéare entre la valeur a
et la valeur b
. Le facteur t
contrôle la progression de l’interpolation entre 0
et 1
.
lerp(0, 100, 0) // → 0
lerp(0, 100, 0.5) // → 50
lerp(0, 100, 1) // → 1
random(a[, b])
Tire aléatoirement un nombre à virgule entre 0
et a
, ou entre a
et b
si b
est défini.
random(100) // → 41.37240334391761
random(-1, 1) // → -0.4504311261648928
randomInt(a[, b])
Tire aléatoirement un nombre entier entre 0
et a
, ou entre a
et b
si b
est défini.
randomInt(100) // → 41
randomInt(-1, 1) // 0
roundTo(value, nearest)
Arrondi la valeur au muliple de nearest
le plus proche.
roundTo(13, 5) // → 15
roundTo(13, 2) // → 12
floorTo(value, nearest)
Arrondi la valeur au muliple de nearest
inférieur.
floorTo(13, 5) // → 10
floorTo(13, 2) // → 12
ceilTo(value, nearest)
Arrondi la valeur au muliple de nearest
supérieur.
ceilTo(13, 5) // → 15
ceilTo(13, 2) // → 14
log(value)
Affiche la valeur ou l’objet dans la console du navigateur. Alias de console.log
.