2a:null 2b:["$","title",null,{"children":"Logotipo Generativo VISSE | Guilherme Ranoya | Observable"}] 30:Tdfc,O logotipo do Laboratório de Visualização e Sentidos foi originalmente elaborado em [Processing/P5](https://openprocessing.org/sketch/1514420). A partir dele, desenvolveu-se essa nova versão capaz de gerar o mesmo resultado através da tecnologia SVG, que além de consumir menos processamento, também permite obter-se um arquivo estático para uso na mídia impressa. Neste documento estão disponíveis diversas modalidades do logotipo, que podem ser baixados em SVG ou PNG. Elas são atualizadas/modificadas para uma nova composição toda vez que o documento é recarregado ou seu código de geração (a função `logovisse()`) é executada. Também estão disponíveis os códigos Javascript para gerar e parametrizar logotipos dinâmicos em outros websites.
### Como utilizar / parametrizar o logotipo A base (biblioteca) com o conjunto de funções que produzem o logotipo (disponíveis no final deste documento) pode ser carregada diretamente da web: ```html ``` O logotipo do VISSE é gerado como um objeto Javascript através da instrução abaixo: ```js let minhavariavel = logovisse({parâmetro: valor [,parâmetro: valor, parâmetro: valor]}); ``` Uma vez criado, o código SVG que o exibe na tela fica armazenado na propriedade `svgcode` do objeto, podendo ser inserido em qualquer elemento do DOM em um documento HTML: ```js let logo = logovisse({tipo: 1}); document.getElementById("divlogo").innerHTML = logo.svgcode; ``` As dimensões do logotipo podem ser definidas através do CSS, seja de uma forma geral para qualquer um dos tipos disponíveis, ou com parâmetros diferentes para cada tipo específico. O seletor CSS para definir uma dimensão geral é o `.logovisse`, e os seletores para cada modalidade distinta são `#logovisse_full`, `#logovisse_block` e `#logovisse_silhouette`. Recomenda-se que apenas uma das duas dimensões (width / height) seja especificada, para que o resultado final não seja distorcido. ```html ```
### Parametrização e dados mantidos pelo objeto O logotipo pode receber dados de entrada para que sua aplicação seja parametrizada, e mantém também um conjunto de informações que podem ser úteis para alinhar/coordenar outros elementos presentes no mesmo contexto.
Dados de entrada / variáveis | Dado | Valor | Descrição | |------|------|-----| | tipo | 1/2/3| 1: Logotipo Completo
2: Logotipo Sintético/Reduzido
3: Logotipo Silhueta| | corPredominante | Valor Hexadecimal (ex. `#20F21E`) | Utiliza a cor indicada como *foreground* | | corBackground | Valor Hexadecimal (ex. `#20F21E`) | Utiliza a cor indicada como *background* | Utilização: ```js meulogo = logovisse({tipo: 1, corBackground: '#20F21E'}); ```

Propriedades do objeto | Dado | Valor | Descrição | |------|-------|-----------| | `svgcode` | String | Código do SVG para ser inserido em algum elemento HTML | | `bgcolor` | Valor Hexadecimal | Registro da cor gerada aleatoriamente para o fundo | | `hue` | Valor de 0 à 360 | Valor do `hue` no sistema HSL da cor gerada aleatoriamente para o fundo | Utilização: ```js let svg = meulogo.svgcode; let cordefundo = meulogo.bgcolor; ```
### To-Do List 1. Função do objeto para gerar um arquivo .SVG para download 2. Função do objeto para atualizar/resetar os dados e re-gerar o logotipo 3. Palete de cores auxiliares e degradês

Abaixo se encontram exemplos de aplicação do logotipo:31:Te819,logovisse_full = function (dados) { if (typeof dados == "undefined") { dados = {}; } let r1a = 40; let r2a = 170; let r1b = 80; let r2b = 140; let sa; let ca; let cores; let multicolor = Math.random(); let saturate = Math.random() * 100; let compensate = 0; let forec = dados.corPredominante; let bgcolorout = "#FFFFFF"; let mysvg = `"; return { svgcode: mysvg, bgcolor: bgcolorout, hue: cores }; }32:Ta77,logovisse_block = function (dados) { if (typeof dados == "undefined") { dados = {}; } let r1a = 40; let r2a = 170; let r1b = 80; let r2b = 140; let sa; let ca; let cores; let multicolor = Math.random(); let saturate = Math.random() * 100; let compensate = 0; let forec = dados.corPredominante; let bgcolorout = "#FFFFFF"; let mysvg = `"; return { svgcode: mysvg, bgcolor: bgcolorout, hue: cores }; }33:T4ae,logovisse_silhouette = function (dados) { if (typeof dados == "undefined") { dados = {}; } let r1a = 40; let r2a = 170; let r1b = 80; let r2b = 140; let sa; let ca; let cor; let cor2; if (typeof dados.corPredominante == "undefined") { cor = "#00000"; } else { cor = dados.corPredominante; } if (typeof dados.corBackground == "undefined") { cor2 = "#FFFFFF"; } else { cor2 = dados.corBackground; } let mysvg = `"; return { svgcode: mysvg, bgcolor: cor2 }; }34:[] 2e:{"id":"e6cda0f3ac54a124","slug":"logotipo-visse","title":"Logotipo Generativo VISSE","thumbnail":"d879c15a11e83a235996f665fe604bc70fb703545a919abb30d1137447db5781","access_level":"public","create_time":"$D2022-04-21T12:40:28.399Z","update_time":"$D2022-04-22T19:15:45.529Z","view_time":null,"first_public_time":"$D2022-04-21T15:00:32.758Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":"starter_2024"},"version":529,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"92bd7310c7ec23d5","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":null}],"members":[{"type":"individual","id":"92bd7310c7ec23d5","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"fc353f0e3a763b15","slug":"visse","title":"VISSE","owner":{"id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya"}},"type":"notebook","body":{"title":"Logotipo Generativo VISSE","cells":[{"id":0,"value":"# Logotipo Generativo VISSE\nImplementação Javascript + SVG do logotipo generativo do VISSE","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":513,"value":"html`${logotipo_completo_aleatorio_objeto.svgcode}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":518,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":391,"value":"
\n### Logotipo Completo, gerado aleatoriamente\na cor do fundo pode ser obtida pela propriedade `bgcolor`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":12,"value":"logotipo_completo_aleatorio_objeto = logovisse({ tipo: 1 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":285,"value":"logotipo_completo_aleatorio = html`${logotipo_completo_aleatorio_objeto.svgcode}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":288,"value":"logotipo_completo_aleatorio_objeto.bgcolor","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":386,"value":"logotipo_completo_aleatorio_objeto.hue","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":396,"value":"

\n### Logotipo Completo, gerado com uma cor definida como predominante (*foreground*)\na cor predominante pode ser definida pela propriedade `corPredominante`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":198,"value":"logotipo_completo_cordefinida_objeto = logovisse({\n tipo: 1,\n corPredominante: \"#88594F\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":294,"value":"logotipo_completo_cordefinida = html`${logotipo_completo_cordefinida_objeto.svgcode}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":299,"value":"logotipo_completo_cordefinida_objeto.bgcolor","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":379,"value":"logotipo_completo_cordefinida_objeto.hue","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":405,"value":"

\n### Logotipo Completo, gerado harmonizando com uma cor definida para o fundo (*background*)\na cor de fundo pode ser definida pela propriedade `corBackground`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":335,"value":"logotipo_completo_corfundo_objeto = logovisse({\n tipo: 1,\n corBackground: \"#eeccdd\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":337,"value":"logotipo_completo_corfundo = html`${logotipo_completo_corfundo_objeto.svgcode}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":340,"value":"logotipo_completo_corfundo_objeto.bgcolor","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":374,"value":"logotipo_completo_corfundo_objeto.hue","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":413,"value":"

\n### Logotipo Sintético/Reduzido, gerado aleatoriamente\na cor do fundo pode ser obtida pela propriedade `bgcolor`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":143,"value":"logotipo_bloco_aleatorio_objeto = logovisse({ tipo: 2 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":310,"value":"logotipo_bloco_aleatorio = html`${logotipo_bloco_aleatorio_objeto.svgcode}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":314,"value":"logotipo_bloco_aleatorio_cordefundo = logotipo_bloco_aleatorio_objeto.bgcolor","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":419,"value":"

\n### Logotipo Sintético/Reduzido, gerado com uma cor definida como predominante (*foreground*)\na cor predominante pode ser definida pela propriedade `corPredominante`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":190,"value":"logotipo_bloco_cordefinida_objeto = logovisse({\n tipo: 2,\n corPredominante: \"#88594F\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":318,"value":"logotipo_bloco_cordefinida = html`${logotipo_bloco_cordefinida_objeto.svgcode}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":320,"value":"logotipo_bloco_cordefinida_cordefundo = logotipo_bloco_cordefinida_objeto.bgcolor","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":427,"value":"

\n### Logotipo Sintético/Reduzido, gerado harmonizando com uma cor definida para o fundo (*background*)\na cor de fundo pode ser definida pela propriedade `corBackground`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":343,"value":"logotipo_bloco_corfundo_objeto = logovisse({\n tipo: 2,\n corBackground: \"#ffeecc\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":347,"value":"logotipo_bloco_corfundo = html`${logotipo_bloco_corfundo_objeto.svgcode}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":345,"value":"logotipo_bloco_corfundo_objeto.bgcolor","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":352,"value":"logotipo_bloco_corfundo_objeto.hue","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":433,"value":"

\n### Logotipo Silhueta, branco e preto\nse nenhuma cor for informada, ele será gerado em P&B","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":153,"value":"logotipo_silhueta_pb = html`${logovisse({ tipo: 3 }).svgcode}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":488,"value":"

\n### Logotipo Silhueta, com cor predominante\numa cor de predominância pode ser definida pela propriedade `corPredominante`","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":157,"value":"logotipo_silhueta_corpreenchimento = html`${\n logovisse({\n tipo: 3,\n corPredominante: \"#FF3355\"\n }).svgcode\n}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":492,"value":"

\n### Logotipo Silhueta, com cor predominante e cor para o V\numa cor de predominância pode ser definida pela propriedade `corPredominante` e a cor para o V (fundo) pela propriedade `corBackground`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":162,"value":"logotipo_silhueta_fundoefrente = html`${\n logovisse({\n tipo: 3,\n corBackground: \"#FFdaea\",\n corPredominante: \"#884588\"\n }).svgcode\n}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":206,"value":"

\n## Apêndice\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":237,"value":"### Dimensionamento por CSS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":242,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":446,"value":"
\n### Gerador de Logotipo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":443,"value":"logovisse = function (dados) {\n if (typeof dados == \"undefined\") {\n dados = {};\n }\n\n let logo_obj = {};\n\n if (typeof dados.tipo == \"undefined\" || dados.tipo == 1) {\n logo_obj = logovisse_full(dados);\n }\n\n if (dados.tipo == 2) {\n logo_obj = logovisse_block(dados);\n }\n\n if (dados.tipo == 3) {\n logo_obj = logovisse_silhouette(dados);\n }\n\n return logo_obj;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":210,"value":"
\n### Logotipo completo\nCaso uma cor não seja indicada, ela será aleatória","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":214,"value":"
\n### Bloco com o V (sintético / reduzido)\nCaso uma cor não seja indicada, ela será aleatória","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":141,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":221,"value":"
\n### Bloco com o V versão silhueta\nCaso a cor de preenchimento (cor) e/ou a cor do V não sejam indicadas, elas serão preto e branco","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":149,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":226,"value":"
\n### Funções de extração de cor HSL e RGB","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":169,"value":"rgb2hsl = function (r, g, b) {\n let rabs, gabs, babs, rr, gg, bb, h, s, v, diff, diffc, percentRoundFn;\n rabs = r / 255;\n gabs = g / 255;\n babs = b / 255;\n (v = Math.max(rabs, gabs, babs)), (diff = v - Math.min(rabs, gabs, babs));\n diffc = (c) => (v - c) / 6 / diff + 1 / 2;\n percentRoundFn = (num) => Math.round(num * 100) / 100;\n if (diff == 0) {\n h = s = 0;\n } else {\n s = diff / v;\n rr = diffc(rabs);\n gg = diffc(gabs);\n bb = diffc(babs);\n\n if (rabs === v) {\n h = bb - gg;\n } else if (gabs === v) {\n h = 1 / 3 + rr - bb;\n } else if (babs === v) {\n h = 2 / 3 + gg - rr;\n }\n if (h < 0) {\n h += 1;\n } else if (h > 1) {\n h -= 1;\n }\n }\n return {\n h: Math.round(h * 360),\n s: percentRoundFn(s * 100),\n v: percentRoundFn(v * 100)\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":175,"value":"hex2rgb = function (hex) {\n var result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result\n ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16)\n }\n : null;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":272,"value":"function hsl2hex(h, s, l) {\n l /= 100;\n const a = (s * Math.min(l, 1 - l)) / 100;\n const f = (n) => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color)\n .toString(16)\n .padStart(2, \"0\"); // convert to Hex and prefix \"0\" if needed\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":181,"value":"teste2 = hex2rgb(\"#FFFFFF\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":172,"value":"teste = rgb2hsl(255, 255, 255)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":276,"value":"teset3 = hsl2hex(220, 30, 95)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2f:"$2e:body"