Écran et dessin

V écran

Règle la palette et le fond, à chaque tick.

Règle la palette de l’écran (0 NES, 1 C64, 2 Game Boy, 3 CGA) et la couleur de fond, à chaque tick. Tout ce qui est déjà dessiné change de couleur avec la palette : une horloge dessous donne un cycle de palette. S’il y a plusieurs V, c’est le dernier tapé, modifié ou bangé par une porte qui décide, et les autres sont grisés. Un V sans rien après ne fait rien.

Case	Rôle	Ce qu’elle prend
à droite	palette	0 NES · 1 C64 · 2 Game Boy · 3 CGA
2e à droite	fond	couleur 0–f derrière le dessin (vide = celle de la palette)

Histoire. La mémoire écran contenait des numéros de couleur, pas des couleurs : une palette à part disait à quoi ressemblait le numéro 4. Changez la palette et toute l’image change d’un coup — l’animation la moins chère qui soit. Le C64 avait 16 couleurs, la NES 54 (4 par zone), la Game Boy quatre verts.

Exemple

# ÉCRAN - exemple #
.
..Qgc81
..Qgc52
..Qgc23
.
...8C4
...V

Ouvrir dans Chipgrid ↗

Trois anneaux sont dessinés dans les couleurs 1, 2 et 3. Une horloge lente alimente la palette de V : tous les 8 ticks elle passe NES → C64 → Game Boy → CGA. L’image contient des numéros de couleur : les mêmes anneaux changent d’aspect d’un coup.

À essayer

• Tapez une couleur de fond deux cases à droite de V, par exemple V.1.
• Remplacez le pas 8 de l’horloge par 1 : un scintillement rapide.

F flash

Fait flasher l’écran quand il reçoit un bang.

Fait clignoter tout l’écran de la couleur (0–f dans la palette) quand il reçoit un bang. Placez-le sous une séquence de caisse claire.

Case	Rôle	Ce qu’elle prend
à gauche, au-dessus ou en dessous	bang *	le déclenche
à droite	couleur	index de palette 0–f

Histoire. Dans les vieux jeux, les explosions changeaient souvent un seul registre — la couleur de fond — pendant une image ou deux. Un octet écrit, tout l’écran flashe.

Exemple

# FLASH - exemple #
.
..D4
...B3C2o
..F3

Ouvrir dans Chipgrid ↗

Le même bang fait deux choses : il touche B à sa gauche (une grosse caisse) et F juste en dessous, qui fait flasher tout l’écran en couleur 3. Le son et l’image synchronisés par un seul bang.

À essayer

• Changez la couleur 3 en 7 ou c.
• Changez D4 en D8 : un flash tous les deux temps.

~ field

Peint tout le calque du fond d’un motif mouvant : plasma, rayures, anneaux…

