2d:null 2e:["$","title",null,{"children":"Computational Art Recode Camp Workshop2 | UCA Creative Coding | Observable"}] 33:Ta29,processing(` int cellSize = 20; int colNo,rowNo; boolean[][][] grid; // use a multi-dimension array to store the information of each cell void setup(){ size(600, 400); background(255); colNo = width / cellSize; rowNo = height / cellSize; grid = new boolean[colNo][rowNo][4]; // initialize the array //first loop: decide which stroke to draw and store them in the array for (int i = 0; i < colNo; i ++){ for (int j = 0; j < rowNo; j ++){ int x = i * cellSize; int y = j * cellSize; boolean stroke1 = random(0, 1) > 0.5; // decide if stroke1 should be drawn boolean stroke2 = random(0, 1) > 0.5; boolean stroke3 = random(0, 1) > 0.5; boolean stroke4 = random(0, 1) > 0.5; grid[i][j][0] = stroke1; // store the status of stroke 1 in the array grid[i][j][1] = stroke2; grid[i][j][2] = stroke3; grid[i][j][3] = stroke4; //draw the black strokes if (stroke1) { //draw vertical stroke strokeWeight(5); stroke(0); line(x, y, x, y + cellSize); } if (stroke2){ // horizontal stroke strokeWeight(5); stroke(0); line (x, y, x + cellSize, y); } if (stroke3){ // dia 1 strokeWeight(5); stroke(0); line (x + cellSize, y, x , y + cellSize); } if (stroke4){ // dia 2 strokeWeight(5); stroke(0); line (x, y, x + cellSize, y + cellSize); } } } // second loop: read the information and draw the white strokes for (int i = 0; i < colNo; i ++){ for (int j = 0; j < rowNo; j ++){ int x = i * cellSize; int y = j * cellSize; boolean stroke1 = grid[i][j][0]; // read the status of stroke1 boolean stroke2 = grid[i][j][1]; boolean stroke3 = grid[i][j][2]; boolean stroke4 = grid[i][j][3]; // draw the white strokes if (stroke1) { //draw vertical stroke strokeWeight(3); stroke(255); line(x, y, x, y + cellSize); } if (stroke2){ // horizontal stroke strokeWeight(3); stroke(255); line (x, y, x + cellSize, y); } if (stroke3){ // dia 1 strokeWeight(3); stroke(255); line (x + cellSize, y, x , y + cellSize); } if (stroke4){ // dia 2 strokeWeight(3); stroke(255); line (x, y, x + cellSize, y + cellSize); } } } // draw the black outside frame strokeWeight(5); stroke(0); noFill(); rect(2.5,2.5,width-5,height-5); } `);34:[{"id":"c1f47e430e5f1240b81cd06b200202e9b0dd6f4a1f50083c9c581a9633f545d6226ba790a7e4f21f1c0bb14e917088f92a3dedce685c1e3be5b72c6506c2f66f","href":"https://static.observableusercontent.com/files/c1f47e430e5f1240b81cd06b200202e9b0dd6f4a1f50083c9c581a9633f545d6226ba790a7e4f21f1c0bb14e917088f92a3dedce685c1e3be5b72c6506c2f66f","name":"image.png","type":"image/png","lastModified":1698771238370.147,"size":3600679},{"id":"295ba8079b00f98667789e7e3cacf84fd54a18772072a34bd0d680cb51fcdc67cd076bb73649b6377c6c1e0cfb7fda93ac9816d1b610a29b00c95448758d38f8","href":"https://static.observableusercontent.com/files/295ba8079b00f98667789e7e3cacf84fd54a18772072a34bd0d680cb51fcdc67cd076bb73649b6377c6c1e0cfb7fda93ac9816d1b610a29b00c95448758d38f8","name":"The state of the art of computer art pharse ii.pdf","type":"application/pdf","lastModified":1698854597007.647,"size":446915},{"id":"0e41923c3a5f6855883fb1bc555bc6e38d190c9369f7f7e9ba8f26ba75bd6e0ed34b572740675a4fc5b6898d13e704857543eb064b6da7912fa823451347a4c8","href":"https://static.observableusercontent.com/files/0e41923c3a5f6855883fb1bc555bc6e38d190c9369f7f7e9ba8f26ba75bd6e0ed34b572740675a4fc5b6898d13e704857543eb064b6da7912fa823451347a4c8","name":"graphics application painting.pdf","type":"application/pdf","lastModified":1698854597782.135,"size":840846},{"id":"03ac24f34ef76c477973ed77c5ed7c566c5d4d8e90516c55b017118bc13cf899b573175abbf783b18570032fcacafdfc4bfca995021d071541d1ce5aa863d486","href":"https://static.observableusercontent.com/files/03ac24f34ef76c477973ed77c5ed7c566c5d4d8e90516c55b017118bc13cf899b573175abbf783b18570032fcacafdfc4bfca995021d071541d1ce5aa863d486","name":"words by manfred mohr.pdf","type":"application/pdf","lastModified":1698854598199.312,"size":1334014},{"id":"6018c5a91c01d2522802c13ebf6f5e881460d963f938d6638784d15ac21ea246d326b7b8fbad4d6d2d00bd0ae7a0f85eeac35df5d9c16d5bebfe740de48063bc","href":"https://static.observableusercontent.com/files/6018c5a91c01d2522802c13ebf6f5e881460d963f938d6638784d15ac21ea246d326b7b8fbad4d6d2d00bd0ae7a0f85eeac35df5d9c16d5bebfe740de48063bc","name":"Screenshot 2023-11-06 at 4.12.01 PM.png","type":"image/png","lastModified":1699287131230.674,"size":1309547},{"id":"a48e8ff59e0bcd468f3862707b806072ffd067f58036324aed9a30707985a922f2723d73c080dc29213c2d74b45d22f607cec04a6d37fc2d5b2b8155bc5457eb","href":"https://static.observableusercontent.com/files/a48e8ff59e0bcd468f3862707b806072ffd067f58036324aed9a30707985a922f2723d73c080dc29213c2d74b45d22f607cec04a6d37fc2d5b2b8155bc5457eb","name":"Computational art recode camp 2.pdf","type":"application/pdf","lastModified":1699288196469.638,"size":344160}] 31:{"id":"49b41d1f08136576","slug":"recode-camp-2","title":"Computational Art Recode Camp Workshop2","thumbnail":"a28aac8c403b665250bc5c8b0227b1d87fc03716df2e799a2c8053c514529895","access_level":"public","create_time":"$D2023-10-26T14:44:50.019Z","update_time":"$D2023-11-06T16:42:54.536Z","view_time":null,"first_public_time":"$D2023-10-26T14:44:50.019Z","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":56,"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 Workshop2","cells":[{"id":0,"value":"# Computational Art Recode Camp Workshop2\n\nWorks by Roger Coqart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"htl.html`\n

Artwork 1

Travelling through Square (1976)

\n\n

Describe toggleContent(4)}>

\n\n

metal frame, glasshouse, bridge, construction structure, outlined stroke, conjunction

\n\n

Analyze toggleContent(5)}>

\n\n

grid\n\n\n\neach cell is a little square with 1 - 4 strokes

\n\n

Example Recode Solution:

`","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":51,"value":"### Think: How to eliminate the floating stroke?\nhint: Play with the probability of each stroke's on/off status","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"## Further Reading\n * [Roger Coqart, Graphics Application: Painting, Computer Graphic and Art, Vol.1 No.3, August 1976](${await FileAttachment(\"graphics application painting.pdf\").url()})\n * [Grace C. Hertlein, The State of the Art of Computer Art: Phrase II, Computer Graphic and Art, Vol.1 No.2, May 1976](${await FileAttachment(\"The state of the art of computer art pharse ii.pdf\").url()})\n * [Manfed Mohr’s note on Cubic Limit, Computer Graphic and Art, Vol.1 No.3, August 1976](${await FileAttachment(\"words by manfred mohr.pdf\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"## Slides","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":53,"value":"[Link here](${await FileAttachment(\"Computational art recode camp 2.pdf\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"

\n### Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"import {processing} from '@real-john-cheung/processing'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"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"