2d:null 2e:["$","title",null,{"children":"Computational Art Recode Camp Workshop1 | UCA Creative Coding | Observable"}] 33:Tbaa,processing(` int sqSize = 30; int margin = 5; int[] arrayOfStroke = new int[]{0,1,2,3,4,5,6,7,8,9,10,11}; void setup(){ size(600, 600); // create a canvas that is 600 pixels wide and 600 pixels high background(255); // fill the canvas with a white background int rowNo = int(width/(sqSize+margin)); // decide how much rows can we fit in the canvas int colNo = int(height/(sqSize+margin)); // decide how much columns can we fit in the canvas for (int row = 0; row < rowNo; row++){ // loop over the rows for (int col= 0; col < colNo; col++){ // loop over the columns int x = (col + 1) * margin + sqSize * (col); // caculate the x coordinate of the upper-left corner of the square int y = (row + 1) * margin + sqSize * (row); // caculate the y coordinate of the upper-left corner of the square rect(x,y,sqSize,sqSize); // draw the square float distance = dist(x + sqSize/2, y + sqSize/2, width/2, height/2); // distance from center of the square to the center of the canvas int strokeNo = floor(map(distance, 0, width/2, 0, 12)); // map the distance to the corresponding number of stroke to be drawn inside the square if (strokeNo > 12) strokeNo = 12; // constrain the biggest number shuffle(arrayOfStroke); // randomly shuffle the array for(int i = 0; i < strokeNo; i++){ // pick which strokes(s) to be drawn int strokeIndex = arrayOfStroke[i]; switch(strokeIndex){ case 0: line(x + sqSize/2, y + sqSize/2, x + sqSize/2, y); // stroke0 break; case 1: line(x + sqSize/2, y + sqSize/2, x + sqSize, y); // stroke1 break; case 2: line(x + sqSize/2, y + sqSize/2, x + sqSize, y + sqSize/2); //stroke2 break; case 3: line(x + sqSize/2, y + sqSize/2, x + sqSize, y + sqSize); //stroke3 break; case 4: line(x + sqSize/2, y + sqSize/2, x + sqSize/2, y + sqSize); //stroke4 break; case 5: line(x + sqSize/2, y + sqSize/2, x, y + sqSize); //stroke5 break; case 6: line(x + sqSize/2, y + sqSize/2, x , y + sqSize/2); //stroke6 break; case 7: line(x + sqSize/2, y + sqSize/2, x, y); // stroke7 break; case 8: line(x + sqSize/2, y, x + sqSize, y + sqSize/2); //stroke8 break; case 9: line(x + sqSize, y + sqSize/2, x + sqSize/2, y + sqSize); // stroke9 break; case 10: line(x + sqSize/2, y + sqSize, x, y + sqSize/2); // stroke10 break; case 11: line(x, y + sqSize/2, x + sqSize/2, y); // stroke11 break; } } } } } //Fisher-Yates shuffle function void shuffle(int[] input){ for(int i = 0; i < input.length - 1; i++){ int j = int(random(input.length - i)); int tem = input[i]; input[i] = input[j]; input[j] = tem; } } `)34:[{"id":"31b5aedeebc8fddbef01f934227459e64c1a0bc41cd07c5541b4a46849f845c022e34d1ad878d9c33e9616df4e3b6fade52698fda91738a9d8932b0af6c756fc","href":"https://static.observableusercontent.com/files/31b5aedeebc8fddbef01f934227459e64c1a0bc41cd07c5541b4a46849f845c022e34d1ad878d9c33e9616df4e3b6fade52698fda91738a9d8932b0af6c756fc","name":"Computational art recode camp 1.pdf","type":"application/pdf","lastModified":1698400163602.252,"size":1595236},{"id":"5b56cfd748cd8ee8c86a094eed4a00b7b8ec29902716f0d6356800a5f59bef5c68ca7533b3ab6749915967e157c0936f70618f86d5465cab81f5d20287e00859","href":"https://static.observableusercontent.com/files/5b56cfd748cd8ee8c86a094eed4a00b7b8ec29902716f0d6356800a5f59bef5c68ca7533b3ab6749915967e157c0936f70618f86d5465cab81f5d20287e00859","name":"image@3.png","type":"image/png","lastModified":1698415394174.362,"size":66755},{"id":"0c68268b9b425b1ef4b00f04b590625e594fe5ac5a7aed716e877848c1b3e09dc8839466f9b076aacb6e664dc9021efa8d7762507fb98f6d18a1e216e190393d","href":"https://static.observableusercontent.com/files/0c68268b9b425b1ef4b00f04b590625e594fe5ac5a7aed716e877848c1b3e09dc8839466f9b076aacb6e664dc9021efa8d7762507fb98f6d18a1e216e190393d","name":"image@4.png","type":"image/png","lastModified":1698415423091.086,"size":4344},{"id":"c2350ce8809ba8f740cd06947dbd63695b85fd989812f2480a8d4e425422db98a764053929ccf49754bfceaffeb6460c61a5bb4c12ac30455b65c278e38a3f92","href":"https://static.observableusercontent.com/files/c2350ce8809ba8f740cd06947dbd63695b85fd989812f2480a8d4e425422db98a764053929ccf49754bfceaffeb6460c61a5bb4c12ac30455b65c278e38a3f92","name":"image@5.png","type":"image/png","lastModified":1698415484246.195,"size":5994},{"id":"9d0010cd085628143b95ab19a0ae381044a4d4aa1d0323be96f7adf0178a252019b4646e22b78b20cc4039e68bce0f4374b39d96f4e181452e56421ab8aa23f5","href":"https://static.observableusercontent.com/files/9d0010cd085628143b95ab19a0ae381044a4d4aa1d0323be96f7adf0178a252019b4646e22b78b20cc4039e68bce0f4374b39d96f4e181452e56421ab8aa23f5","name":"articlesFromCGAMay1978.pdf","type":"application/pdf","lastModified":1698336114204.182,"size":1872803},{"id":"f32f97159af926025260d4da9dbe827b6e959ba05c51720db53342c51a85bad21101fa163c8afe3df30de326f3f3101d9ac6c6ee994107dd4beacdf7cd8e00b6","href":"https://static.observableusercontent.com/files/f32f97159af926025260d4da9dbe827b6e959ba05c51720db53342c51a85bad21101fa163c8afe3df30de326f3f3101d9ac6c6ee994107dd4beacdf7cd8e00b6","name":"image.png","type":"image/png","lastModified":1697815684829.691,"size":2503149},{"id":"4692b0467f7350c51f72a4253b9aa9f91620ead838adcb4f48470765cb3ed59b21f4b06c2452ca132020f514b0d919347d3e722073ac066c75e7a5d7537bb91c","href":"https://static.observableusercontent.com/files/4692b0467f7350c51f72a4253b9aa9f91620ead838adcb4f48470765cb3ed59b21f4b06c2452ca132020f514b0d919347d3e722073ac066c75e7a5d7537bb91c","name":"image@1.png","type":"image/png","lastModified":1697815869761.815,"size":2093549},{"id":"2bc1537fa09435374bc294c8e3f4afa346bdc995c80f3b41b350baaecf403b8b3411847a9fbd9e90dcfb14443634e19bd7498f45afb7b12e499e3daf53546a92","href":"https://static.observableusercontent.com/files/2bc1537fa09435374bc294c8e3f4afa346bdc995c80f3b41b350baaecf403b8b3411847a9fbd9e90dcfb14443634e19bd7498f45afb7b12e499e3daf53546a92","name":"image@2.png","type":"image/png","lastModified":1697815970218.666,"size":1240327}] 31:{"id":"9dd00f903ee836ec","slug":"recode-camp-1","title":"Computational Art Recode Camp Workshop1","thumbnail":"db76dcaf80bb0269a6f3a2a4cbc720316997442fc64f4474d19e80d8a19452a8","access_level":"public","create_time":"$D2023-10-20T15:22:22.660Z","update_time":"$D2023-10-30T16:45:32.174Z","view_time":null,"first_public_time":"$D2023-10-20T15:22:22.660Z","has_unpublished_edits":null,"fork":false,"stars":2,"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":264,"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":1,"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 Workshop1","cells":[{"id":0,"value":"# Computational Art Recode Camp Workshop1\n\n Works by Roger Coqart\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"htl.html`\n

Artwork 1

\n\n

Structured Square - Inwards (1976)

\n\n

Describe toggleContent(1)}>

\n\n

geometry shape, square, grid, graident, lines, uniform, rows and columns, patterns, negative space, mesh

\n\n

Analyze toggleContent(2)}>

\n\n

1. draw the grid of squares 2. draw the structure inside 3. ways of constructing the inner structure with line segements 4. decide how many segments in the square according to its distance to the center 5. which segments to draw is decided randomly

\n\n

Example Recode Solution:

\n\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"htl.html`\n

Artwork 2

We will look into this next week

Travelling through Square (1976)

\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:

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"## Further Reading\n\n* Great tutorial for Processing by The Coding Train if you are new to it: https://thecodingtrain.com/tracks/learning-processing\n\n* Roger Coqart, From the Square Series, http://dada.compart-bremen.de/item/artwork/1273 \n\n* Manfred Mohr, Cubic Limit (1973-1974), http://emohr.com/collab-exp/mohr_film1973-1974.html \n\n* Serval Articles in Computer Graphics and Art, Vol.3 No.2, May 1978, PDF attached here\n\n * Aaron Marcus, Hieroglyph. On Page 16 - 17\n * Ben F. Laposky, Oscillons: Electronic Abstraction. On page 19\n * Roget Coqart, Outer Space and Technology Progress. On page 30 - 31\n * Paul Shao and Ken Dunker, Varied Attitudes Held Toward Computer Art. On page 32 \n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"## Works by Students:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":238,"value":"`Waiting for your submission!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"## Slides\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":127,"value":"[Donwlonad here]( ${await FileAttachment(\"Computational art recode camp 1.pdf\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"computationalArtRecodeCamp1","database":"$undefined"},{"id":6,"value":"

\n### Appendix\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"import {processing} from '@real-john-cheung/processing'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":46,"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":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"