Un champ : peint tout l’écran d’un motif mouvant, à chaque tick. motif : 0 plasma · 1 rayures en travers · 2 rayures en long · 3 anneaux · 4 damier · 5 bruit · 6 dégradé · 7 tunnel. vitesse dit à quelle allure il bouge, échelle sa taille. Ses couleurs vont de couleur sur étendue couleurs ; avec une étendue de 1, la moitié du motif est transparente. Il va sur le calque du fond : il ne cache jamais ce que vous dessinez. % sur le calque 0 fait couler ses couleurs : tapez [0 au-dessus des deux.

Case	Rôle	Ce qu’elle prend
à droite	motif	0 plasma · 1 rayures en travers · 2 rayures en long · 3 anneaux · 4 damier · 5 bruit · 6 dégradé · 7 tunnel
2e à droite	vitesse	allure de l’onde
3e à droite	échelle	quelle taille
4e à droite	couleur	index de palette 0–f
5e à droite	étendue	combien de couleurs ; 1 = à moitié transparent

Exemple

# FIELD - exemple #
.
.~02318
.
.Ogc77
.T4

Ouvrir dans Chipgrid ↗

Plasma (motif 0), vitesse 2, échelle 3, couleurs 1 à 8. Il est sur le calque du fond : le sprite reste devant sans rien faire de spécial.

À essayer

• Changez le premier 0 en 3 pour des anneaux, ou en 7 pour un tunnel.
• Mettez le dernier chiffre à 1 : la moitié du motif devient transparente.

X pixel

Dessine un bloc 5×5 en x, y à chaque tick.

Dessine un pixel à chaque tick : un bloc de 5×5 en x (0–31) et y (0–23), de la couleur donnée. Xgc4 = milieu de l’écran, jaune. Une horloge sur son x le fait bouger ; le calque garde ce qui est dessiné, il laisse donc une trace.

Case	Rôle	Ce qu’elle prend
à droite	x	0–31 blocs (×5 pixels)
2e à droite	y	0–23 blocs
3e à droite	couleur	index de palette 0–f

Histoire. Les premières machines dessinaient par blocs : le ZX Spectrum permettait 2 couleurs par case de 8×8, la NES 4 par zone de 16×16. Les graphistes composaient avec la grille — c’est de là que vient le « pixel art ».

Exemple

# PIXEL - exemple #
.
...1Cw
...X.c4
.
.T3

Ouvrir dans Chipgrid ↗

Une horloge compte de 0 à 31 (w = 32 valeurs) dans le x de X ; le y est fixé à c (12, le milieu), couleur 4. Le pixel traverse l’écran en 32 ticks, et T3 dissout ce qu’il laisse : une comète.

À essayer

• Changez c en 0 (en haut) ou n (en bas).
• Effacez T3 : la ligne reste.
• Pas 2 sur l’horloge : moitié moins vite.

H barre

Dessine une barre horizontale à chaque tick.

Dessine une barre horizontale à chaque tick : x, y, largeur (en blocs), couleur. Un hasard sur son y donne des raster bars.

Case	Rôle	Ce qu’elle prend
à droite	x	0–31 blocs (×5 pixels)
2e à droite	y	0–23 blocs
3e à droite	largeur	en blocs (1–32)
4e à droite	couleur	index de palette 0–f

Histoire. Raster bars (copper bars sur Amiga) : le programme changeait la couleur de fond pendant que le faisceau de la télé dessinait, ligne par ligne. Un seul registre, modifié au bon moment, donnait des bandes arc-en-ciel.

Exemple

# BARRE - exemple #
.
....0Rn
...H0.w6
.
.T5

Ouvrir dans Chipgrid ↗

À chaque tick H dessine une barre sur toute la largeur (w = 32 blocs) à une hauteur au hasard (0–23), couleur 6. T5 dissout les anciennes : des raster bars qui scintillent.

À essayer

• Largeur 8 : des barres courtes à gauche.
• Remplacez 0Rn par une horloge 1Cn : la barre descend.

O sprite

Dessine une créature 8×8 en miroir à chaque tick.

Dessine un sprite 8×8 (doublé) à chaque tick en x, y. La graine choisit la créature : des bits au hasard, en miroir gauche-droite. Une horloge sur la graine et il se transforme.

Case	Rôle	Ce qu’elle prend
à droite	x	0–31 blocs (×5 pixels)
2e à droite	y	0–23 blocs
3e à droite	graine	quelle créature
4e à droite	couleur	index de palette 0–f

Histoire. Les sprites sont de petites images que la puce vidéo déplace toute seule sur le décor. Le C64 en avait 8, la NES 64 — mais seulement 8 sur une même ligne : au-delà ils clignotaient, un défaut dont les joueurs se souviennent.

Exemple

# SPRITE - exemple #
.
...1Cw
...O.a57
.
.....8C9
...Oe2.4
.
.T6

Ouvrir dans Chipgrid ↗

En haut : un sprite O traverse l’écran (une horloge sur son x), créature numéro 5, couleur 7. En bas : un sprite immobile dont une horloge lente change la graine : il se transforme en une nouvelle créature tous les 2 temps. Chaque graine est un motif 8×8 au hasard, en miroir comme un space invader.

À essayer

• Changez la graine 5 : une autre créature.
• Changez le y a du marcheur en 2 ou k.

L ligne

Dessine une ligne entre deux points à chaque tick.

Dessine une ligne à chaque tick de (x1, y1) à (x2, y2), en blocs, de la couleur donnée. Une onde sur une extrémité la fait tourner comme un radar.

Case	Rôle	Ce qu’elle prend
à droite	x1	départ, 0–31 blocs
2e à droite	y1	départ, 0–23 blocs
3e à droite	x2	arrivée, 0–31 blocs
4e à droite	y2	arrivée, 0–23 blocs
5e à droite	couleur	index de palette 0–f

Histoire. Les lignes se tracent avec l’algorithme de Bresenham (1962) : seulement des additions et des comparaisons, pas de division — parfait pour un processeur 8 bits. La Vectrex et Elite dessinaient tout leur monde en lignes.

Exemple

# LIGNE - exemple #
.
...1Cw
.Lgc.04
.
...2Cw
.Lgc.n7
.
.T3

Ouvrir dans Chipgrid ↗

Deux lignes partent du centre (g, c = 16, 12). L’extrémité de la première court le long du bord haut (y 0), menée par une horloge ; la seconde le long du bas (y 23), deux fois moins vite. T3 les estompe en éventail.

À essayer

• Déplacez le point de départ : L00 = coin en haut à gauche.
• Voir l’exemple « Radar » : une onde sur les deux extrémités la fait tourner.

Q anneau

Dessine un anneau (cercle) à chaque tick.

Dessine un anneau à chaque tick : centre x, y, rayon en blocs, couleur. Une horloge sur le rayon le fait grandir : des anneaux en série font un tunnel.

Case	Rôle	Ce qu’elle prend
à droite	x	0–31 blocs (×5 pixels)
2e à droite	y	0–23 blocs
3e à droite	rayon	en blocs (×5 pixels)
4e à droite	couleur	index de palette 0–f

Exemple

# ANNEAU - exemple #
.
....1Cg
..Qgc.4
.
....3Cg
..Qgc.9
.
.T4

Ouvrir dans Chipgrid ↗

Deux anneaux au centre de l’écran. Leur rayon vient d’horloges qui comptent 0–15, l’une rapide, l’autre lente : les anneaux grandissent et recommencent, un tunnel. T4 dissout les anciens.

À essayer

• Déplacez un centre : Q88 (en haut à gauche).
• Un rayon fixe Qgc6 : un cercle immobile.

U paillettes

Saupoudre des pixels au hasard à chaque tick.

Saupoudre quantité × 4 pixels au hasard de la couleur à chaque tick : étoiles, neige, parasites. Avec I sur la quantité, ça crépite avec la batterie.

Case	Rôle	Ce qu’elle prend
à droite	quantité	combien par tick
2e à droite	couleur	index de palette 0–f

Exemple

# PAILLETTES - exemple #
.
..D8
...N580
.
...I3
..U.1
.
.T4

Ouvrir dans Chipgrid ↗

Un long bruit (une cymbale) tous les 2 temps. I3 écoute le canal de bruit et alimente la quantité de U : à chaque cymbale, une gerbe de paillettes blanches qui s’éclaircit avec le son. T4 la fait disparaître.

À essayer

• Remplacez I3 par une quantité fixe 1 : des étoiles, tout le temps.
• Changez la couleur 1 en 6.

" text

Dessine du texte à chaque tick : x, y, couleur, lettres.

Dessine du texte à chaque tick : x, y, couleur, puis des lettres jusqu’à une case vide, 16 au plus. "4c1SALUT. Lettres et chiffres seulement ; _ est une espace. Chaque lettre fait 8 pixels de large. Une lettre peut venir d’une séquence : c’est un texte défilant.

Case	Rôle	Ce qu’elle prend
à droite	x	0–31 blocs (×5 pixels)
2e à droite	y	0–23 blocs
3e à droite	couleur	index de palette 0–f
à partir de la 4e à droite, jusqu’à une case vide	lettres	jusqu’à 16, lettres et chiffres ; _ = espace

Exemple

# TEXT - exemple #
.
."4c1HELLO
.
.T1

Ouvrir dans Chipgrid ↗

x = 4, y = 12 (c), couleur 1, puis les lettres. À chaque tick il redessine le mot, et T1 le ronge un peu.

À essayer

• Écrivez votre prénom. _ fait une espace.
• Chargez l’exemple Texte défilant pour le voir bouger.

$ stamp

Dessine votre propre sprite à chaque tick, d’après les cases en dessous.

Dessine votre propre sprite à chaque tick : x, y, largeur, hauteur, et les pixels dans les cases juste en dessous, à partir de la case sous le $. Chaque case est une couleur (0–f) ; vide = transparent. Jusqu’à 16 × 16, chaque pixel fait 2 × 2 à l’écran.

Case	Rôle	Ce qu’elle prend
à droite	x	0–31 blocs (×5 pixels)
2e à droite	y	0–23 blocs
3e à droite	large	en pixels du sprite (1–16)
4e à droite	haut	en pixels du sprite (1–16)
les lignes du dessous, à partir de sous le $	pixels	une couleur 0–f par case ; vide = transparent

Exemple

# STAMP - exemple #
.
.$c688
..22..22
.22222222
.21222222
.22222222
..222222
...2222
....22

Ouvrir dans Chipgrid ↗

x = 12, y = 6, 8 de large, 8 de haut. Les huit lignes en dessous sont l’image elle-même : chaque chiffre est une couleur, chaque case vide est transparente. Un cœur.

À essayer

• Modifiez les pixels pendant la lecture.
• Mettez une onde 4Wr au-dessus de son x pour le faire voyager.

[ layer

Le dessin en dessous va sur ce calque : 0 fond, 1 milieu, 2 devant.

Règle le calque des opérateurs de dessin qui le suivent, dans le sens de lecture : [0 fond, [1 milieu (l’habituel), [2 devant. Les pixels vides laissent voir le calque de derrière. T, M, K et les autres effets ne touchent que leur calque : un ciel reste immobile derrière un vaisseau qui laisse une traînée. En multijoueur cela ne vaut que pour votre code ; tout le monde voit la même image.

Case	Rôle	Ce qu’elle prend
à droite	calque	0 fond · 1 milieu · 2 devant

Exemple

# LAYER - exemple #
.
.[0
.~6.484
.[1
.M05
..0Rn
.Xv.1
.[2
.O8a57

Ouvrir dans Chipgrid ↗

Trois calques : un dégradé au fond, des étoiles qui défilent au milieu, un sprite devant. M05 ne déplace que son calque : le vaisseau et le ciel restent en place.

À essayer

• Effacez [2 : le vaisseau est maintenant sur le calque qui défile, et il bave.

] size

Les sprites et le texte en dessous sont ce nombre de fois plus grands.

Règle la taille des sprites et du texte qui le suivent, dans le sens de lecture : ]3 trois fois plus grand, jusqu’à 8. Cela vaut pour O, $ et ". Retour à la normale avec ]1.

Case	Rôle	Ce qu’elle prend
à droite	échelle	quelle taille

Exemple

# SIZE - exemple #
.
.]4
.$2388
..22..22
.22222222
.21222222
.22222222
..222222
...2222
....22

Ouvrir dans Chipgrid ↗

]4 rend le sprite en dessous quatre fois plus grand : chaque pixel fait 8 × 8 à l’écran.

À essayer

• Essayez ]2, ou ]7.

T dissolution

Avec un 1 après la quantité, estompe dans la palette ; sinon, éteint des pixels au hasard dans le dessin à chaque tick.

Avec une seconde entrée à 1, il estompe : chaque pixel descend dans la palette en même temps, pour des lueurs douces (Ta1). Sinon : Dissout le dessin un peu à chaque tick (quantité 0–9) : des pixels au hasard s’éteignent, ça laisse des traînées. 0 garde tout, 9 efface presque aussitôt.

Case	Rôle	Ce qu’elle prend
à droite	quantité	combien par tick
2e à droite	fondu	0 des pixels au hasard s’éteignent · 1 tout s’estompe à travers la palette

Histoire. Comme la lueur du phosphore d’un écran cathodique qui s’éteint après le passage du faisceau.

Exemple

# DISSOLUTION - exemple #
.
...1Cn
..H0.w4
.
.T2

Ouvrir dans Chipgrid ↗

Une barre descend l’écran, une ligne par tick. T2 éteint quelques pixels au hasard à chaque tick : les lignes plus anciennes s’effilochent en traînée, comme le phosphore d’un vieil écran cathodique.

À essayer

• T0 : rien ne s’efface, l’écran se remplit.
• T9 : presque plus de traînée.

M défilement

Fait défiler tout le dessin à chaque tick.

Fait défiler tout le dessin à chaque tick : direction 0 gauche, 1 droite, 2 haut, 3 bas, de quantité pixels. rotation est l’angle de l’image, par pas de 10° : quand il change, l’image tourne. Chaque bang qui touche M ajoute un pas, qui reste. Pour tourner sans défiler, mettez la quantité à 0 : M003.

Case	Rôle	Ce qu’elle prend
à droite	direction	0 gauche · 1 droite · 2 haut · 3 bas
2e à droite	quantité	combien par tick
3e à droite	rotation	angle, par pas de 10°

Histoire. Le défilement matériel était le grand atout des consoles 8 bits : la puce décale tout le décor d’une valeur de registre, le processeur ne redessine rien. Super Mario Bros. repose là-dessus.

Exemple

# DÉFILEMENT - exemple #
.
...0Rn
..Xv.4
.
.M05

Ouvrir dans Chipgrid ↗

Un pixel est dessiné sur le bord droit (x = v = 31) à une hauteur au hasard à chaque tick. M05 déplace toute l’image de 5 pixels vers la gauche à chaque tick : les points filent comme des étoiles en hyperespace.

À essayer

• M01 : un pixel par tick, bien plus lent.
• M15 défile vers la droite : les points sortent aussitôt de l’écran — le dessin et le défilement doivent s’accorder.

Z miroir

Met le dessin en miroir à chaque tick : 0 gauche→droite, 1 haut→bas, 2 les deux.

Met tout le dessin en miroir après chaque tick : 0 recopie la moitié gauche sur la droite, 1 le haut sur le bas, 2 les deux — un kaléidoscope. Dessinez dans un coin, obtenez-en quatre. rotation fait tourner les lignes de miroir par pas de 10°, et chaque bang qui touche Z ajoute un pas, qui reste.

Case	Rôle	Ce qu’elle prend
à droite	axes	0 gauche → droite · 1 haut → bas · 2 les deux
2e à droite	rotation	angle, par pas de 10°

Histoire. La symétrie, c’était de la mémoire gratuite : on stocke un demi-sprite, on le dessine deux fois. La même astuce sur tout l’écran donne les kaléidoscopes de la demoscene.

Exemple

# MIROIR - exemple #
.
...1Cg
.L00.b3
.
.Z2
.T3

Ouvrir dans Chipgrid ↗

Une ligne part du coin en haut à gauche et balaie la ligne du milieu, seulement dans le quart en haut à gauche. Z2 recopie ce quart gauche → droite et haut → bas après chaque tick : une ligne devient une étoile à quatre branches.

À essayer

• Z0 : seulement gauche sur droite. Z1 : haut sur bas.
• Ajoutez un sprite O dans le coin et regardez-le se multiplier.

K effacer

Efface le dessin quand il reçoit un bang.

Efface le dessin quand un bang le touche. À côté d’un battement ou d’un motif de grosse caisse, il efface en rythme.

Case	Rôle	Ce qu’elle prend
à gauche, au-dessus ou en dessous	bang *	le déclenche

Exemple

# EFFACER - exemple #
.
.U23
.
.Dg
..K

Ouvrir dans Chipgrid ↗

U23 saupoudre 8 pixels de couleur 3 à chaque tick et rien ne les efface : l’écran se remplit. Tous les 16 ticks (une mesure) Dg bange K, qui efface tout. L’écran respire avec la mesure.

À essayer

• D4 au lieu de Dg : un effacement à chaque temps.
• Placez K à côté du bang d’un motif de grosse caisse : des effacements en rythme.

+ zoom

Zoome tout le dessin à chaque tick. Un bang lui donne un coup.

Zoome tout le dessin à chaque tick, depuis le centre : quantité × 2 % par tick et au moins 1 pixel, sens 0 grandit, 1 rétrécit. +0 ne fait rien jusqu’au bang. Dessinez quelque chose de petit au milieu : ça devient un tunnel. Un bang qui le touche ajoute un coup, pour ce tick seulement.

Case	Rôle	Ce qu’elle prend
à droite	quantité	combien par tick
2e à droite	sens	0 grandit · 1 rétrécit

Exemple

# ZOOM - exemple #
.
....2C8
.Qgc2
.
.+2
.T1

Ouvrir dans Chipgrid ↗

Un petit anneau est dessiné au milieu à chaque tick, sa couleur changeant avec l’horloge 2C8. +2 agrandit toute l’image à chaque tick : les anneaux plus anciens partent vers l’extérieur, comme un tunnel. T1 les dissout peu à peu.

À essayer

• +21 : l’image rétrécit au lieu de grandir.

= ondulation

Fait glisser les lignes le long d’une onde. Un bang fait sauter l’onde.

Fait onduler le dessin : les lignes oscillent de côté le long d’une sinusoïde. quantité : de combien de pixels, longueur : la hauteur d’une onde en blocs, vitesse : à quelle allure elle avance. Chaque bang qui le touche fait sauter l’onde d’un quart.

Case	Rôle	Ce qu’elle prend
à droite	quantité	combien par tick
2e à droite	longueur	hauteur d’une onde, en blocs
3e à droite	vitesse	allure de l’onde

Exemple

# ONDULATION - exemple #
.
.Lg0gn7
.
.=
.T2

Ouvrir dans Chipgrid ↗

Une ligne verticale droite est dessinée à chaque tick. = sans entrées fait osciller les lignes de tout ce qui est déjà dessiné : plus le trait est ancien, plus il ondule.

À essayer

• =a : des oscillations plus larges.

% couleurs

Décale chaque pixel dessiné dans la palette. Chaque bang décale d’un cran.

Décale chaque pixel déjà dessiné dans les 16 couleurs de la palette. décalage est une position : quand elle change, les couleurs bougent, donc une horloge dessus les fait défiler. Chaque bang qui le touche ajoute un pas, qui reste.

Case	Rôle	Ce qu’elle prend
à droite	décalage	position dans la palette

Exemple

# COULEURS - exemple #
.
.U23
.
.1D4
.
..%

Ouvrir dans Chipgrid ↗

Des étoiles de couleur 3 s’accumulent. 1D4 envoie un bang tous les 4 ticks sur %, qui décale d’une couleur toutes les étoiles déjà à l’écran : des bandes de couleur, une par temps.

À essayer

• Remplacez le battement par une horloge sur l’entrée : 1Cg au-dessus de la case à droite de %.

/ glitch

Déplace au hasard des bandes à chaque tick. Un bang en lance une rafale.

Glitche le dessin : à chaque tick, quantité bandes au hasard, hautes d’au plus taille pixels, sautent de côté. Un bang qui le touche ajoute une rafale de 10 bandes. Pour n’avoir que les rafales, mettez la quantité à 0 : /0.

Case	Rôle	Ce qu’elle prend
à droite	quantité	combien par tick
2e à droite	taille	bande la plus haute, en pixels

Exemple

# GLITCH - exemple #
.
.Qgc87
.
.1D8
.
../0
.T3

Ouvrir dans Chipgrid ↗

Un anneau est dessiné à chaque tick. /0 ne fait rien tout seul ; tous les 8 ticks, le bang de 1D8 lance une rafale de bandes de côté, puis T3 nettoie.

À essayer

• Enlevez le 0 : un signal cassé en continu, plus les rafales.