25:["$","title",null,{"children":"Orange, Lygia Pape | Jay Mahabal | Observable"}] 4b:T6ae,md`I took some time off from work recently and took the opportunity to explore my new home. One place I was really excited to visit was the [Museum of Modern Art](https://www.moma.org/), where I’d never been before. I’d been watching [Great Art Explained](https://www.youtube.com/channel/UCePDFpCr78_qmVtpoB1Axaw) videos (highly recommend!) and was looking forward to seeing some of those pieces in person. Orange, Lygia Pape, MoMA

The associated blurb about Pape: > Pape was a founding member of Grupo Frente, which embraced the rigorous geometric abstraction practiced by the Russian avant-garde and the German Bauhaus as a visual language worthy of the utopian spirit of Brazilian modernist reinvention in the 1950s. Pape rigorously restricted her artistic vocabulary to a few elements to show their limitless possibilities. By using the same material, color scheme, and square format, she created a modular system. I like creating these reproductions because they help me engage with the experience and help me think about what might have gone through the artist’s head as she decided on this specific arrangement. We’re blessed to be able to create millions of different possiblities in less than a second. The art is generated by taking a string and assigning each character a tile. The specific character determines the tile’s location and rotation. Feel free to see how your name looks, or work backwards to figure out what characters you need for your final vision. Order doesn’t matter, but casing does. `4c:T598,html` `4d:T529,cleanWord = word => { // only allow characters from our `alphabet` list let cleanedWord = word .split('') .map(l => (alphabet.includes(l) ? l : undefined)) .filter(x => !_.isUndefined(x)); cleanedWord = [...new Set(cleanedWord)]; if (allowOverlap) { // Return early if so return cleanedWord; } return ( cleanedWord // for each letter, if its in the middle column // and there's either/both a square to its left or right, exclude the middle square .map(letter => { let returnValue = letter; const isMiddleSquare = findColumn(letter) % 3 === 1; if (isMiddleSquare) { cleanedWord.forEach(otherLetter => { if ( letter !== otherLetter && findRow(letter) === findRow(otherLetter) ) { const letterColumn = findColumn(letter); const otherLetterColumn = findColumn(otherLetter); if ( letterColumn === otherLetterColumn - 1 || letterColumn === otherLetterColumn || letterColumn === otherLetterColumn + 1 ) { returnValue = undefined; } } }); } return returnValue; }) .filter(x => !_.isUndefined(x)) ); }4e:[] 47:{"id":"c5f69ff815f1ef21","slug":"orange-lygia-pape","title":"Orange, Lygia Pape","thumbnail":"9d17fc8407b4180ae3e7933d70c8be59ede95d483fdefdbcec98431b23b6dc41","access_level":"public","create_time":"$D2021-08-05T14:35:00.456Z","update_time":"$D2021-08-08T23:03:02.719Z","view_time":null,"first_public_time":"$D2021-08-06T20:54:01.913Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a39c59fb53d879e2","login":"jmahabal","name":"Jay Mahabal","avatar_url":"https://avatars-next.observableusercontent.com/0cc5c59c8eb36b75abe4e5664d46572a7b626746fb8c9b54b054486ab9d50f7f","tier":"starter_2024","bio":"data viz enthusiast / bad-ass creative tech. currently ui @latticehr, prev @apple, @akqa, @ucberkeley.","following":false},"version":564,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4845ffd00a02d13b","login":"jmahabal","name":"Jay Mahabal","avatar_url":"https://avatars-next.observableusercontent.com/0cc5c59c8eb36b75abe4e5664d46572a7b626746fb8c9b54b054486ab9d50f7f","tier":null,"bio":"data viz enthusiast / bad-ass creative tech. currently ui @latticehr, prev @apple, @akqa, @ucberkeley.","following":false}],"members":[{"type":"individual","id":"4845ffd00a02d13b","login":"jmahabal","name":"Jay Mahabal","avatar_url":"https://avatars-next.observableusercontent.com/0cc5c59c8eb36b75abe4e5664d46572a7b626746fb8c9b54b054486ab9d50f7f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"d8c09697433c087d","slug":"modern-art","title":"Modern Art","owner":{"id":"a39c59fb53d879e2","login":"jmahabal","name":"Jay Mahabal"}},"type":"notebook","body":{"titling":"auto","title":"Orange, Lygia Pape","cells":[{"id":0,"value":"md`# Orange, Lygia Pape`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"viewof text = Inputs.text({\n label: \"Enter characters:\",\n placeholder: \"Orange, Lygia Pape\",\n value: INITIAL_ORANGE_PLACEMENT\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"genArt(text)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"viewof allowOverlap = Inputs.toggle({ label: \"Allow overlap†\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"html`† In the physical world, overlapping tiles wouldn’t make as much sense. But since we’re in a browser, why not! Allowing tiles to overlap can lead to some cool designs.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"INITIAL_ORANGE_PLACEMENT = 'admuAKV[#'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"gutter = 8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"genArt = word => {\n const cleanedWordArray = cleanWord(word);\n return html`\n

\n ${cleanedWordArray\n .map(letter =>\n genSquare(\n findRotation(letter),\n findGridRow(letter),\n findGridColumn(letter)\n )\n )}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"genSquare = (rotation, row, column) => html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"sideLength = gutter * 10;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"// We need 4 rotations * 3 columns * 7 rows = 84 necessary characters\nalphabet = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ[]{},./<>?;:!@#$%^&*()'.split(\n ''\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"findRotation = letter => {\n return 90 * (alphabet.indexOf(letter) % 4);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"findFloormostFour = number => {\n return number - (number % 4);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"findRow = letter => {\n let row = 0;\n let letterIndex = findFloormostFour(alphabet.indexOf(letter)) / 4 + 1; // account for rotation\n while (letterIndex - 3 > 0) {\n // 3 squares per row\n letterIndex = letterIndex - 3;\n row = row + 1;\n }\n return row;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"findGridRow = (letter) => {\n return findRow(letter) + 1;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"findColumn = letter => {\n const rotatedIndex = findFloormostFour(alphabet.indexOf(letter)); // account for rotation\n return rotatedIndex % 3;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"findGridColumn = (letter) => {\n const i = findColumn(letter) + 1;\n return `${i} / ${Math.min(i + 2, 4)}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"importStyle = url => html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"typefaceSerif = importStyle('https://fonts.googleapis.com/css2?family=STIX+Two+Text&display=swap')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"typefaceInter = importStyle(\n \"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 24:null