Revisión pausada del Día 1 y 2, adición de la parte en español en Hexadecimal y otras correciones breves.

This commit is contained in:
jota 2022-01-12 19:46:50 -03:00
parent 04273debea
commit 6517b7913d
5 changed files with 277 additions and 188 deletions

View File

@ -1,11 +1,17 @@
# hexadecimal
numeral system in base 16: it uses 16 digits, from 0 to 9 and from 'a' to 'f'.
eng: numeral system in base 16: it uses 16 digits, from 0 to 9 and from 'a' to 'f'.
there's a direct mapping between each possible combination of 4 bits (nibble), and an hexadecimal (hex) digit:
there's a direct mapping between each possible combination of 4 bits (nibble), and an hexadecimal (hex) digit:
//
esp: sistema numérico en base 16: utiliza 16 dígitos, del 0 al 9 y de la 'a' a la 'f'.
hay un mapeo directo entre cada posible combinación de 4 bits (nibble), y un dígito hexadecimal (hex):
+ <table>
+ <tr><th>binary</th><th>hex</th><th>dec</th></tr>
+ <tr><th>binar(y/io)</th><th>hex</th><th>dec</th></tr>
+ <tr><td>0000</td><td>0</td><td>0</td></tr>
+ <tr><td>0001</td><td>1</td><td>1</td></tr>
+ <tr><td>0010</td><td>2</td><td>2</td></tr>
@ -43,9 +49,16 @@ there's a direct mapping between each possible combination of 4 bits (nibble), a
# 24 bits
24 bits correspond to:
eng: 24 bits correspond to:
* 3 bytes
* 4 {base64} digits
* 6 hexadecimal digits
* 8 {octal} digits
esp: 24 bits corresponden a:
* 3 bytes
* 4 dígitos {base64}
* 6 dígitos hexadecimales
* 8 dígitos {octales}

View File

