Skip to content

Latest commit

 

History

History
319 lines (227 loc) · 9.36 KB

reference.fr.md

File metadata and controls

319 lines (227 loc) · 9.36 KB

Réferences API

draw()

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)
}

setup()

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')
}

Couleur

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 à 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)

Lumière

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()

Constantes

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.

Maths

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

Utilitaires

log(value)

Affiche la valeur ou l’objet dans la console du navigateur. Alias de console.log.