31:T438, 32:[] 2f:{"title":"Baroque.me","cells":[{"id":0,"value":"# Baroque.me","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":7,"value":"$31","pinned":true,"hidden":false,"mode":"html"},{"id":132,"value":"md`Now we setup functions and values to animate and move it`\n","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"}],"files":"$W32","stdlib":"1","titling":"auto"}