@ -115,19 +115,19 @@ podemos utilizar estos dos valores para calcular el límite, que podemos almacen
una forma de conseguirlo, anotando el estado de la pila de trabajo después de cada instrucción, podría ser:
```
( estado inicial: ptr: x^ ancho^ )
OVR2 ( ptr: x^ ancho^ x^ )
ADD2 ( ptr: x^ límite^ )
STH2 ( ptr: x^ / pre: límite^ )
( estado inicial: ptra: x^ ancho^ )
OVR2 ( ptra: x^ ancho^ x^ )
ADD2 ( ptra: x^ límite^ )
STH2 ( ptra: x^ / pret: límite^ )
```
otra:
```
( estado inicial: ptr: x^ ancho^ )
ADD2k ( ptr: x^ ancho^ límite^ )
STH2 ( ptr: x^ ancho^ / pre: límite^ )
POP2 ( ptr: x^ / pre: límite^ )
( estado inicial: ptra: x^ ancho^ )
ADD2k ( ptra: x^ ancho^ límite^ )
STH2 ( ptra: x^ ancho^ / pret: límite^ )
POP2 ( ptra: x^ / pret: límite^ )
```
recuerda que estamos mostrando la parte superior de las pilas a su derecha.
@ -141,18 +141,18 @@ nuestra subrutina se vería entonces de la siguiente manera:
```
@dibuja-tiles-en-fila ( x^ ancho^ -- )
( calcular y guardar el límite )
OVR2 ( ptr: x^ ancho^ x^ )
ADD2 ( ptr: x^ límite^ )
STH2 ( ptr: x^ / pre: límite^ )
OVR2 ( ptra: x^ ancho^ x^ )
ADD2 ( ptra: x^ límite^ )
STH2 ( ptra: x^ / pret: límite^ )
.Pantalla/x DEO2 ( fijar x inicial )
&bucle-x
#03 .Pantalla/sprite DEO ( dibujar sprite con color 3 y 0 )
.Pantalla/x DEI2 #0008 ADD2 DUP2 ( añadir 8 a x )
.Pantalla/x DEO2 ( guardar la nueva x )
STH2kr ( copiar límite de rs en ws )
STH2kr ( copiar límite de pret en ptra )
LTH2 ,&bucle-x JCN ( saltar si x es menor que el límite )
POP2r ( hacer POP en límite de rs )
POP2r ( hacer POP en límite de pret )
RTN
```
@ -187,18 +187,18 @@ lo siguiente muestra nuestro programa en contexto, llenando completamente la pri
BRK
@dibuja-tiles-en-fila ( x^ ancho^ -- )
OVR2 ( ptr: x^ límite^ x^ )
ADD2 ( ptr: x^ límite^ )
STH2 ( ptr: x^ / pre: límite^ )
OVR2 ( ptra: x^ límite^ x^ )
ADD2 ( ptra: x^ límite^ )
STH2 ( ptra: x^ / pret: límite^ )
.Pantalla/x DEO2 ( fijar x inicial )
&bucle-x
#03 .Pantalla/sprite DEO ( dibujar sprite con color 3 y 0 )
.Pantalla/x DEI2 #0008 ADD2 DUP2 ( añadir 8 a x )
.Pantalla/x DEO2 ( guarda la nueva x )
STH2kr ( copiar límite de rs en ws )
STH2kr ( copiar límite de pret en ptra )
LTH2 ,&bucle-x JCN ( saltar si x es menor que el límite )
POP2r ( sacar el límite de rs )
POP2r ( sacar el límite de pret )
RTN
@tile-fondo 1122 4488 1122 4488
@ -268,8 +268,8 @@ en principio podríamos simplemente manipular los elementos dados en la pila, al
en primer lugar, la dirección del tile es el valor de la parte superior de la pila. podemos consumirlo y olvidarnos de él:
```
( ws inicial: x^ y^ ancho^ alto^ direc* )
.Pantalla/direc DEO2 ( ptr: x^ y^ ancho^ alto^ )
( ptra inicial: x^ y^ ancho^ alto^ direc* )
.Pantalla/direc DEO2 ( ptra: x^ y^ ancho^ alto^ )
```
pensando en el bucle vertical, necesitamos calcular su límite sumando la altura a `y`, y necesitamos establecer la `y` inicial.
@ -277,22 +277,22 @@ pensando en el bucle vertical, necesitamos calcular su límite sumando la altura
podríamos hacer lo siguiente:
```
ROT2 ( ptr: x^ ancho^ altura^ y^ )
DUP2 ( ptr: x^ ancho^ altura^ y^ y^ )
ROT2 ( ptra: x^ ancho^ altura^ y^ )
DUP2 ( ptra: x^ ancho^ altura^ y^ y^ )
( establecer y inicial: )
.Pantalla/y DEO2 ( ptr: x^ ancho^ alto^ y^ )
.Pantalla/y DEO2 ( ptra: x^ ancho^ alto^ y^ )
( calcular y almacenar el límite vertical )
ADD2 ( ptr: x^ ancho^ límite-y^ )
STH2 ( ptr: x^ ancho^ / pre: límite-y^ )
ADD2 ( ptra: x^ ancho^ límite-y^ )
STH2 ( ptra: x^ ancho^ / pret: límite-y^ )
```
ahora, podríamos también almacenar el ancho y `x`, ya que las necesitamos después en su orden original (primero x, luego anchura )
```
STH2 ( ptr: x^ / pre: límite-y^ ancho^ )
STH2 ( ptr: / pre: límite-y^ ancho^ x^ )
STH2 ( ptra: x^ / pret: límite-y^ ancho^ )
STH2 ( ptra: / pret: límite-y^ ancho^ x^ )
```
en teoría, la primera parte de nuestra subrutina podría verse como:
@ -300,28 +300,28 @@ en teoría, la primera parte de nuestra subrutina podría verse como:
```
@dibuja-tiles ( x^ y^ ancho^ alto^ direc* -- )
( establecer la dirección del tile )
.Pantalla/direc DEO2 ( ptr: x^ y^ ancho^ alto^ )
.Pantalla/direc DEO2 ( ptra: x^ y^ ancho^ alto^ )
ROT2 ( ptr: x^ ^ altura^ y^ )
DUP2 ( ptr: x^ ^ altura^ y^ )
ROT2 ( ptra: x^ ^ altura^ y^ )
DUP2 ( ptra: x^ ^ altura^ y^ )
( fijar y inicial )
.Pantalla/y DEO2 ( fijar y inicial, ptr: x^ ^ altura^ y^ )
.Pantalla/y DEO2 ( fijar y inicial, ptra: x^ ^ altura^ y^ )
( calcular y guardar límite-y )
ADD2 ( ptr: x^ ^ límite-y^ )
STH2 ( ptr: x^ ^ / pre: límite-y^ )
ADD2 ( ptra: x^ ^ límite-y^ )
STH2 ( ptra: x^ ^ / pret: límite-y^ )
( almacenar anchura y `x` )
STH2 STH2 ( ptr: / pre: límite-y^ ancho^ x^ )
STH2 STH2 ( ptra: / pret: límite-y^ ancho^ x^ )
&bucle-y
( preparar y dibujar la fila )
( recuperar x )
STH2r ( ptr: x^ / pre: límite-y^ ancho^ )
STH2r ( ptra: x^ / pret: límite-y^ ancho^ )
( recuperar la anchura )
STH2r ( ptr: x^ ancho^ / pre: límite-y^ )
STH2r ( ptra: x^ ancho^ / pret: límite-y^ )
;dibuja-tiles-en-fila JSR2
```
@ -333,7 +333,7 @@ podemos pensar que podríamos reemplazar estas instrucciones con STH2kr:
&bucle-y
( preparar y dibujar la fila )
( recuperar x )
STH2kr ( ptr: x^ / pre: límite-y^ ancho^ x^ )
STH2kr ( ptra: x^ / pret: límite-y^ ancho^ x^ )
```
¡pero entonces no podemos recuperar el ancho porque la x sigue en la parte superior de la pila de retorno!
@ -343,35 +343,35 @@ oh, muchas dificultades, pero por el bien del ejemplo de la pila, vamos a seguir
¿cómo podemos poner el ancho en la parte superior de la pila de retorno? tal vez con un intercambio aplicado a la pila de retorno:
```
SWP2r ( ptr: x^ / pre: límite-y^ x^ ancho^ )
SWP2r ( ptra: x^ / pret: límite-y^ x^ ancho^ )
```
entonces podemos recuperar el ancho y utilizarlo:
```
STH2kr ( ptr: x^ ancho^ / pre: límite-y^ x^ ancho^ )
;dibuja-tiles-en-fila JSR2 ( ptr: / pre: límite-y^ x^ ancho^ )
STH2kr ( ptra: x^ ancho^ / pret: límite-y^ x^ ancho^ )
;dibuja-tiles-en-fila JSR2 ( ptra: / pret: límite-y^ x^ ancho^ )
```
¿qué sigue? añadir 8 a `y`, y comprobar si es menor que el límite. la primera parte va sin problemas:
```
.Pantalla/y DEI2 #0008 ADD2 DUP2 ( añade 8 a y; ptr: y^ y^ / pre: límite-y^ x^ ancho^ )
.Pantalla/y DEO2 ( almacenar nueva `y`; ptr: y^ / pre: límite-y^ x^ ancho^ )
.Pantalla/y DEI2 #0008 ADD2 DUP2 ( añade 8 a y; ptra: y^ y^ / pret: límite-y^ x^ ancho^ )
.Pantalla/y DEO2 ( almacenar nueva `y`; ptra: y^ / pret: límite-y^ x^ ancho^ )
```
para conseguir el límite en la pila de trabajo para la comparación, tenemos que girar la pila de retorno:
```
ROT2r ( ptr: y^ / pre: x^ ancho^ límite-y^ )
STH2kr ( ptr: y^ límite-y^ / pre: x^ ancho^ límite-y^ )
ROT2r ( ptra: y^ / pret: x^ ancho^ límite-y^ )
STH2kr ( ptra: y^ límite-y^ / pret: x^ ancho^ límite-y^ )
```
pero ah, antes de hacer la comparación y el salto, debemos reordenar la pila de retorno para que se corresponda con la ordenación que teníamos al principio del bucle:
```
SWP2r ( ptr: y^ límite-y^ / pre: x^ límite-y^ ancho^ )
ROT2r ( ptr: y^ límite-y^ / pre: límite-y^ ancho^ x^ )
SWP2r ( ptra: y^ límite-y^ / pret: x^ límite-y^ ancho^ )
ROT2r ( ptra: y^ límite-y^ / pret: límite-y^ ancho^ x^ )
```
ahora podemos hacer la comparación y saltar:
@ -391,41 +391,41 @@ después de todo esto, nuestra subrutina tendría el siguiente aspecto:
```
@dibuja-tiles ( x^ y^ ancho^ alto^ direc* -- )
( establecer la dirección del tile )
.Pantalla/direc DEO2 ( ptr: x^ y^ ancho^ alto^ )
.Pantalla/direc DEO2 ( ptra: x^ y^ ancho^ alto^ )
ROT2 ( ptr: x^ ^ altura^ y^ )
DUP2 ( ptr: x^ ^ altura^ y^ )
ROT2 ( ptra: x^ ^ altura^ y^ )
DUP2 ( ptra: x^ ^ altura^ y^ )
( fijar y inicial )
.Pantalla/y DEO2 ( fijar y inicial, ptr: x^ ^ altura^ y^ )
.Pantalla/y DEO2 ( fijar y inicial, ptra: x^ ^ altura^ y^ )
( calcular y almacenar límite-y )
ADD2 ( ptr: x^ ^ límite-y^ )
STH2 ( ptr: x^ ^ / pre: límite-y^ )
ADD2 ( ptra: x^ ^ límite-y^ )
STH2 ( ptra: x^ ^ / pret: límite-y^ )
( almacenar anchura y `x` )
STH2 STH2 ( ptr: / pre: límite-y^ ancho^ x^ )
STH2 STH2 ( ptra: / pret: límite-y^ ancho^ x^ )
&bucle-y
( preparar y dibujar la fila )
( recuperar x )
STH2kr ( ptr: x^ / pre: límite-y^ ancho^ x^ )
STH2kr ( ptra: x^ / pret: límite-y^ ancho^ x^ )
( recuperar la anchura )
SWP2r ( ptr: x^ / pre: límite-y^ x^ ancho^ )
STH2kr ( ptr: x^ ancho^ / pre: límite-y^ x^ ancho^ )
;dibuja-tiles-en-fila JSR2 ( ptr: / pre: límite-y^ x^ ancho^ )
SWP2r ( ptra: x^ / pret: límite-y^ x^ ancho^ )
STH2kr ( ptra: x^ ancho^ / pret: límite-y^ x^ ancho^ )
;dibuja-tiles-en-fila JSR2 ( ptra: / pret: límite-y^ x^ ancho^ )
.Pantalla/y DEI2 #0008 ADD2 DUP2 ( añadir 8 a y )
.Pantalla/y DEO2 ( almacenar la nueva y )
( recuperar límite-y )
ROT2r ( ptr: y^ / pre: x^ ^ límite-y^ )
STH2kr ( ptr: y^ límite-y^ / pre: x^ ancho^ límite-y^ )
ROT2r ( ptra: y^ / pret: x^ ^ límite-y^ )
STH2kr ( ptra: y^ límite-y^ / pret: x^ ancho^ límite-y^ )
( reordenar la pila de retorno )
SWP2r ( ptr: y^ límite-y^ / pre: x^ límite-y^ ancho^ )
ROT2r ( ptr: y^ límite-y^ / pre: límite-y^ ancho^ x^ )
SWP2r ( ptra: y^ límite-y^ / pret: x^ límite-y^ ancho^ )
ROT2r ( ptra: y^ límite-y^ / pret: límite-y^ ancho^ x^ )
LTH2 ,&bucle-y JCN ( salta si x es menor que el límite )
@ -460,8 +460,8 @@ declararemos las siguientes etiquetas para nuestras variables, después del RTN
ahora, iniciamos la subrutina de la misma manera que antes, estableciendo la dirección para nuestro sprite:
```
( ws inicial: x^ y^ ancho^ alto^ direc* )
.Pantalla/direc DEO2 ( ptr: x^ y^ ancho^ alto^ )
( ptra inicial: x^ y^ ancho^ alto^ direc* )
.Pantalla/direc DEO2 ( ptra: x^ y^ ancho^ alto^ )
```
entonces, simplemente almacenamos los siguientes valores en direcciones relativas:
@ -481,13 +481,13 @@ entonces podemos fijar la `y` inicial y calcular el límite vertical, utilizando
```
( establecer y inicial )
,&y LDR2 DUP2 ( ptr: y^ y^ )
.Pantalla/y DEO2 ( ptr: y^ )
,&y LDR2 DUP2 ( ptra: y^ y^ )
.Pantalla/y DEO2 ( ptra: y^ )
( calcular límite-y )
,&alto LDR2 ( ptr: y^ alto^ )
ADD2 ( ptr: límite-y^ )
,&límite-y STR2 ( ptr: )
,&alto LDR2 ( ptra: y^ alto^ )
ADD2 ( ptra: límite-y^ )
,&límite-y STR2 ( ptra: )
```
nuestro bucle ahora tendría el siguiente aspecto:
@ -518,7 +518,7 @@ la subrutina completa tendría el siguiente aspecto:
```
@dibuja-tiles ( x^ y^ ancho^ alto^ direc* -- )
( establecer la dirección del tile )
.Pantalla/direc DEO2 ( ptr: x^ y^ ancho^ alto^ )
.Pantalla/direc DEO2 ( ptra: x^ y^ ancho^ alto^ )
( almacenar valores )
,&altura STR2
@ -527,13 +527,13 @@ la subrutina completa tendría el siguiente aspecto:
,&x STR2
( establecer y inicial )
,&y LDR2 DUP2 ( ptr: y^ y^ )
.Pantalla/y DEO2 ( ptr: y^ )
,&y LDR2 DUP2 ( ptra: y^ y^ )
.Pantalla/y DEO2 ( ptra: y^ )
( calcular el límite vertical )
,&alto LDR2 ( ptr: y^ alto^ )
ADD2 ( ptr: límite-y^ )
,&límite-y STR2 ( ptr: )
,&alto LDR2 ( ptra: y^ alto^ )
ADD2 ( ptra: límite-y^ )
,&límite-y STR2 ( ptra: )
&bucle-y
( recuperar x y anchura )

View File

@ -4,7 +4,7 @@ tutorial de uxn: día 2, la pantalla
en esta sección vamos a empezar a explorar los aspectos visuales de la computadora varvara ¡hablamos sobre los aspectos fundamentales del dispositivo de pantalla para que podamos empezar a dibujar en ella!
también discutiremos el trabajo con instrucciones de salto corto ("short"; 2 bytes) junto a los de un sólo byte en uxntal.
también discutiremos el trabajo con el modo corto o "short" (2 bytes) junto a los de un sólo byte en uxntal.
si todavía no lo has hecho te recomiendo que leas las sección anterior:
@ -26,7 +26,7 @@ ese número corresponde a los valores que se pueden representar usando dos bytes
además de expresar direcciones en la memoria principal, hoy veremos otro caso en el que 256 valores no siempre son suficientes: las coordenadas x e y de los píxeles de nuestra pantalla.
para estos y otros casos, usar shorts en lugar de bytes será el camino a seguir.
para estos y otros casos, usar cortos en lugar de bytes será el camino a seguir.
¿cómo los tratamos?
@ -40,21 +40,26 @@ el byte que esté más adentro de la pila será el byte "alto" del corto, y el b
en uxntal, indicamos que queremos poner esta bandera añadiendo el dígito '2' al final de una instrucción mnemónica.
veamos algunos ejemplos!
¡veamos algunos ejemplos!
## ejemplo del modo corto
### LIT2
en primer lugar, recapitulemos. el siguiente código empujará el número 02 hacia abajo en la pila, luego empujará el número 30 (hexadecimal) hacia abajo en la pila, y finalmente los sumará, dejando el número 32 en la pila:
```
#02 #30 ADD
```
este sería el estado final de la pila:
```
32 <- arriba
```
en el día anterior mencionamos que la runa hexadecimal literal (#) es una abreviatura de la instrucción LIT. por lo tanto, podríamos haber escrito nuestro código de la siguiente manera:
```
LIT 02 LIT 30 ADD ( código ensamblado: 80 02 80 30 18 )
```
@ -94,6 +99,7 @@ ahora, comparemos con lo que ocurre con el ADD2:
```
en este caso estamos empujando los mismos 4 bytes hacia abajo en la pila, pero ADD2 está haciendo las siguientes acciones:
* toma el elemento superior de la pila (08) y lo almacena como el byte bajo del primer corto
* toma el nuevo elemento superior de la pila (00), y lo almacena como el byte alto del primer corto, que ahora es 0008
* toma el nuevo elemento superior de la pila (04), y lo almacena como el byte bajo del segundo corto
@ -102,7 +108,7 @@ en este caso estamos empujando los mismos 4 bytes hacia abajo en la pila, pero A
* empuja el byte alto del resultado (00) hacia abajo en la pila
* empuja el byte bajo del resultado (0c) hacia abajo en la pila
the stack ends up looking as follows:
la pila acaba teniendo el siguiente aspecto:
```
00 0c <- arriba
@ -138,9 +144,9 @@ recuerda que las 256 direcciones de entrada/salida ya están cubiertas usando un
considerando esto, los siguientes son los comportamientos que podemos esperar:
la instrucción DEO2 necesita un valor (1 short) para salir, y una dirección i/o (1 byte) en la pila, para poder sacar ese valor a esa dirección. por lo tanto necesita un total de 3 bytes en la pila para operar.
la instrucción DEO2 necesita un valor (1 corto) para salir, y una dirección entrada/salida (1 byte) en la pila, para poder sacar ese valor a esa dirección. por lo tanto necesita un total de 3 bytes en la pila para operar.
por otro lado, la instrucción DEI2 necesita una dirección i/o (1 byte) en la pila, y empujará hacia abajo en la pila el valor (1 short) que corresponde a esa entrada.
por otro lado, la instrucción DEI2 necesita una dirección entrada/salida (1 byte) en la pila, y empujará hacia abajo en la pila el valor (1 corto) que corresponde a esa entrada.
en la siguiente sección veremos algunos ejemplos en los que podremos utilizar estas instrucciones.
@ -157,7 +163,6 @@ en los ejemplos uxntal podemos ver sus etiquetas definidas de la siguiente maner
```
ignoraremos los primeros elementos por el momento, y nos centraremos en los componentes de color.
dispositivo de sistema y colores
## colores del sistema
@ -175,7 +180,7 @@ podemos escribirlo de la siguiente manera:
( hola-pantalla.tal )
( dispositivos )
|00 @Sistema [ &vector $2 &pad $6 &r $2 &g $2 &b $2 ]
|00 @Sistema [ &vector $2 &pad $6 &r $2 &g $2 &b $2 ]
( programa principal )
|0100
@ -196,7 +201,7 @@ podemos leer cada uno de los colores verticalmente, de izquierda a derecha:
si ejecutamos el programa ahora veremos una pantalla de color púrpura oscuro, en lugar de negro como lo que teníamos antes.
prueba a cambiar los valores del color 0, es decir, la primera columna, y mira lo que pasa :)
prueba cambiar los valores del color 0, es decir, la primera columna, y mira lo que pasa :)
# el dispositivo de pantalla
@ -212,7 +217,7 @@ en los programas uxntal para el ordenador varvara puedes encontrar las etiquetas
|20 @Pantalla [ &vector $2 &ancho $2 &alto $2 &pad $2 &x $2 &y $2 &direc $2 &pixel $1 &sprite $1 ]
```
las entradas que podemos leer de este dispositivo son
las entradas que podemos leer de este dispositivo son:
* vector (2 bytes)
* anchura de la pantalla (2 bytes)
@ -267,25 +272,38 @@ una pregunta para ti: si quisiéramos establecer las coordenadas como ( x: 4, y:
el envío de un único byte a .Pantalla/pixel realizará el dibujo en la pantalla.
el nibble alto de ese byte, es decir, el dígito hexadecimal de la izquierda, determinará la capa en la que dibujaremos:
* 0: dibujar un solo píxel en el fondo
* 4: dibujar un solo píxel en el primer plano
palabras en
el nibble inferior del byte, es decir, el dígito hexadecimal de la derecha, determinará su color.
las 8 posibles combinaciones del byte 'pixel' que tenemos para dibujar un pixel son:
* 00: dibujar el píxel con el color 0 en la capa del fondo
* 01: dibujar un píxel con el color 1 en la capa del fondo
* 02: dibujar el píxel con el color 2 en la capa del fondo
* 03: dibujar el píxel con el color 3 en la capa del fondo
* 40: dibujar un píxel con el color 0 en la capa del primer plano
* 41: dibujar el píxel con el color 1 en la capa del primer plano
* 42: dibujar el píxel con el color 2 en la capa del primer plano
* 43: dibujar el píxel con el color 3 en la capa del primer plano
+ <table>
+ <tr><th>byte de píxel</th><th>capa</th><th>color</th></tr>
+ <tr><td>00</td><td>plano de fondo</td><td>0</td></tr>
+ <tr><td>01</td><td>plano de fondo</td><td>1</td></tr>
+ <tr><td>02</td><td>plano de fondo</td><td>2</td></tr>
+ <tr><td>03</td><td>plano de fondo</td><td>3</td></tr>
+ <tr><td>40</td><td>primer plano</td><td>0</td></tr>
+ <tr><td>41</td><td>primer plano</td><td>1</td></tr>
+ <tr><td>42</td><td>primer plano</td><td>2</td></tr>
+ <tr><td>43</td><td>primer plano</td><td>3</td></tr>
+ </table>
& * 00: dibujar el píxel con el color 0 en la capa del fondo
& * 01: dibujar un píxel con el color 1 en la capa del fondo
& * 02: dibujar el píxel con el color 2 en la capa del fondo
& * 03: dibujar el píxel con el color 3 en la capa del fondo
& * 40: dibujar un píxel con el color 0 en la capa del primer plano
& * 41: dibujar el píxel con el color 1 en la capa del primer plano
& * 42: dibujar el píxel con el color 2 en la capa del primer plano
& * 43: dibujar el píxel con el color 3 en la capa del primer plano
## hola píxel
el siguiente código dibujará un píxel con el color 1 en la capa del primer plano, en las coordenadas (8,8):
¡probemos todo juntos! el siguiente código dibujará un píxel con el color 1 en la capa del primer plano, en las coordenadas (8,8):
```
#0008 .Pantalla/x DEO2
@ -321,9 +339,9 @@ recuerda que puedes usar F1 para cambiar de nivel de zoom, y F3 para hacer captu
## hola píxeles
los valores que establecemos en las coordenadas x e y permanecen ahí hasta que los sobrescribimos.
los valores que establecemos en las coordenadas x e `y` permanecen ahí hasta que los sobrescribimos.
Por ejemplo, podemos dibujar múltiples píxeles en una línea horizontal, estableciendo la coordenada "y" sólo una vez:
Por ejemplo, podemos dibujar múltiples píxeles en una línea horizontal, estableciendo la coordenada `y` sólo una vez:
```
( establecer coordenadas y )
@ -361,7 +379,7 @@ podemos definir una macro para que este proceso sea más fácil de escribir:
todavía no cubriremos las estructuras repetitivas, pero esta es una buena oportunidad para empezar a alinear nuestro código hacia eso.
aunque las coordenadas x e y del dispositivo de pantalla están pensadas como salidas, también podemos leerlas como entradas.
aunque las coordenadas x e `y` del dispositivo de pantalla están pensadas como salidas, también podemos leerlas como entradas.
por ejemplo, para leer la coordenada x, empujando su valor hacia abajo en la pila, podemos escribir:
@ -513,7 +531,6 @@ basándonos en eso, podríamos codificar nuestro cuadrado de la siguiente manera
en uxntal, necesitamos etiquetar y escribir en la memoria principal los datos correspondientes al sprite. escribimos los bytes que van de arriba a abajo del sprite:
```
@cuadrado ff81 8181 8181 81ff
```
@ -544,29 +561,44 @@ de forma similar a lo que ya vimos con el píxel, el envío de un byte a .Pantal
### sprite de nibble alto para 1bpp
el nibble alto del byte 'sprite' determinará la capa en la que dibujaremos, igual que cuando dibujábamos usando el byte 'pixel'.
el nibble alto del byte 'sprite' determinará la capa en la que dibujaremos, igual que cuando dibujábamos usando el byte 'píxel'.
sin embargo, en este caso tendremos otras posibilidades: podemos rotar el sprite en el eje horizontal (x) y/o en el vertical (y).
los ocho valores posibles de este nibble alto, utilizados para dibujar un sprite de 1bpp, son:
* 0: dibujar un sprite de 1bpp en el fondo, con la orientación original
* 1: dibujar un sprite de 1bpp en el fondo, rotado horizontalmente
* 2: dibujar un sprite de 1bpp en el fondo, rotado verticalmente
* 3: dibujar un sprite de 1bpp en el fondo, rotado horizontalmente y verticalmente
* 4: dibujar un sprite de 1bpp en primer plano, con la orientación original
* 5: dibujar un sprite de 1bpp en primer plano, rotado horizontalmente
* 6: dibujar un sprite de 1bpp en primer plano, rotado verticalmente
* 7: dibujar un sprite de 1bpp en primer plano, rotado horizontalmente y verticalmente
+ <table>
+ <tr><th>nibble alto</th><th>capa</th><th>rotar-y</th><th>rotar-x</th></tr>
+ <tr><td>0</td><td>plano de fondo</td><td>no</td><td>no</td></tr>
+ <tr><td>1</td><td>plano de fondo</td><td>no</td><td>sí</td></tr>
+ <tr><td>2</td><td>plano de fondo</td><td>sí</td><td>no</td></tr>
+ <tr><td>3</td><td>plano de fondo</td><td>sí</td><td>sí</td></tr>
+ <tr><td>4</td><td>primer plano</td><td>no</td><td>no</td></tr>
+ <tr><td>5</td><td>primero plano</td><td>no</td><td>sí</td></tr>
+ <tr><td>6</td><td>primero plano</td><td>sí</td><td>no</td></tr>
+ <tr><td>7</td><td>primero plano</td><td>sí</td><td>sí</td></tr>
+ </table>
& * 0: dibujar un sprite de 1bpp en el fondo, con la orientación original
& * 1: dibujar un sprite de 1bpp en el fondo, rotado horizontalmente
& * 2: dibujar un sprite de 1bpp en el fondo, rotado verticalmente
& * 3: dibujar un sprite de 1bpp en el fondo, rotado horizontalmente y verticalmente
& * 4: dibujar un sprite de 1bpp en primer plano, con la orientación original
& * 5: dibujar un sprite de 1bpp en primer plano, rotado horizontalmente
& * 6: dibujar un sprite de 1bpp en primer plano, rotado verticalmente
& * 7: dibujar un sprite de 1bpp en primer plano, rotado horizontalmente y verticalmente
si se observa con atención, se puede ver algún patrón: cada bit del nibble alto del byte del sprite corresponde a un aspecto diferente de este comportamiento.
lo siguiente muestra el significado de cada uno de estos bits en el nibble alto, suponiendo que estamos contando los bits del byte de derecha a izquierda, y de 0 a 7:
* bit 4: rotación-x
* bit 5: rotación-y
* bit 6: capa (0 es plano de fondo, 1 es primer plano)
* bit 7: modo (0 es 1bpp, 1 es 2bpp)
+ <table>
+ <tr><th>bit 7</th><th>bit 6</th><th>bit 5</th><th>bit 4</th></tr>
+ <tr><td>modo (0 es 1bpp, 1 es 2bpp)</td><td>capa (0 es plano de fondo, 1 es primer plano)</td><td>rotar verticalmente (0 es no, 1 es sí)</td><td>rotar horizontalmente (0 es no, 1 es sí)</td></tr>
+ </table>
& * bit 4: rotación-x
& * bit 5: rotación-y
& * bit 6: capa (0 es plano de fondo, 1 es primer plano)
& * bit 7: modo (0 es 1bpp, 1 es 2bpp)
como por ejemplo, cuando el nibble alto del 'sprite' es 0, que en binario es 0000, significa que todas las banderas están apagadas: por eso dibuja un sprite de 1bpp (0) en el fondo (0), que no esta rotado ni verticalmente (0) ni horizontalmente (0).
@ -574,24 +606,43 @@ un nibble alto de 1, es decir, 0001 en binario, tiene la última bandera encendi
### sprite de nibble bajo para 1bpp
el nibble bajo del byte 'sprite' determinará los colores que se utilizan para dibujar los píxeles "on" y "off" de los tiles.
el nibble bajo del byte 'sprite' determinará los colores que se utilizan para dibujar los píxeles "encendido" y "apagado" de los tiles.
* 0: borrar tile
* 1: "encendido" con el color 1, "apagado" con el color 0
* 2: "encendido" con el color 2, "apagado" con el color 0
* 3: "on" con el color 3, "off" con el color 0
* 4: "encendido" con el color 0, "apagado" con el color 1
* 5: "encendido" con el color 1, "apagado" sin color
* 6: "encendido" con el color 2, "apagado" con el color 1
* 7: "encendido" con el color 3, "apagado" con el color 1
* 8: "encendido" con el color 0, "apagado" con el color 2
* 9: "on" con el color 1, "off" con el color 2
* a: "on" con color 2, "off" sin color
* b: "encendido" con el color 3, "apagado" con el color 2
* c: "on" con color 0, "off" con color 3
* d: "encendido" con el color 1, "apagado" con el color 3
* e: "on" con el color 2, "off" con el color 3
* f: "encendido" con el color 3, "apagado" sin color
+ <table>
+ <tr><th>nibble bajo</th><th>color "encendido"</th><th>color "apagado"</th></tr>
+ <tr><td>0</td><td>borrar</td><td>borrar</td></tr>
+ <tr><td>1</td><td>1</td><td>0</td></tr>
+ <tr><td>2</td><td>2</td><td>0</td></tr>
+ <tr><td>3</td><td>3</td><td>0</td></tr>
+ <tr><td>4</td><td>0</td><td>1</td></tr>
+ <tr><td>5</td><td>1</td><td>nada</td></tr>
+ <tr><td>6</td><td>2</td><td>1</td></tr>
+ <tr><td>7</td><td>3</td><td>1</td></tr>
+ <tr><td>8</td><td>0</td><td>2</td></tr>
+ <tr><td>9</td><td>1</td><td>2</td></tr>
+ <tr><td>a</td><td>2</td><td>nada</td></tr>
+ <tr><td>b</td><td>3</td><td>2</td></tr>
+ <tr><td>c</td><td>0</td><td>3</td></tr>
+ <tr><td>d</td><td>1</td><td>3</td></tr>
+ <tr><td>e</td><td>2</td><td>3</td></tr>
+ <tr><td>f</td><td>3</td><td>nada</td></tr>
+ </table>
& * 0: borrar tile
& * 1: "encendido" con el color 1, "apagado" con el color 0
& * 2: "encendido" con el color 2, "apagado" con el color 0
& * 3: "encendido" con el color 3, "apagado" con el color 0
& * 4: "encendido" con el color 0, "apagado" con el color 1
& * 5: "encendido" con el color 1, "apagado" sin color
& * 6: "encendido" con el color 2, "apagado" con el color 1
& * 7: "encendido" con el color 3, "apagado" con el color 1
& * 8: "encendido" con el color 0, "apagado" con el color 2
& * 9: "encendido" con el color 1, "apagado" con el color 2
& * a: "encendido" con color 2, "apagado" sin color
& * b: "encendido" con el color 3, "apagado" con el color 2
& * c: "encendido" con color 0, "apagado" con color 3
& * d: "encendido" con el color 1, "apagado" con el color 3
& * e: "encendido" con el color 2, "apagado" con el color 3
& * f: "encendido" con el color 3, "apagado" sin color
notemos que un 0 en el nibble inferior borrará el tile.
@ -599,7 +650,7 @@ además, 5, 'a' y 'f' en el nibble bajo dibujarán los píxeles que están "ence
## hola sprite
hagámoslo! El siguiente programa dibujará nuestro sprite una vez:
¡hagámoslo! el siguiente programa dibujará nuestro sprite una vez:
```
( hola-sprite.tal )
@ -660,7 +711,7 @@ el siguiente código dibujará nuestro sprite cuadrado con las 16 combinaciones
( establecer coordenadas iniciales x,y )
INIT-X INIT-Y
( establecer direccion del sprite )
( establecer dirección del sprite )
;cuadrado .Pantalla/direc DEO2
#00 .Pantalla/sprite DEO 8ADD-X
@ -800,14 +851,25 @@ el nibble alto para los sprites de 2bpp nos permitirá elegir la capa que querem
los ocho valores posibles para este nibble son:
* 8: dibujar un sprite de 2bpp en el fondo, con la orientación original
* 9: dibujar un sprite de 2bpp en el fondo, rotado horizontalmente
* a: dibujar un sprite 2bpp en el fondo, rotado verticalmente
* b: dibujar un sprite de 2bpp en el fondo, rotado horizontal y verticalmente
* c: dibujar un sprite de 2bpp en primer plano, con la orientación original
* d: dibujar un sprite de 2bpp en primer plano, rotado horizontalmente
* e: dibujar un sprite de 2bpp en primer plano, rotado verticalmente
* f: dibujar un sprite de 2bpp en primer plano, rotado horizontal y verticalmente
+ <table>
+ <tr><th>nibble alto</th><th>capa</th><th>rotar-y</th><th>rotar-x</th></tr>
+ <tr><td>8</td><td>plano de fondo</td><td>no</td><td>no</td></tr>
+ <tr><td>9</td><td>plano de fondo</td><td>no</td><td>sí</td></tr>
+ <tr><td>a</td><td>plano de fondo</td><td>sí</td><td>no</td></tr>
+ <tr><td>b</td><td>plano de fondo</td><td>sí</td><td>sí</td></tr>
+ <tr><td>c</td><td>primer plano</td><td>no</td><td>no</td></tr>
+ <tr><td>d</td><td>primer plano</td><td>no</td><td>sí</td></tr>
+ <tr><td>e</td><td>primer plano</td><td>sí</td><td>no</td></tr>
+ <tr><td>f</td><td>primer plano</td><td>sí</td><td>sí</td></tr>
+ </table>
& * 8: dibujar un sprite de 2bpp en el fondo, con la orientación original
& * 9: dibujar un sprite de 2bpp en el fondo, rotado horizontalmente
& * a: dibujar un sprite 2bpp en el fondo, rotado verticalmente
& * b: dibujar un sprite de 2bpp en el fondo, rotado horizontal y verticalmente
& * c: dibujar un sprite de 2bpp en primer plano, con la orientación original
& * d: dibujar un sprite de 2bpp en primer plano, rotado horizontalmente
& * e: dibujar un sprite de 2bpp en primer plano, rotado verticalmente
& * f: dibujar un sprite de 2bpp en primer plano, rotado horizontal y verticalmente
notemos que estos ocho valores tienen todos un bit más a la izquierda en 1: este bit señala que vamos a dibujar un sprite de 2bpp. los otros tres bits del nibble se comportan como se ha descrito anteriormente en el caso de 1bpp.
@ -815,24 +877,43 @@ notemos que estos ocho valores tienen todos un bit más a la izquierda en 1: est
el nibble bajo nos permitirá elegir entre muchas combinaciones de colores asignados a cada uno de los diferentes estados de los píxeles:
* 0: colores 0, 0, 1, 2
* 1: colores 0, 1, 2, 3
* 2: colores 0, 2, 3, 1
* 3: colores 0, 3, 1, 2
* 4: colores 1, 0, 1, 2
* 5: colores ninguno, 1, 2, 3
* 6: colores 1, 2, 3, 1
* 7: colores 1, 3, 1, 2
* 8: colores 2, 0, 1, 2
* 9: colores 2, 1, 2, 3
* a: colores ninguno, 2, 3, 1
* b: colores 2, 3, 1, 2
* c: colores 3, 0, 1, 2
* d: colores 3, 1, 2, 3
* e: colores 3, 2, 3, 1
* f: colores ninguno, 3, 1, 2
+ <table>
+ <tr><th>nibble bajo</th><th>color del estado 0</th><th>color del estado 1</th><th>color del estado 2</th><th>color del estado 3</th></tr>
+ <tr><td>0</td><td>0</td><td>0</td><td>1</td><td>2</td></tr>
+ <tr><td>1</td><td>0</td><td>1</td><td>2</td><td>3</td></tr>
+ <tr><td>2</td><td>0</td><td>2</td><td>3</td><td>1</td></tr>
+ <tr><td>3</td><td>0</td><td>3</td><td>1</td><td>2</td></tr>
+ <tr><td>4</td><td>1</td><td>0</td><td>1</td><td>2</td></tr>
+ <tr><td>5</td><td>nada</td><td>1</td><td>2</td><td>3</td></tr>
+ <tr><td>6</td><td>1</td><td>2</td><td>3</td><td>1</td></tr>
+ <tr><td>7</td><td>1</td><td>3</td><td>1</td><td>2</td></tr>
+ <tr><td>8</td><td>2</td><td>0</td><td>1</td><td>2</td></tr>
+ <tr><td>9</td><td>2</td><td>1</td><td>2</td><td>3</td></tr>
+ <tr><td>a</td><td>nada</td><td>2</td><td>3</td><td>1</td></tr>
+ <tr><td>b</td><td>2</td><td>3</td><td>1</td><td>2</td></tr>
+ <tr><td>c</td><td>3</td><td>0</td><td>1</td><td>2</td></tr>
+ <tr><td>d</td><td>3</td><td>1</td><td>2</td><td>3</td></tr>
+ <tr><td>e</td><td>3</td><td>2</td><td>3</td><td>1</td></tr>
+ <tr><td>f</td><td>nada</td><td>3</td><td>1</td><td>2</td></tr>
+ </table>
& * 0: colores 0, 0, 1, 2
& * 1: colores 0, 1, 2, 3
& * 2: colores 0, 2, 3, 1
& * 3: colores 0, 3, 1, 2
& * 4: colores 1, 0, 1, 2
& * 5: colores ninguno, 1, 2, 3
& * 6: colores 1, 2, 3, 1
& * 7: colores 1, 3, 1, 2
& * 8: colores 2, 0, 1, 2
& * 9: colores 2, 1, 2, 3
& * a: colores ninguno, 2, 3, 1
& * b: colores 2, 3, 1, 2
& * c: colores 3, 0, 1, 2
& * d: colores 3, 1, 2, 3
& * e: colores 3, 2, 3, 1
& * f: colores ninguno, 3, 1, 2
## hola nuevos sprites!
## ¡hola nuevos sprites!
=> ./img/screenshot_uxn-tiles-2bpp.png captura de pantalla de la salida del programa, mostrando 16 cuadrados coloreados con diferentes combinaciones de contorno y relleno.
@ -860,7 +941,7 @@ el siguiente código mostrará nuestro sprite en las 16 diferentes combinaciones
( establecer coordenadas iniciales x,y )
INIT-X INIT-Y
( set sprite direcess )
( establecer dirección del sprite )
;nuevo-cuadrado .Pantalla/direc DEO2
#80 .Pantalla/sprite DEO cADD-X
@ -891,7 +972,7 @@ BRK
@nuevo-cuadrado 017f 7b73 6343 7fff 007c 7c7c 7c7c 0000
```
intenta rotar los tiles!
¡intenta rotar los tiles!
## screen.tal y las combinaciones del byte del sprite
@ -953,7 +1034,7 @@ si te has descargado el repositorio con el código fuente, verás que dentro del
#define HEIGHT 40 * 8
```
esos dos números, 64 y 40, son el tamaño de pantalla por defecto en tiles, como mencionamos anteriormente.
esos dos números, 64 y 40 (ancho y alto), son el tamaño de pantalla por defecto en tiles, como mencionamos anteriormente.
puedes cambiarlos, guardar el archivo y volver a ejecutar el script build.sh para que uxnemu funcione con esta nueva resolución.
@ -1025,18 +1106,18 @@ para seguir ilustrando el uso de las macros, podríamos definir unas macros MITA
usando DIV:
```
%MITAD { #02 DIV } ( numero -- numero/2 )
%MITAD2 { #0002 DIV2 } ( numero -- numero/2 )
%MITAD { #02 DIV } ( número -- número/2 )
%MITAD2 { #0002 DIV2 } ( número -- número/2 )
```
usando SFT:
```
%MITAD { #01 SFT } ( numero -- numero/2 )
%MITAD2 { #01 SFT2 } ( numero -- numero/2 )
%MITAD { #01 SFT } ( número -- número/2 )
%MITAD2 { #01 SFT2 } ( número -- número/2 )
```
and use any of them to calculate the center:
y utilizar cualquiera de ellos para calcular el centro:
```
.Pantalla/ancho DEI2 MITAD2 .Pantalla/x DEO2
@ -1070,9 +1151,7 @@ también cubrimos el modo corto, que le indica a la cpu que debe operar con pala
# día 3
¡en el tutorial de uxn del día 3 empezamos a trabajar con la interactividad usando el teclado, y cubrimos en profundidad varias instrucciones uxntales!
=> ./tutorial_de_uxn_día_3.gmi {tutorial de uxn día 3}
¡en el {tutorial de uxn día 3} empezamos a trabajar con la interactividad usando el teclado, y cubrimos en profundidad varias instrucciones uxntales!
sin embargo, te invito a que te tomes un descanso, y a que sigas explorando el dibujo en la pantalla de uxn a través del código antes de continuar!

View File

@ -123,7 +123,7 @@ los programas para el ordenador varvara escritos por 100r suelen tener la capaci
estos seis bytes están en orden: los dos primeros son para el canal rojo, los dos siguientes para el canal verde y los dos últimos para el canal azul.
este archivo tiene el nombre de ".tema" y se escribe en un directorio local de nasu cada vez que se guarda una hoja de sprites.
este archivo tiene el nombre de ".theme" y se escribe en un directorio local de nasu cada vez que se guarda una hoja de sprites.
=> https://wiki.xxiivv.com/site/theme.html temas uxn
@ -152,8 +152,8 @@ podríamos adaptar nuestra subrutina anterior para cargar el archivo de temas y
&fallo
RTN
@tema
&nombre ".tema 00
@tema
&nombre ".theme 00
&datos ( reservando 6 bytes para los datos: )
&r $2 &g $2 &b $2
```
@ -328,7 +328,7 @@ el ejemplo piano.tal en el repositorio uxn, tiene varios de ellos, todos de 256
4143 4547 494b 4d4f 5153 5557 595b 5d5f
6163 6567 696b 6d6f 7173 7577 797b 7d7f
@saw-pcm
@sierra-pcm
8282 8183 8384 8685 8888 8889 8a8b 8c8c
8e8e 8f90 9092 9193 9494 9596 9699 9899
9b9a 9c9c 9c9d 9ea0 a1a0 a2a2 a3a5 a4a6
@ -369,15 +369,15 @@ sin-pcm:
=> ./img/screenshot_uxn-waveform_sin.png forma de onda de la muestra de sin
tri-pcm:
=> ./img/screenshot_uxn-waveform_tri.png forma de onda de la muestra de sin
=> ./img/screenshot_uxn-waveform_tri.png forma de onda de la muestra de tri
saw-pcm:
=> ./img/screenshot_uxn-waveform_saw.png forma de onda de la muestra de sin
sierra-pcm:
=> ./img/screenshot_uxn-waveform_saw.png forma de onda de la muestra de sierra
de forma similar a como hemos tratado los sprites, y de forma parecida al dispositivo de archivo comentado anteriormente, para fijar una muestra en el dispositivo de audio sólo tenemos que escribir su dirección y su longitud:
```
;saw-pcm .Audio0/direc DEO2 ( establecer la dirección de la muestra )
;sierra-pcm .Audio0/direc DEO2 ( establecer la dirección de la muestra )
#0100 .Audio0/largo DEO2 ( establecer la longitud de la muestra )
```
@ -411,7 +411,7 @@ en teoría, parecería que el siguiente programa debería reproducir nuestra mue
( programa principal )
|0100
;saw-pcm .Audio0/direc DEO2 ( establecer la dirección de la muestra )
;sierra-pcm .Audio0/direc DEO2 ( establecer la dirección de la muestra )
#0100 .Audio0/largo DEO2 ( establecer la longitud de la muestra )
#3c .Audio0/pitch DEO ( establecer el pitch como Do medio )
@ -431,7 +431,7 @@ por lo tanto, cada canal tiene 16 niveles posibles: 0 es el mínimo, y f el máx
lo siguiente establecería el volumen máximo en el dispositivo:
```
#ff . Audio0/volumen DEO ( establecer el volumen máximo en izquierda y derecha )
#ff .Audio0/volumen DEO ( establecer el volumen máximo en izquierda y derecha )
```
¡aunque las muestras son mono, podemos panoramizarlas con el byte de volumen para obtener un sonido estéreo!
@ -477,7 +477,7 @@ ok, ¡ahora estamos listos para reproducir el sonido!
( programa principal )
|0100
;saw-pcm .Audio0/direc DEO2 ( establecer la dirección de la muestra )
;sierra-pcm .Audio0/direc DEO2 ( establecer la dirección de la muestra )
#0100 .Audio0/largo DEO2 ( establecer la longitud de la muestra )
#ffff .Audio0/adsr DEO2 ( establecer la envolvente )
#ff .Audio0/volumen DEO ( establecer el volumen máximo )

