{"id":121,"date":"2020-07-27T14:13:00","date_gmt":"2020-07-27T17:13:00","guid":{"rendered":"https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/?p=121"},"modified":"2020-08-10T12:26:51","modified_gmt":"2020-08-10T15:26:51","slug":"milton-5","status":"publish","type":"post","link":"https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/2020\/07\/27\/milton-5\/","title":{"rendered":"Milton #5"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Por volta de 1993 (13-14 anos de idade), descobri a <a rel=\"noreferrer noopener\" href=\"https:\/\/pt.wikipedia.org\/wiki\/Demoscene\" target=\"_blank\"><em>demoscene<\/em><\/a>. Foi um per\u00edodo de muita criatividade em fun\u00e7\u00e3o das in\u00fameras limita\u00e7\u00f5es impostas pelo <em>hardware <\/em>e <em>software<\/em> da \u00e9poca. O pouco interc\u00e2mbio com outros programadores resultava de mensagens trocadas por meio de <a rel=\"noreferrer noopener\" href=\"https:\/\/pt.wikipedia.org\/wiki\/Bulletin_board_system\" target=\"_blank\">BBS<\/a>, fanzines e outros tipos de documento (basicamente .txts) que acompanhavam os demos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se voc\u00ea precisasse de algum programa que n\u00e3o existia na sua m\u00e1quina ou rede de contatos, as alternativas eram: 1) desenvolva o seu; 2) encontre relatos de algu\u00e9m que desenvolveu e tente replicar.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A partir do envolvimento com a <em>scene<\/em> desenvolvi editores de fontes, de imagens, renderizadores 3D, compressores de arquivos e outros tipos de utilidades para colocar demos VGA (320x200x256 cores) no mundo (downloads <a rel=\"noreferrer noopener\" href=\"https:\/\/www.hugocristo.com.br\/downloads\/\" target=\"_blank\">aqui<\/a>, experimente por sua conta e risco). <\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"A Face (1998)\" width=\"580\" height=\"435\" src=\"https:\/\/www.youtube.com\/embed\/VRD9dWzPYD0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption>A Face (1998): logotipo desenhado pelo Zeh Fernando, poesia da Yuri Hayashi, m\u00fasica do Fl\u00e1vio M\u00f4naco, c\u00f3digos e demais gr\u00e1ficos feitos por mim (em C). O conjunto n\u00e3o deveria exceder 100kb, segundo regras da competi\u00e7\u00e3o.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Durante a gradua\u00e7\u00e3o em Design e in\u00edcio da carreira docente, continuei explorando essas possibilidades dentro e fora de sala de aula. Em 2004 desenvolvi um editor na web para ensinar desenho tipogr\u00e1fico aos meus alunos do curso de Publicidade da Est\u00e1cio (<a rel=\"noreferrer noopener\" href=\"https:\/\/www.academia.edu\/828953\/xType_Proposta_de_um_Editor_de_Fontes_On-Line\" target=\"_blank\">artigo<\/a>).<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"784\" height=\"468\" src=\"https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-content\/uploads\/2020\/08\/xtypefont.png\" alt=\"\" class=\"wp-image-124\" srcset=\"https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-content\/uploads\/2020\/08\/xtypefont.png 784w, https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-content\/uploads\/2020\/08\/xtypefont-300x179.png 300w, https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-content\/uploads\/2020\/08\/xtypefont-768x458.png 768w\" sizes=\"auto, (max-width: 784px) 100vw, 784px\" \/><figcaption>Editor de fontes xType (2004), encarna\u00e7\u00e3o acad\u00eamica de projeto da scene.<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">As limita\u00e7\u00f5es impostas pelo <em>hardware<\/em> que estou utilizando s\u00e3o semelhantes &#8211; capacidade de processamento limitada, baixa resolu\u00e7\u00e3o, pouca mem\u00f3ria e paleta de cores reduzida &#8211; de forma que parece fazer sentido construir ferramentas espec\u00edficas para este conjunto de restri\u00e7\u00f5es.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">No <a rel=\"noreferrer noopener\" href=\"https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/2020\/07\/23\/milton-4\/\" target=\"_blank\">post anterior<\/a> comentei que a ESPVGAx2 acompanha ferramentas para convers\u00e3o de imagens. Utilizei o formato gerado pela biblioteca para prototipar o editor de imagens bitmap que roda no navegador. Uma vez que haver\u00e1 servidor web dentro do dispositivo, considerei mais f\u00e1cil come\u00e7ar pela vers\u00e3o HTML do editor e depois programar aquela que utilizar\u00e1 as outras sa\u00eddas gr\u00e1ficas (TV ou monitor VGA).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sendo assim, qualquer usu\u00e1rio criador de conte\u00fado para Milton poder\u00e1 acessar as aplica\u00e7\u00f5es internas do dispositivo via Wi-fi e navegador web por meio de outros dispositivos. Caso tais dispositivos n\u00e3o existam, a op\u00e7\u00e3o ser\u00e1 utilizar a vers\u00e3o gr\u00e1fica das aplica\u00e7\u00f5es.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-content\/uploads\/2020\/08\/miltonpix-html.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"678\" src=\"https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-content\/uploads\/2020\/08\/miltonpix-html-1024x678.png\" alt=\"\" class=\"wp-image-125\" srcset=\"https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-content\/uploads\/2020\/08\/miltonpix-html-1024x678.png 1024w, https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-content\/uploads\/2020\/08\/miltonpix-html-300x199.png 300w, https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-content\/uploads\/2020\/08\/miltonpix-html-768x509.png 768w, https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-content\/uploads\/2020\/08\/miltonpix-html-1200x795.png 1200w, https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-content\/uploads\/2020\/08\/miltonpix-html.png 1335w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Primeira vers\u00e3o do editor (HTML\/CSS\/JS).<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">A primeira tentativa tinha s\u00e9rios problemas de performance em fun\u00e7\u00e3o do uso de <em>divs<\/em> como base da intera\u00e7\u00e3o para pintar os pixels. A segunda vers\u00e3o foi implementada em HML5 Canvas para melhorar o desempenho. Tamb\u00e9m implementei a execu\u00e7\u00e3o de scripts em <a href=\"http:\/\/lua.org\" target=\"_blank\" rel=\"noreferrer noopener\">Lua<\/a> (com <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/daurnimator\/lua.vm.js\/\" target=\"_blank\">Lua.vm.js<\/a>) para facilitar a gera\u00e7\u00e3o e transforma\u00e7\u00e3o das imagens &#8211; espelhamento, rota\u00e7\u00e3o, invers\u00e3o etc. podem ser <em>programadas<\/em>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-content\/uploads\/2020\/08\/miltonpix-canvas.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"950\" height=\"705\" src=\"https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-content\/uploads\/2020\/08\/miltonpix-canvas.png\" alt=\"\" class=\"wp-image-126\" srcset=\"https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-content\/uploads\/2020\/08\/miltonpix-canvas.png 950w, https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-content\/uploads\/2020\/08\/miltonpix-canvas-300x223.png 300w, https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-content\/uploads\/2020\/08\/miltonpix-canvas-768x570.png 768w\" sizes=\"auto, (max-width: 950px) 100vw, 950px\" \/><\/a><figcaption>Vers\u00e3o aprimorada com HTML5 Canvas.<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">A op\u00e7\u00e3o por Lua foi natural: principal linguagem utilizada em <em>scripts<\/em> de jogos, super simples de usar e aprender. Implementei diversas transforma\u00e7\u00f5es muito rapidamente, com o interpretador completo tendo pouco mais de 500kb comprimido.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A exist\u00eancia do editor facilita a constru\u00e7\u00e3o de todas as interfaces e realiza\u00e7\u00e3o de teste na gera\u00e7\u00e3o dos sinais VGA. No caso da sa\u00edda gr\u00e1fica para TV (mono), bastar\u00e1 reconfigurar o editor para trabalhar com 1 bit.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"944\" height=\"669\" src=\"https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-content\/uploads\/2020\/08\/pixel-v1.png\" alt=\"\" class=\"wp-image-127\" srcset=\"https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-content\/uploads\/2020\/08\/pixel-v1.png 944w, https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-content\/uploads\/2020\/08\/pixel-v1-300x213.png 300w, https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-content\/uploads\/2020\/08\/pixel-v1-768x544.png 768w\" sizes=\"auto, (max-width: 944px) 100vw, 944px\" \/><figcaption>\u00cdcone da ferramenta de desenho <em>recursivamente<\/em> desenhada nela mesma \ud83d\ude42<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">O editor exporta formato texto para edi\u00e7\u00e3o futura, al\u00e9m do arquivo cabe\u00e7alho para inclus\u00e3o no c\u00f3digo fonte (.h) e imagens PNG. A estrutura do arquivo \u00e9 muito simples: identificador <strong>MILTONPIX <\/strong>seguido de dois inteiros para <strong>largura<\/strong> e <strong>altura<\/strong>, <strong>nome<\/strong> da imagem e <strong>\u00edndice da cor transparente<\/strong> (que n\u00e3o ser\u00e1 exibida, \u00fatil para <em>sprites<\/em>). Nas linhas seguintes cada n\u00famero representa a cor do pixel na coluna atual. A gera\u00e7\u00e3o e interpreta\u00e7\u00e3o destes arquivos \u00e9 trivial.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>MILTONPIX 16 16 pincel 0<br>0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0<br>0,15,15,15,15,15,15,15,15,15,15,15,15,15,15,0<br>0,15,15,14,14,14,14,14,14,14,14,14,14,15,15,0<br>0,15,14,14,14,14,14,14,14,14,12,14,14,14,15,0<br>0,15,14,14,14,14,14,14,14,12,4,4,14,14,15,0<br>0,15,14,14,14,14,14,14,12,4,4,4,3,14,15,0<br>0,15,14,14,14,14,14,12,4,4,4,3,14,14,15,0<br>0,15,14,14,14,14,12,4,4,4,3,14,14,14,15,0<br>0,15,14,14,14,12,4,4,4,3,14,14,14,14,15,0<br>0,15,14,14,6,4,4,4,3,14,14,14,14,14,15,0<br>0,15,14,6,7,7,4,3,14,14,14,14,14,14,15,0<br>0,15,14,6,7,7,7,14,14,14,14,14,14,14,15,0<br>0,15,14,3,3,3,3,3,3,3,3,3,3,3,15,0<br>0,15,15,14,14,14,14,14,14,14,14,14,14,15,15,0<br>0,15,15,15,15,15,15,15,15,15,15,15,15,15,15,0<br>0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0<\/p><\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">Para facilitar a nomea\u00e7\u00e3o das aplica\u00e7\u00f5es de Milton, resolvi batizar tudo de <strong>milton:x<\/strong>, onde <strong>x<\/strong> \u00e9 a primeira letra relacionada \u00e0 finalidade do programa. Este foi <strong>milton:p<\/strong>. Faltam os editores de interfaces com o usu\u00e1rio (<strong>u<\/strong>), editor de fontes (<strong>f<\/strong>) e de aplicativos (<strong>a<\/strong>).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Por volta de 1993 (13-14 anos de idade), descobri a demoscene. Foi um per\u00edodo de muita criatividade em fun\u00e7\u00e3o das in\u00fameras limita\u00e7\u00f5es impostas pelo hardware e software da \u00e9poca. O pouco interc\u00e2mbio com outros programadores resultava de mensagens trocadas por meio de BBS, fanzines e outros tipos de documento (basicamente .txts) que acompanhavam os demos. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[5],"tags":[29,30,19,22,28,20],"class_list":["post-121","post","type-post","status-publish","format-standard","hentry","category-atualizacoes","tag-demoscene","tag-editores","tag-esp8266","tag-espvgax2","tag-miltonp","tag-vga"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-json\/wp\/v2\/posts\/121","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-json\/wp\/v2\/comments?post=121"}],"version-history":[{"count":4,"href":"https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-json\/wp\/v2\/posts\/121\/revisions"}],"predecessor-version":[{"id":149,"href":"https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-json\/wp\/v2\/posts\/121\/revisions\/149"}],"wp:attachment":[{"href":"https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-json\/wp\/v2\/media?parent=121"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-json\/wp\/v2\/categories?post=121"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hugocristo.com.br\/projetos\/milton\/blog\/wp-json\/wp\/v2\/tags?post=121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}