Poemário.js

[Dedicado a Pedro Barbosa, multiplicador de universos]

Rui Torres

[conceito]

Nuno Ferreira

[programação]

breve manual p/ curso breve

O poemario.js é free software (GNU General Public License da Free Software Foundation), podendo por isso ser livremente usado. Ainda assim, os autores agradecem se crédito e/ou agradecimento lhes puder ser dado nos projectos com ele realizados.

 

§

about:poemario.js

Poemario.js é uma lib em javascript que permite programar textos (poemas, narrativas, cartas, etc) seguindo procedimentos combinatórios. Há essencialmente que ter em consideração os seguintes ficheiros: poemario.css ; index.html ; poem1.xml ; sndsa_index.txt ; sndsb_index.txt

A lib em javascript está disponível em https://telepoesis.net/permanent/Poemario.js

O(s) ficheiro(s) HTML carregam esse script e o https://code.jquery.com/jquery-latest.min.js

É possível identificar os parâmetros previstos no Poemario.js na var que os organiza:

var pmr = new Poemario(POEM_TYPED, FLOW_GROWING, TYPE_CHAR, 200, 50, ["poem1.xml"], 10, true, "config");

O estilo pode ser alterado no css, mas o poemario.js vai sempre tentar carregar um Poemario.css numa pasta css. Caso deseje que esse css/Poemario seja diferente:

<link rel="stylesheet" href="novo-estilo-poemario.css">

A função que corre o texto está em <body>

<body id="body" onload="pmr.txt_start();">

A primeira parte do HTML deve ser algo assim:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Poemário by Rui Torres e Nuno Ferreira</title>

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>      

<script type="text/javascript" src="https://telepoesis.net/permanent/Poemario.js"></script>

<script type="text/javascript">

var pmr = new Poemario(POEM_TYPED, FLOW_GROWING, TYPE_CHAR, 200, 50, ["poem1.xml"], 10, true, "config");

</script>

</head>

<body id="body" onload="pmr.txt_start();">

</body>

</html>

Exemplo aqui usado como modelo: https://telepoesis.net/curso-breve/poemario.html

Nota: neste exemplo foi adicionado um Refresh à página passados 90 segundos (<meta http-equiv="REFRESH" content="90" />), de modo a evitar que demasiados textos se acumulassem com o tempo.

Exercício 1 –> Abra o Notepad++ ou equivalente, copie o código em cima e cole-o nesse documento, gravando-o como poemario.html

§

about:var pmr = new Poemario

O primeiro elemento a determinar (first_mode) é se o texto inicial (previamente definido no XML em <texto> como verso) aparece completo antes da combinatória (POEM_STATIC ou 1) ou se é tipografado (POEM_TYPED ou 2). No exemplo em baixo (vf sublinhado com negrito) o texto será apresentado uma letra de cada vez (2).

var pmr = new Poemario(POEM_TYPED, FLOW_GROWING, TYPE_CHAR, 200, 50, ["poem1.xml"], 10, true, "config");

Exemplo de poemas programados em POEM_STATIC:  https://telepoesis.net/curso-breve/POEM_STATIC.html

Exemplo de poemas programados em POEM_TYPED:  https://telepoesis.net/curso-breve/POEM_TYPED.html  

Nota: nestes exemplos foi adicionado um Refresh às páginas passados 90 segundos (<meta http-equiv="REFRESH" content="90" />), de modo a evitar que demasiados textos se acumulassem com o tempo.

O segundo elemento a determinar (flow_mode) é se o texto gerado substitui o verso anteriormente gerado, alterando apenas uma das palavras (FLOW_STATIC_ONE ou 1), se vai acumulando os versos gerados na página (FLOW_GROWING ou 2), ou ainda se o texto gerado substitui o verso anteriormente gerado, alterando todas as palavras marcadas (FLOW_STATIC_ALL ou 3). No exemplo em baixo (vf sublinhado com negrito), os versos irão sendo acumulados na página (2).

var pmr = new Poemario(POEM_TYPED, FLOW_GROWING, TYPE_CHAR, 200, 50, ["poem1.xml"], 10, true, "config");

Exemplo de poemas programados em FLOW_STATIC_ONE:  https://telepoesis.net/curso-breve/FLOW_STATIC_ONE.html  

Exemplo de poemas programados em FLOW_GROWING:  https://telepoesis.net/curso-breve/FLOW_GROWING.html  

Exemplo de poemas programados em FLOW_STATIC_ALL:  https://telepoesis.net/curso-breve/FLOW_STATIC_ALL.html  

