Un programador utiliza Photoshop para crear una imagen de 81 píxeles (9x9) que se puede ejecutar directamente en Windows como código nativo. El resultado muestra una animación con el efecto túnel. Relacionada: Los hombres de verdad programan en MS Paint
Publicado hace 13 años por
Brucen
a
twitter.com
Publicado hace 13 años por
Brucen
a
twitter.com
![Efecto túnel "programado" en píxeles [ENG]](https://cdn.mnmstatic.net/cache/12/b5/media_thumb_2x-link-1226153.jpeg?1417862727)
Comentarios
Para los que no se crean que puedes crear una animación en 224 bytes (que es lo que ocupa en verdad el ejecutable, aunque tuve que añadir un byte extra vacío para que el número fuera múltiplo de 3), aquí va el código. es código de x86 en modo real (16 bits), lo cual significa que funciona de forma nativa en Windows XP, pero no en Vista ni W7 (pero puedes rularlo mediante DosBox). Para los que saben poco de programación, un .com es un ejecutable de MsDos con código binario plano. No hace llamadas al API de Windows, ni OpengGL ni ninguna otra librería externa, porque es eso, un programa de MsDos, y en aquella época no exitía Windows. La BIOS (a la que se accedía mediante la interrupción "int 0x10") se encargaban de implementar el cambio de modo grafico. El hardware de la targeta de video VGA (accedido mediante el puerto "out 0x3c8") se utilzaba para elegir los colores de la paleta. El resto, es ya manipulación de la memoria de la VGA (dirección 0xa000) para dibujar directamente las imágenes en la pantalla mediante manipulación de los bytes individuales de cada pixel.
El código fuente es este:
[BITS 16]
[ORG 0x100]
[SECTION .text]
; --- free .com memory ---
;mov bx, 1000h
mov bh, 10h
mov ah, 4Ah
int 21h
; --- texture malloc ---
;mov bx, (256*256/16)
mov ah, 48h
int 21h
mov gs, ax
; --- table malloc ---
;mov bx, (320*200*2/16)
mov bh, 32 ; sobran 192 bytes...
mov ah, 48h
int 21h
mov fs, ax
mov es, ax
; --- create table ---
mov bp, data
mov cl, 200 ; ( cx=0! )
@loopy:
xor di, di
mov bx, -160
@loopx:
mov ax, cx
sub ax, 100
mov [bp+3], ax
mov [bp+5], bx
fild word [bp+5] ; x
fild word [bp+3] ; x y
fld st0 ; x y y
fmul st0, st0 ; x y y^2
fld st2 ; x y y^2 x
fmul st0, st0 ; x y y^2 x^2
faddp st1, st0 ; x y y^2+x^2
fsqrt ; x y r
fidivr word [bp+1] ; x y d/r
fistp word [es:di+0] ; x y
fpatan ; a
fimul word [bp+0] ; a*128/pi=u
fistp word [es:di+1] ; x y
inc di
inc di
inc bx
cmp bx, 159
jle@loopx
mov ax, es
add ax, 320*2/16
mov es, ax
loop@loopy
; --- create texture ---
; --- create a xor texture ---
@looptex:
mov al, cl
xor al, ch
%if 0
mov bl, al ; x = 4*x*(1-x)
not al
mul bl
shr ax, 6
%endif
mov bx, cx
mov [gs:bx], al
loop @looptex
; --- soften ---
mov cl, 16
@sof:
;xor bx, bx
@loopSOF2:
;inc bl
mov al, [gs:bx]
;sub bl, 2
dec bl
add al, byte [gs:bx]
inc bl
inc bh
add al, byte [gs:bx]
sub bh, 2
add al, byte [gs:bx]
inc bh
shr ax, 2
mov [gs:bx], al
inc bx
jnz@loopSOF2
loop @sof
; --- set gfx mode ---
;mov ax, 0x0013
mov al, 0x13
int 0x10
; --- set video ptr --
push word 0xa000
pop es
;mov bh, 0xa0
;mov es, bx
; --- set palette ---
;mov cl, 63
@looppal:
mov al, cl
mov dx, 0x03c8
out dx, al
inc dx
out dx, al
out dx, al
out dx, al
loop@looppal
; --- start ! --------------------------------------------------------------
@superloop:
; --- inc "timer" ---
inc bp
; --- wait retrace ---
mov dl, 0xda
@r1: in al, dx
test al, 8
jz@r1
@r2: in al, dx
test al, 8
jnz@r2
; --- do_frame ---
push fs
xor di, di
mov cl, 200
@loopy2:
xor si, si
@loopx2:
mov bx, [fs:si]
add bx, bp
mov al, [gs:bx]
stosb
lodsw ; add si,2
cmp si, 640
jl@loopx2
mov ax, fs
add ax, 320*2/16
mov fs, ax
loop @loopy2
pop fs
; --- loop until kbhit() ---
mov ah, 0x11
int 0x16
jz@superloop
; --- set txt mode ---
mov ax, 3
int 0x10
; --- quit to dos ---
ret
; --- data ------------------------------------
data:
R128iPI db 41 ; 40.743665...
radio db 00, 10 ; 2560
que una vez compilado da como resultado 224 bytes binarios, que son los que se reproducen en photoshop mediante colores. Mas info en el link de la noticia.
Mecagoenlaleche Merche, Aquí dándole vueltas al asunto, leyéndome todos los comentarios, y leyendo por encima todo el tocho de #33, para que al final del comentario diga que:
"que una vez compilado da como resultado 224 bytes binarios, que son los que se reproducen en photoshop mediante colores. Mas info en el link de la noticia. "
Me parece muy interesante, pero al final lo que hace este tío, es escribir los bits de un programa que ha sido compilado, con pixels en lugar de hacerlo con los propios ceros y unos.
Imagino que para saber cuales son los píxels concretos, primero metería el código compilado en el Photoshop, y así le saldría el código de los colores que tenía que usar (que tampoco se como se hace y si es suficiente con cambiarle el nombre al archivo).
Aún que sea algo simple, esto puede ejercitar la imaginación de la gente, pensando para que puede ser útil, y eso siempre es bueno.
#33 hay instrucciones obviamente no soportadas por el emu8086, me dices con qué lo compilas?
#43 bcc -md , bcc en los repos de Debian o Ubuntu , y ejecutado en Dosbox o
osemu .
#43 #44 Con eso no lo he podido compilar, pero con nasm a la primera.
#45 Yo es que tengo NASM de 64 bit. ¿ Alguna solución ?
#45 #46 Ah , vale , ya lo saqué: nasm -fbin efecto.asm -o efecto.com && dosbox efecto.com .
Cuando DosBOX esté abierto, recomiendo subir los ciclos hasta 7000 o así , pulsando Ctrl + F12 .
#33 lo ha explicado perfectamente. Esto es solo posible en los .COM del MS-DOS, ya que son ejecutables sin cabecera y pueden tener un tamaño entre 1 byte y 64kb. Antes había una página en 256b.com con demos de menos de 256 bytes pero la cerraron, pero la cerraron. Como dice #23 se pueden ver muchas demos en este enlace:
http://www.pouet.net/prodlist.php?type[]=256b
El problema es que necesitas un SO antiguo (XP o anterior) para verlas a pantalla completa, o usar un emulador como DosBox. También se pueden hacer juegos pequeños (yo llegué a hacer un tetris en 212bytes), y también existen demos para ordenadores modernos, que gracias al uso de crinkler (compresor/linkador) y de librerías gráficas (Directx, Opengl) se pueden ver excelentes demos en 4Kb. También existen variantes de 1K y de 512bytes, pero teniendo en cuenta lo grande que son las cabeceras del formato PE (formato exe moderno), suelen ser muy simples (usan lenguaje de shading en lugar de ensamblador).
Respecto al autor de la demo, IQ, es de lo mejorcito que tenemos en España, recomiendo que vean elevated e ixaleno http://www.iquilezles.org/prods/index.htm
Por último, en cuanto a codificarlo usando Paint, no le veo el mérito. Tendría mérito hacer un juego en spectrum ensamblando a mano como hicieron muchos programadores por falta de medios (http://www.sandywhite.co.uk/fun/ants/) o programar el http://es.wikipedia.org/wiki/Altair_8800, pero esto del Paint no deja de ser una frikada. Por poder se puede hasta programar con un pulsador (y la demo la puedes mostran en un LED).
La madre que lo pario, estoy alucinando...
#2 Me esperaba alguna animación cutre pero he alucinado al verlo, la verdad. cuando tenga un rato lo pruebo a ver si realmente funciona
#2 Es majia!!!!
#19 tu comentario es muy majo
#11 conociendo primero el código generado, se abre con un editor Hexadecimal, y conociendo eso y que los colores se guardan en ese formato al ser mapas de bits, con hacer que coincidan los números lo tienes hecho. El tiempo de hacer el programa, sacar el hexa y de ahí los colores que tienen que ir en cada posición no lo ponen
#14 Ammmm, vamos, que no es tan sencillo como te lo ponen.
#15, eso es, bueno además que me he explicado de culo... je.
#15 al revés, es mucho más sencillo. Uno compila un programa desde cualquier lenguaje, mira el contenido del ejecutable generado y lo convierte en bitmap. Ahora solo tiene que redibujar ese bitmap manualmente (haciendo que parezca que se lo está inventando).
Sinceramente, es gracioso pero no tiene nada de hacker, ya que es puramente mecánico.
¿Se puede saber a que viene el negativo en #11 y #15 ?
#17 el link del paint lo puse en #7. En cuanto a la complejidad de este, la gracia está en el programa que se ha escrito (fijaos la calidad de la animación, tiene efectos, movimiento y "textura"). Todo eso en unos pocos bytes. Esa es la mayor dificultad. El pasarlo a binario usando paint es un detalle menor, como explica #14
#14 Exacto, la clave del tema está en la frase: "colors carefully chosen". Básicamente primera ha creado (o obtenido de algun lado) un programa en esamblador muy optimizado. Lo ha complido (o obtenido compilado). Esto no deja de ser un archivo con una ristra de números.
La grácia, a diferéncia del otro dia con el del paint, es que lo ha guardado en RAW (crudo). Este formato ocupa mucho más que un bmp o png. No usa ningún tipo de compresión ni nada: es simplemente un número detrás de otro y sin cabecera fija (com ocurre con el bmp). En definitiva el autor ha tenido que dividir el fichero en bytes (o parejas de bytes) y ver a que color corresponden.
La verdad, muy original.
Tendría mérito, por ejemplo, programar la misma demo en Visual Basic For Applications...
Madre!! Este es mucho mejor todavía que go.php?id=1223180
Me recuerda a las competiciones de ejecutables de mínimo tamaño, programados íntegramente en ensamblador, que muestran animaciones o permiten jugar a juegos en 3D con música con un tamaño ridículo, todo generándolo mediante algoritmos. Para quien le interese estas cosas:
http://www.razor1911.com/demo/index.php?menu=products&platform=win32 (del equipo Razor1911 que seguro a más de uno le suena )
http://www.theprodukkt.com/ (simplemente impresionante, juego de 96 kb)
Me parece de alucine los comentarios que estoy leyendo de esta noticia...
El autor del post, Ínigo Quílez, es probablemente uno de los mejores exponentes españoles -sino el mejor- en programación gráfica, autor de la magnífica intro de 4k Elevated (http://pouet.net/prod.php?which=52938). Por otra parte, programar en 256, 128 o menos bytes un efecto de túnel no es algo tan absolutamente increible como algunas personas (con un desconocimiento tremendo) intentan demostrar (véase http://pouet.net para más referencias).
#27 Matemáticas . El tunel es simplemente una función matemática a partir de una secuencia de píxeles.
Ummm, interezting.
¡Cada vez queréis hundirnos más en la miseria a los que creíamos que sabíamos programar!
Tenéis razón , solo que me resulto tan impactante que con tan poco código se puedan crear efectos así que no lo razone tranquilamente.
¿Alguien lo explica?
#9 Imagina la secuencia de caracteres binarios:
1010111111100101000001011101010101010111111011000100010011110111110
Si lo interpreto como si fuera un número (en base 2), en decimal sería el 5106545. (por ejemplo, no real)
Si lo interpreto como si fuera una cadena (código ascii), sería "HOLA". (por ejemplo, no real)
Yo podría escribir cualquier palabra, como si fuera un número; o viceversa, escribir cualquier número como si fuera una palabra (secuencia de caracteres).
Ahora subes un poco más de nivel, y sabiendo cómo pintar un dibujo (en el fondo será un archivo con unos y ceros) para que su código binario (unos y ceros), al leerlos como si fueran una aplicación (.exe o .com) en vez de un dibujo en formato crudo (.raw) se ejecute, se podría hacer cualquier programa (cuanto más grande, miles de millones de veces más difícil. Por eso el tipo que hizo esto tiene mucho mérito.
#10 ¿Si, pero como sabe esa persona que color debe usar en cada lugar para que luego se interprete de una u otra forma?
Cada día me quedo más asombrado con la gente que comienza a programar a través de imágenes.
#29 existe el lenguaje de programación por mapa de bits, pero realmente nadie puede usarlo para programar, lo que si se consigue es hacer un programa y traducirlo al código y hacer el paripé de "mírame mamá estoy programando en colorines" pero realmente no tiene ninguna utilidad práctica
¡He visto la luz!
Hombre, si mostrara el código que se le ha creado, estaría mejor la verdad. Aún así, esto tiene su curro eh!! Aunque la calculadora de Windows 7 te pasa los binarios a hexadecimal y viceversa Pasos que se quita
#21 Lo muestra. En la consola, con el comando debug.
#25 Lo bien que me he fijado lo que ponía en el cmd...
Si esta noticia no fuese de informática no llegaba a portada ni de coña, y no solo por no tener meneos, si no porque los irrelevantes lloverían
#35 si esta noticia no fuese de informática no sería esta noticia, sería otra y de otra cosa.... nos ha jodido mayo con las flores.
#37 Lo que quiero decir, es que una noticia de la misma relevancia global de otro sector (por ejemplo: nuevos envases para vegetales de atmósfera controlada de CO2) no resultaría interesante porque en esta comunidad no abundan los ingenieros de industrias alimentarias tanto como los informáticos, cuyo sector es una abrumadora mayoría pero que, bajo mi punto de vista, no debería ser suficiente como para no filtrar estás noticias, ya que al fin y al cabo, lo que se pretende es que la portada sea de interés para cualquier persona, y esto es como poner un artículo en chino para muchos.
Waw qué pasada!! Al final pensé que me saldría la niña del exorcista o el espíritu de Michael Jackson diciendo que era una broma, pero no, no salen...
Bien... después de esto me saco el título de programador
El otro día salió uno que programaba código en paint, y salía un Hello Word en texto.
Supongo que ahora todos, igual que este, empezarán a hacer lo mismo,
El del paint tenía más mérito ya que iba metiendo a mano los números del RGB. Este va copiando con el cuentagotas y pegando colores que ya tiene abiertos previamente fuera del encuadre de la grabación.
De todas formas no lo estoy criticando, lo digo como dato para el que quiera buscar al del Paint.
A mi en ningún momento me pareció que intentara engañar a alguien haciendo creer que se inventaba los colores y así lo programó.
Mas bien creo que el autor considera que se queda entendido que abrió un ejecutable en photoshop y luego hizo copió la misma información en otro archivo en blanco, no intención de engañar.
¿engañar? no, no, joder. como explico en el blog, es básicamente un ejercicio de demostrar visualmente cuan poco hace falta para crear una animación. enseñar código, fuente o binario, no suele ayudar. pero enseñar una imagen de 9x9 pixels, que se crea en cuestión de minutos como se ve en el video, es mucho más gráfico y puede ayudar a entender cuan poco son 224 bytes, y cuánto se puede extraer de ellos. el picking de colores no lo hice de memoria, o es que alguien pensó que tengo los opcodes en mi cabeza y tengo también una vista de águila que discierne valores numéricos en los colores?
Muy buen post, noticias muy relevante para el diseño
Equipo de Touchscreen10.com
Tengo la suerte de conocer a IQ y sólo puedo decir una cosa... IQ eres un puto genio!!! y encima un tío de puta madre . Por cierto, es tu primera portada en meneame o ya la conseguiste con elevated? Ale, un abrazo titi!
Qué grande que aún se usen las 13h y el efecto tunel, por otros medios, y los que no han conocido ASM se queden perpelejos y se pregunten si eso cabe en esa imagen o no... las euskalparty, la pcmania y el autoexec.bat, soy joven pero me siento un carroza digital.
Visto en este tweet:
lo siento pero no me lo creo. La cantidad de código que puede haber almacenado en ese archivo es insuficiente para crear ese túnel gráfico . Pero claro hecha la ley hecha la trampa , siempre pueden llamar a una función gráfica de alguna de las librerías que necesita con los parámetros que ponga en los pixelillos estos. Las cuales por supuesto son externas a dicho gráfico.
.
Yo lo llamo fraude .
P.D: Por supuesto el hello world es bastante mas factible , pero este es una tomadura de pelo
#20 9 * 9 * 3 bytes por pixel da para 243 bytes de código. Poco pero suficiente para hacer un efecto como ese. Si además usas el canal alfa tienes 324 bytes.
http://www.pouet.net/prodlist.php?type[]=256b
En ese enlace tienes efectos similares en 256 bytes.
#23 he mirado los efectos ahí y se quedan algo cortos , lo que voy a hacer es replicarlo con la imagen y veremos rápidamente si funciona o no .
#20 Se llama generación procedural de gráficos, que es en lo que se basa la "Demoscene"
http://goo.gl/GTog0
Un bmp tan pequeño no ocupa más de 500kb.
¿Por qué no ha puesto directamente el BMP en vez del PNG?
Sospechoso.
#6 Te lo está diciendo si lo lees: el BMP tiene unas cabeceras de imagen que hacen que el compilador detecte el archivo como basura.
Os dejo enlace a una animación en 3D, con música y efectos de sonido. Dura 7 minutos y ocupa 177kB
Farsbrauch, unos majetes que saben lo que se hacen.
Pues no sé, me parece raro ver a los 8 segundos en el navigator del photoshop el bitmap ya hecho y que luego lo vaya haciendo pixel a pixel... suena a que tiene la paleta hecha y simplemente va colocando los pixels en orden Hay muchísimas mejores muestras de talento en la demoscene que esto (ver #8 por ej).
Por cierto, ya que mucha gente se sorprende por lo de usar una imagen como ejecutable... al primero que lo ví hacer eso fué a un tal +Malattia allá por finales de los 90. Ya sin irnos tan lejos en el tiempo, se ha usado bastantes veces en 4chan para infectar gente y hacer DDoS (muchas veces contra el propio 4chan).
#6 #8 Ha puesto RAW no BMP (ni PNG). El RAW es como el BMP pero sin cabeceras (Los PNG's también tienen cabecera, luego tampoco valdrían para estos menesteres.
Hacer esto es trivial basta con:
- Coger un ejecutable cualquiera (uno pequeñito como por ejemplo el notepad.exe)
- Cambiarle la extensión de EXE a RAW
- Abrirlo con un editor de imagenes (Dado que el formato RAW carece de cabecera, habrá que indicarle que resolución tiene la imagen, y si está en color real, tonos de grises, usa paleta, etc)
- Y ya tenemos una imagen compuesta por pixeles aleatorios, lista para enseñar a tus amigos, y luego cambiarle la extensión nuevamente a EXE y mostrar el programa
No obstante, no deja de ser ligeramente didáctico.