2b:null 2c:["$","title",null,{"children":"Experimento Tapeto 1 | Otávio Vasques | Observable"}] 31:T5c2,Em viagem a Inhotim tive a oportunidade de conhecer as peças da [Tapeto](https://www.instagram.com/tapetoatelier/). Esse ateliê produz peças de bordado em tela/tapeçaria e brinca com várias formas e padrões. Para esse experimento eu fiquei particularmente interessado por uma peça que gera quadrados heterogêneos em uma malha regular de duas dimensões. [Aqui](https://www.instagram.com/p/CddQiabMO7V/) tem um exemplo no Instagram. ## Descrição geral O quadro é composto por uma matriz 10x10 com células de largura e altura irregulares. As linhas que dividem as células tem uma cor uma horizontal e outra na vertical. As células são preenchidas com 4 cores diferentes. Descrito de forma abstrata, o quadro possui: * N células verticais * M células horizontais * Um conjunto de cardinalidade K cores de preenchimento das células. * Uma cor h de divisória horizontal * Uma cor v de divisória vertical ## Execução discreta Essa super descrição se encaixa em um grid mais fino discreto em que a tapeçaria é bordada. O quadro acima precisa ser encaixado dentro uma matriz de n x m pixels. No exemplo do Instagram, há 9 divisórias verticais de 1 pixel de largura. Isso quer dizer que o espaço final disponível para preencher o quadro horizontalmente é ${tex`m-9`} pixels. A largura dos quadrados tambêm tem que ser discreta. _Esse experimento será criado com uma string base58 de 51 caracteres para, possivelmente, ser reproduzido no fxhash._32:Tc45,function draw(input) { let verticalPixels = 88; let horizontalPixels = 89; let minSquareSize = 2; let minSquares = 5; let maxSquares = 15; let colorPalettes = [ {verticalLines: "#E66c19", horizontalLines: "#48c3ee", baseColor: "#faedcd", otherColors: ["#853e00", "#F7c91c", "#4b9df7"]}, {verticalLines: "#0c238e", horizontalLines: "#6c18bd", baseColor: "#f3fba9", otherColors: ["#2cceea","#54f39d","#99f87e"]}, {verticalLines: "#1e7d00", horizontalLines: "#02ba55", baseColor: "#ffc7fd", otherColors: ["#dbeb27","#ff9b59","#ff90b0"]}, {verticalLines: "#c23bef", horizontalLines: "#f04a4d", baseColor: "#f68ea1", otherColors: ["#61a6f0", "#6ff394", "#eff57e"]}, ] let choosedPalette = colorPalettes[alphabet.indexOf(input[10]) % colorPalettes.length] let colors = Array(3).fill(choosedPalette.baseColor).concat(choosedPalette.otherColors) let verticalSquares = alphabet.indexOf(input[24]) % (maxSquares - minSquares) + minSquares; let verticalSquareSpace = verticalPixels - (verticalSquares - 1); let horizontalSquares = alphabet.indexOf(input[26]) % (maxSquares - minSquares) + minSquares let horizontalSquareSpace = horizontalPixels - (horizontalSquares - 1); let gridNumber = verticalSquares + horizontalSquares; let actualVerticalSquares = applyTransitions( input, initializeSquaresSizes(verticalSquareSpace, verticalSquares), minSquareSize ) let actualHorizontalSquares = applyTransitions( input.split("").reverse().join(""), initializeSquaresSizes(horizontalSquareSpace, horizontalSquares), minSquareSize ) let squares = [] for (let i = 0; i < verticalSquares; ++i) { for (let j = 0; j < horizontalSquares; ++j) { let inputIndex = ((verticalSquares * i) + (horizontalSquares * j) + i % 13 + j % 7) % input.length let colorIndex = alphabet.indexOf(input[inputIndex]) % colors.length let startY = actualVerticalSquares.slice(0, i).reduce((partialSum, a) => partialSum + a, 0) + i; let startX = actualHorizontalSquares.slice(0, j).reduce((partialSum, a) => partialSum + a, 0) + j; let height = actualVerticalSquares[i]; let width = actualHorizontalSquares[j]; squares.push(svg``) } } let lines = []; for (let i = 1; i < verticalSquares; ++i) { let startY = actualVerticalSquares.slice(0, i).reduce((partialSum, a) => partialSum + a, 0) + i - 1; lines.push(svg``) } for (let i = 1; i < horizontalSquares; ++i) { let startX = actualHorizontalSquares.slice(0, i).reduce((partialSum, a) => partialSum + a, 0) + i - 1; lines.push(svg``) } return svg`` }33:[] 2f:{"id":"0f379ab2149175c3","slug":"experimento-tapeto-1","title":"Experimento Tapeto 1","thumbnail":"b36d047b1c153ad73d65ea07b49f44fff1ad5989b0ec78c6df410de6b7dc6db2","access_level":"public","create_time":"$D2023-02-22T02:00:09.227Z","update_time":"$D2023-02-26T16:52:47.232Z","view_time":null,"first_public_time":"$D2023-02-22T02:00:09.227Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"5e8d11e509318570","login":"otaviocv","name":"Otávio Vasques","avatar_url":"https://avatars-next.observableusercontent.com/21aa1d096ad0538e8d296d94b9560d33bcd6c2c7a3046310d200f7467de1e103","tier":"starter_2024"},"version":473,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"67f6bc0db63009d0","login":"otaviocv","name":"Otávio Vasques","avatar_url":"https://avatars-next.observableusercontent.com/21aa1d096ad0538e8d296d94b9560d33bcd6c2c7a3046310d200f7467de1e103","tier":null}],"members":[{"type":"individual","id":"67f6bc0db63009d0","login":"otaviocv","name":"Otávio Vasques","avatar_url":"https://avatars-next.observableusercontent.com/21aa1d096ad0538e8d296d94b9560d33bcd6c2c7a3046310d200f7467de1e103","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Experimento Tapeto 1","cells":[{"id":224,"value":"# Experimento Tapeto 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":415,"value":"draw(input)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"input = new URL(document.baseURI).searchParams.get(\"fxhash\") || generator51()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"function applyTransitions(input, startArray, minSquareSize) {\n let squares = structuredClone(startArray);\n for (let i = 0; i < input.length -2; i+=2) {\n let source = alphabet.indexOf(input[i]) % startArray.length;\n let target = alphabet.indexOf(input[i+1]) % startArray.length;\n let baseValue = Math.floor((alphabet.indexOf(input[i]) + alphabet.indexOf(input[i+1]))/2) % 3\n if(squares[source] - baseValue > minSquareSize) {\n squares[source] = squares[source] - baseValue;\n squares[target] = squares[target] + baseValue; \n } \n }\n return squares;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"function initializeSquaresSizes(nPixels, nSquares) {\n let baseSize = Math.floor(nPixels/nSquares)\n var remainingPixels = nPixels % nSquares\n let squares = []\n for (let i = 0; i < nSquares; ++i) {\n if(remainingPixels > 0) {\n squares.push(baseSize + 1)\n remainingPixels--\n }\n else squares.push(baseSize)\n }\n return squares\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import { alphabet, generator51 } from \"@otaviocv/random-base-58-string-generator\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"