Nota: na página do modo FLOW_GROWING foi adicionado um Refresh à página passados 90 segundos (<meta http-equiv="REFRESH" content="90" />),  de modo a evitar que demasiados textos se acumulassem com o tempo. Os modos FLOW_STATIC não acumulam textos, por isso não necessitam desse Refresh.

O terceiro elemento a determinar (type_mode,) é se o texto gerado aparece em modo de constelação visual, disperso aleatoriamente pela página (TYPE_CONSTELLATION ou 0), se aparece linha a linha (TYPE_LINE ou 1), ou se aparece letra a letra (TYPE_CHAR ou 2). No exemplo em baixo (vf sublinhado com negrito) os versos são construídos uma letra de cada vez (2).

var pmr = new Poemario(POEM_TYPED, FLOW_GROWING, TYPE_CHAR, 200, 50, ["poem1.xml"], 10, true, "config");

No caso de pretender usar o type_mode como TYPE_CONSTELLATION (ou valor 0, conforme terceiro elemento descrito em cima), é possível adicionar configurações específicas de fontes (font_config). As propriedades de fontes que são aceites pelo Poemario.js, com sintaxe semelhante a CSS, são: family, pixels, style, alpha, color. Nesse caso, usar, a seguir a “config”:

,{family: "Arial Black, sans-serif", pixels: "10-24", style: "bold", alpha: 0.4, color: "black"});

Exemplo de poemas programados em TYPE_CONSTELLATION: https://telepoesis.net/curso-breve/TYPE_CONSTELLATION.html  

Exemplo de poemas programados em TYPE_LINE: https://telepoesis.net/curso-breve/TYPE_LINE.html  

Exemplo de poemas programados em TYPE_CHAR: https://telepoesis.net/curso-breve/TYPE_CHAR.html  

Nota: na página do modo TYPE_CHAR foi adicionado um Refresh à página passados 90 segundos (<meta http-equiv="REFRESH" content="90" />),  de modo a evitar que demasiados textos se acumulassem com o tempo. Nas páginas dos modos TYPE_LINE e TYPE_CONSTELLATION foi adicionado esse mesmo Refresh e, além disso, foi alterada a velocidade de type_speed (ver 5º elemento a seguir descrito) para 1000.

O quarto elemento a determinar (poem_speed, default=100) está relacionado com a frequência, em milissegundos, para gerar novos versos. No exemplo em baixo (vf sublinhado com negrito) os versos gerados duram 200 milisegundos (200).

var pmr = new Poemario(POEM_TYPED, FLOW_GROWING, TYPE_CHAR, 200, 50, ["poem1.xml"], 10, true, "config");

O quinto elemento a determinar (type_speed, default=100) está relacionado com a velocidade da geração de frases ou letras, em milissegundos. No exemplo em baixo (vf sublinhado com negrito) as letras aparecem a cada 50 milisegundos (50).

var pmr = new Poemario(POEM_TYPED, FLOW_GROWING, TYPE_CHAR, 200, 50, ["poem1.xml"], 10, true, "config");

O sexto elemento a determinar (list_poems, default=["poem1.xml"]) indica o nome do ficheiro XML que vai ser lido. Caso se pretenda usar mais do que um ficheiro seguidos, indicar os nomes (por exemplo: ["poem1.xml”,“poem2.xml"]). No exemplo em baixo (vf sublinhado com negrito) o ficheiro a ler chama-se poem1.xml.

var pmr = new Poemario(POEM_TYPED, FLOW_GROWING, TYPE_CHAR, 200, 50, ["poem1.xml"], 10, true, "config");

Exemplo de poemas programados com mais do que um XML: https://telepoesis.net/curso-breve/poemarios.html  

Nota: neste exemplo foi adicionado um Refresh à página passados 90 segundos (<meta http-equiv="REFRESH" content="90" />), de modo a evitar que demasiados textos se acumulassem com o tempo.

O sétimo elemento a determinar (top_pixels, default=0) indica o número de píxeis que devem ficar em branco no topo da página. No exemplo em baixo (vf sublinhado com negrito) há uma altura de 10 píxeis (c. 0.264583333 cm) em branco.

var pmr = new Poemario(POEM_TYPED, FLOW_GROWING, TYPE_CHAR, 200, 50, ["poem1.xml"], 10, true, "config");

O oitavo elemento a determinar (has_audio, default=false) indica se o áudio deve ou não ser tocado, através de um dado booleano (true, false). No exemplo em baixo (vf sublinhado com negrito) o áudio está ligado.

var pmr = new Poemario(POEM_TYPED, FLOW_GROWING, TYPE_CHAR, 200, 50, ["poem1.xml"], 10, true, "config");

