2a:null 2b:["$","title",null,{"children":"Rolling Polygons Mandalas | David Maynard | Observable"}] 30:T1571,function draw(context, time) { // This is an immediate mode draw routine. // The entire canvas is redrawn every frame, even when paused. var canvas_size = width; var canvas_centre = [canvas_size / 2, canvas_size / 2]; var outer_radius = canvas_size / 2 - 10; if (star_density < 1 || star_vertices <= star_density) { // Bad parameters. // animation_state = 3; return; } var circumference_multiple = star_density / star_vertices; var radius = outer_radius * circumference_multiple; var inner_velocity = 1.0 / circumference_multiple - 1; var loops = star_density; var repeats = star_vertices - star_density; var dot_radius = 5; var star_gcd = gcd(star_vertices, star_density); // Draw background. var background_ctx = context; function draw_background() { var ctx = background_ctx; ctx.clearRect(0, 0, canvas_size, canvas_size); // Outer circle. if (showItems.includes("Circles")) { ctx.strokeStyle = "black"; ctx.beginPath(); ctx.arc(canvas_centre[0], canvas_centre[1], outer_radius, 0, 2 * Math.PI); ctx.stroke(); } // Trace star. if (showItems.includes("Paths")) { ctx.strokeStyle = "black"; var steps = 1000; for (var i = 0; i < star_vertices; i++) { var start_angle = ((2 * Math.PI) / star_vertices) * i; ctx.beginPath(); ctx.moveTo( canvas_centre[0] + Math.cos(start_angle) * (outer_radius - (1 - offset) * radius), canvas_centre[1] - Math.sin(start_angle) * (outer_radius - (1 - offset) * radius) ); for (var j = 0; j < steps; j++) { var angle = start_angle + ((2 * circumference_multiple * Math.PI) / steps) * j; var inner_angle = start_angle - ((2 * circumference_multiple * Math.PI) / steps) * j * inner_velocity; var inner_centre = [ canvas_centre[0] + Math.cos(angle) * (outer_radius - radius), canvas_centre[1] - Math.sin(angle) * (outer_radius - radius) ]; ctx.lineTo( inner_centre[0] + offset * radius * Math.cos(inner_angle), inner_centre[1] - offset * radius * Math.sin(inner_angle) ); } ctx.stroke(); } } } draw_background(); var animation_ctx = context; var animate = function () { var progress = (((time - start) / 1000) * rotspeed) % loops; var ctx = animation_ctx; // ctx.clearRect(0, 0, canvas_size, canvas_size); var circle_centres = []; var circle_points = []; // Calculate all circle centre and point locations. for (var i = 0; i < repeats; i++) { var angle = (progress + i / repeats) * 2 * Math.PI; var centre = [ canvas_centre[0] + Math.cos(angle) * (outer_radius - radius), canvas_centre[1] - Math.sin(angle) * (outer_radius - radius) ]; circle_centres.push(centre); var points = []; var inner_angle = -progress * 2 * Math.PI * inner_velocity; for (var j = 0; j < loops; j++) { var point = [ centre[0] + Math.cos(inner_angle + (j * 2 * Math.PI) / loops) * offset * radius, centre[1] - Math.sin(inner_angle + (j * 2 * Math.PI) / loops) * offset * radius ]; points.push(point); } circle_points.push(points); } // Draw circles if (showItems.includes("Circles")) { ctx.strokeStyle = "black"; for (var i = 0; i < repeats; i++) { ctx.beginPath(); ctx.arc( circle_centres[i][0], circle_centres[i][1], radius, 0, 2 * Math.PI ); ctx.stroke(); } } // Draw intra-circle polygons. if (showItems.includes("Intra-circle polygons")) { ctx.strokeStyle = "green"; ctx.fillStyle = showItems.includes("Rainbow") ? animatedColor(intraRanges, intraPeriods, now - start) : intraCirclePolygonsColor; for (var i = 0; i < repeats; i++) { ctx.beginPath(); ctx.moveTo(circle_points[i][0][0], circle_points[i][0][1]); for (var j = 1; j < loops; j++) { ctx.lineTo(circle_points[i][j][0], circle_points[i][j][1]); } ctx.closePath(); ctx.stroke(); if (showItems.includes("Fill")) ctx.fill(); } } // Draw inter-circle polygons. if (showItems.includes("Inter-circle polygons")) { ctx.strokeStyle = "blue"; ctx.fillStyle = showItems.includes("Rainbow") ? animatedColor(interRanges, interPeriods, now - start) : interCirclePolygonsColor; for (var j = 0; j < loops; j++) { ctx.beginPath(); ctx.moveTo(circle_points[0][j][0], circle_points[0][j][1]); for (var i = 1; i < repeats; i++) { ctx.lineTo(circle_points[i][j][0], circle_points[i][j][1]); } ctx.closePath(); ctx.stroke(); if (showItems.includes("Fill")) ctx.fill(); } } // Draw points. if (showItems.includes("Points")) { ctx.fillStyle = "#000000FF"; for (var i = 0; i < repeats; i++) { for (var j = 0; j < loops; j++) { ctx.beginPath(); ctx.arc( circle_points[i][j][0], circle_points[i][j][1], dot_radius, 0, 2 * Math.PI ); ctx.fill(); } } } }; animate(); }31:[] 2e:{"id":"e0f6cfa7ba2aa7f6","slug":"rolling-polygons-mandalas","title":"Rolling Polygons Mandalas","thumbnail":"637dd8d1590b24aa5d392c9a8cd5b8fdc17f064444d79a5ae2480ecc4e3936fd","access_level":"public","create_time":"$D2022-04-30T18:56:04.215Z","update_time":"$D2023-03-11T00:58:24.915Z","view_time":null,"first_public_time":"$D2022-05-09T04:47:49.177Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"29442b4fb673a40c","login":"dmaynard","name":"David Maynard","avatar_url":"https://avatars-next.observableusercontent.com/111ae8322648fc37f32c402fda3d5151ec20b9b5123d7c61fee07db2c379f603","tier":"starter_2024"},"version":751,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"daed610a453dce9c","login":"dmaynard","name":"David Maynard","avatar_url":"https://avatars-next.observableusercontent.com/111ae8322648fc37f32c402fda3d5151ec20b9b5123d7c61fee07db2c379f603","tier":null}],"members":[{"type":"individual","id":"daed610a453dce9c","login":"dmaynard","name":"David Maynard","avatar_url":"https://avatars-next.observableusercontent.com/111ae8322648fc37f32c402fda3d5151ec20b9b5123d7c61fee07db2c379f603","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Rolling Polygons Mandalas","cells":[{"id":0,"value":"# Rolling Polygons Mandalas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":121,"value":"viewof star_vertices = Inputs.range([0, 100], {\n step: 1,\n value: 7,\n label: \"Vertices\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":128,"value":"viewof star_density = Inputs.range([0, 100], {\n step: 1,\n value: 3,\n label: \"Star Density\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":145,"value":"viewof offset = Inputs.range([0, 1], {\n step: 0.01,\n value: 1.0,\n label: \"Shape\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":309,"value":"viewof rotspeed = Inputs.range([0, 1], {\n step: 0.01,\n value: 0.03,\n label: \"Speed\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":228,"value":"viewof showItems = Inputs.checkbox(\n [\n \"Circles\",\n \"Paths\",\n \"Intra-circle polygons\",\n \"Inter-circle polygons\",\n \"Points\",\n \"Fill\",\n \"Rainbow\",\n \"Freeze\"\n ],\n {\n label: \"Show\",\n value: [\n \"Circles\",\n \"Intra-circle polygons\",\n \"Inter-circle polygons\",\n \"Fill\",\n \"Rainbow\"\n ]\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"{\n const context = DOM.context2d(width, width);\n while (true) {\n var timeDrawStart = now;\n var interval = timeDrawStart - lastNow;\n mutable lastNow = showItems.includes(\"Freeze\") ? lastNow : timeDrawStart;\n mutable frameCount = frameCount + 1;\n draw(context, lastNow);\n let timeDrawEnd = Date.now();\n let index = frameCount % frameTimes.length;\n mutable frameTimes[index] = timeDrawEnd - timeDrawStart;\n mutable frameIntervals[index] = interval;\n updateDrawTime(frameTimes);\n updateIntervalTimes(frameIntervals);\n updateFramesPerSec(frameCount, timeDrawEnd - start);\n // console.log(\"tindex: \" + index + \" \" + timeDrawEnd - timeDrawStart);\n yield context.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":678,"value":"viewof drawTime = Inputs.range([0, 100], {\n step: 1,\n value: 50,\n label: \"Draw Time per frame in ms\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":711,"value":"viewof framesPerSecond = Inputs.range([0, 500], {\n step: 1,\n value: 50,\n label: \"Average Frames Per Second\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":730,"value":"viewof aveFrameInterval = Inputs.range([0, 500], {\n step: 1,\n value: 50,\n label: \"Average ms between updates\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":292,"value":"All of these Mandalas are created by rolling smaller circles around the inside a larger circle and connecteing points within each of the smaller circles, and related points across smaller circles. The Star density must be less that the number of vertices. The number of smaller circles is (Vertices - Star Density). In each smaller circle there will be a polygon with Star Density sides. The intra-circle polygons have (Vertices - Star Density) sides. There are sliders to slide, and checkboxes to check. Experiment. Have fun. Relax. Enjoy.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":611,"value":"#### Credits","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":250,"value":"The original, and brilliant, animation code by Kieran Clancy, is here. Adapted for Observable and addition of color animations by David Maynard
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":253,"value":"Inspired by this video by Mathologer (Burkard Polster). Follow him on YouTube. He is brilliant.
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":256,"value":"This work is licensed under a Creative Commons Attribution 4.0 International License.\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":529,"value":"##### Notes on the Rainbow color animations for the curious, for the artists and for the geeks.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":507,"value":"You can adjust the transparency of the polygons here:\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":513,"value":"viewof transparency = Inputs.range([0, 100], {\n step: 1,\n value: 50,\n label: \"Transparency %\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":536,"value":"The controls below allow you to have fine control over the sequesnces of colors for the polygons in \"Rainbow\" mode. You can play with them and maybe find something you like better than the defaults. The color animations for the intra-circle polygons and the inter-circle polygons are completely separate. The red, green and blue components of each color are controlled separately. For each component, (Red, Green, Blue), you pick an minimum % value, and a maximum % value. Each component then follows a sine wave between the min and max values. You can control the period of the sine wave separately for each component of (Red, Green, Blue). Making the periods relatively prime will increase the variety of colors generated.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":549,"value":"##### Controls for intra-circle polygons color animation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":538,"value":"viewof redAnimIntra = Inputs.form([\n Inputs.range([0, 100], { step: 1, label: \"Red Min % \", value: 0 }),\n Inputs.range([0, 100], { step: 1, label: \"Red Max %\", value: 100 }),\n Inputs.range([1, 30], {\n step: 1,\n label: \"Period for Red Oscillations Sec\",\n value: 9\n })\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":546,"value":"viewof greenAnimIntra = Inputs.form([\n Inputs.range([0, 100], { step: 1, label: \"Green Min % \", value: 0 }),\n Inputs.range([0, 100], { step: 1, label: \"Green Max %\", value: 100 }),\n Inputs.range([1, 30], {\n step: 1,\n label: \"Period for Green Oscillations Sec\",\n value: 11\n })\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":548,"value":"viewof blueAnimIntra = Inputs.form([\n Inputs.range([0, 100], { step: 1, label: \"Blue Min % \", value: 0 }),\n Inputs.range([0, 100], { step: 1, label: \"Blue Max %\", value: 100 }),\n Inputs.range([1, 30], {\n step: 1,\n label: \"Period for Blue Oscillations (Sec)\",\n value: 13\n })\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":594,"value":"##### Controls for inter-circle polygons color animation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":597,"value":"viewof redAnimInter = Inputs.form([\n Inputs.range([0, 100], { step: 1, label: \"Red Min % \", value: 0 }),\n Inputs.range([0, 100], { step: 1, label: \"Red Max %\", value: 100 }),\n Inputs.range([1, 30], {\n step: 1,\n label: \"Period for Red Oscillations Sec\",\n value: 13\n })\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":599,"value":"viewof greenAnimInter = Inputs.form([\n Inputs.range([0, 100], { step: 1, label: \"Green Min % \", value: 0 }),\n Inputs.range([0, 100], { step: 1, label: \"Green Max %\", value: 100 }),\n Inputs.range([1, 30], {\n step: 1,\n label: \"Period for Green Oscillations Sec\",\n value: 11\n })\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":601,"value":"viewof blueAnimInter = Inputs.form([\n Inputs.range([0, 100], { step: 1, label: \"Blue Min % \", value: 0 }),\n Inputs.range([0, 100], { step: 1, label: \"Blue Max %\", value: 100 }),\n Inputs.range([1, 30], {\n step: 1,\n label: \"Period for Blue Oscillations (Sec)\",\n value: 9\n })\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":119,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":705,"value":"function updateFramesPerSec(frames, ms) {\n set(viewof framesPerSecond, frames / (ms / 1000));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":314,"value":"interCirclePolygonsColor = \"#6983a280\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":318,"value":"intraCirclePolygonsColor = \"#dfdf0080\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":347,"value":"interPeriods = [\n redAnimInter[2] * 1000,\n greenAnimInter[2] * 1000,\n blueAnimInter[2] * 1000\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":364,"value":"intraPeriods = [\n redAnimIntra[2] * 1000,\n greenAnimIntra[2] * 1000,\n blueAnimIntra[2] * 1000\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":350,"value":"interRanges = [\n [\n Math.max(0, (Math.min(redAnimInter[0], redAnimInter[1]) / 100) * 256),\n Math.min(255, (Math.max(redAnimInter[0], redAnimInter[1]) / 100) * 256)\n ],\n [\n Math.max(0, (Math.min(greenAnimInter[0], greenAnimInter[1]) / 100) * 256),\n Math.min(255, (Math.max(greenAnimInter[0], greenAnimInter[1]) / 100) * 256)\n ],\n [\n Math.max(0, (Math.min(blueAnimInter[0], blueAnimInter[1]) / 100) * 256),\n Math.min(255, (Math.max(blueAnimInter[0], blueAnimInter[1]) / 100) * 256)\n ]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":358,"value":"intraRanges = [\n [\n Math.max(0, (Math.min(redAnimIntra[0], redAnimIntra[1]) / 100) * 256),\n Math.min(255, (Math.max(redAnimIntra[0], redAnimIntra[1]) / 100) * 256)\n ],\n [\n Math.max(0, (Math.min(greenAnimIntra[0], greenAnimIntra[1]) / 100) * 256),\n Math.min(255, (Math.max(greenAnimIntra[0], greenAnimIntra[1]) / 100) * 256)\n ],\n [\n Math.max(0, (Math.min(blueAnimIntra[0], blueAnimIntra[1]) / 100) * 256),\n Math.min(255, (Math.max(blueAnimIntra[0], blueAnimIntra[1]) / 100) * 256)\n ]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":333,"value":"function animatedColor(ranges, periods, t) {\n if (!showItems.includes(\"Rainbow\")) {\n return intraCirclePolygonsColor;\n }\n var redNow = d3.interpolateNumber(ranges[0][0], ranges[0][1]);\n var rsin = ((t % periods[0]) * 2 * Math.PI) / periods[0];\n var greenNow = d3.interpolateNumber(ranges[1][0], ranges[1][1]);\n var gsin = ((t % periods[1]) * 2 * Math.PI) / periods[1];\n var blueNow = d3.interpolateNumber(ranges[2][0], ranges[2][1]);\n var bsin = ((t % periods[2]) * 2 * Math.PI) / periods[2];\n\n return (\n \"rgba(\" +\n redNow((Math.sin(rsin) + 1) / 2) +\n \",\" +\n greenNow((Math.sin(gsin) + 1) / 2) +\n \",\" +\n blueNow((Math.sin(bsin) + 1) / 2) +\n \",\" +\n (1.0 - transparency / 100) +\n \")\"\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":342,"value":"mutable lastNow = start","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":662,"value":"mutable frameCount = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":664,"value":"mutable frameTimes = [\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":732,"value":"mutable frameIntervals = [\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0,\n 0\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":676,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":680,"value":"function updateDrawTime(timesArray) {\n let total = 0;\n let sum = timesArray.reduce((a, b) => a + b, total);\n set(viewof drawTime, sum / timesArray.length);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":735,"value":"function updateIntervalTimes(timesArray) {\n let total = 0;\n let sum = timesArray.reduce((a, b) => a + b, total);\n set(viewof aveFrameInterval, sum / timesArray.length);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":137,"value":"function gcd(a, b) {\n if (b == 0) {\n return a;\n }\n return gcd(b, a % b);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":134,"value":"start = Date.now()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"