View File

@ -45,6 +45,7 @@ let's see some examples!
### LIT2
first of all, let's recap. the following code will push number 02 down onto the stack, then it will push number 30 (hexadecimal) down onto the stack, and finally add them together, leaving number 32 in the stack:
```
#02 #30 ADD
```
@ -98,6 +99,7 @@ now, let's compare with what happens with ADD2:
```
in this case we are pushing the same 4 bytes down onto the stack, but ADD2 is doing the following actions:
* take the top element of the stack (08), and store it as the low byte of the first short
* take the new top element of the stack (00), and store it as the high byte of the first short, that is now 0008
* take the new top element of the stack (04), and store it as the low byte of the second short
@ -178,7 +180,7 @@ we could write that as follows:
( hello-screen.tal )
( devices )
|00 @System [ &vector $2 &pad $6 &r $2 &g $2 &b $2 ]
|00 @System [ &vector $2 &pad $6 &r $2 &g $2 &b $2 ]
( main program )
|0100
@ -308,7 +310,7 @@ let's try it all together! the following code will draw a pixel with color 1 in
#41 .Screen/pixel DEO
```
the complete program would look as follows:
the complete program would look as follows:
```
( hello-pixel.tal )
@ -575,7 +577,6 @@ the eight possible values of this high nibble, used for drawing a 1bpp sprite, a
+ <tr><td>6</td><td>foreground</td><td>yes</td><td>no</td></tr>
+ <tr><td>7</td><td>foreground</td><td>yes</td><td>yes</td></tr>
+ </table>
& * 0: draw a 1bpp sprite in the background, original orientation
& * 1: draw a 1bpp sprite in the background, flipped horizontally
& * 2: draw a 1bpp sprite in the background, flipped vertically
@ -647,7 +648,6 @@ note that 0 in the low nibble will clear the tile.
additionally, 5, 'a' and 'f' in the low nibble will draw the pixels that are "on" but will leave the ones that are "off" as is: this will allow you to draw over something that has been drawn before, without erasing it completely.
## hello sprite
let's do this! the following program will draw our sprite once:
@ -862,7 +862,6 @@ the eight possible values for this nibble are:
+ <tr><td>e</td><td>foreground</td><td>yes</td><td>no</td></tr>
+ <tr><td>f</td><td>foreground</td><td>yes</td><td>yes</td></tr>
+ </table>
& * 8: draw a 2bpp sprite in the background, original orientation
& * 9: draw a 2bpp sprite in the background, flipped horizontally
& * a: draw a 2bpp sprite in the background, flipped vertically
@ -897,7 +896,6 @@ the low nibble will allow us to choose between many combinations of colors assig
+ <tr><td>e</td><td>3</td><td>2</td><td>3</td><td>1</td></tr>
+ <tr><td>f</td><td>none</td><td>3</td><td>1</td><td>2</td></tr>
+ </table>
& * 0: colors 0, 0, 1, 2
& * 1: colors 0, 1, 2, 3
& * 2: colors 0, 2, 3, 1
@ -1157,7 +1155,6 @@ in {uxn tutorial day 3} we start working with interactivity using the keyboard,
however, i invite you to take a break, and maybe keep exploring drawing in the uxn screen via code, before continuing!
# support
if you enjoyed this tutorial and found it helpful, consider sharing it and giving it your {support} :)