O nono elemento a determinar (sounds_origin, default=empty) indica o directório onde estão listados os endereços dos áudios a usar. Caso este valor esteja undefined, o áudio é definido no XML. No exemplo em baixo (vf sublinhado com negrito) o áudio está listado na pasta config, nos ficheiros de texto sndsa_index.txt e sndsb_index.txt (um URL de áudio por linha). [Para uma melhor descrição sobre a utilização do áudio, ver secção about:sounds]

var pmr = new Poemario(POEM_TYPED, FLOW_GROWING, TYPE_CHAR, 200, 50, ["poem1.xml"], 10, true, "config");

Exercício 2 –> Abra no Notepad++ ou equivalente o ficheiro anteriormente criado (poemario.html) e configure as opções da var pmr.

§

about:poem1.xml

O poema (texto), estruturado em linguagem XML (UTF-8), apresenta as seguintes etiquetas, as quais não podem ser alteradas:

<poema>

<texto verso="" ordem="" taxon=""></texto>

        <categorias>

                <cat1>

                        <frase></frase>

                </cat1>

        </categorias>

</poema>

Em <texto> indicamos o verso= do poema, por exemplo, este, sublinhado e em negrito:

<texto verso="É preciso dizer rosa em vez de dizer ideia" ordem="" taxon=""></texto>

As palavras que forem marcadas para accionar a respectiva combinatória devem ter a sua posição no verso indicada em ordem= (no caso em baixo, as palavras 4 e 9 correspondem a “rosa” e “ideia”)

<texto verso="É preciso dizer rosa em vez de dizer ideia" ordem="" taxon=""></texto>

Por fim, em taxon= criam-se os nomes das categorias que correspondem a essas mesmas posições, sem espaços nem caracteres especiais, separados por vírgula, no caso em baixo, verso1 e verso2:

<texto verso="É preciso dizer rosa em vez de dizer ideia" ordem="" taxon="verso1,verso2"></texto>

Temos agora que criar as <categorias> definidas em taxon=, isto é, as listas de palavras que vão substituir, de um modo aleatório, as palavras marcadas em verso=, cuja posição foi referida em ordem=. Eis um exemplo, a partir do texto em cima programado:

<verso1>

        <frase>azul</frase>

        <frase>febre</frase>

        <frase>o_mundo</frase>

        <frase>tristeza</frase>

</verso1>

<verso2>

        <frase>pantera</frase>

        <frase>inocência</frase>

        <frase>agora</frase>

</verso2>

Nota: o sinal “_” (underscore) permite juntar pronomes e palavras, de modo a serem interpretados como uma palavra apenas, daí, no exemplo em cima, “o_mundo”. Esse sinal também pode ser usado em verso=.

Por fim, não esquecer de fechar as etiquetas <categorias> e <poema>: </categorias></poema>

Exercício 3 –> Abra no Notepad++ ou equivalente, coloque o código em baixo e grave como poem1.xml. Escolha UTF-8 como modo de encoding. Crie o seu seu próprio texto (verso), defina quais as palavras que vão ser combinadas (ordem), identifique os nomes das categorias que vão conter o léxico a usar na combinatória (taxon) e crie as mesmas seguindo o exemplo em <cat1>, adicionando as palavras dentro da etiqueta <frase>:

<poema>

<texto verso="" ordem="" taxon=""></texto>

        <categorias>

                <cat1>

                        <frase></frase>

                </cat1>

        </categorias>

</poema>

Uma vez construído o poema em XML, pode abrir o poemario.html no Mozilla Firefox.

§

about:sounds

O Poemario.js oferece a possibilidade de usar som, dentro da mesma lógica combinatória usada para o texto, desde que se active, no oitavo elemento em cima descrito, o dado booleano para true.

O directório onde estão os áudios a usar deve ser criado (no nosso caso, “soundsa e soundsb”). Nos ficheiros de texto sndsa_index.txt e sndsb_index.txt, a colocar dentro de um directório definido na variável (no caso caso, “config”) devem estar listados os URLs dos ficheiros áudio que se pretendem usar.

Como exemplo, vejam-se os conteúdos do ficheiro sndsa_index.txt

./soundsa/001.mp3

./soundsa/002.mp3

e os conteúdos do ficheiro sndsb_index.txt

./soundsb/003.mp3

./soundsb/004.mp3

 

Isto significa que os sons 001.mp3 e 002.mp3 estão dentro de uma pasta chamada soundsa, e que os sons 003.mp3 e 004.mp3 estão dentro de uma pasta chamada soundsb.

Também é possível integrar o áudio no poem1.xml, substituindo “config” por undefined e adicionando, entre as etiquetas </categorias> e </poema> o seguinte:

<audio>

        <snds_a>

                <frase>soundsa/001.mp3</frase>

                <frase>soundsa/002.mp3</frase>

        </snds_a>

        <snds_b>

                <frase>soundsb/003.mp3</frase>

                <frase>soundsb/004.mp3</frase>

        </snds_b>

</audio>

O Poemario.js vai tocar um som de cada uma destas pastas ao mesmo tempo. Quando um desses sons termina, logo se inicia outro, aleatoriamente escolhido na respectiva pasta. Normalmente, uma das pastas tem fragmentos de vozes, e outra das pastas tem texturas sonoras, mas o único limite é a imaginação.

Exercício 4 –>  Escolha um conjunto de texturas sonoras para usar no seu poema. No Audacity, crie pequenos fragmentos de 20 ou 30 segundos cada, com fadein e fadeout, e exporte-os como mp3 (se os nomes dos ficheiros for simples, como 001, 002, etc., isso ajudará na altura de criar as listas. Não use espaços ou acentos e outros caracteres especiais. Tenha o cuidado de garantir que os volumes estão uniformes. Coloque esses ficheiros numa pasta chamada soundsa. Pode por exemplo usar sons gratuitos disponíveis em linha, como https://freesound.org/browse/tags/ambient/

Exercício 5 –>  Grave a sua voz a ler pequenos fragmentos de textos relacionados com os seus poemas ou textos. No Audacity, edite-os de modo a obter fragmentos de 20 ou 30 segundos cada, com fadein e fadeout, e exporte-os como mp3 (se os nomes dos ficheiros for simples, como 001, 002, etc., isso ajudará na altura de criar as listas. Não use espaços ou acentos e outros caracteres especiais. Tenha o cuidado de garantir que os volumes estão uniformes. Coloque esses ficheiros numa pasta chamada soundsb. Pode por exemplo usar também ferramentas de text-to-speech disponíveis em linha, por exemplo https://ttsmp3.com/text-to-speech/Portuguese/

Exercício 6 –> Abra o Notepad++ ou equivalente e crie dois documentos de texto (.txt) com uma lista dos conteúdos das pastas soundsa e soundsb em cima criadas, do seguinte modo: sndsa_index.txt

./soundsa/001.mp3

./soundsa/002.mp3

sndsb_index.txt

./soundsb/003.mp3

./soundsb/004.mp3

§

about:buttons_control

O Poemario.js permite criar botões e associar funções de controlo, em <body>, num <div>:

<div id="floatingbtns" style="position:absolute;top:1em;right: 1em;width:280px;height:400px;z-index:10">

Parar de um modo suave (quando terminar o verso):

<button type="button" onclick="pmr.txt_stop_graceful();">stop_graceful</button>

Parar de um modo drástico (imediato):

<button type="button" onclick="pmr.txt_stop_stateful();">stop_stateful</button>

Reiniciar a geração onde ela parou devido ao stop:

<button type="button" onclick="pmr.txt_resume();">resume</button>

Recomeçar a geração textual (reiniciar o texto):

<button type="button" onclick="pmr.txt_reset();">reset</button>

As velocidades de geração podem ser alteradas com:

<input type="range" id="pspeed" name="pspeed" min="-600" max="-20" value="-200" onchange="pmr.poem_speed=this.value*-1;">

<input type="range" id="tspeed" name="tspeed" min="-600" max="-20" value="-50" onchange="pmr.type_speed=this.value*-1;">

Para iniciar o som:

<button type="button" onclick="pmr.audio_start(2000);">start audio (2secs frequency)</button>

Para parar o som imediatamente:

<button type="button" onclick="pmr.audio_stop();">stop audio (now)</button>

Para parar o som depois de terminarem de tocar:

<button type="button" onclick="pmr.audio_stop(false);">stop audio (after current sounds)</button>

Para retomar o som onde ele foi parado:

<button type="button" onclick="pmr.audio_resume();">resume audio (accordingly)</button>

Para fazer fade-out ao som:

<button type="button" onclick="pmr.audio_fade_out();">fade out</button>

Exemplo de poemas com botões de controlo: https://telepoesis.net/curso-breve/controls.html

Nota: neste exemplo foi adicionado um Refresh à página passados 90 segundos (<meta http-equiv="REFRESH" content="90" />), de modo a evitar que demasiados textos se acumulassem com o tempo.

Exercício 7 –> Abra no Notepad++ ou equivalente o seu ficheiro poemario.html e faça experiências com os botões em cima referidos.

§

about:exemplos

Poemas de Rui Torres programados com o poemario.js estão disponíveis em https://telepoesis.net/poesias.html

.