2c:null 2d:["$","title",null,{"children":"Assignment #5 | KarlieDoesNotExist | Observable"}] 32:T6c8,md` ### Two dynamic sketches run on grids
~~~js // By Roni Kaufman const N_FRAMES = 96; // number of frames in each phase (static or transition) const N_PATTERNS = 4; // number of patterns coded in getRotation below const n = 8; // size of the grid let idFrom = 0; let idTo = 0; //setup... function draw() { //... let t = (frameCount%N_FRAMES) / N_FRAMES; t = easeInOutExpo(t); if (frameCount % (2 * N_FRAMES) == 0) { idFrom = idTo; // for the next N_FRAMES, the pattern will stay the same } else if (frameCount % (2 * N_FRAMES) == N_FRAMES) { idTo = (idTo +1) % N_PATTERNS; // for the next N_FRAMES, the pattern will change to the next one } for (let i = 0; i < n; i++) { for (let j = 0; j < n; j++) { let thetaFrom = getRotation(i, j, idFrom); let thetaTo = getRotation(i, j, idTo); let theta = map(t, 0, 1, thetaFrom, thetaTo); push(); translate(xCorner + (i+1/2)*s, yCorner + (j+1/2)*s); rotate(theta); arc(m/2-s/2, m/2-s/2, s*2-m*2, s*2-m*2, 0, PI/2); pop(); } } } function getRotation(i, j, id) { let rot; switch (id) { case 0: rot = (j < n/2) ? (2 + floor(i/(n/2))) : (1 - floor(i/(n/2))); break; case 1: rot = (j%2 == 0) ? (2 + (i%2)) : (1 - (i%2)); break; case 2: rot = (j%2 == 0) ? (1 + 2*(i%2)) : (1 + 2*(1-i%2)); break; case 3: rot = (i%2) + (j%2)*2 + 1; break; } return rot*PI/2; } // from https://easings.net/ function easeInOutExpo(x) { return x === 0 ? 0: x === 1 ? 1: x < 0.5 ? pow(2, 20 * x - 10) / 2 : (2 - pow(2, -20 * x + 10)) / 2; } ~~~ `33:[{"id":"1c32574de5b2c27473c257a02ec81d03ce21b6decf4c3d3a4a8e70294e32590d8e8b9f943a02d6aeb4fc328cd1767e84af3088b2e90887105db402e2ca57632f","href":"https://static.observableusercontent.com/files/1c32574de5b2c27473c257a02ec81d03ce21b6decf4c3d3a4a8e70294e32590d8e8b9f943a02d6aeb4fc328cd1767e84af3088b2e90887105db402e2ca57632f","name":"10.png","type":"image/png","lastModified":1634038586727.616,"size":671748},{"id":"a82c3dd0724a9bf1d0c02174c8ddf273ea82a9114b1517952fa99d6f4c55bcfaf1dbf56ead47ff2bec07f69ff2a762ff27e96ccec1fa37c0346f2b2d445dd153","href":"https://static.observableusercontent.com/files/a82c3dd0724a9bf1d0c02174c8ddf273ea82a9114b1517952fa99d6f4c55bcfaf1dbf56ead47ff2bec07f69ff2a762ff27e96ccec1fa37c0346f2b2d445dd153","name":"12.png","type":"image/png","lastModified":1634038585708.581,"size":597109},{"id":"97e7e0fcb16736d3525e39db83c79d6878eeb89ecbe71379da7fb95382fe67899aa67882da0ef78066b98193b4dea43431099bc304b04af232722fafad22751e","href":"https://static.observableusercontent.com/files/97e7e0fcb16736d3525e39db83c79d6878eeb89ecbe71379da7fb95382fe67899aa67882da0ef78066b98193b4dea43431099bc304b04af232722fafad22751e","name":"14.png","type":"image/png","lastModified":1634038584835.34,"size":420254},{"id":"1385c257c3405497e91f219d9335632ce72203b44c03bc4f60ee2482b335534b3d4a6adf4cf26c1eb00d3855a2f309119d2467a4b8e167f1a2cc5260a86936f8","href":"https://static.observableusercontent.com/files/1385c257c3405497e91f219d9335632ce72203b44c03bc4f60ee2482b335534b3d4a6adf4cf26c1eb00d3855a2f309119d2467a4b8e167f1a2cc5260a86936f8","name":"8.png","type":"image/png","lastModified":1634041916103.924,"size":652432},{"id":"d881b7cb19d6739b58cda4eecbd2645b23b50548f868047d11409dac35fe5cfc708adab420aed164ae5e06607ed8a1946eeb6ed9e72a7dd4bdd77b315f0b00fd","href":"https://static.observableusercontent.com/files/d881b7cb19d6739b58cda4eecbd2645b23b50548f868047d11409dac35fe5cfc708adab420aed164ae5e06607ed8a1946eeb6ed9e72a7dd4bdd77b315f0b00fd","name":"11.png","type":"image/png","lastModified":1634038587503.987,"size":803311}] 30:{"id":"ca50a7b4c3b974b5","slug":"assignment-5","title":"Assignment #5","thumbnail":"7f24f338d972caab6ae9ed2c719d3c93f95326d5551ee88197adce5970296e6a","access_level":"public","create_time":"$D2021-10-09T06:05:53.759Z","update_time":"$D2021-10-12T12:32:23.642Z","view_time":null,"first_public_time":"$D2021-10-12T11:52:48.576Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b34c988451399e98","login":"wenrazhao2","name":"KarlieDoesNotExist","avatar_url":"https://avatars-next.observableusercontent.com/64edd542e55cff350a7503e5050267fb1768e8cc5052184b8a8cb49162d172f3","tier":"starter_2024","bio":"unless she does"},"version":168,"publish_version":168,"role":null,"authored":false,"authors":[{"type":"individual","id":"302ba7635bb9b25d","login":"wenrazhao2","name":"KarlieDoesNotExist","avatar_url":"https://avatars-next.observableusercontent.com/64edd542e55cff350a7503e5050267fb1768e8cc5052184b8a8cb49162d172f3","tier":null,"bio":"unless she does"}],"members":[{"type":"individual","id":"302ba7635bb9b25d","login":"wenrazhao2","name":"KarlieDoesNotExist","avatar_url":"https://avatars-next.observableusercontent.com/64edd542e55cff350a7503e5050267fb1768e8cc5052184b8a8cb49162d172f3","tier":null,"role":"editor"}],"comments":[{"id":"e967c3cbd40e4fe3","reply_to_id":null,"content":"very interesting work \n(have you found an API for p5.Pattern?)","create_time":"$D2021-10-13T17:16:41.522Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"32869872eb6f2f82","login":"dhowe","name":"Daniel Howe","avatar_url":"https://avatars-next.observableusercontent.com/a5081aaa56ae9990aa27642040dc61de3ce8cea67f6f778a5b864e41111ba7a3","tier":null}},{"id":"f8f2b17d27cc2da8","reply_to_id":"e967c3cbd40e4fe3","content":"so far, no, seems like the only way to use it is to download the library...","create_time":"$D2021-10-14T04:02:43.995Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"302ba7635bb9b25d","login":"wenrazhao2","name":"KarlieDoesNotExist","avatar_url":"https://avatars-next.observableusercontent.com/64edd542e55cff350a7503e5050267fb1768e8cc5052184b8a8cb49162d172f3","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"a2245910e29a736f","slug":"generative-art","title":"Generative Art","owner":{"id":"b34c988451399e98","login":"wenrazhao2","name":"KarlieDoesNotExist"}},"type":"notebook","body":{"titling":"auto","title":"Assignment #5","cells":[{"id":0,"value":"# Assignment #5","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"md`\n\n\n
\n\n~~~js\nDrawRect=(size, x, y)=> {\n if (size/h1) {\n DrawRect(size, x-size, y-size)\n DrawRect(size, x+size, y-size)\n DrawRect(size, x-size, y+size)\n DrawRect(size, x+size, y+size)\n }\n }\n}\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"html`\n

Sketch & Screenshots

\n\n

\n

\n\nClick to regenerate. Takes some time to render.

\nP5. Pattern is a super handy library for pattern generating.\n\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"