2d:null 2e:["$","title",null,{"children":"Computational Art Recode Camp Workshop3 | UCA Creative Coding | Observable"}] 33:T95d,processing(` void setup() { size(600, 600); background(255); rectMode(CENTER); int gridSize = 50; int colNo = width / gridSize; int rowNo = height / gridSize; noFill(); strokeWeight(1.5); float sideMargin = 5; for (int i = 0; i < colNo; i ++) { for (int j = 0; j < rowNo; j ++) { if (i == 0 || j == 0 || i == colNo - 1 || j == rowNo - 1) continue; // edge cell should be blank float distToCenter = max(abs((float) i - float(colNo - 1) / 2), abs((float) j - float(rowNo - 1) / 2)) ; // check if the cell is near to edge float x = gridSize * i + gridSize / 2; // center for this cell float y = gridSize * j + gridSize / 2; // center for this cell boolean hasLSq = random(1) > 0.75; // does this cell contain a large square? boolean hasMSq = random(1) > 0.25; // does this cell contain a medium square? int sSqNo = floor(random(7 - score(distToCenter, colNo/2 - 2))); // number of small squares if (hasLSq) { float sz = random(gridSize * 1.5, gridSize * 2); float xx = x + random(-gridSize/2, gridSize/2); // x coordinate for the square float yy = y + random(-gridSize/2, gridSize/2); // y coordinate for the square if (xx - sz/2 < sideMargin) xx = sz/2 + sideMargin; if (yy - sz/2 < sideMargin) yy = sz/2 + sideMargin; if (xx + sz/2 > width - sideMargin) xx = width - sideMargin - sz/2; if (yy + sz/2 > height - sideMargin) yy = height - sideMargin - sz/2; // make sure square is inside the canvas rect(xx, yy, sz, sz, 2); } if (hasMSq) { float sz = random(gridSize * 0.8, gridSize); float xx = x + random(-gridSize/4, gridSize/4); float yy = y + random(-gridSize/4, gridSize/4); if (xx - sz/2 < sideMargin) xx = sz/2 + sideMargin; if (yy - sz/2 < sideMargin) yy = sz/2 + sideMargin; if (xx + sz/2 > width - sideMargin) xx = width - sideMargin - sz/2; if (yy + sz/2 > height - sideMargin) yy = height - sideMargin - sz/2; rect(xx, yy, sz, sz, 2); } for (int k = 0; k < sSqNo; k ++){ float sz = random(gridSize * 0.3, gridSize * 0.4); rect(x + random(-gridSize/2, gridSize/2), y + random(-gridSize/2, gridSize/2), sz, sz, 1); } } } } float score(float inp, float threshold){ if (inp < threshold) return 0; return inp - threshold; } `);34:Tcd3,processing(` void setup(){ size(600,600); background(255); rectMode(CENTER); noFill(); strokeWeight(1.5); float avgMSqSz = 40; float avgSSqSz = 15; float avgLSqSz = 100; float margin = 50; int verticalMediumLineNo = floor(random(12,14)); //vertical medium squares for(int i = 0; i < verticalMediumLineNo; i++){ float sz = avgMSqSz * random(.9,1.1); float gap = (width - 2 * margin - avgMSqSz) / (verticalMediumLineNo - 1); float x = margin + avgMSqSz / 2 + i * gap; // a rigid distribution of the line x += (i == 0 || i == verticalMediumLineNo - 1) ? random(-10,10) : random(-gap * 0.4, gap * 0.4); // random displacement of the line int numOfSq = floor(random(4,7)); for (int j = 0; j < numOfSq; j ++){ float y = random(margin + sz/2, height - (margin + sz/2)); // random position of the squares in the line rect(x, y, sz, sz, 2); } } int horizontalMediumLineNo = floor(random(12,14)); //horizontal medium squares for(int i = 0; i < horizontalMediumLineNo; i++){ float sz = avgMSqSz * random(.9,1.1); float gap = (height - 2 * margin - avgMSqSz) / (horizontalMediumLineNo - 1); float y = margin + avgMSqSz / 2 + i * gap; // a rigid distribution of the line y += (i == 0 || i == horizontalMediumLineNo - 1) ? random(-10,10) : random(-gap * 0.4, gap * 0.4); // random displacement of the line int numOfSq = floor(random(4,7)); for (int j = 0; j < numOfSq; j ++){ float x = random(margin + sz/2, width - (margin + sz/2)); // random position of the squares in the line rect(x, y, sz, sz, 2); } } // do the same as above for small squares int verticalSmallLineNo = floor(random(16,18)); //vertical small squares for(int i = 0; i < verticalSmallLineNo; i++){ float sz = avgSSqSz * random(.9,1.1); float gap = (width - 2 * margin - avgSSqSz - avgMSqSz) / (verticalSmallLineNo - 1); float x = margin + avgSSqSz / 2 + avgMSqSz/2 + i * gap; x += (i == 0 || i == verticalSmallLineNo - 1) ? random(-2,2) : random(-gap * 0.4, gap * 0.4); int numOfSq = floor(random(10,16)); for (int j = 0; j < numOfSq; j ++){ float y = random(margin + sz/2 + avgMSqSz/2, height - (margin + sz/2 + avgMSqSz/2)); rect(x, y, sz, sz, 2); } } int horizontalSmallLineNo = floor(random(16,18)); //horizontal small squares for(int i = 0; i < horizontalSmallLineNo; i++){ float sz = avgSSqSz * random(.9,1.1); float gap = (height - 2 * margin - avgSSqSz - avgMSqSz) / (horizontalSmallLineNo - 1); float y = margin + avgSSqSz / 2 + avgMSqSz/2 + i * gap; y += (i == 0 || i == horizontalSmallLineNo - 1) ? random(-2,2) : random(-gap * 0.4, gap * 0.4); int numOfSq = floor(random(10,16)); for (int j = 0; j < numOfSq; j ++){ float x = random(margin + sz/2 + avgMSqSz/2, width - (margin + sz/2 + avgMSqSz/2)); rect(x, y, sz, sz, 2); } } // as the number of large square is low, we can just do it randomly int largeSquareNo = floor(random(3, 6)); for (int i = 0; i < largeSquareNo; i ++){ float sz = avgLSqSz * random(.9,1.1); float x = random(margin + sz/2, width - (margin + sz/2)); float y = random(margin + sz/2, height - (margin + sz/2)); rect(x, y, sz, sz, 2); } } `)35:[{"id":"7b8a11aa93d62553b91f64415b3290dc021054899fc4383af94420c12b95256c7e05717f568d927a090cbc084771dc3e92ae3c025e6734d0344492f2d5d71795","href":"https://static.observableusercontent.com/files/7b8a11aa93d62553b91f64415b3290dc021054899fc4383af94420c12b95256c7e05717f568d927a090cbc084771dc3e92ae3c025e6734d0344492f2d5d71795","name":"image.png","type":"image/png","lastModified":1699373297544.741,"size":160273},{"id":"a5177a7bb25b3767163aceb8124e672a849ad6ef9645ce2962a2278913c0f72ee14676d90c7b51d32fb579b357c09a658c31e185e0201a46c566fd94f741e585","href":"https://static.observableusercontent.com/files/a5177a7bb25b3767163aceb8124e672a849ad6ef9645ce2962a2278913c0f72ee14676d90c7b51d32fb579b357c09a658c31e185e0201a46c566fd94f741e585","name":"Computational art recode camp 3.pdf","type":"application/pdf","lastModified":1699873290966.093,"size":889261}] 31:{"id":"cf9bee8c6d12b564","slug":"recode-camp-3","title":"Computational Art Recode Camp Workshop3","thumbnail":"a9a7ca60d1c14c69015385ea2ffd39162631dfdea2f3a440fe27a25131a81ffd","access_level":"public","create_time":"$D2023-11-07T16:05:08.394Z","update_time":"$D2023-11-13T16:50:22.535Z","view_time":null,"first_public_time":"$D2023-11-07T16:05:08.394Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"dfaef80afcf81212","login":"uca-cc","name":"UCA Creative Coding","avatar_url":"https://avatars-next.observableusercontent.com/1966133a5777fe0408537e4228227fb40091db63bf3771517227e9c4514c9920","tier":"starter_2024"},"version":51,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e8e99acdbe3aebfb","login":"real-john-cheung","name":"John C","avatar_url":"https://avatars-next.observableusercontent.com/1d9ef6121a0bbd1a75fab479f9891fe1d78cc65f76c394585ae1a7dad0d3abf6","tier":null}],"members":[{"type":"individual","id":"e8e99acdbe3aebfb","login":"real-john-cheung","name":"John C","avatar_url":"https://avatars-next.observableusercontent.com/1d9ef6121a0bbd1a75fab479f9891fe1d78cc65f76c394585ae1a7dad0d3abf6","tier":null,"role":"editor"},{"type":"team","id":"dfaef80afcf81212","login":"uca-cc","name":"UCA Creative Coding","avatar_url":"https://avatars-next.observableusercontent.com/1966133a5777fe0408537e4228227fb40091db63bf3771517227e9c4514c9920","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"83c807a1026211d2","slug":"computational-art-recode-camp","title":"Computational Art Recode Camp","owner":{"id":"dfaef80afcf81212","login":"uca-cc","name":"UCA Creative Coding"}},"type":"notebook","body":{"title":"Computational Art Recode Camp Workshop3","cells":[{"id":0,"value":"# Computational Art Recode Camp Workshop3\n\nWorks by Herbert W. Franke","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"htl.html`\n

Artwork 1

Random Square (1976)

On the 2nd International Conference on Computers and the Humanities

\n\n

Describe toggleContent(4)}>

