28:null 29:["$","title",null,{"children":"Baroque.me | Eric Field | Observable"}] 2e:T438, 2f:[] 2c:{"id":"c4aac3237e6ecb9f","slug":"baroque-me","title":"Baroque.me","thumbnail":"97ccccb37906e772aeb6c203653511879f88b22141e81a3816fd9bc6bb86eefb","access_level":"public","create_time":"$D2022-01-11T03:35:52.889Z","update_time":"$D2022-02-06T21:23:43.933Z","view_time":null,"first_public_time":"$D2022-02-06T21:13:27.515Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"58dc22f5e2929ad2","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":"starter_2024"},"version":161,"publish_version":161,"role":null,"authored":false,"authors":[{"type":"individual","id":"4971b358617edbb7","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":null}],"members":[{"type":"individual","id":"4971b358617edbb7","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"53686e0046507b40","slug":"demos","title":"demos","owner":{"id":"58dc22f5e2929ad2","login":"emfielduva","name":"Eric Field"}},"type":"notebook","body":{"title":"Baroque.me","cells":[{"id":0,"value":"# Baroque.me","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"md`a simplified version of http://baroque.me (without sound), demonstrating basic SVG objects, their manipulation, a time generator, and animation dynamics. This is not intended to replicate the entire project, but rather to use it as an explanation device.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$2e","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"svg","database":"$undefined"},{"id":132,"value":"md`Now we setup functions and values to animate and move it`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"// a function to turn the circles. Each one is rotated about the center used in the original svg, based on the time value.\n\nfunction turn() {\n d3.select(\"#leftcircle\").attr(\"transform\", () => {return \"rotate(\" + (10+time)*-2 +\" 250 250)\";});\n d3.select(\"#leftcircle2\").attr(\"transform\", () => {return \"rotate(\" + (10+90+time)*-2 +\" 250 250)\";});\n d3.select(\"#rightcircle\").attr(\"transform\", () => {return \"rotate(\" + (10+45+time)*2 +\" 550 250)\";});\n d3.select(\"#rightcircle2\").attr(\"transform\", () => {return \"rotate(\" + (10+135+time)*2 +\" 550 250)\";});\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"// a generator for a time ticker. time is referenced in the turn() function.\n// notice that time is constantly moving on.\n\ntime = {\n let i = 0;\n while (true) {\n yield Promises.delay(20, ++i);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"// a function to change the length of the strings. Here it creates random lengths, but could be controlled by data.\n// each object gets a new x1 and x2 pushing in and out from the center of 400.\n\nfunction stringLength() {\n var strings = d3.selectAll(\"line\")\n .each(function(){\n var rand = Math.random()*150;\n d3.select(this)\n .transition().duration(1000)\n .attr(\"x1\", () => 400-rand)\n .attr(\"x2\", () => 400+rand)\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"// this code block checks the time to see if it hits an interval, \n// and then calls the stringLength() function to change the strings at that time interval.\n// this doesn't return anything (undefined) but runs on every tick of time, because time is referenced here.\n\n{\n if ((time + 45) % 45 === 0) {stringLength();}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"// this cell simply calls the turn(function), but since turn() is dependent on time (references time)\n// it will run again on every tick of time, which is constantly moving, so turn() keeps running.\n\nturn()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"