\n\n

To be added

\n\n

Analyze toggleContent(5)}>

\n\n

To be added

\n\n

Example Recode Solution:

\n1. Grid Displacement`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"2. Lines displacement","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"## Further Readings\n* A video showing Herbert Franke’s work by Discover Germany, https://youtu.be/jB3oCvUpGbk \n* The ZKM archive for Herbert Franke, https://zkm.de/en/person/herbert-w-franke \n* MONDRIAN, 1979 - 2022, Herbert Franke, https://objkt.com/asset/KT18tcj5kk2khTKtXhVSzpV9J8c9oiT8krCU/0 \n* Herbert Franke’s works in V&A Museum https://collections.vam.ac.uk/search/?id_person=A21803 ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"## Slides\n\n[Link here](${await FileAttachment(\"Computational art recode camp 3.pdf\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"

\n\n## Appendix\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"import {processing} from \"@real-john-cheung/processing\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"toggleContent = function(id){\n let arrowId = `arrow${id}`;\n let contentId = `content${id}`;\n let arrow = document.getElementById(arrowId);\n let content = document.getElementById(contentId);\n if (arrow.classList.contains('up')) {\n content.style.display = 'block';\n arrow.classList.remove('up');\n arrow.classList.add('down');\n } else {\n content.style.display = 'none';\n arrow.classList.remove('down');\n arrow.classList.add('up');\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"